From 0e67101943e93ddf8cfe023b66653fef9dae4f12 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Thu, 26 Aug 2021 12:23:32 +0200
Subject: [PATCH] PlayerList

---
 client/src/components/Play.vue             | 30 +++++++++++-
 client/src/components/PlayerList.vue       | 54 ++++++++++++++++++++++
 client/src/components/Source.vue           |  3 +-
 client/src/plugins/engine/parseSyncData.js |  1 +
 client/src/store/game.js                   |  2 +-
 client/src/store/players.js                | 13 ++++++
 6 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/PlayerList.vue
 create mode 100644 client/src/store/players.js

diff --git a/client/src/components/Play.vue b/client/src/components/Play.vue
index 901eb44..022a514 100644
--- a/client/src/components/Play.vue
+++ b/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>
diff --git a/client/src/components/PlayerList.vue b/client/src/components/PlayerList.vue
new file mode 100644
index 0000000..7cb26e6
--- /dev/null
+++ b/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>
diff --git a/client/src/components/Source.vue b/client/src/components/Source.vue
index 3dd423c..8a58291 100644
--- a/client/src/components/Source.vue
+++ b/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;
   }
 }
diff --git a/client/src/plugins/engine/parseSyncData.js b/client/src/plugins/engine/parseSyncData.js
index 17b8734..61910e5 100644
--- a/client/src/plugins/engine/parseSyncData.js
+++ b/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)
 }
diff --git a/client/src/store/game.js b/client/src/store/game.js
index 2a56935..dcf9e04 100644
--- a/client/src/store/game.js
+++ b/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 = ""
     }
diff --git a/client/src/store/players.js b/client/src/store/players.js
new file mode 100644
index 0000000..71452fa
--- /dev/null
+++ b/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 = []
+    }
+  },
+}