Add basic scoreboard file and add to top-level (#4)

src/components.js

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

src/components/ScoreBoard.component.js

@@ -0,0 +1,25 @@
+import {Component} from '../../lib/vues6.js'
+import game_service from '../services/GameState.service.js'
+
+const template = `
+<div class="app-scoreboard-component">
+    Scoreboard Goes Here {{ player_one_score }}
+</div>
+`
+export default class ScoreBoardComponent extends Component {
+    static get selector() { return 'app-scoreboard' }
+    static get template() { return template }
+    static get props() { return [] }
+
+    player_one_score = 0
+
+    async vue_on_create() {
+        game_service.on_state_change(() => {
+            this.update()
+        })
+    }
+
+    update() {
+        // here is where you should fetch the data from the game service and update variables on the class
+    }
+}

src/components/TopLevel.component.js

@@ -3,26 +3,31 @@ 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="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 -->
-        <div class="game-board">
-            <app-game-board v-bind:rows="opponent_rows"></app-game-board>
+<div class="top-level-container">
+    <div class="top-level-component">
+        <div v-if="current_state === GameState.ChoosingNumberOfShips">
+            Choose number of ships:
+            <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>
-
-        <!-- Player's board -->
-        <div class="game-board">
-            <app-game-board v-bind:rows="player_rows"></app-game-board>
+        <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>
+    <div class="scoreboard-container">
+        <app-scoreboard></app-scoreboard>
+    </div>
 </div>
 `
 export default class TopLevelComponent extends Component {