Skip to content

Commit

Permalink
let the user pick ui strategy
Browse files Browse the repository at this point in the history
  • Loading branch information
@prevostc
prevostc committed Jan 22, 2015
1 parent b45261f commit 677389c
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 21 deletions.
184 changes: 173 additions & 11 deletions www/js/catan/js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
debug: false
};

Catan.UI.init = function(canvasContainerSelector, width, height) {
Catan.UI.HighDefinition = {};
Catan.UI.LowDefinition = {};

Catan.UI.HighDefinition.init = function(canvasContainerSelector, width, height) {
var canvasContainer = document.querySelector(canvasContainerSelector);

// You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer or PIXI.autoDetectRenderer
Expand All @@ -18,20 +21,22 @@
var stage = new PIXI.Stage(0xFFFFFF);
renderer.render(stage);

textures[Catan.T.Fields] = PIXI.Texture.fromImage("img/field.png");
textures[Catan.T.Desert] = PIXI.Texture.fromImage("img/desert.png");
textures[Catan.T.Forest] = PIXI.Texture.fromImage("img/forest.png");
textures[Catan.T.Pasture] = PIXI.Texture.fromImage("img/pasture.png");
textures[Catan.T.Hills] = PIXI.Texture.fromImage("img/hills.png");
textures[Catan.T.Mountains] = PIXI.Texture.fromImage("img/mountain.png");
textures[Catan.T.Ocean] = PIXI.Texture.fromImage("img/ocean.png");
textures[Catan.T.Empty] = PIXI.Texture.fromImage("img/empty.png");
textures.token = PIXI.Texture.fromImage("img/number.png");
if (textures[Catan.T.Fields] === undefined) {
textures[Catan.T.Fields] = PIXI.Texture.fromImage("img/field.png");
textures[Catan.T.Desert] = PIXI.Texture.fromImage("img/desert.png");
textures[Catan.T.Forest] = PIXI.Texture.fromImage("img/forest.png");
textures[Catan.T.Pasture] = PIXI.Texture.fromImage("img/pasture.png");
textures[Catan.T.Hills] = PIXI.Texture.fromImage("img/hills.png");
textures[Catan.T.Mountains] = PIXI.Texture.fromImage("img/mountain.png");
textures[Catan.T.Ocean] = PIXI.Texture.fromImage("img/ocean.png");
textures[Catan.T.Empty] = PIXI.Texture.fromImage("img/empty.png");
textures.token = PIXI.Texture.fromImage("img/number.png");
}

return renderer;
};

Catan.UI.draw = function (renderer, map, width, height) {
Catan.UI.HighDefinition.draw = function (renderer, map, width, height) {
renderer.resize(width, height);

var stage = new PIXI.Stage(0xFFFFFF);
Expand Down Expand Up @@ -120,4 +125,161 @@
renderer.render(stage);
};


Catan.UI.LowDefinition.drawMap = function (map, canvas) {
var ctx = canvas.getContext('2d');

// align numbers
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var screenW = canvas.width;
var size = {
width: screenW / 9,
height: screenW / 9 + screenW / 90,
canvasWidth: canvas.width,
canvasHeight: canvas.height
};
var dist = 2;

// reset canvas
//noinspection SillyAssignmentJS
canvas.width = canvas.width;
ctx.clearRect (0, 0, canvas.width, canvas.height);

for (var i = 0; i < map.board.length; i++) {
for (var j = 0; j < map.board[i].length; j++) {
Catan.UI.LowDefinition.drawHexagon(map.get(i, j), ctx, size, dist);
}
}
};

Catan.UI.LowDefinition.drawHexagon = function (hexagon, ctx, size, dist) {

var getColorFromLand = function (land) {
var color;
switch (land) {
case Catan.T.Hills:
color = "rgb(224, 129, 27)";
break;
case Catan.T.Pasture:
color = "rgb(43, 224, 27)";
break;
case Catan.T.Mountains:
color = "rgb(145, 145, 145)";
break;
case Catan.T.Fields:
color = "rgb(229, 255, 0)";
break;
case Catan.T.Forest:
color = "rgb(8, 150, 34)";
break;
case Catan.T.Desert:
color = "rgb(255, 255, 117)";
break;
case Catan.T.Empty:
color = "rgb(255, 255, 255)";
break;
default:
throw "Can't find color for non-coast with this land type: '" + land + "'";
}
return color;
};
var getColorFromCoast = function (land) {
var color;
switch (land) {
case Catan.T.Hills:
color = "rgb(224, 129, 27)";
break;
case Catan.T.Pasture:
color = "rgb(43, 224, 27)";
break;
case Catan.T.Mountains:
color = "rgb(145, 145, 145)";
break;
case Catan.T.Fields:
color = "rgb(229, 255, 0)";
break;
case Catan.T.Forest:
color = "rgb(8, 150, 34)";
break;
case Catan.T.Empty:
color = "rgb(255, 255, 255)";
break;
default:
throw "Can't find color for coast with this land type: '" + land + "'";
}
return color;
};

var width = size.width,
height = size.height,
mapWidth = width * 7,
mapHeight = height * 7 - (1/4 * height * 6),
cx = hexagon.position.column * (width + dist) - ((hexagon.position.line + 1) % 2) * (width + dist) / 2 + width/2 + size.canvasWidth/2 - mapWidth/2,
cy = hexagon.position.line * (3 / 4 * height + dist) + height/2 + size.canvasHeight/2 - mapHeight/2;

ctx.fillStyle = hexagon.isCoast() ? "rgb(69, 91, 217)" : getColorFromLand(hexagon.land);
ctx.beginPath();
ctx.moveTo(cx, cy - height / 2);
ctx.lineTo(cx + width / 2, cy - height / 4);
ctx.lineTo(cx + width / 2, cy + height / 4);
ctx.lineTo(cx, cy + height / 2);
ctx.lineTo(cx - width / 2, cy + height / 4);
ctx.lineTo(cx - width / 2, cy - height / 4);
ctx.lineTo(cx, cy - height / 2);
ctx.fill();

var fillCircle = function (cx, cy, r, c) {
ctx.lineWidth = 2;
ctx.fillStyle = c;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
};

if (hexagon.isHarbor()) {
fillCircle(cx, cy, 11, getColorFromCoast(hexagon.land));
ctx.stroke();
}

if (Catan.UI.debug) {
// draw coordinates
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "8pt Arial";
ctx.fillText("[" + hexagon.position.column + "," + hexagon.position.line + "]", cx - width / 4 + 1, cy - 5);
if (hexagon.number !== undefined) {
ctx.font = "12pt Arial";
ctx.fillText(hexagon.number + "|" + Catan.Tools.tdsc(hexagon.number), cx - width / 4, cy + 10);
}
} else {
// draw coordinates
if (hexagon.number !== undefined) {
//draw a circle
fillCircle(cx, cy, Math.min(width, height) / 3, "rgb(255, 255, 255)");

// write number
var deltaY = 0;
if (Catan.Tools.tdsc(hexagon.number) < 3) {
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "8pt Arial";
deltaY = 5;
} else if (Catan.Tools.tdsc(hexagon.number) < 5) {
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "12pt Arial";
deltaY = 6;
} else {
ctx.fillStyle = "rgb(245, 24, 24)";
ctx.font = "bold 12pt Arial";
deltaY = 6;
}
var txtMetrics = ctx.measureText(hexagon.number);
var txtWidth = txtMetrics.width;
ctx.fillText(hexagon.number, cx - txtWidth / 2, cy + deltaY);
ctx.stroke();
}
}
};


})(Catan, PIXI);
59 changes: 49 additions & 10 deletions www/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,40 @@
angular.module('starter.controllers', [])

