diff --git a/src/components.js b/src/components.js
index e6b967f..966beba 100644
--- a/src/components.js
+++ b/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,
}
diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js
new file mode 100644
index 0000000..0e24730
--- /dev/null
+++ b/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 = `
+
+ Scoreboard Goes Here {{ player_one_score }}
+
+`
+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
+ }
+}
diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index f1fa76e..ea86f0c 100644
--- a/src/components/TopLevel.component.js
+++ b/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 = `
-
-
- Choose number of ships:
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Choose number of ships:
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
`
export default class TopLevelComponent extends Component {