Improve ui overview and abstract certain components

src/App.vue

@@ -5,11 +5,7 @@
 <!--      <router-link to="/about">About</router-link>-->
 <!--    </div>-->
     <div class="page-container">
-      <md-app>
-        <md-app-content>
       <router-view/>
-        </md-app-content>
-      </md-app>
     </div>
   </div>
 </template>

src/components/Round.vue

@@ -0,0 +1,29 @@
+<template>
+  <table v-if="round.loser">
+    <tr>
+      <td>Round: {{ round.number + 1 }}</td>
+      <td>Loser: {{ round.loser.name }}</td>
+    </tr>
+    <tr v-for="(playerRoll, pId) in round.rolls">
+      <td>{{ players[pId].name }}:</td>
+      <td>
+        <template v-for="(count, number) in playerRoll">
+          <die v-for="n in count" :number="number" :key="'r'+pId+round.number+n+number"></die>
+        </template>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator'
+import {RoundObject, PlayerObject} from "@/objects/objects";
+import Die from "@/components/Die.vue";
+@Component({
+  components: {Die}
+})
+export default class Round extends Vue {
+  @Prop() private round!: RoundObject;
+  @Prop() private players!: Record<string, PlayerObject>;
+}
+</script>

src/objects/objects.ts

@@ -23,11 +23,12 @@ export interface JoinCreateGameObject extends ApiObject {
 
 export interface IsStartedObject extends ApiObject {
   started: boolean,
+  gameState: GameStateObject,
 }
 
 export interface MyTurnObject extends ApiObject {
-  gameState: GameStateObject,
   turn: boolean,
+  gameState: GameStateObject,
 }
 
 export interface GameStateObject {

src/views/Home.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="home">
+    <div class="md-layout">
+      <div class="md-layout-item">
+        <md-app>
+          <md-app-content>
             <div v-if="error">
               Errors: <br>
               {{ error }}
@@ -18,41 +21,8 @@
               <md-button @click="joinGame" class="md-raised">Join</md-button>
             </template>
 
-      <template v-if="gameJoined && !gameStarted">
+            <template v-if="gameJoined && !gameStarted && owner">
-        <span v-if="owner">Game created!</span>
+              <md-button @click="startGame" class="md-raised md-primary">Start</md-button>
-        <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>
-      </template>
-
-      <template v-if="gameStarted && !gameEnded">
-        The game has started, lets go! <br>
-      </template>
-
-      <template v-if="gameStateObject">
-        <span v-if="previousRound && previousRound.loser.name === name">You lost the previous round! <br></span>
-        Round: {{ currentRound.number + 1 }} <br>
-        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" :key="'g'+n+lastTurn.dieValue"></die>
-          <br>
-        </template>
-
-        Your throw: <br>
-        <template v-for="(count, number) in currentRound.myRolls">
-          <die v-for="n in count" :number="number" :key="'t'+n+number"></die>
-        </template>
-        <br>
-        <template v-if="!myTurn">Someone else is playing, waiting for your turn<br></template>
-        Players: <br>
-        <template v-for="player in gameStateObject.players">
-          - {{ player.name }} <span v-if="player.id === gameStateObject.currentPlayer.id"><--</span> <br>
-        </template>
-        <br>
             </template>
 
             <template v-if="myTurn && !gameEnded">
@@ -68,33 +38,78 @@
               <md-button @click="makeGuess" class="md-raised md-primary">Guess</md-button>
               <md-button @click="callBluff" class="md-raised md-accent">Call</md-button>
             </template>
+          </md-app-content>
+        </md-app>
+      </div>
+
+      <div class="md-layout-item">
+        <md-app>
+          <md-app-content>
+            <template v-if="gameJoined && !gameStarted">
+              <span v-if="owner">Game created!</span>
+              <span v-else>Game joined, now waiting or game to start</span>
+              <br>
+              PlayerId: {{ playerId }} <br>
+              <template v-if="gameStateObject">
+                Players: <br>
+                <template v-for="player in gameStateObject.players">
+                  - {{ player.name }}<br>
+                </template>
+              </template>
+            </template>
+
+            <template v-if="gameRunning">
+              The game has started, lets go! <br>
+            </template>
+
+            <template v-if="gameStateObject && gameRunning">
+              <span v-if="previousRound && previousRound.loser.name === name">You lost the previous round!<br></span>
+              Round: {{ currentRound.number + 1 }} <br>
+              Turn: {{ lastTurn ? lastTurn.number + 2 : 1 }} <br>
+
+              Your throw: <br>
+              <template v-for="(count, number) in currentRound.myRolls">
+                <die v-for="n in count" :number="number" :key="'t'+n+number"></die>
+              </template>
+              <br><br>
+              <template v-if="lastTurn">
+                Last guesses: <br>
+                <table>
+                  <tr v-for="turn in currentRound.turns">
+                    <td>{{ turn.player.name }} ({{ turn.number + 1 }}):</td>
+                    <td>
+                      <die v-for="n in turn.diceCount" :number="turn.dieValue" :key="'g'+n+turn.dieValue"></die>
+                    </td>
+                  </tr>
+                </table>
+              </template>
+              <br>
+              <template v-if="!myTurn">Someone else is playing, waiting for your turn<br></template>
+              Players: <br>
+              <template v-for="player in gameStateObject.players">
+                -{{ player.id === gameStateObject.currentPlayer.id ? '>' : '-' }}{{ player.name }}<br>
+              </template>
+              <br>
+            </template>
 
             <template v-if="gameEnded">
               The game is over, the winner is: {{ gameStateObject.currentPlayer.name }}<br>
             </template>
+          </md-app-content>
+        </md-app>
+      </div>
     </div>
-    <div class="home">
-      <template v-if="gameStateObject">
-        History: <br>
-        <table v-for="round in gameStateObject.rounds.slice().reverse()">
-          <template v-if="round.loser">
-            <tr>
-              <td>Round: {{ round.number + 1 }}</td>
-              <td>Loser: {{ round.loser.name }}</td>
-            </tr>
-            <tr v-for="(playerRoll, pId) in round.rolls">
-              <td>{{ playersKeyedById[pId].name }}: </td>
-              <td>
-                <template v-for="(count, number) in playerRoll">
-                  <die v-for="n in count" :number="number" :key="'r'+pId+round.number+n+number"></die>
-                </template>
-              </td>
-            </tr>
     <br>
+    <md-app>
+      <md-app-content>
+        <template v-if="gameStateObject && gameStarted">
+          History: <br>
+          <template v-for="round in gameStateObject.rounds.slice().reverse()">
+            <round :round="round" :players="playersKeyedById" />
           </template>
-        </table>
         </template>
-    </div>
+      </md-app-content>
+    </md-app>
   </div>
 </template>
 
@@ -102,10 +117,11 @@
 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, GameStateState, PlayerObject} from "@/objects/objects"; // @ is an alias to /src
+import {ApiObject, GameState, GameStateObject, IsStartedObject, JoinCreateGameObject, MyTurnObject, RoundObject, TurnObject, GameStateState, PlayerObject} from "@/objects/objects";
+import Round from "@/components/Round.vue"; // @ is an alias to /src
 
 @Component({
-  components: {Die}
+  components: {Round, Die}
 })
 export default class Home extends Vue {
   private gameState: GameState = GameState.Setup;
@@ -130,6 +146,10 @@ export default class Home extends Vue {
     return this.gameState >= GameState.Started;
   }
 
+  private get gameRunning(): boolean {
+    return this.gameStarted && !this.gameEnded;
+  }
+
   private get gameEnded(): boolean {
     return this.gameState === GameState.Ended;
   }
@@ -175,6 +195,9 @@ export default class Home extends Vue {
       this.owner = true;
 
       this.gameState = GameState.Joined;
+      this.gameTimer = setInterval(() => {
+        this.checkStarted();
+      }, 1000);
     }).catch((reason => {
       this.error = reason;
     }));
@@ -205,9 +228,7 @@ export default class Home extends Vue {
     if (this.gameJoined && this.playerId) {
       PerudoApi.instance.startGame(this.playerId).then((response: ApiObject) => {
         this.gameState = GameState.Started;
-        this.gameTimer = setInterval(() => {
+        this.gameStateObject = null; // Bug fix because checkStarted gameStateObject misses some properties
-          this.checkTurn();
-        }, 1000);
       }).catch((reason => {
         this.error = reason;
       }));
@@ -224,6 +245,7 @@ export default class Home extends Vue {
         this.gameTimer = setInterval(() => {
           this.checkTurn();
         }, 1000);
+        this.checkTurn();
       }).catch((reason => {
         this.error = reason;
       }));
@@ -237,6 +259,7 @@ export default class Home extends Vue {
         this.gameTimer = setInterval(() => {
           this.checkTurn();
         }, 1000);
+        this.checkTurn();
       }).catch((reason => {
         this.error = reason;
       }));
@@ -247,8 +270,10 @@ export default class Home extends Vue {
     console.log("Check started");
     if (this.gameJoined && this.playerId) {
       PerudoApi.instance.gameStarted(this.playerId).then((response: IsStartedObject) => {
+        this.gameStateObject = response.gameState;
         if (response.started) {
           this.gameState = GameState.Started;
+
           this.clearGameTimer();
           this.gameTimer = setInterval(() => {
             this.checkTurn();