allow to open game in sidebar

src/components/Game/GameSidebar.vue

@@ -0,0 +1,180 @@
+<template lang="html">
+  <b-sidebar
+    :id="gameDetailView === 'side' ? 'game-sidebar' : ''"
+    bg-variant="dark"
+    text-variant="white"
+    right
+    backdrop
+    @shown="load"
+    @hidden="reset"
+  >
+    <!-- TODO: restrict usage of sidebar when setting is set -->
+    <game :game="game" :loading="loading" />
+  </b-sidebar>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Game from '@/components/Game';
+import GameNotesModal from '@/components/Game/GameNotesModal';
+import GameProgress from '@/components/Game/GameProgress';
+import AddRemoveGame from '@/components/Game/AddRemoveGame';
+import GameTagsModal from '@/components/Game/GameTagsModal';
+
+export default {
+  components: {
+    Game,
+    GameTagsModal,
+    GameNotesModal,
+    GameProgress,
+    AddRemoveGame,
+  },
+
+  data() {
+    return {
+      gameId: null,
+      coverVisible: true,
+      game: {},
+      loading: true,
+    };
+  },
+
+  computed: {
+    ...mapState(['board', 'notes', 'activeGame', 'games', 'platform', 'user', 'settings']),
+
+    gameDetailView() {
+      return this.settings && this.settings.gameDetailView;
+    },
+
+    hasMultipleGames() {
+      // TODO: use optional chaining
+      return this.activeGame
+        && this.activeGame.list
+        && this.activeGame.list.games
+        && this.activeGame.list.games.length > 1;
+    },
+
+    standalone() {
+      return this.activeGame && !this.activeGame.list;
+    },
+
+    rating() {
+      return this.game && this.game.rating
+        ? Math.round((this.game.rating / 20) * 2) / 2
+        : false;
+    },
+
+    gameIndex() {
+      const { gameId, list } = this.activeGame;
+
+      return list && list.games.indexOf(gameId);
+    },
+
+    prevDisabled() {
+      return !this.activeGame.list || this.gameIndex === 0;
+    },
+
+    nextDisabled() {
+      const { list } = this.activeGame;
+
+      const isLast = this.list && list.games && this.gameIndex === list.games.length - 1;
+
+      return !this.list || isLast;
+    },
+  },
+
+  watch: {
+    activeGame(value) {
+      if (value) {
+        this.load();
+      }
+    },
+  },
+
+  methods: {
+    toggleCoverVisible(value) {
+      this.coverVisible = value;
+    },
+
+    previousGame() {
+      // TODO: account for list sorting when getting previous game
+      this.loading = true;
+
+      const { gameId, list } = this.activeGame;
+
+      const index = list.games.indexOf(gameId);
+
+      const prevGameId = list.games[index - 1];
+
+      this.$store.commit('SET_GAME_MODAL_DATA', {
+        gameId: prevGameId,
+        list,
+      });
+    },
+
+    nextGame() {
+      // TODO: account for list sorting when getting next game
+      this.loading = true;
+
+      const { gameId, list } = this.activeGame;
+
+      const index = list.games.indexOf(gameId);
+
+      const nextGameId = list.games[index + 1];
+
+      this.$store.commit('SET_GAME_MODAL_DATA', {
+        gameId: nextGameId,
+        list,
+      });
+    },
+
+    load() {
+      const { gameId, list } = this.activeGame;
+
+      this.gameId = gameId;
+      this.list = list;
+      this.game = this.games[gameId];
+
+      this.loadGame();
+    },
+
+    async loadGame() {
+      this.loading = true;
+
+      const { gameId } = this.activeGame;
+
+      const game = await this.$store.dispatch('LOAD_GAME', gameId)
+        .catch(() => {
+          this.loading = false;
+          this.$bvToast.toast('Error loading game', { variant: 'error' });
+        });
+
+      // avoid error when closing modal before game finishes loading
+      if (!this.game) {
+        return;
+      }
+
+      this.game = {
+        ...this.game,
+        ...game,
+      };
+
+      this.loading = false;
+
+      // this.$ga.event({
+      //   eventCategory: 'game',
+      //   eventAction: 'view',
+      //   eventLabel: 'gameViewed',
+      //   eventValue: `${this.platform.name} - ${this.game.name}`,
+      // });
+    },
+
+    reset() {
+      this.gameId = null;
+      this.loading = true;
+      this.game = {};
+    },
+  },
+};
+</script>
+

src/components/GlobalModals.vue

@@ -2,6 +2,7 @@
   <div>
     <create-board-modal />
     <game-modal />
+    <game-sidebar />
     <auth-modal />
 
     <template v-if="user">
@@ -16,6 +17,7 @@ import { mapState } from 'vuex';
 
 import DevToolsModal from '@/components/DevToolsModal';
 import GameModal from '@/components/Game/GameModal';
+import GameSidebar from '@/components/Game/GameSidebar';
 import CreateBoardModal from '@/components/Board/CreateBoardModal';
 import AuthModal from '@/components/AuthModal';
 import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
@@ -27,6 +29,7 @@ export default {
     KeyboardShortcutsModal,
     CreateBoardModal,
     GameModal,
+    GameSidebar,
   },
 
   computed: {

src/components/Lists/List.vue

@@ -76,6 +76,7 @@
           :list="list"
           :game-id="game"
           :class="{ 'mb-2': view !== 'covers'}"
+          v-b-toggle.game-sidebar
           @click.native="openGame(game, list)"
         />
 
@@ -213,6 +214,8 @@ export default {
 
       if (gameDetailView === 'new') {
         this.$router.push({ name: 'game', params: { gameId } });
+      } else if (gameDetailView === 'side') {
+        // TODO: find a way to open sidebar programatically, open defect in gh?
       } else {
         this.$bvModal.show('game-modal');
       }

src/constants.js

@@ -215,9 +215,9 @@ export const SUPPORTED_LANGUAGES = [
 ];
 
 export const GAME_DETAIL_VIEWS = [
-  { name: 'Modal', value: null },
-  // { name: 'Side panel', value: 'side' },
   // { name: 'popup', value: 'popup' },
+  { name: 'Modal', value: null },
+  { name: 'Side panel', value: 'side' },
   { name: 'New page', value: 'new' },
 ];
 

src/pages/SettingsPage.vue

@@ -36,7 +36,7 @@ import GameDetailSettings from '@/components/Settings/GameDetailSettings';
 // import ProviderCard from '@/components/ProviderCard';
 import DeleteAccountModal from '@/components/Settings/DeleteAccountModal';
 import sessionMixin from '@/mixins/sessionMixin';
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 
 export default {
   components: {

src/styles/styles.scss

@@ -19,6 +19,12 @@
   }
 }
 
+.b-sidebar {
+  width: 500px;
+
+  max-width: calc(100% - 1rem);
+}
+
 /* custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;