From 019f359854d2071eb1c889f94c5e719c78025907 Mon Sep 17 00:00:00 2001
From: Tim van Veenendaal <tim.vanveenendaal@c-quential.nl>
Date: Wed, 14 Jul 2021 20:41:29 +0200
Subject: [PATCH] Greatly improve the frontent for history etc.

---
 src/components/Die.vue    |   2 +-
 src/services/PerudoApi.ts |   7 ++
 src/views/Home.vue        | 209 +++++++++++++++++++++++++++-----------
 3 files changed, 155 insertions(+), 63 deletions(-)

diff --git a/src/components/Die.vue b/src/components/Die.vue
index 9a38939..086a372 100644
--- a/src/components/Die.vue
+++ b/src/components/Die.vue
@@ -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>
diff --git a/src/services/PerudoApi.ts b/src/services/PerudoApi.ts
index 204556e..f786858 100644
--- a/src/services/PerudoApi.ts
+++ b/src/services/PerudoApi.ts
@@ -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
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 697ad74..fccf069 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,69 +1,100 @@
 <template>
-  <div class="home">
-    <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>
+  <div>
+    <div class="home">
+      <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">
-      <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="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>
+        <md-button v-if="owner" @click="startGame" class="md-raised md-primary">Start</md-button>
+      </template>
 
-    <template v-if="gameStarted">
-      The game has started, lets go! <br>
-    </template>
+      <template v-if="gameStarted && !gameEnded">
+        The game has started, lets go! <br>
+      </template>
 
-    <template v-if="gameStateObject">
-      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>
+      <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>
 
-      Your throw: <br>
-      <template v-for="(count, number) in currentRound.myRolls">
-        <die v-for="n in count" :number="number"></die>
+      <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>
-      <br>
-      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">
-      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>
-      <md-button @click="makeGuess" class="md-raised md-primary">Guess</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>