show completed badge when progress is 100%

src/components/GameCards/GameCard.js

@@ -16,6 +16,14 @@ export default {
     // TODO: remove getter
     ...mapGetters(['gameTags']),
 
+    showCompletedBadge() {
+      return this.gameProgress && Number(this.gameProgress) === 100;
+    },
+
+    showGameProgress() {
+      return this.gameProgress && Number(this.gameProgress) < 100;
+    },
+
     showGameTags() {
       const { settings } = this.list;
 

src/components/GameCards/GameCardCompact.vue

@@ -2,6 +2,13 @@
   <b-card no-body class="clickable mb-2" @click="openDetails">
     <b-row no-gutters v-if="game && game.name">
       <b-col cols="3">
+        <b-icon-check-circle
+          class="position-absolute rounded bg-success p-1 m-1"
+          variant="white"
+          font-scale="1.5"
+          v-if="showCompletedBadge"
+        />
+
         <b-img
           fluid
           blank-color="#ccc"
@@ -45,8 +52,9 @@
           />
 
           <b-progress
-            v-if="gameProgress"
+            v-if="showGameProgress"
             :value="gameProgress"
+            class="my-2"
             variant="success"
             height="6px"
           />

src/components/GameCards/GameCardDefault.vue

@@ -5,6 +5,13 @@
       v-if="game && game.name"
     >
       <b-col cols="4">
+        <b-icon-check-circle
+          class="position-absolute rounded bg-success p-1 m-1"
+          variant="white"
+          font-scale="1.5"
+          v-if="showCompletedBadge"
+        />
+
         <b-img
           fluid
           blank-color="#ccc"
@@ -47,8 +54,9 @@
           />
 
           <b-progress
-            v-if="gameProgress"
+            v-if="showGameProgress"
             :value="gameProgress"
+            class="my-2"
             variant="success"
             height="6px"
           />

src/components/GameCards/GameCardGrid.vue

@@ -8,13 +8,24 @@
   >
     <b-card-body body-class="p-2" v-if="game && game.name">
       <b-card-title class="mb-0" title-tag="h6">
-        {{ game.name }}
+        <b-icon-check-circle
+          class="rounded bg-success p-1"
+          variant="white"
+          font-scale="1.5"
+          v-if="showCompletedBadge"
+        />
 
-        <b-badge variant="warning" v-if="gameNotes">
-          <b-icon-file-earmark-text />
-        </b-badge>
+        {{ game.name }}
       </b-card-title>
 
+      <b-progress
+        v-if="showGameProgress"
+        :value="gameProgress"
+        class="my-2"
+        variant="success"
+        height="6px"
+      />
+
       <!-- <b-badge
         v-if="releaseDate"
         variant="secondary"
@@ -35,15 +46,7 @@
         no-border
       />
 
-      <b-progress
-        v-if="gameProgress"
-        :value="gameProgress"
-        variant="success"
-        height="6px"
-      />
-
-
-      <div v-if="showGameTags">
+      <template v-if="showGameTags">
         <b-badge
           v-for="({ games, hex, tagTextColor }, name) in tags"
           v-if="games.includes(game.id)"
@@ -55,7 +58,11 @@
         >
           {{ name }}
         </b-badge>
-      </div>
+      </template>
+
+      <b-badge variant="warning" v-if="gameNotes">
+        <b-icon-file-earmark-text />
+      </b-badge>
     </b-card-body>
   </b-card>
 </template>

src/components/GameCards/GameCardText.vue

@@ -3,6 +3,13 @@
     <b-row no-gutters v-if="game && game.name">
         <b-card-body body-class="pt-0 pb-1 px-2">
           <small>
+            <b-icon-check-circle
+              class="rounded bg-success p-1"
+              variant="white"
+              font-scale="1.5"
+              v-if="showCompletedBadge"
+            />
+
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
@@ -31,8 +38,9 @@
           />
 
           <b-progress
-            v-if="gameProgress"
+            v-if="showGameProgress"
             :value="gameProgress"
+            class="my-1"
             variant="success"
             height="6px"
           />