ardent/PerudoClient
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Greatly improve the frontent for history etc.

Browse Source
This commit is contained in:
Tim 2021-07-14 20:41:29 +02:00
parent 24c5554a41
commit 019f359854
3 changed files with 155 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Die.vue
View File

@ -7,6 +7,6 @@ import {Component, Prop, Vue} from 'vue-property-decorator'
@Component
export default class Die extends Vue {
@Prop() private number: number;
@Prop() private number!: number;
}
</script>

7
src/services/PerudoApi.ts
View File

@ -55,6 +55,13 @@ export default class PerudoApi {
});
}
public callBluff(playerId: string): Promise<MyTurnObject> {
return this.post<MyTurnObject>('player/call/' + playerId)
.then((response: AxiosResponse<MyTurnObject>) => {
return response.data;
});
}
private get<T extends ApiObject>(url: string, getParameters?: Record<string, any>): AxiosPromise<T> {
return axios.get(PerudoApi.baseUrl + url).then((response: AxiosResponse<T>) => {
// @ts-ignore

113
src/views/Home.vue
View File

@ -1,4 +1,5 @@
<template>
<div>
<div class="home">
<div v-if="error">
Errors: <br>
@ -26,25 +27,27 @@
<md-button v-if="owner" @click="startGame" class="md-raised md-primary">Start</md-button>
</template>
<template v-if="gameStarted">
<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"></die>
<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"></die>
<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>
@ -52,18 +55,46 @@
<br>
</template>
<template v-if="myTurn">
<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>
<md-field>
<label>Die value</label>
<md-input type="number" v-model="dieValue"></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>
</template>
</td>
</tr>
<br>
</template>
</table>
</template>
</div>
</div>
</template>
@ -71,7 +102,7 @@
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
import {ApiObject, GameState, GameStateObject, IsStartedObject, JoinCreateGameObject, MyTurnObject, RoundObject, TurnObject, GameStateState, PlayerObject} from "@/objects/objects"; // @ is an alias to /src
@Component({
components: {Die}
@ -88,7 +119,7 @@ export default class Home extends Vue {
private playerId: string | null = null;
private gameTimer: number | null = null;
private diceCount: number = 1;
private diceCount: string = '1';
private dieValue: number = 2;
private get gameJoined(): boolean {
@ -99,10 +130,30 @@ export default class Home extends Vue {
return this.gameState >= GameState.Started;
}
private get gameEnded(): boolean {
return this.gameState === GameState.Ended;
}
private get myTurn(): boolean {
return this.gameState === GameState.MyTurn;
}
private get playersKeyedById(): Record<string, PlayerObject> | undefined {
let newPlayers: Record<string, PlayerObject> = {};
if (this.gameStateObject) {
let players = this.gameStateObject.players;
for (let key in players) {
newPlayers[players[key].id] = players[key];
}
}
return newPlayers;
}
private get previousRound(): RoundObject | undefined {
let rounds = this.gameStateObject?.rounds;
return rounds ? (rounds[rounds.length - 2] ?? undefined) : undefined;
}
private get currentRound(): RoundObject | undefined {
let rounds = this.gameStateObject?.rounds;
return rounds ? rounds[rounds.length - 1] : undefined;
@ -114,6 +165,10 @@ export default class Home extends Vue {
}
private createGame(): void {
if (this.name === '') {
this.error = "Name cannot be empty";
return;
}
PerudoApi.instance.createGame(this.name).then((response: JoinCreateGameObject) => {
this.playerId = response.player.id;
this.code = response.code;
@ -130,6 +185,10 @@ export default class Home extends Vue {
this.error = "Game code cannot be empty when joining a game";
return;
}
if (this.name === '') {
this.error = "Name cannot be empty";
return;
}
PerudoApi.instance.joinGame(this.name, this.code).then((response: JoinCreateGameObject) => {
this.playerId = response.player.id;
this.gameTimer = setInterval(() => {
@ -159,7 +218,7 @@ export default class Home extends Vue {
if (this.myTurn && this.playerId) {
PerudoApi.instance.makeGuess(this.playerId, {
diceCount: parseInt(this.diceCount),
dieValue: parseInt(this.dieValue),
dieValue: this.dieValue,
}).then((response: MyTurnObject) => {
this.gameState = GameState.Started;
this.gameTimer = setInterval(() => {
@ -171,6 +230,19 @@ export default class Home extends Vue {
}
}
private callBluff(): void {
if (this.myTurn && this.playerId) {
PerudoApi.instance.callBluff(this.playerId).then((response: MyTurnObject) => {
this.gameState = GameState.Started;
this.gameTimer = setInterval(() => {
this.checkTurn();
}, 1000);
}).catch((reason => {
this.error = reason;
}));
}
}
private checkStarted(): void {
console.log("Check started");
if (this.gameJoined && this.playerId) {
@ -193,11 +265,18 @@ export default class Home extends Vue {
if (this.gameStarted && this.playerId) {
PerudoApi.instance.myTurn(this.playerId).then((response: MyTurnObject) => {
this.gameStateObject = response.gameState;
if (response.turn) {
console.log(this.gameStateObject);
this.gameState = GameState.MyTurn;
if (this.gameStateObject.state === GameStateState.Ended) {
this.gameState = GameState.Ended;
this.clearGameTimer();
}
if (response.turn) {
this.gameState = GameState.MyTurn;
this.diceCount = this.lastTurn?.diceCount.toString() ?? this.diceCount;
this.dieValue = this.lastTurn?.dieValue ?? this.dieValue;
this.clearGameTimer();
console.log(this.gameStateObject);
}
});
}
}
@ -210,3 +289,9 @@ export default class Home extends Vue {
}
}
</script>
<style scoped lang="scss">
.inverted {
filter: invert(1);
}
</style>