feat: add Quote component
This commit is contained in:
parent
e5b4c9262e
commit
72b2c7c76d
@ -46,3 +46,8 @@ $alert-border: 2px solid #F0A0A0;
|
|||||||
$debug-background-color: lighten($background-primary-color, 10%);
|
$debug-background-color: lighten($background-primary-color, 10%);
|
||||||
$debug-border: none;
|
$debug-border: none;
|
||||||
$debug-text-color: $text-primary-color;
|
$debug-text-color: $text-primary-color;
|
||||||
|
|
||||||
|
// Quote
|
||||||
|
$quote-background-color: #ffff88;
|
||||||
|
$quote-border: none;
|
||||||
|
$quote-text-color: #384048;
|
26
client/src/components/CollectQuotes.vue
Normal file
26
client/src/components/CollectQuotes.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div class="collect-quotes__container">
|
||||||
|
<h1>collect quotes</h1>
|
||||||
|
<Quote v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const quotes = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
quote: 'Somna imanus it vorgenstra exa al termanum.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.collect-quotes {
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
43
client/src/components/Quote.vue
Normal file
43
client/src/components/Quote.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="quote__container">
|
||||||
|
<div class="quote__quote">
|
||||||
|
{{ quote.quote }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
type Quote = {
|
||||||
|
id: string,
|
||||||
|
quote: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
quote: Quote,
|
||||||
|
editable?: boolean,
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '~/assets/css/components';
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 460px;
|
||||||
|
height: 210px;
|
||||||
|
margin: 32px;
|
||||||
|
padding: 32px;
|
||||||
|
background-color: $quote-background-color;
|
||||||
|
border: $quote-border;
|
||||||
|
color: $quote-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__quote {
|
||||||
|
font-size: 24px;
|
||||||
|
border-radius: 0 16px 0 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -7,7 +7,11 @@
|
|||||||
</AlertBox>
|
</AlertBox>
|
||||||
<div class="page-play__playfield-container">
|
<div class="page-play__playfield-container">
|
||||||
<div class="page-play__playfield-content">
|
<div class="page-play__playfield-content">
|
||||||
<Lobby v-if="game.state === 'idle'"/>
|
<Lobby v-if="game.state === 'idle'" />
|
||||||
|
<CollectQuotes v-if="game.state === 'collect'" />
|
||||||
|
<!-- <ReadySet v-if="game.state === 'ready-set'" :text="game.phase" /> -->
|
||||||
|
<!-- <Play v-if="game.state === 'play'" /> -->
|
||||||
|
<!-- <Final v-if="game.state === 'final'" /> -->
|
||||||
</div>
|
</div>
|
||||||
<EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
|
<EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user