diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js
index 3cdda0e..4532847 100644
--- a/src/components/ScoreBoard.component.js
+++ b/src/components/ScoreBoard.component.js
@@ -4,7 +4,27 @@ import {Player} from '../module/util.js'
const template = `
- Scoreboard Goes Here {{ player_one_score }}
+
+
+ |
+
+
+
+
+ player_1 |
+ {{player_one_score}} |
+ {{player_one_progress}} |
+
+
+ player_2 |
+ {{player_one_score}} |
+ {{player_two_progress}} |
+
+
`
export default class ScoreBoardComponent extends Component {
diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index 1ce0438..460ded0 100644
--- a/src/components/TopLevel.component.js
+++ b/src/components/TopLevel.component.js
@@ -5,17 +5,19 @@ import game_service from '../services/GameState.service.js'
const template = `
-
+
Choose number of ships:
-
-
-
-
-
+
+
+
+
+
+
+
-
+
It is now {{ current_player_display }}'s turn!
-
+
@@ -34,6 +37,7 @@ const template = `
v-bind:ships_to_place="ships_to_place"
@shipplaced="on_ship_placed"
>
+
Your fleet
diff --git a/src/style/components.css b/src/style/components.css
index 548a3a5..fef62b7 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -101,5 +101,27 @@ p {
}
+.game-player-change-container, .game-choose-ships-container {
+ height: calc(40px * 9);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.playerBtn {
+ background-color: #327da8;
+ color: white;
+ padding: 5px 12px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 12px;
+ margin-top: 30px;
+}
+
+.fleet-label {
+ text-align: center;
+ margin: 20px;
+}