feat: show quote and sources in play mode

This commit is contained in:
Settel 2022-08-29 22:57:34 +02:00
parent 142f2e289c
commit cc12d27c46
4 changed files with 117 additions and 1 deletions

View File

@ -1,9 +1,66 @@
<template>
<p>Playground.vue</p>
<div class="playground__container">
<div class="playground__area">
<div class="playground__sources">
<SourceCard v-for="source in round.sources" :key="source.id" :source="source" />
</div>
<div class="playground__spacer" />
<div class="playground__quote">
<QuoteCard :quote="quote" />
</div>
</div>
<div class="playground__players-list">
<PlayerList :players="players" />
</div>
</div>
</template>
<script setup lang="ts">
import { usePlayersStore } from '@/stores/PlayersStore'
import { useRoundStore } from '@/stores/RoundStore'
const players = usePlayersStore().players
const round = useRoundStore().round
const quote = {
quote: round.quote,
}
</script>
<style lang="scss">
.playground {
&__container {
display: flex;
width: 100%;
height: 100%;
}
&__area {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 40px;
}
&__sources {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 24px 36px;
}
&__spacer {
flex-grow: 3;
}
&__quote {
display: flex;
justify-content: center;
flex-grow: 4;
}
&__players-list {
width: 200px;
margin: 16px 16px 0 0;
}
}
</style>

View File

@ -0,0 +1,28 @@
<template>
<div class="source-card__container">
{{ source.name }}
</div>
</template>
<script setup lang="ts">
defineProps<{
source: {
id: string
name: string
},
}>()
</script>
<style lang="scss">
.source-card {
&__container {
display: flex;
width: 180px;
height: 40px;
border: 3px solid white;
border-radius: 8px;
justify-content: center;
align-items: center;
}
}
</style>

View File

@ -1,6 +1,7 @@
import { useEngineStore } from "@/stores/EngineStore"
import { useUserinfoStore } from "@/stores/UserinfoStore"
import { useGameinfoStore } from "@/stores/GameinfoStore"
import { useRoundStore } from "@/stores/RoundStore"
import { usePlayersStore } from "@/stores/PlayersStore"
export async function fetchUpdate() {
@ -29,6 +30,7 @@ export async function fetchUpdate() {
useEngineStore().setJson(response)
useGameinfoStore().setGameinfo(response.game)
useRoundStore().setRound(response.game.round)
usePlayersStore().setPlayers(response.game.players)
// apply rate limit

View File

@ -0,0 +1,29 @@
import { defineStore } from 'pinia'
export type Source = {
id: string
name: string
}
export type Round = {
quote: string
sources: Array<Source>
}
export const useRoundStore = defineStore('RoundStore', {
state: () => {
return {
round: {
quote: '',
sources: [],
} as Round,
}
},
actions: {
setRound(round: Round): void {
round = round || {} as Round
this.round.quote = round.quote
this.round.sources = round.sources
},
},
})