Make IncompleteGame and LobbyGame look similar

Author: Zomis

src/views/lobby/IncompleteGame.vue

@@ -1,17 +1,37 @@
 <template>
-  <v-card color="#ddf9fd">
-    <span>GameId {{ game.gameId }}</span
-    ><br />
-    <span>Clicks {{ game.clicks }}</span>
-    <div class="game-player-info">
-      <div v-for="(info, index) in playerScores" :key="index">
-        {{ info.player }} ({{ info.score }})
-      </div>
-    </div>
-    <v-btn @click="resume()">Resume</v-btn>
+  <v-card>
+    <v-layout column align-space-around justify-center>
+      <v-layout row align-center justify-center fill-height>
+        <v-layout
+          v-for="(info, index) in playerScores"
+          :key="index"
+          column
+          align-center
+          justify-center
+          :class="{ currentPlayer: game.currentPlayerIndex === index }"
+        >
+          <img
+            style="width: 36px; height: 36px"
+            :src="users[index].picture"
+            v-if="users[index] && users[index].picture"
+          />
+          <v-icon large v-else>help</v-icon>
+          <span>{{ info.player }}</span>
+          <span>{{ info.score }}</span>
+        </v-layout>
+      </v-layout>
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on }">
+          <v-btn @click="resume()" v-on="on">Resume</v-btn>
+        </template>
+        <span>GameId {{ game.gameId }}</span>
+      </v-tooltip>
+    </v-layout>
   </v-card>
 </template>
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "IncompleteGame",
   props: ["game"],
@@ -32,7 +52,14 @@ export default {
     },
     scores() {
       return this.game.scores.split(",");
-    }
+    },
+    ...mapState("lobby", {
+      users(state) {
+        return this.game.players.map(
+          player => state.onlineUsers[player.playerName]
+        );
+      }
+    })
   }
 };
 </script>

src/views/lobby/Lobby.vue

@@ -6,7 +6,7 @@
         <v-layout row wrap align-space-around>
           <LobbyBox class="xs12" title="Your Games">
             <SmallBox
-              class="xs12"
+              class="xs12 md6"
               v-for="game in incompleteGames"
               :key="game.gameId"
             >
@@ -34,7 +34,7 @@
 
           <LobbyBox class="xs12" title="Other Games" transition="true">
             <template v-for="(game, index) in lobbyGames">
-              <SmallBox class="xs12 md6 lg4" :key="index">
+              <SmallBox class="xs12 md6" :key="index">
                 <LobbyGame :game="game" />
               </SmallBox>
             </template>

src/views/lobby/LobbyGame.vue

@@ -1,31 +1,33 @@
 <template>
   <v-card>
-    <v-layout column align-space-around justify-center>
-      <v-layout row align-center justify-center fill-height>
+    <v-layout row wrap align-center justify-center>
+      <v-flex xs6 v-for="(info, index) in game.players" :key="index">
         <v-layout
-          v-for="(info, index) in game.players"
-          :key="index"
           column
           align-center
           justify-center
           :class="{ currentPlayer: game.currentPlayerIndex === index }"
         >
           <img
-            style="width: 36px; height: 36px"
+            style="width: 36px; height: 36px; margin-top: 4px"
             :src="users[index].picture"
             v-if="users[index] && users[index].picture"
           />
           <v-icon large v-else>help</v-icon>
           <span>{{ info.playerName }}</span>
           <span>{{ info.score }}</span>
         </v-layout>
-      </v-layout>
-      <v-tooltip bottom>
-        <template v-slot:activator="{ on }">
-          <v-btn @click="observe()" v-on="on">Observe</v-btn>
-        </template>
-        <span>GameId {{ game.gameId }}</span>
-      </v-tooltip>
+      </v-flex>
+      <v-flex xs12>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on }">
+            <v-btn style="align-self: center" @click="observe()" v-on="on">
+              Observe
+            </v-btn>
+          </template>
+          <span>GameId {{ game.gameId }}</span>
+        </v-tooltip>
+      </v-flex>
     </v-layout>
   </v-card>
 </template>