show player's checked status in playerlist

client/src/components/Player.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="player">
+    <div :class="['player__row', { 'player__row__idle': this.player.isIdle }]">
+      <div class="player__status">
+        <span v-if="gamePhase === 'select-quote'">{{ hasSelected ? '☑' : '☐' }}</span>
+      </div>
+      <div class="player__name">
+        {{ player.name }}
+      </div>
+      <div class="player__score">
+        {{ player.score || 0 }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['player'],
+  computed: {
+    gamePhase() {
+      return this.$store.state.game.phase
+    },
+    hasSelected() {
+      return this.$store.state.round.selections[this.player.id]
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.player {
+    &__row {
+      display: flex;
+      color: #ffffff;
+      font-family: Dosis;
+      font-size: 18px;
+
+      &__idle {
+        color: #606060;
+      }
+    }
+
+    &__name {
+      display: inline;
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &__status {
+      width: 20px;
+    }
+    &__score {
+      width: 32px;
+      margin-left: 16px;
+      text-align: right;
+    }
+}
+</style>

client/src/components/PlayerList.vue

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