feat: craete new quote

client/src/assets/css/colors.scss

@@ -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;
 
+// 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;
-
-// Quote
-$quote-background-color: #ffff88;
-$quote-border: none;
-$quote-text-color: #384048;

client/src/components/CollectQuotes.vue

@@ -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">

client/src/components/QuoteCard.vue

@@ -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 = {
+import useEngine from '@/composables/useEngine'
-  id: string,
+import type { Quote } from '@/composables/engine.d'
-  quote: string,
-}
 
-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>
+</style>

client/src/components/QuoteCardActionButton.vue

@@ -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>

client/src/components/QuoteCardNew.vue

@@ -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>

client/src/components/TopBar.vue

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

client/src/composables/engine/getQuotes.ts

@@ -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
-}

client/src/composables/engine/quotes.ts

@@ -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,
+  })
+}

client/src/composables/useEngine.ts

@@ -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]),
     }
 }