Display last turn correctly and show last guess properly

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>

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) {

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) => {
-        if (response.turn) {
         this.gameStateObject = response.gameState;
+        if (response.turn) {
           console.log(this.gameStateObject);
           this.gameState = GameState.MyTurn;
           this.clearGameTimer();