From 8932998cc4282039152ae8233b5fd5026ed47323 Mon Sep 17 00:00:00 2001
From: Justin Worthe <justin.worthe@gmail.com>
Date: Mon, 8 Sep 2014 14:45:23 +0200
Subject: Added keyboard controls to HUD

---
 assets/images/bonus-pill.svg           |  12 +--
 assets/images/controller-diagram.svg   |  51 +++++----
 assets/images/hud-bg.svg               |  12 +--
 assets/images/keyboard-control-a.svg   | 159 ++++++++++++++++++++++++++++
 assets/images/keyboard-control-b.svg   | 183 +++++++++++++++++++++++++++++++++
 assets/images/pill.svg                 |  12 +--
 assets/images/player-a-dim.svg         |  12 +--
 assets/images/player-a-spritesheet.svg |  20 ++--
 assets/images/player-a.svg             |  12 +--
 assets/images/player-b-dim.svg         |  12 +--
 assets/images/player-b-spritesheet.svg |  18 ++--
 assets/images/player-b.svg             |  12 +--
 assets/images/poison-pill.svg          |  12 +--
 assets/images/wall.svg                 |  12 +--
 game/prefabs/hud.js                    |   6 +-
 game/states/play.js                    |   4 +-
 game/states/preload.js                 |   2 +
 todo.md                                |   1 -
 18 files changed, 448 insertions(+), 104 deletions(-)
 create mode 100644 assets/images/keyboard-control-a.svg
 create mode 100644 assets/images/keyboard-control-b.svg

diff --git a/assets/images/bonus-pill.svg b/assets/images/bonus-pill.svg
index be0913a..8d852d0 100644
--- a/assets/images/bonus-pill.svg
+++ b/assets/images/bonus-pill.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="50"
    height="50"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="bonus-pill.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-1002.3622)">
     <path
        sodipodi:type="arc"
        style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="25"
        sodipodi:cy="25"
        sodipodi:rx="23"
diff --git a/assets/images/controller-diagram.svg b/assets/images/controller-diagram.svg
index 902bf05..fbdffd1 100644
--- a/assets/images/controller-diagram.svg
+++ b/assets/images/controller-diagram.svg
@@ -10,15 +10,14 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="800"
-   height="500"
-   id="svg3755"
+   height="499"
    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"
@@ -36,7 +35,7 @@
      inkscape:window-y="-8"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata3760">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,48 +49,48 @@
   <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"
@@ -101,7 +100,7 @@
     <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"
@@ -112,7 +111,7 @@
        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"
@@ -121,19 +120,19 @@
     <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"
@@ -143,7 +142,7 @@
     <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"
@@ -153,7 +152,7 @@
     <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"
@@ -163,7 +162,7 @@
     <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"
@@ -175,20 +174,20 @@
        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>
+        >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>
diff --git a/assets/images/hud-bg.svg b/assets/images/hud-bg.svg
index 848e15c..346e215 100644
--- a/assets/images/hud-bg.svg
+++ b/assets/images/hud-bg.svg
@@ -11,14 +11,14 @@
    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"
@@ -36,7 +36,7 @@
      inkscape:window-y="-8"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,11 +50,11 @@
   <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"
