Add timer to check if game is started and its your turn and implement gameStateObject from api

src/views/Home.vue

@@ -19,35 +19,43 @@
 
     <template v-if="gameJoined && !gameStarted">
       <span v-if="owner">Game created!</span>
-      <span v-else>Game joined!</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>
-      <md-button v-else @click="checkStarted" class="md-raised md-primary">Check</md-button>
     </template>
 
     <template v-if="gameStarted">
       The game has started, lets go!
     </template>
 
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <template v-if="myTurn">
+      It is your turn! <br>
+      Round: {{ currentRound.number }} <br>
+      Turn: {{ currentTurn ? currentTurn.number : -1 }}
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import {Component, Vue} from 'vue-property-decorator'
-import HelloWorld from '@/components/HelloWorld.vue'
 import PerudoApi from "@/services/PerudoApi";
-import {ApiObject, GameState, IsStartedObject, JoinCreateGameObject} from "@/objects/objects"; // @ is an alias to /src
+import {
+  ApiObject,
+  GameState,
+  GameStateObject,
+  IsStartedObject,
+  JoinCreateGameObject,
+  MyTurnObject, RoundObject, TurnObject
+} from "@/objects/objects"; // @ is an alias to /src
 
 @Component({
-  components: {
-    HelloWorld,
-  }
+  components: {}
 })
 export default class Home extends Vue {
   private gameState: GameState = GameState.Setup;
+  private gameStateObject?: GameStateObject;
   private error: string | null = null;
 
   private name: string = 'Bobby';
@@ -55,6 +63,7 @@ export default class Home extends Vue {
   private owner: boolean = false;
 
   private playerId: string | null = null;
+  private gameTimer: number | null = null;
 
   private get gameJoined(): boolean {
     return this.gameState >= GameState.Joined;
@@ -64,7 +73,21 @@ export default class Home extends Vue {
     return this.gameState >= GameState.Started;
   }
 
-  private createGame() {
+  private get myTurn(): boolean {
+    return this.gameState === GameState.MyTurn;
+  }
+
+  private get currentRound(): RoundObject | undefined {
+    let rounds = this.gameStateObject?.rounds;
+    return rounds ? rounds[rounds.length - 1] : undefined;
+  }
+
+  private get currentTurn(): TurnObject | undefined {
+    let turns = this.currentRound?.turns;
+    return turns ? turns[turns.length - 1] : undefined;
+  }
+
+  private createGame(): void {
     PerudoApi.instance.createGame(this.name).then((response: JoinCreateGameObject) => {
       this.playerId = response.player.id;
       this.code = response.code;
@@ -76,13 +99,16 @@ export default class Home extends Vue {
     }));
   }
 
-  private joinGame() {
+  private joinGame(): void {
     if (this.code === '') {
       this.error = "Game code cannot be empty when joining a game";
       return;
     }
     PerudoApi.instance.joinGame(this.name, this.code).then((response: JoinCreateGameObject) => {
       this.playerId = response.player.id;
+      this.gameTimer = setInterval(() => {
+        this.checkStarted();
+      }, 1000);
 
       this.gameState = GameState.Joined;
     }).catch((reason => {
@@ -90,8 +116,8 @@ export default class Home extends Vue {
     }));
   }
 
-  private startGame() {
-    if (this.playerId) {
+  private startGame(): void {
+    if (this.gameJoined && this.playerId) {
       PerudoApi.instance.startGame(this.playerId).then((response: ApiObject) => {
         this.gameState = GameState.Started;
       }).catch((reason => {
@@ -100,16 +126,40 @@ export default class Home extends Vue {
     }
   }
 
-  private checkStarted() {
-    if (this.playerId) {
-      PerudoApi.instance.startedGame(this.playerId).then((response: IsStartedObject) => {
+  private checkStarted(): void {
+    if (this.gameJoined && this.playerId) {
+      PerudoApi.instance.gameStarted(this.playerId).then((response: IsStartedObject) => {
         if (response.started) {
           this.gameState = GameState.Started;
+          this.clearGameTimer();
+          this.gameTimer = setInterval(() => {
+            this.checkTurn();
+          }, 1000);
         }
       }).catch((reason => {
         this.error = reason;
       }));
     }
   }
+
+  private checkTurn(): void {
+    if (this.gameStarted && this.playerId) {
+      PerudoApi.instance.myTurn(this.playerId).then((response: MyTurnObject) => {
+        if (response.turn) {
+          console.log(response.gameState);
+          this.gameStateObject = response.gameState;
+          this.gameState = GameState.MyTurn;
+          this.clearGameTimer();
+        }
+      });
+    }
+  }
+
+  private clearGameTimer(): void {
+    if (this.gameTimer) {
+      clearInterval(this.gameTimer);
+      this.gameTimer = null;
+    }
+  }
 }
 </script>