feat: reveal vote count and source

client/src/assets/css/colors.scss

@@ -78,6 +78,14 @@ $sourcecard-selected-background-color: #ffffff;
 $sourcecard-selected-text-color: $background-primary-color;
 $sourcecard-selected-border: 3px solid #ffffff;
 $sourcecard-selected-box-shadow: 0 0 10px #ffffff;
+$sourcecard-disabled-background-color: $sourcecard-background-color;
+$sourcecard-disabled-text-color: darken($text-primary-color, 60%);
+$sourcecard-disabled-border: 3px solid #606060;
+
+// Source Card Badge
+$sourcecardbadge-background-color: #ffff88;
+$sourcecardbadge-border: 2px solid #384048;
+$sourcecardbadge-text-color: #384048;
 
 // Engine Debug
 $debug-background-color: lighten($background-primary-color, 10%);

client/src/components/Playground.vue

@@ -2,8 +2,9 @@
   <div class="playground__container">
     <div class="playground__area">
       <div class="playground__sources">
-        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" :selectable="selectable"
-          :selected="selection == source.id" @click="selectSource(source)" />
+        <SourceCard v-for="source in sources" :key="source.id" :source="source" :selectable="selectable"
+          :selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]"
+          :disabled="disabledMap[source.id]" />
       </div>
       <div class="playground__spacer" />
       <div class="playground__quote">
@@ -18,20 +19,21 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import type { Quote, Source } from '@/composables/engine.d'
+import type { Quote, Source, Sources } from '@/composables/engine.d'
 import { useRoundStore } from '@/stores/RoundStore'
 import useEngine from '@/composables/useEngine'
 import { useGameinfoStore } from "@/stores/GameinfoStore"
+import { useUserinfoStore } from "@/stores/UserinfoStore"
 
-const round = useRoundStore().round
+const { round } = useRoundStore()
 const quote = { quote: round.quote } as Quote
+const sources = round.sources as Sources
 
 const { saveSelection } = useEngine()
-const selectable = ref(true)
 const selection = ref('')
+const selectable = computed(() => game.phase === 'select-quote' && !selection.value && !round.selections[useUserinfoStore().id])
 const selectSource = async (source: Source): Promise<void> => {
   if (selectable.value) {
-    selectable.value = false
     await saveSelection(source.id)
     selection.value = source.id
   }
@@ -39,6 +41,26 @@ const selectSource = async (source: Source): Promise<void> => {
 
 const game = useGameinfoStore()
 const playerListShowCheckbox = computed(() => game.state === 'play' && game.phase === 'select-quote')
+const badgeMap = computed(() => {
+  const badgeMap = {}
+  if (game.phase === 'reveal-show-count') {
+    for (const id in round.revelation.votes) {
+      badgeMap[id] = round.revelation.votes[id].length
+    }
+  }
+  return badgeMap
+})
+
+const disabledMap = computed(() => {
+  const disabledMap = {}
+  if (game.phase === 'reveal-source') {
+    for (const id in round.revelation.sources) {
+      disabledMap[id] = !round.revelation.sources[id]
+    }
+  }
+
+  return disabledMap
+})
 </script>
 
 <style lang="scss">

client/src/components/SourceCard.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="source-card__container"
-    :class="{ 'source-card__container__selectable': selectable, 'source-card__container__selected': selected }">
-    {{  source.name  }}
+  <div :class="containerClasses">
+    <div class="source-card__source">{{ source.name }}</div>
+    <div v-if="badge" class="source-card__badge-container">
+      <div class="source-card__badge-text">
+        {{ badge }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Source } from '@/composables/engine.d'
 
-defineProps<{
+const props = defineProps<{
   source: Source,
   selectable?: boolean,
   selected?: boolean,
+  badge?: number,
+  disabled?: boolean,
 }>()
+
+const containerClasses = computed(() => {
+  return {
+    'source-card__container': true,
+    'source-card__container__selectable': props.selectable,
+    'source-card__container__selected': props.selected,
+    'source-card__container__showBadge': props.badge,
+    'source-card__container__disabled': props.disabled,
+  }
+})
 </script>
 
 <style lang="scss">
@@ -21,6 +38,7 @@ defineProps<{
 .source-card {
   &__container {
     display: flex;
+    position: relative;
     width: 180px;
     height: 40px;
     border: $sourcecard-border;
@@ -48,6 +66,34 @@ defineProps<{
       box-shadow: $sourcecard-selected-box-shadow;
       cursor: not-allowed;
     }
+
+    &__disabled {
+      background-color: $sourcecard-disabled-background-color;
+      color: $sourcecard-disabled-text-color;
+      border: $sourcecard-disabled-border;
+    }
+  }
+
+  &__badge-container {
+    position: absolute;
+    display: flex;
+    right: -16px;
+    top: -24px;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    background-color: $sourcecardbadge-background-color;
+    border: $sourcecardbadge-border;
+    border-radius: 32px;
+    color: $sourcecardbadge-text-color;
+    font-family: $font-primary;
+    font-size: 16px;
+  }
+
+  &__badge-text {
+    width: 100%;
+    text-align: center;
+    user-select: none;
   }
 }
 </style>

client/src/composables/engine.d.ts

@@ -19,7 +19,7 @@ export type Source = {
   name: string
 }
 
-export type Sources = Array<Sources>
+export type Sources = Array<Source>
 
 export type Selection = {
   id: string
@@ -35,7 +35,7 @@ export type RevelationSources = {
   [key: string]: boolean
 }
 
-export type Revelations = {
+export type Revelation = {
   votes: RevelationVotes
   sources: RevelationSources
 }
@@ -44,5 +44,5 @@ export type Round = {
   quote: string
   sources: Sources
   selections: Selections
-  revelations: Revelations
+  revelation: Revelation
 }

client/src/stores/RoundStore.ts

@@ -1,17 +1,17 @@
 import { defineStore } from 'pinia'
-import type { Round, Sources, Selections, RevelationVotes, RevelationSources } from '@/composables/engine.d'
+import type { Round, Sources, Selections, Revelation, RevelationVotes, RevelationSources } from '@/composables/engine.d'
 
 export const useRoundStore = defineStore('RoundStore', {
   state: () => {
     return {
       round: {
         quote: '',
-        sources: [],
-        selections: [],
-        revelations: {
-          votes: {},
-          sources: {},
-        },
+        sources: [] as Sources,
+        selections: [] as Selections,
+        revelation: {
+          votes: {} as RevelationVotes,
+          sources: {} as RevelationSources,
+        } as Revelation,
       } as Round,
     }
   },
@@ -21,8 +21,8 @@ export const useRoundStore = defineStore('RoundStore', {
       this.round.quote = round.quote || ''
       this.round.sources = round.sources || [] as Sources
       this.round.selections = round.selections || [] as Selections
-      this.round.revelations.votes = round.revelations?.votes || {} as RevelationVotes
-      this.round.revelations.sources = round.revelations?.sources || {} as RevelationSources
+      this.round.revelation.votes = round.revelation?.votes || {} as RevelationVotes
+      this.round.revelation.sources = round.revelation?.sources || {} as RevelationSources
     },
   },
 })