diff --git a/assets/images/keyboard-control-a.svg b/assets/images/keyboard-control-a.svg
new file mode 100644
index 0000000..5b06300
--- /dev/null
+++ b/assets/images/keyboard-control-a.svg
@@ -0,0 +1,159 @@
+<?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="501"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="keyboard-control-a.svg"
+  >
+  <defs
+     />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="219.41594"
+     inkscape:cy="256.97263"
+     inkscape:document-units="px"
+     inkscape:current-layer="g10"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     />
+  <metadata
+    >
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-552.36218)"
+    >
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       width="102.85714"
+       height="102.85714"
+       x="453.64835"
+       y="661.8299"
+       />
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       width="102.85714"
+       height="102.85714"
+       x="453.64832"
+       y="773.97278"
+       />
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       width="102.85714"
+       height="102.85714"
+       x="566.50543"
+       y="773.97278"
+       />
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       width="102.85714"
+       height="102.85714"
+       x="340.79117"
+       y="773.97278"
+       />
+    <path
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1"
+       d="m 192.92895,570.08765 103.86751,4e-4 0,179.62883 -103.86751,0 0,-89.81423 -106.683865,0 0,-89.815 z"
+      
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="97.475685"
+       y="638.01697"
+       sodipodi:linespacing="125%"
+      ><tspan
+         sodipodi:role="line"
+         x="97.475685"
+         y="638.01697"
+        >Enter</tspan></text>
+    <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="494.55234"
+       y="993.42419"
+       sodipodi:linespacing="125%"
+      ><tspan
+         sodipodi:role="line"
+         x="494.55234"
+         y="993.42419"
+        >Move</tspan></text>
+    <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="69.802299"
+       y="938.28723"
+       sodipodi:linespacing="85.000002%"
+      ><tspan
+         sodipodi:role="line"
+         x="69.802299"
+         y="938.28723"
+        >Drop</tspan><tspan
+         sodipodi:role="line"
+         x="69.802299"
+         y="999.4873"
+        >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 240.71937,703.30732 190.49383,885.34377"
+       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 533.10373,865.13329 40.96153,72.35338"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc"
+       />
+    <path
+      
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 512.15604,743.97306 0,-56.42857 24.64285,24.64286 m -29.57914,31.78542 0,-56.42857 -24.64285,24.64286"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+      
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 421.16376,822.6097 -56.42856,0 24.64286,-24.64285 m 31.78542,29.57914 -56.42857,0 24.64286,24.64285" />
+    <path
+       inkscape:connector-curvature="0"
+      
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 504.12336,797.87359 0,56.42858 -24.64284,-24.64287 m 29.57914,-31.78542 0,56.42857 24.64285,-24.64286" />
+    <path
+       inkscape:connector-curvature="0"
+      
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 587.34372,830.6745 56.42857,0 -24.64286,24.64285 m -31.78543,-29.57913 56.42858,0 -24.64287,-24.64286" />
+  </g>
+</svg>
diff --git a/assets/images/keyboard-control-b.svg b/assets/images/keyboard-control-b.svg
new file mode 100644
index 0000000..5545b88
--- /dev/null
+++ b/assets/images/keyboard-control-b.svg
@@ -0,0 +1,183 @@
+<?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"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="keyboard-control-b.svg">
+  <defs
+     />
+  <sodipodi:namedview
+    
+     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
+    >
+    <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"
+    
+     transform="translate(0,-552.36218)">
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+      
+       width="102.85714"
+       height="102.85714"
+       x="360.71429"
+       y="629.505" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="377.85715"
+       y="704.505"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="377.85715"
+         y="704.505">W</tspan></text>
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+      
+       width="102.85714"
+       height="102.85714"
+       x="360.71426"
+       y="741.64789" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="387.85712"
+       y="815.93365"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="387.85712"
+         y="815.93365">S</tspan></text>
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+      
+       width="102.85714"
+       height="102.85714"
+       x="473.57141"
+       y="741.64789" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="499.28571"
+       y="816.64789"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="499.28571"
+         y="816.64789">D</tspan></text>
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+      
+       width="102.85714"
+       height="102.85714"
+       x="247.85712"
+       y="741.64789" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="272.85712"
+       y="818.07648"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="272.85712"
+         y="818.07648">A</tspan></text>
+    <rect
+       style="fill:none;stroke:#0000ff;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+      
+       width="102.85714"
+       height="102.85714"
+       x="200.00002"
+       y="597.36218" />
+    <text
+       xml:space="preserve"
+       style="font-size:72px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0000ff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
+       x="220.71429"
+       y="672.36218"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="220.71429"
+         y="672.36218">Q</tspan></text>
+    <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="494.55234"
+       y="993.42419"
+      
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+        
+         x="494.55234"
+         y="993.42419">Move</tspan></text>
+    <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="69.802299"
+       y="938.28723"
+      
+       sodipodi:linespacing="85.000002%"><tspan
+         sodipodi:role="line"
+        
+         x="69.802299"
+         y="938.28723">Drop</tspan><tspan
+         sodipodi:role="line"
+         x="69.802299"
+         y="999.4873"
+        >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 219.50617,667.95198 190.49383,885.34377"
+      
+       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 445.22046,818.66627 128.8448,118.8204"
+      
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/assets/images/pill.svg b/assets/images/pill.svg
index 21ab632..23ddc55 100644
--- a/assets/images/pill.svg
+++ b/assets/images/pill.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="30"
    height="30"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="pill.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-1022.3622)">
     <path
        sodipodi:type="arc"
        style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="15"
        sodipodi:cy="15"
        sodipodi:rx="13"
diff --git a/assets/images/player-a-dim.svg b/assets/images/player-a-dim.svg
index d3d999e..19a0ebe 100644
--- a/assets/images/player-a-dim.svg
+++ b/assets/images/player-a-dim.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-a-dim.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#992200;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/player-a-spritesheet.svg b/assets/images/player-a-spritesheet.svg
index 6e4a3e8..50ee1aa 100644
--- a/assets/images/player-a-spritesheet.svg
+++ b/assets/images/player-a-spritesheet.svg
@@ -10,15 +10,15 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="400"
-   height="100"
-   id="svg2"
+   height="101"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-a-spritesheet.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="-8"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#ff4500;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -65,7 +65,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#992200;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-1"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -75,7 +75,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#ff4500;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-0"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -85,7 +85,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#992200;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-1-4"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/player-a.svg b/assets/images/player-a.svg
index c7494a4..1c0267f 100644
--- a/assets/images/player-a.svg
+++ b/assets/images/player-a.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-a.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#ff4500;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/player-b-dim.svg b/assets/images/player-b-dim.svg
index f8de50e..0a62aa2 100644
--- a/assets/images/player-b-dim.svg
+++ b/assets/images/player-b-dim.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-b-dim.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#999900;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/player-b-spritesheet.svg b/assets/images/player-b-spritesheet.svg
index c33ddcf..d624775 100644
--- a/assets/images/player-b-spritesheet.svg
+++ b/assets/images/player-b-spritesheet.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="400"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-b-spritesheet.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="-8"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -65,7 +65,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#999900;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-7"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -75,7 +75,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-1"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
@@ -85,7 +85,7 @@
     <path
        sodipodi:type="arc"
        style="fill:#999900;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985-7-9"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/player-b.svg b/assets/images/player-b.svg
