feat: reveal vote count and source

This commit is contained in:
Settel 2022-08-31 14:39:13 +02:00
parent cb5895d8d8
commit a26cc7aa41
5 changed files with 98 additions and 22 deletions

View File

@ -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%);

View File

@ -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">

View File

@ -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>

View File

@ -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
}

View File

@ -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
},
},
})