Style game buttons

This commit is contained in:
Charles Gould 2017-01-31 02:26:33 -05:00
parent fa04758877
commit 8b048dbef9
3 changed files with 16 additions and 5 deletions

View File

@ -123,7 +123,7 @@ public class LingoController {
final Game game = new Game(player);
gameById.put(game.id, game);
gameByPlayer.put(player, game);
log.info("{} hosted a game", player);
log.info("{} hosted Game {}", player, game.id);
send(Destinations.GAME_HOSTED, game);
}
@ -198,6 +198,7 @@ public class LingoController {
if (playerOne == player) {
if (playerTwo == null) {
// Close the game
log.info("{} closed Game {}", player, game.id);
gameById.remove(game.id);
send(Destinations.GAME_CLOSED, game);
} else {

View File

@ -26,14 +26,14 @@
</div>
<div class="list-group">
<div v-if="games.length === 0" class="list-group-item">There are no games</div>
<div v-for="game in games">
<template v-for="game in games">
<div v-if="game.started" v-bind:id="'game-' + game.id" class="list-group-item">
<strong>{{ game.playerOne }}</strong> is playing with <strong>{{ game.playerTwo }}</strong>
<strong>{{ game.playerOne }}</strong> vs. <strong>{{ game.playerTwo }}</strong>
</div>
<button v-else v-bind:id="'game-' + game.id" @click="joinGame" type="button" class="list-group-item">
<button v-else v-bind:id="'game-' + game.id" @click="joinGame" type="button" v-bind:disabled="inGame" class="list-group-item">
<strong>{{ game.playerOne }}</strong> wants to play
</button>
</div>
</template>
</div>
</div>
<button v-show="inGame" @click="leaveGame" type="button" class="leave button">Leave game</button>

View File

@ -112,6 +112,7 @@ button:hover:disabled {
font-size: 1em;
border-width: 1px 0;
border-radius: 0;
outline: none;
}
.list-group-item {
@ -132,6 +133,15 @@ button.list-group-item:hover {
background-color: lightblue;
}
button.list-group-item:disabled {
color: black;
}
button.list-group-item:hover:disabled {
background-color: white;
cursor: default;
}
.button {
width: 120px;
margin-left: 10px;