.controller('MapCtrl', function ($scope, $ionicPlatform, Settings) {
var ui = Catan.UI.init(
'.canvas-container',
document.querySelector('.canvas-container').offsetWidth,
document.querySelector('.canvas-container').offsetHeight
);
// use function so that css has time to apply
var width = function(){ return document.querySelector('.canvas-container').offsetWidth; };
var height = function(){ return document.querySelector('.canvas-container').offsetHeight; };

var highDefUi;

$scope.$on('$ionicView.enter', function(event, data) {
$scope.uiDefinition = Settings.getUiDefinition();
// @todo: configure pixijs to use an existing canvas
// clean pixijs created canvas
var canvasToRemove = document.querySelectorAll('canvas:not(.canvas)')[0];
if (canvasToRemove) {
canvasToRemove.parentElement.removeChild(canvasToRemove);
}

// @todo: only init hd UI if needed
highDefUi = Catan.UI.HighDefinition.init('.canvas-container', width(), height());
});

$scope.generate = function () {
var map = Catan.Generator.Map.generate(Settings.getTileTrioScoreLimit(), Settings.getHarborGenerationStrategy());
Catan.UI.draw(
ui, map,
document.querySelector('.canvas-container').offsetWidth,
document.querySelector('.canvas-container').offsetHeight
);

if ($scope.uiDefinition !== 'low') {
Catan.UI.HighDefinition.draw(highDefUi, map, width(), height());
} else {
var canvas = document.querySelector('.canvas');
canvas.width = width();
canvas.height = height();
Catan.UI.LowDefinition.drawMap(map, canvas);
// @todo: find another fix.
// Sometimes, the canvas goes full black (on first launch mainly)
// prevent the canvas from remaining black by painting twice
Catan.UI.LowDefinition.drawMap(map, canvas);
}
};
})

