Add top-level component to show/hide the boards for the current player (#3)

index.html

@@ -13,8 +13,8 @@
         <!-- This is the container where the Vue.js application will render to. -->
         <div id="wrapper">
 
-            <!-- The game board. See the "GameBoard.component.js" for this. -->
-            <app-game-board></app-game-board>
+            <!-- The top level component. This controls showing/hiding grids &c. -->
+            <app-top-level></app-top-level>
         </div>
 
         <script src="./lib/vue-2.6.11.js"></script>

src/components.js

@@ -1,5 +1,6 @@
 import GameBoardComponent from './components/GameBoard.component.js'
 import GridCellComponent from './components/GridCell.component.js'
+import TopLevelComponent from './components/TopLevel.component.js'
 
 /*
  * This is where various components we define should be registered.
@@ -8,4 +9,5 @@ import GridCellComponent from './components/GridCell.component.js'
 export default {
     GameBoardComponent,
     GridCellComponent,
+    TopLevelComponent,
 }

src/components/TopLevel.component.js

@@ -0,0 +1,57 @@
+import {Component} from '../../lib/vues6.js'
+import {GameState} from '../module/util.js'
+import game_service from '../services/GameState.service.js'
+
+const template = `
+<div class="top-level-component">
+    <div v-if="current_state === GameState.ChoosingNumberOfShips">
+        Choose number of ships <button @click="bypass">Bypass for now</button>
+    </div>
+    <div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
+        <!-- Opponent's board -->
+        <div class="game-board">
+            <app-game-board v-bind:rows="opponent_rows"></app-game-board>
+        </div>
+
+        <!-- Player's board -->
+        <div class="game-board">
+            <app-game-board v-bind:rows="player_rows"></app-game-board>
+        </div>
+    </div>
+</div>
+`
+export default class TopLevelComponent extends Component {
+    static get selector() { return 'app-top-level' }
+    static get template() { return template }
+    static get props() { return [] }
+
+    /**
+     * Make the game state accessible w/in the template.
+     * @type {object}
+     */
+    GameState = GameState
+
+    /**
+     * The current game state.
+     * @type {GameState|undefined}
+     */
+    current_state = undefined
+
+    opponent_rows = []
+
+    player_rows = []
+
+    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) => {
+            this.current_state = next_state
+            this.opponent_rows = game_service.get_current_opponent_state()
+            this.player_rows = game_service.get_current_player_state()
+        })
+    }
+
+    bypass() {
+        game_service.advance_game_state()
+    }
+}