From 6787f1c3f82d7d416b158ba30a39bfe84d6ba2fe Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 18 Jun 2023 15:07:45 +0200
Subject: [PATCH] feat: show checkmark for already played quotes

---
 client/src/assets/icons/checkmark.svg   | 49 +++++++++++++++++++++++++
 client/src/components/CollectQuotes.vue |  1 +
 client/src/components/QuoteCard.vue     | 18 ++++++++-
 client/src/composables/engine.d.ts      |  1 +
 server/src/game/getQuotesInfoByUser.go  |  7 ++--
 server/src/game/struct.go               |  7 ++--
 6 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 client/src/assets/icons/checkmark.svg

diff --git a/client/src/assets/icons/checkmark.svg b/client/src/assets/icons/checkmark.svg
new file mode 100644
index 0000000..aff2311
--- /dev/null
+++ b/client/src/assets/icons/checkmark.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="100"
+   viewBox="0 0 128 100"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="checkmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="2.3786088"
+     inkscape:cx="10.720552"
+     inkscape:cy="21.441105"
+     inkscape:window-width="1920"
+     inkscape:window-height="1181"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1"
+     showborder="true" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#4bc417;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 93.253283,6.1273107 C 100.05266,14.282038 108.74264,17.439899 117.91216,22.197816 104.79242,27.143529 52.350943,76.132207 44.577742,96.156471 42.587301,88.868507 16.14146,63.021362 10.575889,61.270758 c 6.682863,-3.009693 20.41554,-9.619427 23.978573,-15.275893 0.758717,5.579065 9.653081,21.558694 9.653081,21.558694 8.596139,-4.086698 48.882074,-51.182042 49.04574,-61.4262483 z"
+       id="path790"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>
diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index fa134c5..1796d57 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -27,6 +27,7 @@ const createNewQuote = () => {
   newQuote.value = {
     id: ':new:' + Date.now(),
     quote: '',
+    isPlayed: false,
   }
 }
 
diff --git a/client/src/components/QuoteCard.vue b/client/src/components/QuoteCard.vue
index 05cb8e7..36aedcd 100644
--- a/client/src/components/QuoteCard.vue
+++ b/client/src/components/QuoteCard.vue
@@ -1,7 +1,10 @@
 <template>
   <div :class="cssClasses">
+    <div v-if="quote.isPlayed" class="quote-card__marker__is-played">
+      <nuxt-icon name="checkmark" filled />
+    </div>
     <div v-if="editable && !isEditMode" class="quote-card__action-buttons">
-      <QuoteCardActionButton @click="editQuote" icon="edit" />
+      <QuoteCardActionButton v-if="!quote.isPlayed" @click="editQuote" icon="edit" />
       <QuoteCardActionButton @click="deleteQuote" icon="trash" />
     </div>
     <div class="quote-card__text-container">
@@ -180,5 +183,18 @@ const keydown = async (ev: KeyboardEvent) => {
     top: -24px;
     display: flex;
   }
+
+  &__marker__is-played {
+    position: absolute;
+    left: -28px;
+    top: -40px;
+    width: 128px;
+    height: 100px;
+
+    .nuxt-icon svg {
+      width: unset;
+      height: unset;
+    }
+  }
 }
 </style>
diff --git a/client/src/composables/engine.d.ts b/client/src/composables/engine.d.ts
index 902d440..a101441 100644
--- a/client/src/composables/engine.d.ts
+++ b/client/src/composables/engine.d.ts
@@ -24,6 +24,7 @@ export type PlayerInfo = PlayerEdit & {
 export type Quote = {
   id: string
   quote: string
+  isPlayed: boolean
 }
 
 export type Quotes = Array<Quote>
diff --git a/server/src/game/getQuotesInfoByUser.go b/server/src/game/getQuotesInfoByUser.go
index 19302ed..3bdee3f 100644
--- a/server/src/game/getQuotesInfoByUser.go
+++ b/server/src/game/getQuotesInfoByUser.go
@@ -25,9 +25,10 @@ func (gm *Game) getQuotesInfoByUserId(usrId string) []Quote {
 	for _, quote := range gm.quotes {
 		if quote.GetSourceId() == usrId {
 			quotes = append(quotes, Quote{
-				Id:      quote.GetId(),
-				Quote:   quote.GetQuote(),
-				Created: quote.GetCreated(),
+				Id:       quote.GetId(),
+				Quote:    quote.GetQuote(),
+				Created:  quote.GetCreated(),
+				IsPlayed: quote.IsPlayed(),
 			})
 		}
 	}
diff --git a/server/src/game/struct.go b/server/src/game/struct.go
index 9422c06..8377aa7 100644
--- a/server/src/game/struct.go
+++ b/server/src/game/struct.go
@@ -79,9 +79,10 @@ type GameJson struct {
 }
 
 type Quote struct {
-	Id      string `json:"id"`
-	Quote   string `json:"quote"`
-	Created int64  `json:"created"`
+	Id       string `json:"id"`
+	Quote    string `json:"quote"`
+	Created  int64  `json:"created"`
+	IsPlayed bool   `json:"isPlayed"`
 }
 
 type QuotesInfo struct {