Greatly improve the frontent for history etc.

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>

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

src/views/Home.vue

@@ -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>
+        Die value: <br>
-        <label>Die value</label>
+        <span v-for="n in 6" :key="'v'+n" @click="dieValue = n" :class="(dieValue === n) ? 'inverted' : ''">
-        <md-input type="number" v-model="dieValue"></md-input>
+        <die :number="n"></die>
-      </md-field>
+      </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) {
+        if (this.gameStateObject.state === GameStateState.Ended) {
-          console.log(this.gameStateObject);
+          this.gameState = GameState.Ended;
-          this.gameState = GameState.MyTurn;
           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>