Add ability to place ships on grid (#3)

src/components/GameBoard.component.js

@@ -42,7 +42,7 @@ const template  = `
 export default class GameBoardComponent extends Component {
     static get selector() { return 'app-game-board' }
     static get template() { return template }
-    static get props() { return ['rows', 'is_placement_mode'] }
+    static get props() { return ['rows', 'is_placement_mode', 'ships_to_place'] }
 
     /**
      * If true, the grid is ready to be rendered. If false,
@@ -104,7 +104,17 @@ export default class GameBoardComponent extends Component {
     }
 
     on_cell_click(row_i, cell_i) {
+        if ( this.is_placement_mode && this.ships_to_place[0] ) {
+            // We should try to place a ship here
+            if ( this.ship_ghost_cells.length > 0 ) {
+                // We have some valid ship placement coordinates
+                const coord_one = this.ship_ghost_cells[0]
+                const coord_two = this.ship_ghost_cells.slice(-1)[0]
 
+                game_service.place_ship(this.ships_to_place[0], coord_one, coord_two)
+                this.$emit('shipplaced')
+            }
+        }
     }
 
     /**
@@ -115,18 +125,20 @@ export default class GameBoardComponent extends Component {
      */
     on_cell_hover(row_i, cell_i) {
         if ( this.is_placement_mode ) {
+            // If we're in placement mode, determine if the cell the user is hovering
+            // over is a valid place to place the ship.
             const ghost_cells = [[row_i, cell_i]]
             const is_horizontal = this.shift_pressed
             let is_valid_hover = true
 
             if ( !is_horizontal ) {
-                const num_cells = game_service.get_ship_length(this.current_placement)
+                const num_cells = game_service.get_ship_length(this.ships_to_place[0])
                 for ( let i = row_i + 1; i < row_i + num_cells; i += 1 ) {
                     ghost_cells.push([i, cell_i])
                     if ( i > 8 ) is_valid_hover = false
                 }
             } else {
-                const num_cells = game_service.get_ship_length(this.current_placement)
+                const num_cells = game_service.get_ship_length(this.ships_to_place[0])
                 for ( let i = cell_i + 1; i < cell_i + num_cells; i += 1 ) {
                     ghost_cells.push([row_i, i])
                     if ( i > 8 ) is_valid_hover = false

src/components/TopLevel.component.js

@@ -1,5 +1,5 @@
 import {Component} from '../../lib/vues6.js'
-import {GameState} from '../module/util.js'
+import {GameState, ShipType} from '../module/util.js'
 import game_service from '../services/GameState.service.js'
 
 const template = `
@@ -21,7 +21,12 @@ const template = `
     
             <!-- Player's board -->
             <div class="game-board">
-                <app-game-board v-bind:rows="player_rows" v-bind:is_placement_mode="player_is_placing_ships"></app-game-board>
+                <app-game-board
+                    v-bind:rows="player_rows"
+                    v-bind:is_placement_mode="player_is_placing_ships"
+                    v-bind:ships_to_place="ships_to_place"
+                    @shipplaced="on_ship_placed"
+                ></app-game-board>
             </div>
         </div>
     </div>
@@ -47,10 +52,22 @@ export default class TopLevelComponent extends Component {
      */
     current_state = undefined
 
+    /**
+     * The opponent's grid data.
+     * @type {object[][]}
+     */
     opponent_rows = []
 
+    /**
+     * The player's grid data.
+     * @type {object[][]}
+     */
     player_rows = []
 
+    /**
+     * The current instructions to be shown to the user.
+     * @type {string}
+     */
     instructions = ''
 
     /**
@@ -59,21 +76,49 @@ export default class TopLevelComponent extends Component {
      */
     player_is_placing_ships = false
 
+    /**
+     * If in placement mode, the ships that are yet to be placed.
+     * @type {ShipType[]}
+     */
+    ships_to_place = []
+
     async vue_on_create() {
         console.log('game service', game_service)
         this.current_state = game_service.get_game_state()
-        game_service.on_state_change((next_state) => {
+
+        // Called every time the game state is updated
+        game_service.on_state_change((next_state, was_refresh) => {
             this.current_state = next_state
             this.opponent_rows = game_service.get_current_opponent_state()
             this.player_rows = game_service.get_current_player_state()
+
             this.player_is_placing_ships = next_state === GameState.PlayerSetup
+            if ( !was_refresh && this.player_is_placing_ships ) {
+                // TODO replace with call to game state service
+                this.ships_to_place = [ShipType.x1, ShipType.x2, ShipType.x3]
+            }
 
-            // add code for instructions
+            // TODO add code for instructions
         })
     }
 
+    /**
+     * Set the number of boats.
+     * @param {number} n
+     */
     ship(n) {
         game_service.set_n_boats(n)
         game_service.advance_game_state()
     }
+
+    /**
+     * Called when the current user has placed a ship.
+     */
+    on_ship_placed() {
+        this.ships_to_place.shift()
+        if ( this.ships_to_place.length < 1 ) {
+            // We've placed all the ships. Let's move on.
+            game_service.advance_game_state()
+        }
+    }
 }