Clip unused empty space in set setup #24

Remove an ancient hack and use relative unit positioning.

src/tactics/Board.js

@@ -564,11 +564,11 @@ export default class {
   }
 
   // Public methods
-  draw(stage) {
+  draw() {
     let pixi = this.pixi = new PIXI.Container();
+    pixi.position = new PIXI.Point(18, 44);
 
     let sprite = this.sprite = PIXI.Sprite.fromImage('https://tactics.taorankings.com/images/board.png');
-    sprite.position = new PIXI.Point(18, 44);
     pixi.addChild(sprite);
 
     let tilesContainer = new PIXI.Container();
@@ -586,7 +586,6 @@ export default class {
 
       this._emit({ type:'deselect', unit:unit });
     };
-    tilesContainer.position = new PIXI.Point(18, 44);
 
     /*
      * A select event occurs when a unit and/or an action tile is selected.
@@ -666,14 +665,6 @@ export default class {
 
     pixi.addChild(unitsContainer);
 
-    stage.addChild(pixi);
-
-    // Required to place units in the correct places.
-    pixi.updateTransform();
-
-    // Hack to avoid apparent bug where x/y offsets change
-    Object.values(tiles).forEach(tile => { tile.getCenter() });
-
     this.drawShocks();
     this.drawTurnOptions();
 

src/tactics/Game.js

@@ -925,7 +925,8 @@ export default class {
     Tactics.load(unitTypes, percent => {
       this._emit({ type:'progress', percent:percent });
     }).then(() => {
-      this._board.draw(this._stage);
+      this._board.draw();
+      this._stage.addChild(this._board.pixi);
 
       this._emit({ type:'ready' });
     });

src/tactics/SetSetup.js

@@ -1,21 +1,24 @@
 import EventEmitter from 'events';
 
 import Board, {
-  HALF_TILE_WIDTH,
-  HALF_TILE_HEIGHT,
+  TILE_WIDTH,
   TILE_HEIGHT,
   FOCUS_TILE_COLOR,
 } from 'tactics/Board.js';
 
 export default class {
   constructor(team, gameTypeConfig) {
-    let renderer = PIXI.autoDetectRenderer(Tactics.width, Tactics.height, { transparent:true });
+    // Clip unused empty space part #1
+    let width = Tactics.width - TILE_WIDTH*2;
+    let height = Tactics.height - TILE_HEIGHT*1.5;
+    let renderer = PIXI.autoDetectRenderer(width, height, { transparent:true });
 
     // Let's not go crazy with the move events.
     renderer.plugins.interaction.moveWhenInside = true;
 
     let board = new Board();
     board.rotation = 'S';
+    board.draw();
 
     board
       .on('focus', ({ tile, unit }) => {
@@ -98,6 +101,15 @@ export default class {
         this.render();
       });
 
+    let countsContainer = new PIXI.Container();
+    countsContainer.position = board.pixi.position.clone();
+
+    let stage = new PIXI.Container();
+    // Clip unused empty space part #2
+    stage.position.set(width - Tactics.width, height - Tactics.height);
+    stage.addChild(board.pixi);
+    stage.addChild(countsContainer);
+
     Object.assign(this, {
       // Crude tracking of the pointer type being used.  Ideally, this should
       // reflect the last pointer type to fire an event on the board.
@@ -110,8 +122,8 @@ export default class {
       _renderer: renderer,
       _rendering: false,
       _canvas: renderer.view,
-      _stage: new PIXI.Container(),
-      _countsContainer: new PIXI.Container(),
+      _stage: stage,
+      _countsContainer: countsContainer,
       _animators: {},
 
       _board: board,
@@ -121,9 +133,6 @@ export default class {
 
     this._canvas.addEventListener('contextmenu', event => event.preventDefault());
 
-    board.draw(this._stage);
-    this._stage.addChild(this._countsContainer);
-
     let unitTypes = [...gameTypeConfig.limits.units.types.keys()].reverse();
     let positions = this._getPositions();
     this._picksTeam.set = unitTypes.map((ut, i) => ({ type:ut, assignment:positions[i] }));
@@ -137,16 +146,24 @@ export default class {
 
     // Set back the pick units and tiles to give the visible board some space.
     this._picksTeam.units.forEach(unit => {
-      unit.assignment.pixi.position.x -= HALF_TILE_WIDTH / 2;
-      unit.assignment.pixi.position.y -= HALF_TILE_HEIGHT / 2;
-      unit.pixi.position.x -= HALF_TILE_WIDTH / 2;
-      unit.pixi.position.y -= HALF_TILE_HEIGHT / 2;
+      unit.assignment.pixi.position.x -= TILE_WIDTH / 4;
+      unit.assignment.pixi.position.y -= TILE_HEIGHT / 4;
+      unit.pixi.position.x -= TILE_WIDTH / 4;
+      unit.pixi.position.y -= TILE_HEIGHT / 4;
     });
 
     this._drawPicks();
 
     let leftPoint = board.getTile(0, 6).getLeft();
+    leftPoint.set(
+      leftPoint.x + this._stage.position.x + board.pixi.position.x - 1,
+      leftPoint.y + this._stage.position.y + board.pixi.position.y - 1,
+    );
     let rightPoint = board.getTile(10, 6).getTop();
+    rightPoint.set(
+      rightPoint.x + this._stage.position.x + board.pixi.position.x - 1,
+      rightPoint.y + this._stage.position.y + board.pixi.position.y - 1,
+    );
     board.sprite.mask = new PIXI.Graphics();
     board.sprite.mask.lineStyle(1, 0xFFFFFF, 1);
     board.sprite.mask.beginFill(0xFFFFFF, 1);
@@ -534,7 +551,7 @@ export default class {
       let position = unit.assignment.getTop();
       let countBox = new PIXI.Graphics();
       countBox.position = new PIXI.Point(
-        position.x - HALF_TILE_WIDTH/2,
+        position.x - TILE_WIDTH/4,
         position.y - TILE_HEIGHT,
       );
       countBox.lineStyle(1, borderColor, 1);

src/tactics/Tile.js

@@ -6,6 +6,8 @@
 
 import EventEmitter from 'events';
 
+export const TILE_WIDTH        = 88;
+export const TILE_HEIGHT       = 56;
 const points = [
   42,0,  // top-left
   45,0,  // top-right
@@ -76,51 +78,43 @@ export default class {
     return this;
   }
   getTop() {
-    // Warning, this is only accurate if called after pixi transform is updated.
-    var bounds;
-
     if (this.top) return this.top;
 
-    bounds = this.pixi.getBounds();
+    let position = this.pixi.position;
+
     return this.top = new PIXI.Point(
-      Math.floor(bounds.x + bounds.width/2),
-      Math.floor(bounds.y),
+      Math.floor(position.x + TILE_WIDTH/2),
+      Math.floor(position.y),
     );
   }
   getLeft() {
-    // Warning, this is only accurate if called after pixi transform is updated.
-    var bounds;
-
     if (this.left) return this.left;
 
-    bounds = this.pixi.getBounds();
+    let position = this.pixi.position;
+
     return this.left = new PIXI.Point(
-      Math.floor(bounds.x),
-      Math.floor(bounds.y + bounds.height/2),
+      Math.floor(position.x),
+      Math.floor(position.y + TILE_HEIGHT/2),
     );
   }
   getBottom() {
-    // Warning, this is only accurate if called after pixi transform is updated.
-    var bounds;
-
     if (this.bottom) return this.bottom;
 
-    bounds = this.pixi.getBounds();
+    let position = this.pixi.position;
+
     return this.bottom = new PIXI.Point(
-      Math.floor(bounds.x + bounds.width/2),
-      Math.floor(bounds.y + bounds.width),
+      Math.floor(position.x + TILE_WIDTH/2),
+      Math.floor(position.y + TILE_HEIGHT),
     );
   }
   getCenter() {
-    // Warning, this is only accurate if called after pixi transform is updated.
-    var bounds;
-
     if (this.center) return this.center;
 
-    bounds = this.pixi.getBounds();
+    let position = this.pixi.position;
+
     return this.center = new PIXI.Point(
-      Math.floor(bounds.x + bounds.width/2),
-      Math.floor(bounds.y + bounds.height/2),
+      Math.floor(position.x + TILE_WIDTH/2),
+      Math.floor(position.y + TILE_HEIGHT/2),
     );
   }
   dismiss() {