Added HUD with controller diagram and score

7 files changed, 340 insertions, 31 deletions

diff --git a/assets/images/controller-diagram.svg b/assets/images/controller-diagram.svg
new file mode 100644
index 0000000..902bf05
--- /dev/null
+++ b/assets/images/controller-diagram.svg
@@ -0,0 +1,195 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="500"
+   id="svg3755"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="controller-diagram.svg">
+  <defs
+     id="defs3757" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="456.42943"
+     inkscape:cy="223.51212"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3760">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-552.36218)">
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:8.85915756;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 252.43724,645.77913 c -9.29886,-33.1331 -35.62469,-59.05725 -68.96865,-67.84403 l 0,67.84403 68.96865,0 z"
+       id="path4330"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:8.85915756;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 183.46859,766.37335 c 34.00836,-8.96183 60.68198,-35.76477 69.46865,-69.84401 l -69.46865,0 0,69.84401 z"
+       id="path4328"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:8.85915756;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 64.250001,696.52934 c 8.700836,33.74635 34.934096,60.37438 68.468649,69.59401 l 0,-69.59401 -68.468649,0 z"
+       id="path4326"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:8.85915756;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 132.71865,578.1851 C 99.845705,587.22287 73.956226,612.97614 64.75,645.77913 l 67.96865,0 0,-67.59403 z"
+       id="path4324"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:8.85915756;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 132.71865,578.1851 0,67.59403 -67.96865,0 c -2.357748,8.40094 -3.687495,17.22086 -3.687495,26.3751 0,8.43485 1.174803,16.56883 3.187496,24.37511 l 68.468649,0 0,69.59401 c 8.2535,2.26915 16.90065,3.59378 25.87498,3.59378 8.61464,0 16.91883,-1.24717 24.87496,-3.34378 l 0,-69.84401 69.46865,0 c 2.0127,-7.80628 3.18749,-15.94026 3.18749,-24.37511 0,-9.15424 -1.32974,-17.97416 -3.68749,-26.3751 l -68.96865,0 0,-67.84403 c -7.95613,-2.09659 -16.26032,-3.31252 -24.87496,-3.31252 -8.97433,0 -17.62148,1.29339 -25.87498,3.56252 z"
+       id="path3773"
+       inkscape:connector-curvature="0" />
+    <text
+       xml:space="preserve"
+       style="font-size:72.00009918px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="54.172028"
+       y="949.90845"
+       id="text4283"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4285"
+         x="54.172028"
+         y="949.90845">Move</tspan></text>
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path3773-7"
+       sodipodi:cx="241.42645"
+       sodipodi:cy="207.05576"
+       sodipodi:rx="110.10663"
+       sodipodi:ry="110.10663"
+       d="m 351.53308,207.05576 a 110.10663,110.10663 0 1 1 -220.21326,0 110.10663,110.10663 0 1 1 220.21326,0 z"
+       transform="matrix(0.88591343,0,0,0.88591818,412.69996,488.73764)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4339"
+       sodipodi:cx="277.28687"
+       sodipodi:cy="342.92126"
+       sodipodi:rx="52.022858"
+       sodipodi:ry="52.022858"
+       d="m 329.30972,342.92126 a 52.022858,52.022858 0 1 1 -104.04571,0 52.022858,52.022858 0 1 1 104.04571,0 z"
+       transform="matrix(0.99999926,0,0,1.0000026,32.706036,489.34736)" />
+    <path
+       transform="matrix(0.99999926,0,0,1.0000026,199.42482,489.3469)"
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4339-4"
+       sodipodi:cx="277.28687"
+       sodipodi:cy="342.92126"
+       sodipodi:rx="52.022858"
+       sodipodi:ry="52.022858"
+       d="m 329.30972,342.92126 a 52.022858,52.022858 0 1 1 -104.04571,0 52.022858,52.022858 0 1 1 104.04571,0 z" />
+    <path
+       style="fill:none;stroke:#0000ff;stroke-width:5.0000062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 157.58368,676.20081 128.57134,893.59263"
+       id="path4359"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#0000ff;stroke-width:5.0000062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 179.28557,892.87835 302.85681,834.30668"
+       id="path4361"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4363"
+       sodipodi:cx="621.07141"
+       sodipodi:cy="106.07143"
+       sodipodi:rx="22.5"
+       sodipodi:ry="22.5"
+       d="m 643.57141,106.07143 a 22.5,22.5 0 1 1 -45,0 22.5,22.5 0 1 1 45,0 z"
+       transform="matrix(0.99999926,0,0,1.0000026,6.4286503,511.44823)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4363-0"
+       sodipodi:cx="621.07141"
+       sodipodi:cy="106.07143"
+       sodipodi:rx="22.5"
+       sodipodi:ry="22.5"
+       d="m 643.57141,106.07143 a 22.5,22.5 0 1 1 -45,0 22.5,22.5 0 1 1 45,0 z"
+       transform="matrix(0.99999926,0,0,1.0000026,8.2143807,620.37726)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4363-9"
+       sodipodi:cx="621.07141"
+       sodipodi:cy="106.07143"
+       sodipodi:rx="22.5"
+       sodipodi:ry="22.5"
+       d="m 643.57141,106.07143 a 22.5,22.5 0 1 1 -45,0 22.5,22.5 0 1 1 45,0 z"
+       transform="matrix(0.99999926,0,0,1.0000026,-53.214109,566.09132)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#000000;fill-opacity:0;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path4363-4"
+       sodipodi:cx="621.07141"
+       sodipodi:cy="106.07143"
+       sodipodi:rx="22.5"
+       sodipodi:ry="22.5"
+       d="m 643.57141,106.07143 a 22.5,22.5 0 1 1 -45,0 22.5,22.5 0 1 1 45,0 z"
+       transform="matrix(0.99999926,0,0,1.0000026,61.785735,566.09131)" />
+    <text
+       xml:space="preserve"
+       style="font-size:72.00009918px;font-style:normal;font-weight:bold;line-height:85.00000238%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="522.55371"
+       y="956.95795"
+       id="text4283-8"
+       sodipodi:linespacing="85.000002%"><tspan
+         sodipodi:role="line"
+         id="tspan4285-8"
+         x="522.55371"
+         y="956.95795">Drop</tspan><tspan
+         sodipodi:role="line"
+         x="522.55371"
+         y="1018.158"
+         id="tspan4438">poison</tspan></text>
+    <path
+       style="fill:none;stroke:#0000ff;stroke-width:5.0000062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="M 628.07686,725.61077 656.92157,898.7167"
+       id="path4359-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/assets/images/hud-bg.svg b/assets/images/hud-bg.svg
new file mode 100644
index 0000000..848e15c
--- /dev/null
+++ b/assets/images/hud-bg.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="400"
+   height="1100"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="hud-bg.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="188.15199"
+     inkscape:cy="919.42921"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,47.637817)">
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#0000ff;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="rect2985"
+       width="390"
+       height="1090"
+       x="5"
+       y="-42.637817" />
+  </g>
+</svg>
diff --git a/config.json b/config.json
index 0ac8700..51a4efa 100644
--- a/config.json
+++ b/config.json
@@ -1,5 +1,5 @@
 {
   "projectName": "Interactive Pacbot",
-  "gameWidth": "1100",
-  "gameHeight": "950"
+  "gameWidth": "1750",
+  "gameHeight": "1100"
 }
