auto refresh UI on setting change

prevostc · Jan 22, 2015 · 8d5fb21 · 8d5fb21
1 parent 93bd792
commit 8d5fb21
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/www/js/catan/js/ui.js b/www/js/catan/js/ui.js
@@ -3,6 +3,7 @@
     "use strict";
 
     var textures = {};
+    var renderer, stage, canvasContainer;
 
     Catan.UI = {
         // if set to true, displays the coordinates system
@@ -13,25 +14,30 @@
     Catan.UI.LowDefinition = {};
 
     Catan.UI.HighDefinition.init = function(canvasContainerSelector, width, height) {
-        var canvasContainer = document.querySelector(canvasContainerSelector);
+        if (renderer) {
+            canvasContainer.appendChild(renderer.view);
+            renderer.render(stage);
+            return renderer;
+        }
+
+        canvasContainer = document.querySelector(canvasContainerSelector);
 
         // You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer or PIXI.autoDetectRenderer
-        var renderer = new PIXI.CanvasRenderer(width, height);
+        renderer = new PIXI.CanvasRenderer(width, height);
         canvasContainer.appendChild(renderer.view);
-        var stage = new PIXI.Stage(0xFFFFFF);
-        renderer.render(stage);
 
-        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");
-        }
+        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");
+
+        stage = new PIXI.Stage(0xFFFFFF);
+        renderer.render(stage);
 
         return renderer;
     };

diff --git a/www/js/controllers.js b/www/js/controllers.js
@@ -13,31 +13,42 @@
 
             $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);
+
+                if ($scope.uiDefinition === 'low') {
+                    // @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());
+
+                if ($scope.map) {
+                    draw();
+                }
             });
 
             $scope.generate = function () {
-                var map = Catan.Generator.Map.generate(Settings.getTileTrioScoreLimit(), Settings.getHarborGenerationStrategy());
+                $scope.map = Catan.Generator.Map.generate(Settings.getTileTrioScoreLimit(), Settings.getHarborGenerationStrategy());
+                draw();
+            };
 
+            var draw = function() {
+                var canvas = document.querySelector('.canvas');
                 if ($scope.uiDefinition !== 'low') {
-                    Catan.UI.HighDefinition.draw(highDefUi, map, width(), height());
+                    canvas.height = 0;
+                    Catan.UI.HighDefinition.draw(highDefUi, $scope.map, width(), height());
                 } else {
-                    var canvas = document.querySelector('.canvas');
                     canvas.width = width();
                     canvas.height = height();
-                    Catan.UI.LowDefinition.drawMap(map, canvas);
+                    Catan.UI.LowDefinition.drawMap($scope.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);
+                    Catan.UI.LowDefinition.drawMap($scope.map, canvas);
                 }
             };
         })

diff --git a/www/templates/tab-map.html b/www/templates/tab-map.html
@@ -1,7 +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>
+            <canvas class="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
         </div>
     </ion-content>
     <ion-footer-bar>