Add event passthrough (#3)

src/components/GameBoard.component.js

@@ -1,5 +1,4 @@
 import {Component} from '../../lib/vues6.js'
-import game_service from '../services/GameState.service.js'
 
 /*
  * This is the HTML/JavaScript for the game board component.
@@ -25,8 +24,9 @@ const template  = `
         <div class="grid-row" v-for="(row,i) of rows">
         <br> <span class="label">{{ i + 1 }}</span>
             <app-game-cell
-                v-for="cell of row"
+                v-for="(cell,j) of row"
                 v-bind:render="cell.render"
+                @click="on_cell_click(i,j)"
             ></app-game-cell>
         </div>
          <div class="column_labels">
@@ -54,9 +54,12 @@ export default class GameBoardComponent extends Component {
      */
     // rows = []
     column_labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
-    
 
     async vue_on_create() {
         this.ready = true
     }
+
+    on_cell_click(row_i, cell_i) {
+        alert(`${row_i} : ${cell_i}`)
+    }
 }

src/components/GridCell.component.js

@@ -4,6 +4,7 @@ import {GridCellState} from '../module/util.js'
 const template = `
 <div
     class="game-board-cell-component"
+    @click="on_click"
     v-bind:class="{ disabled: render === GridCellState.Disabled, available: render === GridCellState.Available,
     ship: render == GridCellState.Ship, damaged: render == GridCellState.Damaged, sunk: render == GridCellState.Sunk,
     missed: render == GridCellState.Missed }"
@@ -24,4 +25,8 @@ export default class GridCellComponent extends Component {
 
     /** Make the "GridCellState" enum available in the template. */
     GridCellState = GridCellState
+
+    on_click() {
+        this.$emit('click')
+    }
 }

src/components/TopLevel.component.js

@@ -6,11 +6,11 @@ const template = `
 <div class="top-level-component">
     <div v-if="current_state === GameState.ChoosingNumberOfShips">
         Choose number of ships:
-        <button @click="ship1" class="shipBtn">1 ship</button>
-        <button @click="ship2" class="shipBtn">2 ships</button>
-        <button @click="ship3" class="shipBtn">3 ships</button>
-        <button @click="ship4" class="shipBtn">4 ships</button>
-        <button @click="ship5" class="shipBtn">5 ships</button>
+        <button @click="ship(1)" class="shipBtn">1 ship</button>
+        <button @click="ship(2)" class="shipBtn">2 ships</button>
+        <button @click="ship(3)" class="shipBtn">3 ships</button>
+        <button @click="ship(4)" class="shipBtn">4 ships</button>
+        <button @click="ship(5)" class="shipBtn">5 ships</button>
     </div>
     <div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
         <!-- Opponent's board -->
@@ -46,6 +46,8 @@ export default class TopLevelComponent extends Component {
 
     player_rows = []
 
+    instructions = ''
+
     async vue_on_create() {
         console.log('game service', game_service)
         this.current_state = game_service.get_game_state()
@@ -53,27 +55,13 @@ export default class TopLevelComponent extends Component {
             this.current_state = next_state
             this.opponent_rows = game_service.get_current_opponent_state()
             this.player_rows = game_service.get_current_player_state()
+
+            // add code for instructions
         })
     }
 
-    ship1(){
-        game_service.set_n_boats(1)
-        game_service.advance_game_state()
-    }
-    ship2(){
-        game_service.set_n_boats(2)
-        game_service.advance_game_state()
-    }
-    ship3(){
-        game_service.set_n_boats(3)
-        game_service.advance_game_state()
-    }
-    ship4(){
-        game_service.set_n_boats(4)
-        game_service.advance_game_state()
-    }
-    ship5(){
-        game_service.set_n_boats(5)
+    ship(n) {
+        game_service.set_n_boats(n)
         game_service.advance_game_state()
     }
 }