Add "Option A" and "Option B" buttons

app/assets/javascripts/fakesnladders.js

@@ -5,22 +5,21 @@ function FakesNLadders(layer, gridSize) {
     this.gridSize = gridSize;
     this.layer = layer;
     this.layer.addGameObject(this);
+    this.squaresToSide = 10;
+    this.squareSize = this.gridSize / this.squaresToSide;
 }
 
 FakesNLadders.prototype.draw = function(context) {
     context.fillStyle = 'black';
     context.strokeRect(0, 0, this.gridSize, this.gridSize);
 
     // grid squares
-    var squaresToSide = 10;
-    var nSquares = squaresToSide*squaresToSide;
-    var squareSize = this.gridSize/squaresToSide;
-    for (var x = 0.5; x < this.gridSize; x += squareSize) {    
+    for (var x = 0.5; x < this.gridSize; x += this.squareSize) {    
         context.moveTo(x, 0);
         context.lineTo(x, this.gridSize);
     }
 
-    for (var y = 0.5; y < this.gridSize; y += squareSize) {    
+    for (var y = 0.5; y < this.gridSize; y += this.squareSize) {    
         context.moveTo(0, y);
         context.lineTo(this.gridSize, y);
     }
@@ -33,54 +32,23 @@ FakesNLadders.prototype.draw = function(context) {
     context.textBaseline = 'bottom';
     context.textAlign = 'middle'; // left is the same??
     var sqNo = 0;
-    var centring = squareSize/2;
-    for(var y = squaresToSide-1; y >= 0; y--) {
-        for(var x = squaresToSide-1; x >= 0; x--) {
-            context.fillText(sqNo++, x*squareSize + centring, y*squareSize + centring);
+    var centring = this.squareSize/2;
+    for(var y = this.squaresToSide-1; y >= 0; y--) {
+        for(var x = this.squaresToSide-1; x >= 0; x--) {
+            context.fillText(sqNo++, x*this.squareSize + centring, y*this.squareSize + centring);
         }
         y--;
-        for(var x = 0; x < squaresToSide; x++) {
-            context.fillText(sqNo++, x*squareSize + centring, y*squareSize + centring);
+        for(var x = 0; x < this.squaresToSide; x++) {
+            context.fillText(sqNo++, x*this.squareSize + centring, y*this.squareSize + centring);
         }
     }
 
-    // borders and placeholders for dash elements
-    // marker text style
-    context.font = "bold 24px sans-serif"; // marker text
-    context.textBaseline = 'middle';
-    context.textAlign = 'middle'; // left is the same??
-
-    // board end landing zone
-    context.beginPath();
-    context.moveTo(this.gridSize, squareSize*2 + 0.5);
-    context.lineTo(WIDTH, squareSize*2 + 0.5);
-    context.stroke();
-    context.fillText("END", this.gridSize - (this.gridSize - WIDTH)/2, squareSize);
-
-    // 'A' text option
-    context.beginPath();
-    context.moveTo(this.gridSize, squareSize*5 + 0.5);
-    context.lineTo(WIDTH, squareSize*5 + 0.5);
-    context.stroke();
-    context.fillText("Option A", this.gridSize - (this.gridSize - WIDTH)/2, squareSize*3.5);
-
-    // 'B' text option
-    context.beginPath();
-    context.moveTo(this.gridSize, squareSize*8 + 0.5);
-    context.lineTo(WIDTH, squareSize*8 + 0.5);
-    context.stroke();
-    context.fillText("Option B", this.gridSize - (this.gridSize - WIDTH)/2, squareSize*6.5);
-
-    // status/help text area
-    context.fillText("Status", this.gridSize - (this.gridSize - WIDTH)/2, squareSize*9);
 }
 
 FakesNLadders.prototype.hit = function(p) {
-    alert(p);
 }
 
-function init(e) {
-    e.stopPropagation();
+function init() {
     var game = document.getElementById('game');
     var gameContext = game.getContext('2d');
     var backBuffer = document.getElementById('back-buffer');

app/views/home/index.html.erb

@@ -1,13 +1,32 @@
 <%- content_for(:head) do -%>
     <style type="text/css">
-        canvas {
+        #container {
             margin: 0 auto;
+            width: 929px;
+            height: 600px;
+            background-image: url(<%= asset_path 'faded.png' %>);
+        }
+        canvas {
             display: block;
             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+            float: left;
         }
         #back-buffer {
             display: none;
         }
+        #side {
+            display: block;
+            float: left;
+            width: 329px;
+        }
+        .button {
+            height: 120px;
+            background-image: url(<%= asset_path 'button.png' %>);
+            padding: 30px;
+            font-family: sans-serif;
+            font-weight: bold;
+            font-size: 16px;
+        }
         .hidden {
             display: none;
         }
@@ -25,7 +44,15 @@
   <p>User: <%=link_to user.name, user %></p>
 <% end %>
 
-<canvas id="game" width="929" height="600"></canvas>
-<canvas id="back-buffer" width="929" height="600"></canvas>
+<div id="container">
+    <canvas id="game" width="600" height="600"></canvas>
+    <canvas id="back-buffer" width="600" height="600"></canvas>
+    <div id="side">
+        <div style="width: 329px; height: 120px">GOAL</div>
+        <div class="button">Option A etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</div>
+        <div class="button">Option B etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</div>
+        <div style="width: 329px; height: 120px">STATUS</div>
+    </div>
+</div>
 
 <%= image_tag 'faded.png', :id => 'background', :class => 'hidden' %>