PlayerList

client/src/components/Play.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="play">
-    <Quote :text="quote" />
-    <Sources :sources="sources" />
+    <div class="play__layout">
+      <div class="play__layout-playground">
+        <Quote :text="quote" />
+        <Sources :sources="sources" />
+      </div>
+      <div class="play__layout-right-column">
+        <PlayerList :players="players" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -17,6 +24,9 @@ export default {
     sources() {
       return this.$store.state.round.sources
     },
+    players() {
+      return this.$store.state.players.players
+    },
   },
 }
 </script>
@@ -35,5 +45,21 @@ body,
   position: relative;
   width: 100%;
   height: 100%;
+
+  &__layout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &-playground {
+      position: relative;
+      flex-grow: 1;
+    }
+
+    &-right-column {
+      width: 200px;
+      margin: 16px 16px 0 0;
+    }
+  }
 }
 </style>

client/src/components/PlayerList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="player-list">
+    <div class="player-list__player" v-for="player in players" :key="player.id">
+      <div class="player-list__player-status">
+        {{ player.isIdle ? '◯' : '⬤' }}
+      </div>
+      <div class="player-list__player-name">
+        {{ player.name + player.name + player.name + player.name }}
+      </div>
+      <div class="player-list__player-score">
+        {{ player.score || 0 }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['players'],
+}
+</script>
+
+<style lang="scss">
+.player-list {
+  padding: 8px 16px;
+  border: 1px solid #ffffff;
+  background-color: rgba(64, 32, 128, 0.5);
+
+  &__player {
+    display: flex;
+    // height: 1.4em;
+    color: #ffffff;
+    font-family: Dosis;
+    font-size: 12px;
+
+    &-name {
+      display: inline;
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &-status {
+      margin-right: 8px;
+      font-size: 8px;
+    }
+    &-score {
+      width: 32px;
+      margin-left: 16px;
+      text-align: right;
+    }
+  }
+}
+</style>

client/src/components/Source.vue

@@ -23,6 +23,7 @@ export default {
   margin: -15px 0 0 -90px;
   border: 1px solid #e0e0e0;
   border-radius: 10px;
+  background-color: #402080;
 
   &__source {
     width: 100%;
@@ -32,7 +33,7 @@ export default {
   }
 
   &:hover {
-    background-color: rgba(128,128,128,0.5);
+    background-color: #8060c0;
     cursor: pointer;
   }
 }

client/src/plugins/engine/parseSyncData.js

@@ -3,5 +3,6 @@ export default function(data) {
 
   store.commit('engine/setJson', data)
   store.commit('game/setStateAndPhase', data.game)
+  store.commit('players/setPlayers', data.game)
   store.commit('round/setRound', data.game)
 }

client/src/store/game.js

@@ -9,7 +9,7 @@ export const mutations = {
       const { state: gameState, phase } = game
       state.state = gameState
       state.phase = phase
-    } else{
+    } else {
       state.state = ""
       state.phase = ""
     }

client/src/store/players.js

@@ -0,0 +1,13 @@
+export const state = () => ({
+  players: [],
+})
+
+export const mutations = {
+  setPlayers(state, game) {
+    if (game) {
+      state.players = game.players
+    } else {
+      state.players = []
+    }
+  },
+}