From b473b0edd36c35cb605f634fca4d64f0978a14d9 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 18 Aug 2022 14:07:17 -0700
Subject: [PATCH] fix tags in cards

---
 src/components/Game/SimilarGames.vue         |  4 --
 src/components/GameCards/GameCardCompact.vue | 25 +++++----
 src/components/GameCards/GameCardGrid.vue    | 13 +++--
 src/components/GameCards/GameCardText.vue    | 57 ++++++++++----------
 src/components/KeyboardShortcutsModal.vue    |  1 -
 src/components/Lists/GameList.vue            |  4 +-
 src/components/PageHeader.vue                | 20 ++++---
 src/components/Shared/HomeButton.vue         | 40 --------------
 8 files changed, 60 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/Shared/HomeButton.vue

diff --git a/src/components/Game/SimilarGames.vue b/src/components/Game/SimilarGames.vue
index e5f28ac1..b29b8f5d 100644
--- a/src/components/Game/SimilarGames.vue
+++ b/src/components/Game/SimilarGames.vue
@@ -51,10 +51,6 @@ export default {
     },
 
     async loadGames() {
-      // this.similarGames = [];
-
-      // TODO: use try catch
-      // TODO: append cover url directly here
       await this.$store.dispatch('LOAD_GAMES', this.similarGameIds.toString());
 
       this.similarGames = this.similarGameIds ?
diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index 59e835f3..3cac2a79 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/src/components/GameCards/GameCardCompact.vue
@@ -37,19 +37,18 @@
             height="6px"
           />
 
-          <!-- TODO: use correct tags -->
-          <!-- <pre>{{ gameTags }}</pre> -->
-          <!-- <b-badge
-            v-for="({ hex, tagTextColor }, name) in gameTags"
-            :key="name"
-            pill
-            class="mr-1"
-            variant="primary"
-            tag="small"
-            :style="`background-color: ${hex}; color: ${tagTextColor}`"
-          >
-            <small>{{ name }}</small>
-          </b-badge> -->
+          <template v-if="tagsApplied.length">
+            <b-badge
+              v-for="({ bgColor, textColor, name }) in tagsApplied"
+              :key="name"
+              rounded
+              class="mr-1"
+              variant="transparent"
+              :style="`background-color: ${bgColor}; color: ${textColor}`"
+            >
+              <small>{{ name }}</small>
+            </b-badge>
+          </template>
         </b-card-body>
       </b-col>
     </b-row>
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index 35e21831..72b18b00 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -21,19 +21,18 @@
         height="6px"
       />
 
-      <!-- TODO: use correct tags -->
-      <!-- <template v-if="showGameTags">
+      <template v-if="tagsApplied.length">
         <b-badge
-          v-for="({ hex, tagTextColor }, name) in gameTags"
+          v-for="({ bgColor, textColor, name }) in tagsApplied"
           :key="name"
-          pill
+          rounded
           class="mr-1"
-          variant="primary"
-          :style="`background-color: ${hex}; color: ${tagTextColor}`"
+          variant="transparent"
+          :style="`background-color: ${bgColor}; color: ${textColor}`"
         >
           <small>{{ name }}</small>
         </b-badge>
-      </template> -->
+      </template>
 
       <b-badge variant="warning" v-if="gameNotes">
         <i class="far fa-sticky-note fa-fw" />
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 0dcefa22..32b79b99 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -4,39 +4,38 @@
     class="cursor-pointer"
   >
     <b-row no-gutters v-if="game && game.name">
-        <b-card-body body-class="pt-0 pb-1 px-2">
-          <small :class="`${highlightCompletedGame ? 'text-success' : ''}`">
-            {{ game.name }}
+      <b-card-body body-class="pt-0 pb-1 px-2">
+        <small :class="`${highlightCompletedGame ? 'text-success' : ''}`">
+          {{ game.name }}
 
-            <b-badge variant="warning" v-if="gameNotes">
-              <i class="far fa-sticky-note fa-fw" />
-            </b-badge>
-          </small>
+          <b-badge variant="warning" v-if="gameNotes">
+            <i class="far fa-sticky-note fa-fw" />
+          </b-badge>
+        </small>
 
-          <br />
+        <br />
 
-          <b-progress
-            v-if="gameProgress > 0"
-            :value="gameProgress"
-            class="my-1"
-            variant="success"
-            height="6px"
-          />
+        <b-progress
+          v-if="gameProgress > 0"
+          :value="gameProgress"
+          class="my-1"
+          variant="success"
+          height="6px"
+        />
 
-          <!-- TODO: use correct tags -->
-          <!-- <template v-if="showGameTags">
-            <b-badge
-              v-for="({ hex, tagTextColor }, name) in gameTags"
-              :key="name"
-              pill
-              variant="primary"
-              class="mr-1"
-              :style="`background-color: ${hex}; color: ${tagTextColor}`"
-            >
-              <small class="font-weight-bold">{{ name }}</small>
-            </b-badge>
-          </template> -->
-        </b-card-body>
+        <template v-if="tagsApplied.length">
+          <b-badge
+            v-for="({ bgColor, textColor, name }) in tagsApplied"
+            :key="name"
+            rounded
+            class="mr-1"
+            variant="transparent"
+            :style="`background-color: ${bgColor}; color: ${textColor}`"
+          >
+            <small>{{ name }}</small>
+          </b-badge>
+        </template>
+      </b-card-body>
     </b-row>
   </b-card>
 </template>
diff --git a/src/components/KeyboardShortcutsModal.vue b/src/components/KeyboardShortcutsModal.vue
index 71c64996..9764e342 100644
--- a/src/components/KeyboardShortcutsModal.vue
+++ b/src/components/KeyboardShortcutsModal.vue
@@ -4,7 +4,6 @@
     title="BootstrapVue"
     hide-footer
   >
-    <!-- TODO: update shortcuts -->
     <template v-slot:modal-header="{ close }">
       <modal-header
         title="Keyboard Shortcuts"
diff --git a/src/components/Lists/GameList.vue b/src/components/Lists/GameList.vue
index 0867f560..3eb3f22b 100644
--- a/src/components/Lists/GameList.vue
+++ b/src/components/Lists/GameList.vue
@@ -1,5 +1,3 @@
-<!-- TODO: actually sort array when adding a game, list array should be unique source of truth -->
-<!-- TODO: ^^ that would fix issues when jumping to next game on a sorted list -->
 <template lang="html">
   <div
     :class="[
@@ -145,7 +143,7 @@ export default {
     ...mapGetters(['isBoardOwner']),
 
     draggingDisabled() {
-      return !this.user || !this.isBoardOwner || this.autoSortEnabled;
+      return !this.user || !this.isBoardOwner;
     },
 
     autoSortEnabled() {
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 095fc724..1c5591ea 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,6 +1,18 @@
 <template lang="html">
   <header class="p-2 d-flex">
-    <home-button />
+    <b-button
+      title="Dashboard"
+      size="sm"
+      class="mr-2"
+      variant="transparent"
+      :to="{ name: 'home' }"
+    >
+      <img
+        src="/logo.png"
+        width="20"
+      />
+    </b-button>
+
     <portal-target name="pageTitle" slim />
 
     <div class="align-items-center d-flex ml-auto">
@@ -40,15 +52,9 @@
 </template>
 
 <script>
-import HomeButton from '@/components/Shared/HomeButton';
 import { mapState } from 'vuex';
 
 export default {
-
-  components: {
-    HomeButton,
-  },
-
   computed: {
     ...mapState(['board', 'boards', 'user', 'game']),
 
diff --git a/src/components/Shared/HomeButton.vue b/src/components/Shared/HomeButton.vue
deleted file mode 100644
index dadfbe45..00000000
--- a/src/components/Shared/HomeButton.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template lang="html">
-  <b-button
-    title="Dashboard"
-    size="sm"
-    class="mr-2"
-    variant="transparent"
-    @click="handleLogoClick"
-  >
-    <img
-      src="/logo.png"
-      width="20"
-    />
-    <!-- TODO: move back button to here when viewing a game that's part of a board -->
-  </b-button>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-export default {
-  computed: {
-    ...mapState(['user']),
-  },
-  methods: {
-    handleLogoClick() {
-      // if (!this.user) {
-      //   if (this.$route.name === 'public.boards') {
-      //     this.$bvModal.show('authModal');
-      //   } else {
-      //     this.$router.push({ name: 'public.boards' });
-      //   }
-      // }
-      //
-      // if (this.user && this.$route.name !== 'home') {
-      // }
-      this.$router.push({ name: 'home' });
-    },
-  },
-};
-</script>