Alec 4 years ago
commit ebda3a52d2

@ -4,7 +4,27 @@ import {Player} from '../module/util.js'
const template = `
<div class="app-scoreboard-component">
Scoreboard Goes Here {{ player_one_score }}
<table class="scoreboard_table" style="width:50%">
<tr class="scoreboard_rows">
<th class="scoreboard_table_empty"></th>
<th class="scoreboard_table_header" colspan="3">scoreboard</th>
</tr>
<tr class="scoreboard_header_scoreProgress">
<th class="scoreboard_table_empty"></th>
<td class="scoreboard_data">score</td>
<td class="scoreboard_data">progress</td>
</tr>
<tr class="scoreboard_rows_score&progress">
<td class="scoreboard_player">player_1</td>
<td class="scoreboard_data">{{player_one_score}}</td>
<td class="scoreboard_data">{{player_one_progress}}</td>
</tr>
<tr class="scoreboard_lastRow">
<td class="scoreboard_player">player_2</td>
<td class="scoreboard_data">{{player_one_score}}</td>
<td class="scoreboard_data">{{player_two_progress}}</td>
</tr>
</table>
</div>
`
export default class ScoreBoardComponent extends Component {

@ -5,17 +5,19 @@ import game_service from '../services/GameState.service.js'
const template = `
<div class="top-level-container">
<div class="top-level-component">
<div v-if="current_state === GameState.ChoosingNumberOfShips">
<div v-if="current_state === GameState.ChoosingNumberOfShips" class="game-choose-ships-container">
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 style="margin-top: 30px;">
<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>
<div v-if="current_state === GameState.PromptPlayerChange">
<div v-if="current_state === GameState.PromptPlayerChange" class="game-player-change-container">
It is now {{ current_player_display }}'s turn!
<button @click="confirm_player_change" class="shipBtn">Continue</button>
<button @click="confirm_player_change" class="playerBtn">Continue</button>
</div>
<div
v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange"
@ -24,6 +26,7 @@ const template = `
<!-- Opponent's board -->
<div class="game-board">
<app-game-board v-bind:rows="opponent_rows"></app-game-board>
<div class="fleet-label">Opposing fleet</div>
</div>
<!-- Player's board -->
@ -34,6 +37,7 @@ const template = `
v-bind:ships_to_place="ships_to_place"
@shipplaced="on_ship_placed"
></app-game-board>
<div class="fleet-label">Your fleet</div>
</div>
</div>
</div>

@ -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;
}

Loading…
Cancel
Save