diff --git a/index.html b/index.html
index fa515a6..55e4596 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@
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 = `
+
+
+ Choose number of ships
+
+
+
+`
+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()
+ }
+}