feat: craete new quote

This commit is contained in:
Settel 2022-08-09 22:36:39 +02:00
parent f629d7cdb3
commit b25adb6aa6
9 changed files with 154 additions and 27 deletions

View File

@ -33,7 +33,6 @@ $button-disabled-background-color: #006080;
$button-disabled-text-color: #102028; $button-disabled-text-color: #102028;
$button-disabled-border: 4px solid #004060; $button-disabled-border: 4px solid #004060;
// Topbar // Topbar
$topbar-background-color: #006898; $topbar-background-color: #006898;
$topbar-separator-color: #ffffff; $topbar-separator-color: #ffffff;
@ -42,12 +41,23 @@ $topbar-separator-color: #ffffff;
$alert-background-color: #A06060; $alert-background-color: #A06060;
$alert-border: 2px solid #F0A0A0; $alert-border: 2px solid #F0A0A0;
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;
$debug-text-color: $text-primary-color;
// Quote // Quote
$quote-background-color: #ffff88; $quote-background-color: #ffff88;
$quote-border: none; $quote-border: none;
$quote-text-color: #384048; $quote-text-color: #384048;
$quote-new-background-color: none;
$quote-new-border: 5px dashed #ffffff;
$quote-new-text-color: #ffffff;
// Quote Button
$quote-button-background-color: #00a0e0;
$quote-button-text-color: #000000;
$quote-button-border: none;
$quote-button-hover-background-color: $button-hover-background-color;
$quote-button-hover-text-color: $quote-button-text-color;
$quote-button-hover-border: none;
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;
$debug-text-color: $text-primary-color;

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="collect-quotes__container"> <div class="collect-quotes__container">
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" /> <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
<QuoteCardNew />
</div> </div>
</template> </template>
@ -8,7 +9,6 @@
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
const engine = useEngine() const engine = useEngine()
const quotes = await engine.getQuotes() const quotes = await engine.getQuotes()
console.log(quotes)
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -1,5 +1,9 @@
<template> <template>
<div class="quote__container"> <div class="quote-card__container" :class="{ 'quote-card__container__editable': editable }">
<div v-if="editable" class="quote-card__action-buttons">
<QuoteCardActionButton @click="editQuote"></QuoteCardActionButton>
<QuoteCardActionButton @click="deleteQuote">🗑</QuoteCardActionButton>
</div>
<div class="quote__quote"> <div class="quote__quote">
{{ quote.quote }} {{ quote.quote }}
</div> </div>
@ -7,22 +11,28 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
type Quote = { import useEngine from '@/composables/useEngine'
id: string, import type { Quote } from '@/composables/engine.d'
quote: string,
}
defineProps<{ const props = defineProps<{
quote: Quote, quote: Quote,
editable?: boolean, editable?: boolean,
}>() }>()
const editQuote = () => {
console.warn('editQuote() not yet implemented')
}
const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @import '~/assets/css/components';
.quote { .quote-card {
&__container { &__container {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
width: 300px; width: 300px;
@ -33,6 +43,14 @@ defineProps<{
border: $quote-border; border: $quote-border;
border-radius: 0 16px 0 0; border-radius: 0 16px 0 0;
color: $quote-text-color; color: $quote-text-color;
&__editable {
cursor: text;
& .quote__quote {
cursor: text;
}
}
} }
&__quote { &__quote {
@ -40,6 +58,14 @@ defineProps<{
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
cursor: default;
}
&__action-buttons {
position: absolute;
right: -28px;
top: -24px;
display: flex;
} }
} }
</style> </style>

View File

@ -0,0 +1,30 @@
<template>
<button class="quote-card-action-button__button">
<slot />
</button>
</template>
<style lang="scss">
@import '~/assets/css/components';
.quote-card-action-button {
&__button {
margin: 0 4px;
width: 48px;
height: 48px;
border: $quote-button-border;
border-radius: 48px;
background-color: $quote-button-background-color;
color: $quote-button-text-color;
font-family: $font-secondary;
font-size: 24px;
cursor: pointer;
&:hover {
border: $quote-button-hover-border;
background-color: $quote-button-hover-background-color;
color: $quote-button-hover-text-color;
}
}
}
</style>

View File

@ -0,0 +1,37 @@
<template>
<div class="quote-card-new__container" @click="newQuote">
<div class="quote-card-new__new">+</div>
</div>
</template>
<script setup lang="ts">
import useEngine from '@/composables/useEngine'
const newQuote = () => useEngine().createQuote('something is going to happen')
</script>
<style lang="scss">
@import '~/assets/css/components';
.quote-card-new {
&__container {
position: relative;
display: flex;
align-items: center;
width: 300px;
height: 150px;
margin: 32px;
padding: 32px;
background-color: $quote-new-background-color;
border: $quote-new-border;
border-radius: 0 16px 0 0;
cursor: pointer;
}
&__new {
width: 100%;
font-size: 72px;
color: $quote-new-text-color;
text-align: center;
}
}
</style>

View File

@ -50,6 +50,7 @@ const actionLogout = async () => {
font-size: 16px; font-size: 16px;
font-family: $font-primary; font-family: $font-primary;
font-weight: bold; font-weight: bold;
cursor: default;
} }
&__username, &__username,

View File

@ -1,11 +0,0 @@
import type { Quotes } from '@/composables/engine.d'
import { useUserinfoStore } from "@/stores/UserinfoStore"
export async function getQuotes(): Promise<Quotes> {
const userInfoStore = useUserinfoStore()
const response = await this.callApi('/api/getQuotes', {
g: userInfoStore.gameId,
})
return response.quotes
}

View File

@ -0,0 +1,28 @@
import type { Quotes } from '@/composables/engine.d'
import { useUserinfoStore } from "@/stores/UserinfoStore"
export async function getQuotes(): Promise<Quotes> {
const userInfoStore = useUserinfoStore()
const response = await this.callApi('/api/getQuotes', {
g: userInfoStore.gameId,
})
return response.quotes
}
export async function deleteQuote(id: string): Promise<void> {
const userInfoStore = useUserinfoStore()
await this.callApi('/api/removeQuote', {
g: userInfoStore.gameId,
id,
})
}
export async function saveQuote(id: string, quote: string): Promise<void> {
const userInfoStore = useUserinfoStore()
await this.callApi('/api/saveQuote', {
g: userInfoStore.gameId,
id,
quote,
})
}

View File

@ -2,7 +2,7 @@ import { Ref, ref } from 'vue'
import { callApi, QueryParams } from '@/composables/engine/callApi' import { callApi, QueryParams } from '@/composables/engine/callApi'
import { start, stop } from '@/composables/engine/startStop' import { start, stop } from '@/composables/engine/startStop'
import { fetchUpdate } from '@/composables/engine/fetchUpdate' import { fetchUpdate } from '@/composables/engine/fetchUpdate'
import { getQuotes } from '@/composables/engine/getQuotes' import { getQuotes, deleteQuote, createQuote, saveQuote } from '@/composables/engine/quotes'
import type { Quotes } from '@/composables/engine.d' import type { Quotes } from '@/composables/engine.d'
interface EngineContext { interface EngineContext {
@ -23,6 +23,9 @@ export interface useEngine {
stop(): void stop(): void
fetchUpdate(): void fetchUpdate(): void
getQuotes(): Promise<Quotes> getQuotes(): Promise<Quotes>
createQuote(quote: string): Promise<void>
saveQuote(id: string, quote: string): Promise<void>
deleteQuote(id: string): Promise<void>
} }
export default (): useEngine => { export default (): useEngine => {
@ -45,5 +48,8 @@ export default (): useEngine => {
stop: () => stop.apply(context), stop: () => stop.apply(context),
fetchUpdate: () => fetchUpdate.apply(context), fetchUpdate: () => fetchUpdate.apply(context),
getQuotes: () => getQuotes.apply(context), getQuotes: () => getQuotes.apply(context),
createQuote: (quote: string) => saveQuote.apply(context, [':new:', quote]),
saveQuote: (id: string, quote: string) => saveQuote.apply(context, [id, quote]),
deleteQuote: (id) => deleteQuote.apply(context, [id]),
} }
} }