Similar games component

src/components/Game/GameModal.vue

@@ -116,7 +116,7 @@
           </template>
 
           <game-notes :game="game" />
-          <similar-games :game="game" />
+          <game-details class="d-none d-md-inline" :game="game" />
 
           <!-- <pre>{{ game.genres.map(({ id }) => id) }}</pre> -->
           <!-- TODO: add bundles to game detail? -->
@@ -174,6 +174,12 @@
           <template v-else>
             <game-description :game="game" />
 
+            <similar-games
+              :game="game"
+              :loading="loading"
+              class="mb-2"
+            />
+
             <amazon-links
               :game="game"
               class="d-md-none"
@@ -191,7 +197,7 @@
                 </li>
               </ul>
             </b-alert>
-            <game-details :game="game" />
+            <game-details class="d-md-none" :game="game" />
             <game-websites :game="game" />
           </template>
         </b-col>

src/components/Game/SimilarGames.vue

@@ -1,22 +1,24 @@
 <template lang="html">
-  <div>
-    Similar games
+  <div class="games" v-if="loading">
+    <b-skeleton-img
+      v-for="game in similarGames"
+      :key="game.id"
+      v-if="game.cover"
+      height="100px"
+    />
+  </div>
 
-    <div class="games" v-if="loading">
-      <b-skeleton-img
-        v-for="game in similarGames"
-        v-if="game.cover"
-        height="100px"
-      />
-    </div>
+  <div v-else-if="similarGames.length">
+    You may also like:
 
-    <div class="games" v-else-if="similarGames.length">
+    <div class="games">
       <b-img
         v-for="game in similarGames"
         v-if="game.cover"
         :key="game.id"
         :src="getCoverUrl(game.cover)"
-        class="rounded w-100"
+        class="rounded my-2 mr-2 w-100 cursor-pointer"
+        height="80"
         @click="loadGame(game.id)"
       />
     </div>
@@ -34,11 +36,11 @@ export default {
 
   props: {
     game: Object,
+    loading: Boolean,
   },
 
   data() {
     return {
-      loading: false,
       similarGames: [],
     };
   },
@@ -51,14 +53,6 @@ export default {
     },
   },
 
-  watch: {
-    gameModalData(value) {
-      if (value && this.similarGameIds) {
-        this.loadGames();
-      }
-    },
-  },
-
   mounted() {
     if (this.similarGameIds) {
       this.loadGames();
@@ -75,32 +69,19 @@ export default {
     loadGame(gameId) {
       const { list } = this.gameModalData;
 
-      this.$store.commit('SET_GAME_MODAL_DATA', {
-        gameId,
-        list,
-      });
-
-      // const game = await this.$store.dispatch('LOAD_GAME', gameId)
-      //   .catch(() => {
-      //     this.loading = false;
-      //     this.$bvToast.toast('Error loading game', { variant: 'error' });
-      //   });
+      this.$store.commit('SET_GAME_MODAL_DATA', { gameId, list });
     },
 
     async loadGames() {
-      this.loading = true;
-      // similarGames
+      this.similarGames = [];
 
-      await this.$store.dispatch('LOAD_GAMES', this.game.similar_games.toString())
-        .catch(() => {
-          this.loading = false;
-        });
+      await this.$store.dispatch('LOAD_GAMES', this.similarGameIds.toString());
 
-      this.similarGames = this.similarGameIds
-        .filter(game => this.games && this.games[game])
-        .map(game => this.games && this.games[game]);
-
-      this.loading = false;
+      this.similarGames = this.similarGameIds ?
+        this.similarGameIds
+          .filter(game => this.games && this.games[game])
+          .map(game => this.games && this.games[game])
+        : [];
     },
   },
 };
@@ -108,8 +89,8 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
 .games {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-gap: .5rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
 }
 </style>