feat: craete new quote
This commit is contained in:
Settel
parent
f629d7cdb3
commit
b25adb6aa6
@ -33,7 +33,6 @@ $button-disabled-background-color: #006080;
|
||||
$button-disabled-text-color: #102028;
|
||||
$button-disabled-border: 4px solid #004060;
|
||||
|
||||
|
||||
// Topbar
|
||||
$topbar-background-color: #006898;
|
||||
$topbar-separator-color: #ffffff;
|
||||
@ -42,12 +41,23 @@ $topbar-separator-color: #ffffff;
|
||||
$alert-background-color: #A06060;
|
||||
$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-background-color: #ffff88;
|
||||
$quote-border: none;
|
||||
$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;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="collect-quotes__container">
|
||||
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
|
||||
<QuoteCardNew />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,7 +9,6 @@
|
||||
import useEngine from '@/composables/useEngine'
|
||||
const engine = useEngine()
|
||||
const quotes = await engine.getQuotes()
|
||||
console.log(quotes)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<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">
|
||||
{{ quote.quote }}
|
||||
</div>
|
||||
@ -7,22 +11,28 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Quote = {
|
||||
id: string,
|
||||
quote: string,
|
||||
}
|
||||
import useEngine from '@/composables/useEngine'
|
||||
import type { Quote } from '@/composables/engine.d'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
quote: Quote,
|
||||
editable?: boolean,
|
||||
}>()
|
||||
|
||||
|
||||
const editQuote = () => {
|
||||
console.warn('editQuote() not yet implemented')
|
||||
}
|
||||
|
||||
const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/css/components';
|
||||
|
||||
.quote {
|
||||
.quote-card {
|
||||
&__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
@ -33,6 +43,14 @@ defineProps<{
|
||||
border: $quote-border;
|
||||
border-radius: 0 16px 0 0;
|
||||
color: $quote-text-color;
|
||||
|
||||
&__editable {
|
||||
cursor: text;
|
||||
|
||||
& .quote__quote {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__quote {
|
||||
@ -40,6 +58,14 @@ defineProps<{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&__action-buttons {
|
||||
position: absolute;
|
||||
right: -28px;
|
||||
top: -24px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
client/src/components/QuoteCardActionButton.vue
Normal file
30
client/src/components/QuoteCardActionButton.vue
Normal 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>
|
||||
37
client/src/components/QuoteCardNew.vue
Normal file
37
client/src/components/QuoteCardNew.vue
Normal 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>
|
||||
@ -50,6 +50,7 @@ const actionLogout = async () => {
|
||||
font-size: 16px;
|
||||
font-family: $font-primary;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&__username,
|
||||
|
||||
@ -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
|
||||
}
|
||||
28
client/src/composables/engine/quotes.ts
Normal file
28
client/src/composables/engine/quotes.ts
Normal 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,
|
||||
})
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { Ref, ref } from 'vue'
|
||||
import { callApi, QueryParams } from '@/composables/engine/callApi'
|
||||
import { start, stop } from '@/composables/engine/startStop'
|
||||
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'
|
||||
|
||||
interface EngineContext {
|
||||
@ -23,6 +23,9 @@ export interface useEngine {
|
||||
stop(): void
|
||||
fetchUpdate(): void
|
||||
getQuotes(): Promise<Quotes>
|
||||
createQuote(quote: string): Promise<void>
|
||||
saveQuote(id: string, quote: string): Promise<void>
|
||||
deleteQuote(id: string): Promise<void>
|
||||
}
|
||||
|
||||
export default (): useEngine => {
|
||||
@ -45,5 +48,8 @@ export default (): useEngine => {
|
||||
stop: () => stop.apply(context),
|
||||
fetchUpdate: () => fetchUpdate.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]),
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user