simplify game progress logic

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"

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
+          <div class="game-info bg-dark">
-            v-if="showGameProgress"
+            <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>

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"

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"

src/mixins/gameCardMixin.js

@@ -14,15 +14,11 @@ export default {
     ...mapGetters(['gameTags']),
 
     highlightCompletedGame() {
-      const { settings } = this.list;
+      return this.gameProgress && Number(this.gameProgress) === 100;
-
-      return settings.highlightCompletedGames
-        && 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() {