\ No newline at end of file
diff --git a/game/main.js b/game/main.js
index a44c949..e67845c 100644
--- a/game/main.js
+++ b/game/main.js
@@ -2,7 +2,7 @@
 
 //global variables
 window.onload = function () {
-  var game = new Phaser.Game(1100, 950, Phaser.AUTO, 'interactive-pacbot');
+  var game = new Phaser.Game(1750, 1100, Phaser.AUTO, 'interactive-pacbot');
 
   var Orientation = require('./plugins/orientation');
   game.orientation = new Orientation();
diff --git a/game/prefabs/hud.js b/game/prefabs/hud.js
new file mode 100644
index 0000000..13f8f51
--- /dev/null
+++ b/game/prefabs/hud.js
@@ -0,0 +1,48 @@
+'use strict';
+
+var Hud = function(game, player, x, y, scorefontKey) {
+    Phaser.Group.call(this, game);
+    this.x = x;
+    this.y = y;
+    this.player = player;
+    this.scale = {x: 0.02, y: 0.02};
+
+
+    this.background = new Phaser.Sprite(this.game, 0, 0, 'hud-bg');
+    this.add(this.background);
+    this.scoreText = new Phaser.BitmapText(this.game, 172, 10, scorefontKey, '0', 100);
+    this.add(this.scoreText);
+
+    this.poisonIndicator = new Phaser.Sprite(this.game, 200, 150, 'poison-pill');
+    //this.poisonIndicator.scale = {0.1, 0.1};
+    this.poisonIndicator.anchor = {x:0.5, y:0.5};
+    this.add(this.poisonIndicator);
+
+    this.controllerDiagram = new Phaser.Sprite(this.game, 0, 300, 'controller-diagram');
+    this.controllerDiagram.scale = {x: 0.5, y: 0.5};
+    this.add(this.controllerDiagram);
+
+    this.sendToBack(this.background);
+
+    this.currentScore = 0;
+};
+
+Hud.prototype = Object.create(Phaser.Group.prototype);
+Hud.prototype.constructor = Hud;
+
+Hud.prototype.update = function() {
+    if (this.currentScore !== this.player.score) {
+        this.currentScore = this.player.score;
+        this.scoreText.setText(this.player.score+'');
+
+        var numberOfDigits = Math.floor(Math.log(this.currentScore)/Math.log(10))+1;
+        this.scoreText.x = 200 - numberOfDigits*30;
+    }
+
+    if (this.poisonIndicator && !this.player.hasPoisonPill) {
+        this.poisonIndicator.destroy();
+        this.poisonIndicator = null;
+    }
+};
+
+module.exports = Hud;
diff --git a/game/states/play.js b/game/states/play.js
index 26242b3..cf4bf62 100644
--- a/game/states/play.js
+++ b/game/states/play.js
@@ -5,6 +5,7 @@ var Pill = require('../prefabs/pill');
 var BonusPill = require('../prefabs/bonusPill');
 var Wall = require('../prefabs/wall');
 var PoisonPill = require('../prefabs/poisonPill');
+var Hud = require('../prefabs/hud');
 
 function Play() {}
 
@@ -15,15 +16,18 @@ Play.prototype = {
     this.readLevelFile();
 
     this.world.scale = {x:50, y:50};
-    this.world.bounds = {x: -25, y:-25, width: this.game.width, height: this.game.height};
+    this.world.bounds = {x: -425, y:-25, width: this.game.width, height: this.game.height};
     this.world.camera.setBoundsToWorld();
 
     this.setupPlayerControls();
 
-    this.playerAScoreText = this.game.add.bitmapText(-0.1, -0.4, 'spaced-scorefont-a','0',2);
-    this.playerBScoreText = this.game.add.bitmapText(this.world.width/this.world.scale.x - 4.5, -0.4, 'spaced-scorefont-b','0',2);
-
     this.gameWon = false;
+
+    this.hudA = new Hud(this.game, this.playerA, this.gameWidth-0.5, -0.5, 'spaced-scorefont-a');
+    this.hudB = new Hud(this.game, this.playerB, -8.5, -0.5, 'spaced-scorefont-b');
+    //this.game.add.existing(this.hudA);
+    //this.game.add.existing(this.hudB);
+
   },
   update: function() {
     this.checkForPlayerPillCollisions();
@@ -170,9 +174,9 @@ Play.prototype = {
     var levelText = this.game.cache.getText('level');
     var splitRows = levelText.split('\n');
 
-    for (var x=0; x<splitRows.length; x++) {
-      for (var y=0; y<splitRows[x].length; y++) {
-        switch(splitRows[x][y]) {
+    for (var y=0; y<splitRows.length; y++) {
+      for (var x=0; x<splitRows[y].length; x++) {
+        switch(splitRows[y][x]) {
           case '#':
             this.walls.add(new Wall(this.game, x, y));
             break;
@@ -220,7 +224,7 @@ Play.prototype = {
     this.respawnX = Math.ceil(this.gameWidth/2)-1;
     this.respawnY = Math.ceil(this.gameHeight/2)-1;
 
-    this.updatePlayerTurn(0);
+    this.playerB.isMyTurn = true;
   },
 
   setupPlayerControls: function() {
@@ -255,18 +259,10 @@ Play.prototype = {
 
     this.game.input.gamepad.start();
 
-    this.game.orientation.onLeft.add(function() {
-      this.movePlayer(this.players.children[this.playerTurn], -1, 0);
-    }, this);
-    this.game.orientation.onRight.add(function() {
-      this.movePlayer(this.players.children[this.playerTurn], 1, 0);
-    }, this);
-    this.game.orientation.onUp.add(function() {
-      this.movePlayer(this.players.children[this.playerTurn], 0, -1);
-    }, this);
-    this.game.orientation.onDown.add(function() {
-      this.movePlayer(this.players.children[this.playerTurn], 0, 1);
-    }, this);
+    this.game.orientation.onLeft.add(this.moveActivePlayer.bind(this, -1, 0), this);
+    this.game.orientation.onRight.add(this.moveActivePlayer.bind(this, 1, 0), this);
+    this.game.orientation.onUp.add(this.moveActivePlayer.bind(this, 0, -1), this);
+    this.game.orientation.onDown.add(this.moveActivePlayer.bind(this, 0, 1), this);
 
     this.game.input.keyboard.addKey(this.playerBControls.poison).onDown.add(this.togglePoisonPill.bind(this, this.playerB), this);
     this.game.input.keyboard.addKey(this.playerAControls.poison).onDown.add(this.togglePoisonPill.bind(this, this.playerA), this);
@@ -280,6 +276,16 @@ Play.prototype = {
       player.poisonPillActive = !player.poisonPillActive;
     }
   },
+  moveActivePlayer: function(deltaX, deltaY) {
+    var activePlayer = null;
+    for (var i=0; i<this.players.children.length; ++i) {
+      if (this.players.children[i].isMyTurn) {
+        activePlayer = this.players.children[i];
+      }
+    }
+
+    movePlayer(activePlayer, deltaX, deltaY);
+  },
   movePlayer: function(player, deltaX, deltaY) {
     var newX = player.x + deltaX;
     var newY = player.y + deltaY;
@@ -357,9 +363,6 @@ Play.prototype = {
     player.score += pill.score;
     pill.destroy();
     player.scoreSound.play();
-
-    this.playerAScoreText.setText(this.playerA.score+'');
-    this.playerBScoreText.setText(this.playerB.score+'');
   },
   playerPoisonPillCollision: function(player, poisonPill) {
     if (player.lastTween) {
@@ -385,14 +388,11 @@ Play.prototype = {
     eatenPlayer.respawnSound.play();
   },
   togglePlayerTurn: function() {
-    this.updatePlayerTurn((this.playerTurn+1)%this.players.length);
-  },
-  updatePlayerTurn: function(newPlayerTurn) {
-    this.playerTurn = newPlayerTurn;
     for (var i=0; i<this.players.children.length; ++i) {
-      this.players.children[i].isMyTurn = (i === this.playerTurn);
+      this.players.children[i].isMyTurn = !this.players.children[i].isMyTurn;
       this.players.children[i].canBeEaten = true;
     }
+    this.players.sort('isMyTurn');
   },
   setVictoryText: function(newText, winnerLetter) {
     this.victoryText = this.game.add.bitmapText(this.world.width/2/this.world.scale.x, 2, 'scorefont-'+winnerLetter, newText, 2);
diff --git a/game/states/preload.js b/game/states/preload.js
index 951c83c..f47b62d 100644
--- a/game/states/preload.js
+++ b/game/states/preload.js
@@ -30,6 +30,9 @@ Preload.prototype = {
     this.load.audio('owSound', 'assets/audio/ow.ogg', true);
 
     this.load.text('level', 'assets/levels/maze.lvl');
+
+    this.load.image('hud-bg', 'assets/images/hud-bg.svg');
+    this.load.image('controller-diagram', 'assets/images/controller-diagram.svg');
   },
   create: function() {
     this.asset.cropEnabled = false;