From eaef36ad61d2e9494b3fe772dc8db80b0b8b1428 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Wed, 9 Sep 2020 11:34:46 -0500
Subject: [PATCH] Add top-level component to show/hide the boards for the
 current player (#3)

---
 index.html                           |  4 +-
 src/components.js                    |  2 +
 src/components/TopLevel.component.js | 57 ++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TopLevel.component.js

diff --git a/index.html b/index.html
index fa515a6..55e4596 100644
--- a/index.html
+++ b/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>
diff --git a/src/components.js b/src/components.js
index 6baaa34..e6b967f 100644
--- a/src/components.js
+++ b/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,
 }
diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
new file mode 100644
index 0000000..c704aed
--- /dev/null
+++ b/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()
+    }
+}