Display last turn correctly and show last guess properly
This commit is contained in:
parent
06f0797911
commit
24c5554a41
12
src/components/Die.vue
Normal file
12
src/components/Die.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<img width="50px" :src="'Dice-' + number + '-b.svg'" alt="dice">
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Prop, Vue} from 'vue-property-decorator'
|
||||
|
||||
@Component
|
||||
export default class Die extends Vue {
|
||||
@Prop() private number: number;
|
||||
}
|
||||
</script>
|
@ -66,7 +66,6 @@ export default class PerudoApi {
|
||||
}
|
||||
|
||||
private post<T extends ApiObject>(url: string, data?: any,): AxiosPromise<T> {
|
||||
console.log(data);
|
||||
return axios.post(PerudoApi.baseUrl + url, data).then((response: AxiosResponse) => {
|
||||
// @ts-ignore
|
||||
if (response?.data?.errors?.length > 0) {
|
||||
|
@ -30,21 +30,30 @@
|
||||
The game has started, lets go! <br>
|
||||
</template>
|
||||
|
||||
<template v-if="myTurn">
|
||||
It is your turn! <br>
|
||||
<template v-if="gameStateObject">
|
||||
Round: {{ currentRound.number + 1 }} <br>
|
||||
Turn: {{ currentTurn ? currentTurn.number : 1 }} <br>
|
||||
Throws:
|
||||
<template v-for="(value, name) in currentRound.myRolls">
|
||||
<img v-for="n in value" width="50px" :src="'Dice-' + name + '-b.svg'">
|
||||
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"></die>
|
||||
<br>
|
||||
</template>
|
||||
|
||||
Your throw: <br>
|
||||
<template v-for="(count, number) in currentRound.myRolls">
|
||||
<die v-for="n in count" :number="number"></die>
|
||||
</template>
|
||||
<br>
|
||||
Players: <br>
|
||||
<template v-for="player in gameStateObject.players">
|
||||
- {{ player.name }} <br>
|
||||
- {{ player.name }} <span v-if="player.id === gameStateObject.currentPlayer.id"><--</span> <br>
|
||||
</template>
|
||||
<br>
|
||||
</template>
|
||||
|
||||
<template v-if="myTurn">
|
||||
It is your turn, make a guess: <br>
|
||||
<md-field>
|
||||
<label>Dice count</label>
|
||||
<md-input type="number" v-model="diceCount"></md-input>
|
||||
@ -54,7 +63,6 @@
|
||||
<md-input type="number" v-model="dieValue"></md-input>
|
||||
</md-field>
|
||||
<md-button @click="makeGuess" class="md-raised md-primary">Guess</md-button>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,14 +70,15 @@
|
||||
<script lang="ts">
|
||||
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} from "@/objects/objects"; // @ is an alias to /src
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
components: {Die}
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
private gameState: GameState = GameState.Setup;
|
||||
private gameStateObject?: GameStateObject;
|
||||
private gameStateObject: GameStateObject | null = null;
|
||||
private error: string | null = null;
|
||||
|
||||
private name: string = 'Bobby';
|
||||
@ -79,8 +88,8 @@ export default class Home extends Vue {
|
||||
private playerId: string | null = null;
|
||||
private gameTimer: number | null = null;
|
||||
|
||||
private diceCount: number = 0;
|
||||
private dieValue: number = 1;
|
||||
private diceCount: number = 1;
|
||||
private dieValue: number = 2;
|
||||
|
||||
private get gameJoined(): boolean {
|
||||
return this.gameState >= GameState.Joined;
|
||||
@ -99,7 +108,7 @@ export default class Home extends Vue {
|
||||
return rounds ? rounds[rounds.length - 1] : undefined;
|
||||
}
|
||||
|
||||
private get currentTurn(): TurnObject | undefined {
|
||||
private get lastTurn(): TurnObject | undefined {
|
||||
let turns = this.currentRound?.turns;
|
||||
return turns ? turns[turns.length - 1] : undefined;
|
||||
}
|
||||
@ -183,8 +192,8 @@ export default class Home extends Vue {
|
||||
console.log("Check turn");
|
||||
if (this.gameStarted && this.playerId) {
|
||||
PerudoApi.instance.myTurn(this.playerId).then((response: MyTurnObject) => {
|
||||
this.gameStateObject = response.gameState;
|
||||
if (response.turn) {
|
||||
this.gameStateObject = response.gameState;
|
||||
console.log(this.gameStateObject);
|
||||
this.gameState = GameState.MyTurn;
|
||||
this.clearGameTimer();
|
||||
|
Loading…
Reference in New Issue
Block a user