edited ship buttons and board #3

master
Alec 2 years ago
parent c58b4b19a6
commit 50c3db868f
  1. BIN
      .DS_Store
  2. 8
      src/components/TopLevel.component.js
  3. 14
      src/style/components.css

BIN
.DS_Store vendored

Binary file not shown.

@ -5,14 +5,12 @@ 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
Choose number of ships:
<button @click="ship1" class="shipBtn">1 ship</button>
<button @click="ship2" class="shipBtn">2 ships</button>
<button @click="ship3" class="shipBtn">3 ships</button>
<button @click="ship4" class="shipBtn">4 ships</button>
<button @click="ship5" class="shipBtn">5 ships</button>
<button @click="bypass">Bypass for now</button>
</div>
<div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
<!-- Opponent's board -->
@ -73,7 +71,5 @@ export default class TopLevelComponent extends Component {
ship5(){
game_service.advance_game_state()
}
bypass() {
game_service.advance_game_state()
}
}

@ -16,6 +16,16 @@
padding-top: 10px;
}
.shipBtn{
background-color: #327da8;
color: white;
padding: 5px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
}
/* Styles for the various grid cell states. */
.game-board-cell-component {
@ -25,11 +35,11 @@
}
.game-board-cell-component.available {
background: #eeeeee;
background: #327da8;
}
.game-board-cell-component.available:hover {
background: #cccccc;
background: #3261a8;
}
.game-board-cell-component.disabled {

Loading…
Cancel
Save