Improve ui overview and abstract certain components
This commit is contained in:
parent
46ee666437
commit
f91f7ea7ed
@ -5,11 +5,7 @@
|
||||
<!-- <router-link to="/about">About</router-link>-->
|
||||
<!-- </div>-->
|
||||
<div class="page-container">
|
||||
<md-app>
|
||||
<md-app-content>
|
||||
<router-view/>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
29
src/components/Round.vue
Normal file
29
src/components/Round.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<table v-if="round.loser">
|
||||
<tr>
|
||||
<td>Round: {{ round.number + 1 }}</td>
|
||||
<td>Loser: {{ round.loser.name }}</td>
|
||||
</tr>
|
||||
<tr v-for="(playerRoll, pId) in round.rolls">
|
||||
<td>{{ players[pId].name }}:</td>
|
||||
<td>
|
||||
<template v-for="(count, number) in playerRoll">
|
||||
<die v-for="n in count" :number="number" :key="'r'+pId+round.number+n+number"></die>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Prop, Vue} from 'vue-property-decorator'
|
||||
import {RoundObject, PlayerObject} from "@/objects/objects";
|
||||
import Die from "@/components/Die.vue";
|
||||
@Component({
|
||||
components: {Die}
|
||||
})
|
||||
export default class Round extends Vue {
|
||||
@Prop() private round!: RoundObject;
|
||||
@Prop() private players!: Record<string, PlayerObject>;
|
||||
}
|
||||
</script>
|
||||
@ -23,11 +23,12 @@ export interface JoinCreateGameObject extends ApiObject {
|
||||
|
||||
export interface IsStartedObject extends ApiObject {
|
||||
started: boolean,
|
||||
gameState: GameStateObject,
|
||||
}
|
||||
|
||||
export interface MyTurnObject extends ApiObject {
|
||||
gameState: GameStateObject,
|
||||
turn: boolean,
|
||||
gameState: GameStateObject,
|
||||
}
|
||||
|
||||
export interface GameStateObject {
|
||||
|
||||
@ -1,100 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="home">
|
||||
<div v-if="error">
|
||||
Errors: <br>
|
||||
{{ error }}
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<md-app>
|
||||
<md-app-content>
|
||||
<div v-if="error">
|
||||
Errors: <br>
|
||||
{{ error }}
|
||||
</div>
|
||||
<md-field>
|
||||
<label>Name</label>
|
||||
<md-input v-model="name" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<md-field v-if="!gameStarted">
|
||||
<label>Game code</label>
|
||||
<md-input v-model="code" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<template v-if="!gameJoined">
|
||||
<md-button @click="createGame" class="md-raised">Create</md-button>
|
||||
<md-button @click="joinGame" class="md-raised">Join</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameJoined && !gameStarted && owner">
|
||||
<md-button @click="startGame" class="md-raised md-primary">Start</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="myTurn && !gameEnded">
|
||||
It is your turn, make a guess: <br>
|
||||
<md-field>
|
||||
<label>Dice count</label>
|
||||
<md-input type="number" v-model="diceCount"></md-input>
|
||||
</md-field>
|
||||
Die value: <br>
|
||||
<span v-for="n in 6" :key="'v'+n" @click="dieValue = n" :class="(dieValue === n) ? 'inverted' : ''">
|
||||
<die :number="n"></die>
|
||||
</span> <br><br>
|
||||
<md-button @click="makeGuess" class="md-raised md-primary">Guess</md-button>
|
||||
<md-button @click="callBluff" class="md-raised md-accent">Call</md-button>
|
||||
</template>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
<md-field>
|
||||
<label>Name</label>
|
||||
<md-input v-model="name" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<md-field v-if="!gameStarted">
|
||||
<label>Game code</label>
|
||||
<md-input v-model="code" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<template v-if="!gameJoined">
|
||||
<md-button @click="createGame" class="md-raised">Create</md-button>
|
||||
<md-button @click="joinGame" class="md-raised">Join</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameJoined && !gameStarted">
|
||||
<span v-if="owner">Game created!</span>
|
||||
<span v-else>Game joined, now waiting or game to start</span>
|
||||
<br>
|
||||
PlayerId: {{ playerId }} <br>
|
||||
|
||||
<md-button v-if="owner" @click="startGame" class="md-raised md-primary">Start</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameStarted && !gameEnded">
|
||||
The game has started, lets go! <br>
|
||||
</template>
|
||||
|
||||
<template v-if="gameStateObject">
|
||||
<span v-if="previousRound && previousRound.loser.name === name">You lost the previous round! <br></span>
|
||||
Round: {{ currentRound.number + 1 }} <br>
|
||||
Turn: {{ lastTurn ? lastTurn.number + 2 : 1 }} <br>
|
||||
<template v-if="lastTurn">
|
||||
Last guess: <br>
|
||||
{{ lastTurn.diceCount }} dice of value {{ lastTurn.dieValue }}<br>
|
||||
<die v-for="n in lastTurn.diceCount" :number="lastTurn.dieValue" :key="'g'+n+lastTurn.dieValue"></die>
|
||||
<br>
|
||||
</template>
|
||||
|
||||
Your throw: <br>
|
||||
<template v-for="(count, number) in currentRound.myRolls">
|
||||
<die v-for="n in count" :number="number" :key="'t'+n+number"></die>
|
||||
</template>
|
||||
<br>
|
||||
<template v-if="!myTurn">Someone else is playing, waiting for your turn<br></template>
|
||||
Players: <br>
|
||||
<template v-for="player in gameStateObject.players">
|
||||
- {{ player.name }} <span v-if="player.id === gameStateObject.currentPlayer.id"><--</span> <br>
|
||||
</template>
|
||||
<br>
|
||||
</template>
|
||||
|
||||
<template v-if="myTurn && !gameEnded">
|
||||
It is your turn, make a guess: <br>
|
||||
<md-field>
|
||||
<label>Dice count</label>
|
||||
<md-input type="number" v-model="diceCount"></md-input>
|
||||
</md-field>
|
||||
Die value: <br>
|
||||
<span v-for="n in 6" :key="'v'+n" @click="dieValue = n" :class="(dieValue === n) ? 'inverted' : ''">
|
||||
<die :number="n"></die>
|
||||
</span> <br><br>
|
||||
<md-button @click="makeGuess" class="md-raised md-primary">Guess</md-button>
|
||||
<md-button @click="callBluff" class="md-raised md-accent">Call</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameEnded">
|
||||
The game is over, the winner is: {{ gameStateObject.currentPlayer.name }}<br>
|
||||
</template>
|
||||
</div>
|
||||
<div class="home">
|
||||
<template v-if="gameStateObject">
|
||||
History: <br>
|
||||
<table v-for="round in gameStateObject.rounds.slice().reverse()">
|
||||
<template v-if="round.loser">
|
||||
<tr>
|
||||
<td>Round: {{ round.number + 1 }}</td>
|
||||
<td>Loser: {{ round.loser.name }}</td>
|
||||
</tr>
|
||||
<tr v-for="(playerRoll, pId) in round.rolls">
|
||||
<td>{{ playersKeyedById[pId].name }}: </td>
|
||||
<td>
|
||||
<template v-for="(count, number) in playerRoll">
|
||||
<die v-for="n in count" :number="number" :key="'r'+pId+round.number+n+number"></die>
|
||||
<div class="md-layout-item">
|
||||
<md-app>
|
||||
<md-app-content>
|
||||
<template v-if="gameJoined && !gameStarted">
|
||||
<span v-if="owner">Game created!</span>
|
||||
<span v-else>Game joined, now waiting or game to start</span>
|
||||
<br>
|
||||
PlayerId: {{ playerId }} <br>
|
||||
<template v-if="gameStateObject">
|
||||
Players: <br>
|
||||
<template v-for="player in gameStateObject.players">
|
||||
- {{ player.name }}<br>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<br>
|
||||
</template>
|
||||
</table>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-if="gameRunning">
|
||||
The game has started, lets go! <br>
|
||||
</template>
|
||||
|
||||
<template v-if="gameStateObject && gameRunning">
|
||||
<span v-if="previousRound && previousRound.loser.name === name">You lost the previous round!<br></span>
|
||||
Round: {{ currentRound.number + 1 }} <br>
|
||||
Turn: {{ lastTurn ? lastTurn.number + 2 : 1 }} <br>
|
||||
|
||||
Your throw: <br>
|
||||
<template v-for="(count, number) in currentRound.myRolls">
|
||||
<die v-for="n in count" :number="number" :key="'t'+n+number"></die>
|
||||
</template>
|
||||
<br><br>
|
||||
<template v-if="lastTurn">
|
||||
Last guesses: <br>
|
||||
<table>
|
||||
<tr v-for="turn in currentRound.turns">
|
||||
<td>{{ turn.player.name }} ({{ turn.number + 1 }}):</td>
|
||||
<td>
|
||||
<die v-for="n in turn.diceCount" :number="turn.dieValue" :key="'g'+n+turn.dieValue"></die>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<br>
|
||||
<template v-if="!myTurn">Someone else is playing, waiting for your turn<br></template>
|
||||
Players: <br>
|
||||
<template v-for="player in gameStateObject.players">
|
||||
-{{ player.id === gameStateObject.currentPlayer.id ? '>' : '-' }}{{ player.name }}<br>
|
||||
</template>
|
||||
<br>
|
||||
</template>
|
||||
|
||||
<template v-if="gameEnded">
|
||||
The game is over, the winner is: {{ gameStateObject.currentPlayer.name }}<br>
|
||||
</template>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<md-app>
|
||||
<md-app-content>
|
||||
<template v-if="gameStateObject && gameStarted">
|
||||
History: <br>
|
||||
<template v-for="round in gameStateObject.rounds.slice().reverse()">
|
||||
<round :round="round" :players="playersKeyedById" />
|
||||
</template>
|
||||
</template>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -102,10 +117,11 @@
|
||||
import {Component, Vue} from 'vue-property-decorator'
|
||||
import PerudoApi from "@/services/PerudoApi";
|
||||
import Die from "@/components/Die.vue";
|
||||
import {ApiObject, GameState, GameStateObject, IsStartedObject, JoinCreateGameObject, MyTurnObject, RoundObject, TurnObject, GameStateState, PlayerObject} from "@/objects/objects"; // @ is an alias to /src
|
||||
import {ApiObject, GameState, GameStateObject, IsStartedObject, JoinCreateGameObject, MyTurnObject, RoundObject, TurnObject, GameStateState, PlayerObject} from "@/objects/objects";
|
||||
import Round from "@/components/Round.vue"; // @ is an alias to /src
|
||||
|
||||
@Component({
|
||||
components: {Die}
|
||||
components: {Round, Die}
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
private gameState: GameState = GameState.Setup;
|
||||
@ -130,6 +146,10 @@ export default class Home extends Vue {
|
||||
return this.gameState >= GameState.Started;
|
||||
}
|
||||
|
||||
private get gameRunning(): boolean {
|
||||
return this.gameStarted && !this.gameEnded;
|
||||
}
|
||||
|
||||
private get gameEnded(): boolean {
|
||||
return this.gameState === GameState.Ended;
|
||||
}
|
||||
@ -175,6 +195,9 @@ export default class Home extends Vue {
|
||||
this.owner = true;
|
||||
|
||||
this.gameState = GameState.Joined;
|
||||
this.gameTimer = setInterval(() => {
|
||||
this.checkStarted();
|
||||
}, 1000);
|
||||
}).catch((reason => {
|
||||
this.error = reason;
|
||||
}));
|
||||
@ -205,9 +228,7 @@ export default class Home extends Vue {
|
||||
if (this.gameJoined && this.playerId) {
|
||||
PerudoApi.instance.startGame(this.playerId).then((response: ApiObject) => {
|
||||
this.gameState = GameState.Started;
|
||||
this.gameTimer = setInterval(() => {
|
||||
this.checkTurn();
|
||||
}, 1000);
|
||||
this.gameStateObject = null; // Bug fix because checkStarted gameStateObject misses some properties
|
||||
}).catch((reason => {
|
||||
this.error = reason;
|
||||
}));
|
||||
@ -224,6 +245,7 @@ export default class Home extends Vue {
|
||||
this.gameTimer = setInterval(() => {
|
||||
this.checkTurn();
|
||||
}, 1000);
|
||||
this.checkTurn();
|
||||
}).catch((reason => {
|
||||
this.error = reason;
|
||||
}));
|
||||
@ -237,6 +259,7 @@ export default class Home extends Vue {
|
||||
this.gameTimer = setInterval(() => {
|
||||
this.checkTurn();
|
||||
}, 1000);
|
||||
this.checkTurn();
|
||||
}).catch((reason => {
|
||||
this.error = reason;
|
||||
}));
|
||||
@ -247,8 +270,10 @@ export default class Home extends Vue {
|
||||
console.log("Check started");
|
||||
if (this.gameJoined && this.playerId) {
|
||||
PerudoApi.instance.gameStarted(this.playerId).then((response: IsStartedObject) => {
|
||||
this.gameStateObject = response.gameState;
|
||||
if (response.started) {
|
||||
this.gameState = GameState.Started;
|
||||
|
||||
this.clearGameTimer();
|
||||
this.gameTimer = setInterval(() => {
|
||||
this.checkTurn();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user