Permalink
Browse files

Add "Option A" and "Option B" buttons

  • Loading branch information...
1 parent 50981c1 commit 50dae365347d2c258126209998c146e4a9cd3ad0 @karenc committed Jul 28, 2012
Showing with 41 additions and 46 deletions.
  1. +11 −43 app/assets/javascripts/fakesnladders.js
  2. +30 −3 app/views/home/index.html.erb
  3. BIN public/assets/button.png
View
54 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');
View
33 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' %>
View
BIN public/assets/button.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 50dae36

Please sign in to comment.