index 74cf58a..a53b952 100644
--- a/assets/images/player-b.svg
+++ b/assets/images/player-b.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="player-b.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.36218)">
     <path
        sodipodi:type="arc"
        style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="50"
        sodipodi:cy="50"
        sodipodi:rx="48"
diff --git a/assets/images/poison-pill.svg b/assets/images/poison-pill.svg
index adc6aee..b95182e 100644
--- a/assets/images/poison-pill.svg
+++ b/assets/images/poison-pill.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="30"
    height="30"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="poison-pill.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,12 +50,12 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-1022.3622)">
     <path
        sodipodi:type="arc"
        style="fill:#fd00ff;fill-opacity:1;fill-rule:evenodd;stroke:#0000ff;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path2985"
+      
        sodipodi:cx="15"
        sodipodi:cy="15"
        sodipodi:rx="13"
diff --git a/assets/images/wall.svg b/assets/images/wall.svg
index 9c14f0b..703474f 100644
--- a/assets/images/wall.svg
+++ b/assets/images/wall.svg
@@ -11,14 +11,14 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
    height="100"
-   id="svg2"
+  
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="wall.svg">
   <defs
-     id="defs4" />
+     />
   <sodipodi:namedview
-     id="base"
+    
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
@@ -36,7 +36,7 @@
      inkscape:window-y="21"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata7">
+    >
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -50,11 +50,11 @@
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
+    
      transform="translate(0,-952.3622)">
     <rect
        style="fill:#000057;fill-opacity:1;stroke:#0000ff;stroke-width:4;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="rect3850"
+      
        width="96"
        height="96"
        x="2"
diff --git a/game/prefabs/hud.js b/game/prefabs/hud.js
index 13f8f51..a7b39a0 100644
--- a/game/prefabs/hud.js
+++ b/game/prefabs/hud.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var Hud = function(game, player, x, y, scorefontKey) {
+var Hud = function(game, player, x, y, scorefontKey, keyboardSpriteKey) {
     Phaser.Group.call(this, game);
     this.x = x;
     this.y = y;
@@ -22,7 +22,9 @@ var Hud = function(game, player, x, y, scorefontKey) {
     this.controllerDiagram.scale = {x: 0.5, y: 0.5};
     this.add(this.controllerDiagram);
 
-    this.sendToBack(this.background);
+    this.keyboardControls = new Phaser.Sprite(this.game, 0, 600, keyboardSpriteKey);
+    this.keyboardControls.scale = {x: 0.5, y: 0.5};
+    this.add(this.keyboardControls);
 
     this.currentScore = 0;
 };
diff --git a/game/states/play.js b/game/states/play.js
index 9c5a91c..b866370 100644
--- a/game/states/play.js
+++ b/game/states/play.js
@@ -23,8 +23,8 @@ Play.prototype = {
 
     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.hudA = new Hud(this.game, this.playerA, this.gameWidth-0.5, -0.5, 'spaced-scorefont-a', 'keys-a');
+    this.hudB = new Hud(this.game, this.playerB, -8.5, -0.5, 'spaced-scorefont-b', 'keys-b');
     //this.game.add.existing(this.hudA);
     //this.game.add.existing(this.hudB);
 
diff --git a/game/states/preload.js b/game/states/preload.js
index f47b62d..95ceb96 100644
--- a/game/states/preload.js
+++ b/game/states/preload.js
@@ -33,6 +33,8 @@ Preload.prototype = {
 
     this.load.image('hud-bg', 'assets/images/hud-bg.svg');
     this.load.image('controller-diagram', 'assets/images/controller-diagram.svg');
+    this.load.image('keys-a', 'assets/images/keyboard-control-a.svg');
+    this.load.image('keys-b', 'assets/images/keyboard-control-b.svg');
   },
   create: function() {
     this.asset.cropEnabled = false;
diff --git a/todo.md b/todo.md
index d89385a..46a0ffb 100644
--- a/todo.md
+++ b/todo.md
@@ -1,6 +1,5 @@
 TODO
 ====
 
-* Add tutorial / instructions page
 * Refine orientation controls
 * Read in game playback
-- 
cgit v1.2.3