From 24c5554a4154e47dfc7914f6cb5725eb973e67d9 Mon Sep 17 00:00:00 2001
From: Tim van Veenendaal <tim.vanveenendaal@c-quential.nl>
Date: Wed, 14 Jul 2021 15:18:57 +0200
Subject: [PATCH] Display last turn correctly and show last guess properly

---
 src/components/Die.vue    | 12 ++++++++++++
 src/services/PerudoApi.ts |  1 -
 src/views/Home.vue        | 37 +++++++++++++++++++++++--------------
 3 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Die.vue

diff --git a/src/components/Die.vue b/src/components/Die.vue
new file mode 100644
index 0000000..9a38939
--- /dev/null
+++ b/src/components/Die.vue
@@ -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>
diff --git a/src/services/PerudoApi.ts b/src/services/PerudoApi.ts
index b1a197a..204556e 100644
--- a/src/services/PerudoApi.ts
+++ b/src/services/PerudoApi.ts
@@ -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) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e1def9c..697ad74 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -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();