SpikeWars WIP working towards initial render and loop function.

spike-wars/src/main/js/game-logic.js

@@ -1,11 +1,19 @@
+// @flow
 import type Board from './game-types';
+import type GameState from './game-types';
 
-function render(state: GameState, g: CanvasRenderingContext2D) {
-
+function render(state: GameState, g: CanvasRenderingContext2D): void {
+  var space = g.measureText(state.count + '');
+  g.clearRect(100, 100, space.width, 50);
+  g.fillText(state.count + '', 100, 100);
 }
 
-function update(board: Board) {
+function update(state: GameState): GameState {
+  state.count++;
+  return state;
+}
 
+function handleKeyboardEvent(ke: KeyboardEvent) {
 }
 
 export {render, update};

spike-wars/src/main/js/game-types.js

@@ -1,4 +1,5 @@
 export type Board = Array<number>;
 export type GameState = {
-  board: Board
+  board: Board,
+  count: number
 };

spike-wars/src/main/js/spike-wars.js

@@ -5,6 +5,7 @@ import type Board from './game-types';
 import type GameState from './game-types';
 
 type SpikeWarsOptions = {fps?: number};
+
 export default class SpikeWars {
   ROWS: number;       // How many rows does our board have?
   COLS: number;       // How many columns does our board have?
@@ -34,11 +35,14 @@ export default class SpikeWars {
     this.COLS = 20;
     this.TILE_SIZE = 48;
 
-    this.state = {board: this.newBoard()}; // create a new board
+    this.state = {board: this.newBoard(), count: 0}; // create a new board
 
     // Find our canvas and ask for the reference to the drawing API.
     this.canvas = window.document.getElementsByTagName('canvas')[0];
     this.canvas2d = this.canvas.getContext('2d');
+
+    // TODO: register event handlers on the canvas element.
+
   }
 
   // This function creates a new board.
@@ -75,4 +79,10 @@ export default class SpikeWars {
       render(this.state, this.canvas2d); }
   }
 
+  startGame(): void { this.gameLoop(); }
 }
+
+
+// instantiate the instance of SpikeWars
+window.spikeWars = new SpikeWars({fps: 30});
+window.spikeWars.startGame();