From c3e203e9d4290d02587a3e61c6c6f6895d16560b Mon Sep 17 00:00:00 2001
From: tim <tim.veenendaal@gmail.com>
Date: Wed, 28 Jul 2021 21:14:38 +0200
Subject: [PATCH] Improve history overview

---
 src/components/Round.vue      | 54 +++++++++++++++++++++++++----------
 src/components/RoundTurns.vue | 29 +++++++++++++++++++
 src/views/Home.vue            | 44 ++++++++++++++--------------
 3 files changed, 91 insertions(+), 36 deletions(-)
 create mode 100644 src/components/RoundTurns.vue

diff --git a/src/components/Round.vue b/src/components/Round.vue
index f1d8d4c..e751c0e 100644
--- a/src/components/Round.vue
+++ b/src/components/Round.vue
@@ -1,29 +1,53 @@
 <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>
+  <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></td>
+              <td>Throws</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>
+        </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>
diff --git a/src/components/RoundTurns.vue b/src/components/RoundTurns.vue
new file mode 100644
index 0000000..7a59624
--- /dev/null
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cc352cf..7ed25fc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -74,14 +74,7 @@
               <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>
+                <round-turns :round="currentRound" />
               </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" />
-          </template>
-        </template>
-      </md-app-content>
-    </md-app>
+    <template v-if="gameStateObject && gameStarted">
+      History: <br>
+      <template v-for="round in gameStateObject.rounds.slice().reverse()">
+        <round :round="round" :players="playersKeyedById"/>
+        <br>
+      </template>
+    </template>
   </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 Round from "@/components/Round.vue"; // @ 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";
+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;