Improve guessing

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <div id="nav">
+<!--    <div id="nav">-->
-      <router-link to="/">Home</router-link> |
+<!--      <router-link to="/">Home</router-link> |-->
-      <router-link to="/about">About</router-link>
+<!--      <router-link to="/about">About</router-link>-->
-    </div>
+<!--    </div>-->
     <div class="page-container">
       <md-app>
         <md-app-content>
@@ -31,6 +31,6 @@
 
 .page-container {
   width: 1024px;
-  margin: auto;
+  margin: 100px auto auto auto;
 }
 </style>

src/objects/objects.ts

@@ -44,6 +44,7 @@ export interface RoundObject {
   turns: TurnObject[],
   loser?: PlayerObject,
   myRolls: number[],
+  rolls: number[][],
 }
 
 export interface TurnObject {
@@ -57,3 +58,8 @@ export interface PlayerObject {
   id: string,
   name: string,
 }
+
+export interface GuessAction {
+  diceCount: number,
+  dieValue: number,
+}

src/services/PerudoApi.ts

@@ -1,5 +1,5 @@
-import axios, {AxiosPromise, AxiosRequestConfig, AxiosResponse} from 'axios'
+import axios, {AxiosPromise, AxiosResponse} from 'axios'
-import {JoinCreateGameObject, IsStartedObject, ApiObject, GameStateObject, MyTurnObject} from "@/objects/objects";
+import {JoinCreateGameObject, IsStartedObject, ApiObject, GameStateObject, MyTurnObject, GuessAction} from "@/objects/objects";
 
 export default class PerudoApi {
   private static baseUrl = 'http://localhost:8000/'
@@ -14,42 +14,49 @@ export default class PerudoApi {
   }
 
   public createGame(name: string): Promise<JoinCreateGameObject> {
-    return this.get<JoinCreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
+    return this.get<JoinCreateGameObject>('game/create?name=' + name)
       .then((response: AxiosResponse<JoinCreateGameObject>) => {
         return response.data;
       })
   }
 
   public joinGame(name: string, code: string): Promise<JoinCreateGameObject> {
-    return this.get<JoinCreateGameObject>(PerudoApi.baseUrl + 'game/join/' + code + '?name=' + name)
+    return this.get<JoinCreateGameObject>('game/join/' + code + '?name=' + name)
       .then((response: AxiosResponse<JoinCreateGameObject>) => {
         return response.data;
       })
   }
 
   public gameStarted(playerId: string): Promise<IsStartedObject> {
-    return this.get<IsStartedObject>(PerudoApi.baseUrl + 'game/started/' + playerId)
+    return this.get<IsStartedObject>('game/started/' + playerId)
       .then((response: AxiosResponse<IsStartedObject>) => {
         return response.data;
       })
   }
 
   public startGame(playerId: string): Promise<ApiObject> {
-    return this.get<ApiObject>(PerudoApi.baseUrl + 'game/start/' + playerId)
+    return this.get<ApiObject>('game/start/' + playerId)
       .then((response: AxiosResponse<ApiObject>) => {
         return response.data;
       });
   }
 
   public myTurn(playerId: string): Promise<MyTurnObject> {
-    return this.get<MyTurnObject>(PerudoApi.baseUrl + 'player/turn/' + playerId)
+    return this.get<MyTurnObject>('player/turn/' + playerId)
       .then((response: AxiosResponse<MyTurnObject>) => {
         return response.data;
       })
   }
 
+  public makeGuess(playerId: string, guess: GuessAction): Promise<MyTurnObject> {
+    return this.post<MyTurnObject>('player/guess/' + playerId, guess)
+      .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>) => {
+    return axios.get(PerudoApi.baseUrl + url).then((response: AxiosResponse<T>) => {
       // @ts-ignore
       if (response?.data?.errors?.length > 0) {
         throw response.data.errors?.join();
@@ -57,4 +64,15 @@ export default class PerudoApi {
       return response;
     })
   }
+
+  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) {
+        throw response.data.errors?.join();
+      }
+      return response;
+    });
+  }
 }

src/views/Home.vue

@@ -34,7 +34,23 @@
       It is your turn! <br>
       Round: {{ currentRound.number + 1 }} <br>
       Turn: {{ currentTurn ? currentTurn.number : 1 }} <br>
-      Throws: {{ currentRound.myRolls }}
+      Throws: {{ currentRound.myRolls }} <br>
+      Players: <br>
+      <template v-for="player in gameStateObject.players">
+        - {{ player.name }} <br>
+      </template>
+      <br>
+
+      <md-field>
+        <label>Dice count</label>
+        <md-input type="number" v-model="diceCount"></md-input>
+      </md-field>
+      <md-field>
+        <label>Die value</label>
+        <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>
@@ -42,14 +58,7 @@
 <script lang="ts">
 import {Component, Vue} from 'vue-property-decorator'
 import PerudoApi from "@/services/PerudoApi";
-import {
+import {ApiObject, GameState, GameStateObject, IsStartedObject, JoinCreateGameObject, MyTurnObject, RoundObject, TurnObject} from "@/objects/objects"; // @ is an alias to /src
-  ApiObject,
-  GameState,
-  GameStateObject,
-  IsStartedObject,
-  JoinCreateGameObject,
-  MyTurnObject, RoundObject, TurnObject
-} from "@/objects/objects"; // @ is an alias to /src
 
 @Component({
   components: {}
@@ -66,6 +75,9 @@ 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 get gameJoined(): boolean {
     return this.gameState >= GameState.Joined;
   }
@@ -130,7 +142,24 @@ export default class Home extends Vue {
     }
   }
 
+  private makeGuess(): void {
+    if (this.myTurn && this.playerId) {
+      PerudoApi.instance.makeGuess(this.playerId, {
+        diceCount: parseInt(this.diceCount),
+        dieValue: parseInt(this.dieValue),
+      }).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) {
       PerudoApi.instance.gameStarted(this.playerId).then((response: IsStartedObject) => {
         if (response.started) {
@@ -147,11 +176,12 @@ export default class Home extends Vue {
   }
 
   private checkTurn(): void {
+    console.log("Check turn");
     if (this.gameStarted && this.playerId) {
       PerudoApi.instance.myTurn(this.playerId).then((response: MyTurnObject) => {
         if (response.turn) {
-          console.log(response.gameState);
           this.gameStateObject = response.gameState;
+          console.log(this.gameStateObject);
           this.gameState = GameState.MyTurn;
           this.clearGameTimer();
         }