From ac032efb6d7c282b383da62101c07df34d06ff92 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Tue, 11 May 2021 12:52:42 -0700
Subject: [PATCH] simplify game progress logic

---
 src/components/GameCards/GameCardCompact.vue |  2 +-
 src/components/GameCards/GameCardDefault.vue | 30 ++++++++++++++------
 src/components/GameCards/GameCardGrid.vue    |  2 +-
 src/components/GameCards/GameCardText.vue    |  2 +-
 src/mixins/gameCardMixin.js                  | 14 ++++-----
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index 9a826710..6b01de8f 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/src/components/GameCards/GameCardCompact.vue
@@ -30,7 +30,7 @@
           <br />
 
           <b-progress
-            v-if="showGameProgress"
+            v-if="gameProgress > 0"
             :value="gameProgress"
             class="my-2"
             variant="success"
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index 82364057..fbcd223d 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -26,21 +26,33 @@
             title-tag="h6"
           >
             {{ game.name }}
-
-            <b-badge variant="warning" v-if="gameNotes">
-              <i class="far fa-sticky-note fa-fw" />
-            </b-badge>
           </b-card-title>
 
-          <b-progress
-            v-if="showGameProgress"
+          <div class="game-info bg-dark">
+            <small class="text-muted" v-if="gameProgress > 0">
+              <i v-if="gameProgress == 100" class="fas fa-check fa-fw" aria-hidden />
+              <span v-else>{{ gameProgress }}%</span>
+            </small>
+          </div>
+
+          <b-badge variant="warning" v-if="gameNotes">
+            <i class="far fa-sticky-note fa-fw" />
+          </b-badge>
+
+          <!-- <b-progress
+            v-if="gameProgress > 0"
             :value="gameProgress"
             class="my-2"
             variant="success"
             height="6px"
-          />
+          /> -->
 
-          <div v-if="showGameTags">
+          <b-badge variant="primary" v-if="showGameTags">
+            <i class="fas fa-tags fa-fw" aria-hidden />
+          </b-badge>
+
+          <!-- TODO: use array filter instead of mixing v-for and v-if -->
+          <!-- <div v-if="showGameTags">
             <b-badge
               v-for="({ games, hex, tagTextColor }, name) in tags"
               v-if="games.includes(game.id)"
@@ -52,7 +64,7 @@
             >
               {{ name }}
             </b-badge>
-          </div>
+          </div> -->
         </b-card-body>
       </b-col>
     </b-row>
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index 4c50fe25..9ea01f20 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -14,7 +14,7 @@
       </b-card-title>
 
       <b-progress
-        v-if="showGameProgress"
+        v-if="gameProgress > 0"
         :value="gameProgress"
         class="my-2"
         variant="success"
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index f6d96e42..798884b1 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -16,7 +16,7 @@
           <br />
 
           <b-progress
-            v-if="showGameProgress"
+            v-if="gameProgress > 0"
             :value="gameProgress"
             class="my-1"
             variant="success"
diff --git a/src/mixins/gameCardMixin.js b/src/mixins/gameCardMixin.js
index 855dab6e..46ae8aea 100644
--- a/src/mixins/gameCardMixin.js
+++ b/src/mixins/gameCardMixin.js
@@ -14,15 +14,11 @@ export default {
     ...mapGetters(['gameTags']),
 
     highlightCompletedGame() {
-      const { settings } = this.list;
-
-      return settings.highlightCompletedGames
-        && this.gameProgress
-        && Number(this.gameProgress) === 100;
+      return this.gameProgress && Number(this.gameProgress) === 100;
     },
 
     showGameProgress() {
-      return this.gameProgress && Number(this.gameProgress) < 100;
+      return this.gameProgress > 0;
     },
 
     showGameTags() {
@@ -32,11 +28,11 @@ export default {
     },
 
     gameProgress() {
-      const { gameId, progresses, list: { settings } } = this;
+      const { gameId, progresses } = this;
 
-      return settings && settings.showGameProgress && gameId && progresses[gameId]
+      return gameId && progresses[gameId]
         ? progresses[gameId]
-        : null;
+        : 0;
     },
 
     gameNotes() {