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

src/objects/objects.ts

@@ -2,18 +2,20 @@ export enum GameState {
   Setup,
   Joined,
   Started,
+  MyTurn,
   Ended,
 }
 
+export enum GameStateState {
+  Setup = 'setup',
+  Running = 'running',
+  Ended = 'ended',
+}
+
 export interface ApiObject {
   errors?: string[],
 }
 
-export interface PlayerObject extends ApiObject  {
-  id: string,
-  name: string,
-}
-
 export interface JoinCreateGameObject extends ApiObject {
   player: PlayerObject,
   code: string,
@@ -22,3 +24,36 @@ export interface JoinCreateGameObject extends ApiObject {
 export interface IsStartedObject extends ApiObject {
   started: boolean,
 }
+
+export interface MyTurnObject extends ApiObject {
+  gameState: GameStateObject,
+  turn: boolean,
+}
+
+export interface GameStateObject {
+  state: GameStateState,
+  code: string,
+  rounds: RoundObject[],
+  players: PlayerObject[],
+  currentPlayer: PlayerObject,
+  owningPlayer: PlayerObject,
+}
+
+export interface RoundObject {
+  number: number,
+  turns: TurnObject[],
+  loser?: PlayerObject,
+  myRolls: number[],
+}
+
+export interface TurnObject {
+  number: number,
+  player: PlayerObject,
+  diceCount: number,
+  dieValue: number,
+}
+
+export interface PlayerObject {
+  id: string,
+  name: string,
+}

src/services/PerudoApi.ts

@@ -1,5 +1,5 @@
 import axios, {AxiosPromise, AxiosRequestConfig, AxiosResponse} from 'axios'
-import {JoinCreateGameObject, IsStartedObject, ApiObject} from "@/objects/objects";
+import {JoinCreateGameObject, IsStartedObject, ApiObject, GameStateObject, MyTurnObject} from "@/objects/objects";
 
 export default class PerudoApi {
   private static baseUrl = 'http://localhost:8000/'
@@ -27,7 +27,7 @@ export default class PerudoApi {
       })
   }
 
-  public startedGame(playerId: string): Promise<IsStartedObject> {
+  public gameStarted(playerId: string): Promise<IsStartedObject> {
     return this.get<IsStartedObject>(PerudoApi.baseUrl + 'game/started/' + playerId)
       .then((response: AxiosResponse<IsStartedObject>) => {
         return response.data;
@@ -41,8 +41,16 @@ export default class PerudoApi {
       });
   }
 
+  public myTurn(playerId: string): Promise<MyTurnObject> {
+    return this.get<MyTurnObject>(PerudoApi.baseUrl + 'player/turn/' + playerId)
+      .then((response: AxiosResponse<MyTurnObject>) => {
+        return response.data;
+      })
+  }
+
   private get<T extends ApiObject>(url: string, getParameters?: Record<string, any>): AxiosPromise<T> {
     return axios.get(url).then((response: AxiosResponse<T>) => {
+      // @ts-ignore
       if (response?.data?.errors?.length > 0) {
         throw response.data.errors?.join();
       }

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>