select source

client/src/components/PlayerList.vue

@@ -5,7 +5,7 @@
         {{ player.isIdle ? '◯' : '⬤' }}
       </div>
       <div class="player-list__player-name">
-        {{ player.name + player.name + player.name + player.name }}
+        {{ player.name }}
       </div>
       <div class="player-list__player-score">
         {{ player.score || 0 }}
@@ -24,6 +24,7 @@ export default {
 .player-list {
   padding: 8px 16px;
   border: 1px solid #ffffff;
+  border-radius: 10px;
   background-color: rgba(64, 32, 128, 0.5);
 
   &__player {
@@ -31,7 +32,7 @@ export default {
     // height: 1.4em;
     color: #ffffff;
     font-family: Dosis;
-    font-size: 12px;
+    font-size: 18px;
 
     &-name {
       display: inline;
@@ -42,7 +43,7 @@ export default {
     }
     &-status {
       margin-right: 8px;
-      font-size: 8px;
+      font-size: 12px;
     }
     &-score {
       width: 32px;

client/src/components/Source.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="source">
-    <div class="source__source">
-      {{ source }}
+    <div
+      :class="['source__container', { 'source__container__selected': selected } ]"
+      @click="clicked"
+    >
+      <div class="source__source">
+        {{ source.name }}
+      </div>
     </div>
   </div>
 </template>
@@ -9,32 +14,66 @@
 <script>
 export default {
   props: ['source'],
+  computed: {
+    selected() {
+      return this.isSelected()
+    },
+  },
+  methods: {
+    isSelected() {
+      return this.$store.state.selection.selection[this.source.id]
+    },
+    clicked() {
+      if (this.isSelected()) {
+        this.$store.commit('selection/unselect', this.source.id)
+      } else {
+        this.$store.commit('selection/clearSelection')
+        this.$store.commit('selection/select', this.source.id)
+      }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
 .source {
   position: absolute;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   width: 180px;
   height: 30px;
   margin: -15px 0 0 -90px;
-  border: 1px solid #e0e0e0;
-  border-radius: 10px;
-  background-color: #402080;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    max-width: 180px;
+    height: 1.4em;
+    padding: 4px;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    background-color: #402080;
+    color: #ffffff;
+
+    &:hover {
+      background-color: #8060c0;
+      cursor: pointer;
+    }
+
+    &__selected,
+    &__selected:hover {
+      background-color: #ffffff;
+      color: #402080;
+    }
+  }
 
   &__source {
     width: 100%;
-    color: #ffffff;
     font-family: "Wendy One";
     text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
   }
 
-  &:hover {
-    background-color: #8060c0;
-    cursor: pointer;
-  }
 }
 </style>

client/src/store/selection.js

@@ -0,0 +1,22 @@
+export const state = () => ({
+  selection: {},
+})
+
+export const mutations = {
+  select(state, id) {
+    state.selection = {
+      ...state.selection,
+      [id]: true,
+    }
+  },
+  unselect(state, id) {
+    var selection = state.selection
+    delete selection[id]
+    state.selection = {
+      ...selection
+    }
+  },
+  clearSelection(state) {
+    state.selection = {}
+  },
+}

server/src/game/populateSyncDataCb.go

@@ -53,9 +53,17 @@ func (gm *Game) getRoundInfo() *syncdata.RoundInfo {
 		return nil
 	}
 
+	sources := make([]syncdata.SourceInfo, 0)
+	for _, source := range gm.round.sources {
+		sources = append(sources, syncdata.SourceInfo{
+			Id:   source.id,
+			Name: source.name,
+		})
+	}
+
 	roundInfo := syncdata.RoundInfo{
 		Quote:   quote.GetQuote(),
-		Sources: gm.round.sources,
+		Sources: sources,
 	}
 
 	return &roundInfo

server/src/game/runRound.go

@@ -26,16 +26,16 @@ func (gm *Game) selectQuote() {
 	defer gm.mu.Unlock()
 
 	gm.round.quoteId = "455df6bc-070d-4728-83ab-481ceafa8590"
-	gm.round.sources = []string{
-		"Herbert Grönemeyer",
-		"Frank Sinatra",
-		"Gaius Julius Cäsar",
-		"Thomas Alva Edison",
-		"Konfuzius",
-		"George W. Bush jun.",
-		// "Plato",
-		// "Chrisoph Kolumbus",
-		// "Neil Armstrong",
-		"Max Planck",
+	gm.round.sources = []Source{
+		{id: "cbc34770-3686-45ee-93bd-c5521e276e21", name: "Herbert Grönemeyer"},
+		{id: "f0422e15-59c7-480b-adea-9e54f8471f02", name: "Frank Sinatra"},
+		{id: "22915112-836e-4a11-b66c-a38a0e0f87b2", name: "Gaius Julius Cäsar"},
+		{id: "f17065b7-88e7-4777-bc48-15770a5b7c83", name: "Thomas Alva Edison"},
+		{id: "b6b3cd30-1d52-4e62-a0bd-bf3847c5c396", name: "Konfuzius"},
+		{id: "c3fc2091-ae0e-433d-b4c3-215a5b57b2b7", name: "George W. Bush jun."},
+		{id: "49514b62-96cf-4ee0-a59a-154c23b7df53", name: "Plato"},
+		{id: "7545ee0f-0447-4c15-adc2-87d85304aeea", name: "Chrisoph Kolumbus"},
+		{id: "dc20b5f1-23bc-4d80-ab2e-f3caa005064a", name: "Neil Armstrong"},
+		{id: "2b9fbc3c-589f-4176-8708-cc8239e19a4f", name: "Max Planck"},
 	}
 }

server/src/game/struct.go

@@ -25,9 +25,14 @@ type playerInfo struct {
 	isIdle    bool
 }
 
+type Source struct {
+	id   string
+	name string
+}
+
 type Round struct {
 	quoteId string
-	sources []string
+	sources []Source
 }
 
 type Game struct {

server/src/syncdata/syncdata.go

@@ -6,9 +6,14 @@ type PlayerInfo struct {
 	IsIdle bool   `json:"isIdle"`
 }
 
+type SourceInfo struct {
+	Id   string `json:"id"`
+	Name string `json:"name"`
+}
+
 type RoundInfo struct {
-	Quote   string   `json:"quote"`
-	Sources []string `json:"sources"`
+	Quote   string       `json:"quote"`
+	Sources []SourceInfo `json:"sources"`
 }
 
 type GameInfo struct {