Improve history overview

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;