Merge branch 'master' of github.com:romancm/gamebrary

src/App.vue

@@ -11,14 +11,12 @@
       <page-header />
       <router-view class="viewport" />
       <keyboard-shortcuts-modal />
-      <add-remove-game />
       <markdown-cheatsheet />
     </div>
   </div>
 </template>
 
 <script>
-import AddRemoveGame from '@/components/AddRemoveGame';
 import MarkdownCheatsheet from '@/components/MarkdownCheatsheet';
 import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
 import PageHeader from '@/components/PageHeader';
@@ -34,7 +32,6 @@ export default {
 
   components: {
     PageHeader,
-    AddRemoveGame,
     MarkdownCheatsheet,
     KeyboardShortcutsModal,
   },

src/components/AddRemoveGame.vue

@@ -1,79 +1,70 @@
 <template lang="html">
-  <b-sidebar
-    id="addGame"
-    no-header
+  <!-- TODO: use lazy prop for dropdown -->
+  <b-dropdown
+    id="dropdown-grouped"
+    variant="light"
     right
-    :visible="Boolean(gameId)"
-    backdrop
-    shadow
-    @hidden="hidden"
+    no-caret
   >
-    <template #default>
-      <div class="p-2 bg-white">
-        <b-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
-          <b-img
-            :src="coverUrl"
-            fluid
-            rounded
-          />
-        </b-link>
-
-        <template v-if="user">
-          <h4 class="my-3 text-center">Add to list:</h4>
-
-          <div
-            v-for="board in formattedBoards"
-            :key="board.id"
-            class="p-2 bg-white mb-2"
-          >
-            <header class="mb-2 d-flex align-items-center">
-              <b-avatar
-                rounded
-                :class="['board-thumbnail mr-2', { 'bg-dark' : !board.backgroundColor }]"
-                :title="board.name"
-                text=" "
-                size="32"
-                :style="`
-                  background-image: url(${board.backgroundUrl ? board.backgroundUrl : ''});
-                  background-color: ${board.backgroundColor ? board.backgroundColor : ''}
-                  `"
-                :to="{ name: 'board', params: { id: board.id } }"
-              />
-
-              {{ board.name }}
-            </header>
-
-            <b-button
-              v-for="(list, listIndex) in board.lists"
-              :key="`${board.id}-${list.name}`"
-              :variant="isGameInList({ list, gameId }) ? 'success' : 'light'"
-              block
-              clas
-              size="sm"
-              @click.stop="handleClick({ list, listIndex, board })"
-            >
-              {{ list.name }}
-
-              <b-badge variant="light" class="mr-2">
-                {{ list.games.length }}
-              </b-badge>
-
-              <i :class="`fa-solid ${isGameInList({ list, gameId }) ? 'fa-minus' : 'fa-plus' }`" />
-            </b-button>
-          </div>
-        </template>
-
-        <b-button
-          v-else
-          block
-          :to="{ name: 'auth' }"
-          variant="primary"
-        >
-          Add to list
-        </b-button>
-      </div>
+    <template #button-content>
+      <i class="fa-solid fa-plus fa-fw" />
     </template>
-  </b-sidebar>
+
+    <p class=" mx-2 my-0 text-center text-muted">
+      Add to list
+    </p>
+
+    <b-dropdown-divider />
+
+    <pre>{{ gameId }}</pre>
+
+    <section
+      v-for="board in formattedBoards"
+      :key="board.id"
+      class="p-2 bg-white mb-2 field"
+    >
+      <div class="text-center">
+        <b-avatar
+          rounded
+          :class="['board-thumbnail', { 'bg-dark' : !board.backgroundColor }]"
+          :title="board.name"
+          text=" "
+          size="32"
+          :style="`
+            background-image: url(${board.backgroundUrl ? board.backgroundUrl : ''});
+            background-color: ${board.backgroundColor ? board.backgroundColor : ''}
+            `"
+          :to="{ name: 'board', params: { id: board.id } }"
+        />
+
+        <br />
+
+        <span class="text-muted">{{ board.name }}</span>
+      </div>
+
+      <section
+        v-for="(list, listIndex) in board.lists"
+        :key="`${board.id}-${list.name}`"
+        class="d-flex align-items-center justify-content-between mb-2"
+      >
+        <b-badge variant="light" class="mr-2">
+          {{ list.games.length }}
+        </b-badge>
+
+        {{ list.name }}
+
+        <b-form-checkbox
+          id="checkbox-1"
+          name="checkbox-1"
+          :checked="isGameInList({ list })"
+          switch
+          @change="handleClick({ list, listIndex, board })"
+          unchecked-value="not_accepted"
+        />
+      </section>
+    </section>
+    <b-dropdown-divider />
+  </b-dropdown>
 </template>
 
 <script>
@@ -81,16 +72,6 @@ import { mapState } from 'vuex';
 import { getGameCoverUrl } from '@/utils';
 
 export default {
-  data() {
-    return {
-      expandedBoard: null,
-      gameId: null,
-    }
-  },
-
-  mounted() {
-    this.$bus.$on('ADD_GAME', this.setGame);
-  },
 
   computed: {
     ...mapState(['games', 'boards', 'wallpapers', 'user']),
@@ -112,14 +93,20 @@ export default {
       return this.games[this.gameId] || {};
     },
 
+    gameId() {
+      return this.$route.params.id
+    },
+
     coverUrl() {
       return getGameCoverUrl(this.game);
     },
   },
 
   methods: {
-    isGameInList({ list, gameId }) {
-      return list.games.includes(Number(gameId));
+    isGameInList({ list }) {
+      console.log('list', list);
+      console.log('gameId', this.gameId);
+      return list.games.includes(Number(this.gameId));
     },
 
     getWallpaperUrl(url) {
@@ -131,19 +118,15 @@ export default {
       return wallpaper && wallpaper.url ? decodeURI(wallpaper.url) : '';
     },
 
-    setGame(gameId) {
-      this.gameId = gameId;
-    },
-
-    hidden() {
-      this.gameId = null;
-      this.expandedBoard = null;
-    },
-
     handleClick({ list, listIndex, board }) {
+      console.log('list', list);
+      console.log('listIndex', listIndex);
+      console.log('board', board);
       if (this.isGameInList({ list, gameId: this.game.id })) {
+        console.log('removeGame');
         this.removeGame({ listIndex, boardId: board.id, list });
       } else {
+        console.log('addGame');
         this.addGame({ list, listIndex, boardId: board.id });
       }
     },

src/components/Game/GameMediaModal.vue

@@ -10,18 +10,20 @@
     <template v-slot:modal-header="{ close }">
       <modal-header
         title="Screenshots and videos"
-        :subtitle="selectedMedia.source"
+        :subtitle="`Source: ${selectedMedia.source}`"
         @close="close"
       >
-        <!-- <template v-slot:header>
+        <template v-slot:header>
           <b-img
-            :src="gameCoverThumbUrl"
+            :src="gameCoverUrl"
             :alt="game.name"
             class="float-left mr-2"
             height="40"
             rounded
           />
-        </template> -->
+        </template>
+
+        <!-- TODO: restore set as wallpaper -->
 
         <!-- <b-button
           v-if="isBoardOwner"
@@ -51,18 +53,17 @@
       <b-img
         v-else
         rounded
-        class="align-center align-self-center justify-self-center mw-100 mh-100"
+        class="selected-image align-center align-self-center mw-100 mh-100"
         :src="selectedMedia.imageUrl"
       />
 
       <footer class="mt-2 d-flex overflow-auto pb-2">
-        <b-img
+        <img
           v-for="media in gameMedia"
           :key="media.imageUrl"
           :src="media.imageUrl"
-          width="120"
           rounded
-          fluid
+          style="height: 80px"
           class="mr-2 align-self-start"
           @click="selectedMedia = media"
         />
@@ -90,9 +91,20 @@ export default {
     ...mapState(['board', 'game']),
 
     gameMedia() {
-      // TODO: add steam movies
       // TODO: also handle thumbnails
       // TODO: do all of this in mutation after loading game
+      const steamVideos = this.game?.steam?.movies?.map((video) => {
+        const hiQuality = video?.mp4?.max;
+        const lowQuality = video?.mp4?.[480];
+
+        return {
+          imageUrl: video.thumbnail,
+          videoUrl: hiQuality || lowQuality,
+          video: true,
+          source: 'steam',
+        }
+      }) || [];
+
       const igdbVideos = this.game?.videos?.map((video) => {
         return {
           imageUrl: `https://img.youtube.com/vi/${video.video_id}/sddefault.jpg`,
@@ -121,6 +133,7 @@ export default {
 
       return [
         ...igdbVideos,
+        ...steamVideos,
         ...gogImages,
         ...steamScreenshots,
         ...igdbScreenshots,
@@ -172,4 +185,8 @@ export default {
   grid-gap: 1rem;
   grid-template-rows: 50vh auto;
 }
+
+.selected-image {
+  justify-self: center;
+}
 </style>

src/pages/GamePage.vue

@@ -41,11 +41,7 @@
             <i class="fa-solid fa-note-sticky fa-fw" />
           </b-button>
 
-          <b-button
-            variant="light" @click="$bus.$emit('ADD_GAME', game.id)"
-          >
-            <i class="fa-solid fa-plus fa-fw" />
-          </b-button>
+          <add-remove-game />
         </b-button-group>
       </portal>
       <game-media-modal />
@@ -213,10 +209,12 @@ import GameInList from '@/components/Game/GameInList';
 import GameWebsites from '@/components/Game/GameWebsites';
 // import GameSpeedruns from '@/components/Game/GameSpeedruns';
 import GameNote from '@/components/GameNote';
+import AddRemoveGame from '@/components/AddRemoveGame';
 import { STEAM_CATEGORY_ID, GOG_CATEGORY_ID, TWITTER_CATEGORY_ID } from '@/constants';
 
 export default {
   components: {
+    AddRemoveGame,
     // AmazonLinks,
     GameNote,
     GameDescription,