feat: show checkmark for already played quotes

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>

client/src/components/CollectQuotes.vue

@@ -27,6 +27,7 @@ const createNewQuote = () => {
   newQuote.value = {
     id: ':new:' + Date.now(),
     quote: '',
+    isPlayed: false,
   }
 }
 

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>

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>

server/src/game/getQuotesInfoByUser.go

@@ -28,6 +28,7 @@ func (gm *Game) getQuotesInfoByUserId(usrId string) []Quote {
 				Id:       quote.GetId(),
 				Quote:    quote.GetQuote(),
 				Created:  quote.GetCreated(),
+				IsPlayed: quote.IsPlayed(),
 			})
 		}
 	}

server/src/game/struct.go

@@ -82,6 +82,7 @@ type Quote struct {
 	Id       string `json:"id"`
 	Quote    string `json:"quote"`
 	Created  int64  `json:"created"`
+	IsPlayed bool   `json:"isPlayed"`
 }
 
 type QuotesInfo struct {