66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
|
<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> |