Expand Down Expand Up @@ -52,6 +74,23 @@
$scope.updateHarborGenerationStrategy = function () {
Settings.setHarborGenerationStrategy(this.selectedHarborGenerationStrategy.id);
};



$scope.uiDefinitionOptions = [
{id: 'low', label: 'Low Def. (homemade)'},
{id: 'high', label: 'High Def. (PIXI.js powered)'}
];
var selectedUiDefinitionValue = Settings.getUiDefinition();
$scope.selectedUiDefinition = null;
for (i = 0; i < $scope.uiDefinitionOptions.length; i++) {
if ($scope.uiDefinitionOptions[i].id === selectedUiDefinitionValue) {
$scope.selectedUiDefinition = $scope.uiDefinitionOptions[i];
}
}
$scope.updateUiDefinition = function () {
Settings.setUiDefinition(this.selectedUiDefinition.id);
};
});

})(angular, Catan);
7 changes: 7 additions & 0 deletions www/js/services.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@
},
setHarborGenerationStrategy: function (harborGenerationStrategy) {
localStorageService.set('harborGenerationStrategy', harborGenerationStrategy);
},

getUiDefinition: function () {
return localStorageService.get('uiDefinition') || 'high';
},
setUiDefinition: function (uiDefinition) {
localStorageService.set('uiDefinition', uiDefinition);
}
};
});
Expand Down
1 change: 1 addition & 0 deletions www/templates/tab-map.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<ion-view view-title="Map Generator" ng-init="init()">
<ion-content class="padding" scroll="false">
<div class="canvas-container">
<canvas ng-if="uiDefinition == 'low'" class="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
</div>
</ion-content>
<ion-footer-bar>
Expand Down
9 changes: 9 additions & 0 deletions www/templates/tab-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@
ng-options="option as option.label for option in harborGenerationStrategyOptions">
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
User Interface
</div>
<select ng-model="selectedUiDefinition"
ng-change="updateUiDefinition()"
ng-options="option as option.label for option in uiDefinitionOptions">
</select>
</label>
</ion-list>
</ion-content>
</ion-view>

0 comments on commit 677389c

Please sign in to comment.