Improve history overview

src/components/Round.vue

@@ -1,11 +1,20 @@
 <template>
-  <table v-if="round.loser">
+  <md-app v-if="round.loser">
+    <md-app-content>
+      <div class="md-layout">
+        <div class="md-layout-item centered">
+          <h3>Round {{ round.number + 1 }}, {{ round.loser.name }} lost</h3>
+        </div>
+      </div>
+      <div class="md-layout">
+        <div class="md-layout-item">
+          <table>
             <tr>
-      <td>Round: {{ round.number + 1 }}</td>
+              <td></td>
-      <td>Loser: {{ round.loser.name }}</td>
+              <td>Throws</td>
             </tr>
             <tr v-for="(playerRoll, pId) in round.rolls">
-      <td>{{ players[pId].name }}:</td>
+              <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>
@@ -13,17 +22,32 @@
               </td>
             </tr>
           </table>
+        </div>
+        <div class="md-layout-item">
+          <round-turns :round="round" />
+        </div>
+      </div>
+    </md-app-content>
+  </md-app>
 </template>
 
 <script lang="ts">
 import {Component, Prop, Vue} from 'vue-property-decorator'
 import {RoundObject, PlayerObject} from "@/objects/objects";
 import Die from "@/components/Die.vue";
+import RoundTurns from "@/components/RoundTurns.vue";
+
 @Component({
-  components: {Die}
+  components: {RoundTurns, Die}
 })
 export default class Round extends Vue {
   @Prop() private round!: RoundObject;
   @Prop() private players!: Record<string, PlayerObject>;
 }
 </script>
+
+<style scoped lang="scss">
+.centered {
+  text-align: center;
+}
+</style>

src/components/RoundTurns.vue

@@ -0,0 +1,29 @@
+<template>
+  <table>
+    <tr>
+      <td></td>
+      <td>Guesses</td>
+    </tr>
+    <tr v-for="turn in round.turns">
+      <td>
+        {{ turn.number + 1 }} - {{ turn.player.name }}
+      </td>
+      <td>
+        <die v-for="n in turn.diceCount" :number="turn.dieValue" :key="'g'+n+turn.dieValue"></die>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator'
+import {RoundObject} from "@/objects/objects";
+import Die from "@/components/Die.vue";
+
+@Component({
+  components: {Die}
+})
+export default class RoundTurns extends Vue {
+  @Prop() private round!: RoundObject;
+}
+</script>

src/views/Home.vue

@@ -74,14 +74,7 @@
               <br><br>
               <template v-if="lastTurn">
                 Last guesses: <br>
-                <table>
+                <round-turns :round="currentRound" />
-                  <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>
@@ -100,16 +93,13 @@
       </div>
     </div>
     <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" />
+        <round :round="round" :players="playersKeyedById"/>
+        <br>
       </template>
     </template>
-      </md-app-content>
-    </md-app>
   </div>
 </template>
 
@@ -117,11 +107,23 @@
 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";
+import {
-import Round from "@/components/Round.vue"; // @ is an alias to /src
+  ApiObject,
+  GameState,
+  GameStateObject,
+  IsStartedObject,
+  JoinCreateGameObject,
+  MyTurnObject,
+  RoundObject,
+  TurnObject,
+  GameStateState,
+  PlayerObject
+} from "@/objects/objects";
+import Round from "@/components/Round.vue";
+import RoundTurns from "@/components/RoundTurns.vue";
 
 @Component({
-  components: {Round, Die}
+  components: {RoundTurns, Round, Die}
 })
 export default class Home extends Vue {
   private gameState: GameState = GameState.Setup;