gamebrary/src/components/Game/GameModal.vue

<template lang="html">
  <b-modal
    id="game-modal"
    scrollable
    size="lg"
    footer-class="p-2 justify-content-center"
    header-class="align-items-center border-0 pb-2"
    hide-footer
    body-class="pt-0"
    :header-bg-variant="nightMode ? 'dark' : null"
    :header-text-variant="nightMode ? 'white' : null"
    :body-bg-variant="nightMode ? 'dark' : null"
    :body-text-variant="nightMode ? 'white' : null"
    @show="load"
    @hidden="reset"
  >
    <template v-slot:modal-header="{ close }">
      <modal-header
        :title="game.name"
        :subtitle="gameModalData.list ? gameModalData.list.name : null"
        @close="close"
      >
        <template v-slot:header>
          <!-- TODO: Open gallery from cover, also include cover in screenshots carousel -->
          <b-img
            :src="activeGameCoverUrl"
            :alt="game.name"
            v-if="!coverVisible"
            class="float-left mr-2"
            height="40"
            rounded
          />
        </template>

        <b-dropdown
          v-if="user && user.uid === board.owner"
          right
          no-caret
          :variant="nightMode ? 'dark' : 'light'"
          :menu-class="nightMode ? 'bg-dark' : ''"
        >
          <template v-slot:button-content>
            <i class="fas fa-ellipsis-h fa-fw" aria-hidden></i>
          </template>

          <game-progress :game="game" />
          <game-notes-modal :game="game" />

          <b-dropdown-item
            v-b-modal.tags
            v-shortkey="['t']"
            @shortkey.native="$bvModal.show('tags');"
            :variant="nightMode ? 'secondary' : null"
          >
            <i class="far fa-tags fa-fw" /> Tags

            <game-tags-modal :game="game" />
          </b-dropdown-item>

          <b-dropdown-item-button
            v-if="!prevDisabled"
            :variant="nightMode ? 'secondary' : null"
            v-shortkey="['arrowleft']"
            @shortkey.native="previousGame"
            @click="previousGame"
          >
            <i class="fas fa-caret-left fa-fw" aria-hidden /> Previous game

          </b-dropdown-item-button>

          <b-dropdown-item-button
            v-if="!nextDisabled"
            v-shortkey="['arrowright']"
            @shortkey.native="nextGame"
            :variant="nightMode ? 'secondary' : null"
            @click="nextGame"
          >
            <i class="fas fa-caret-right fa-fw" aria-hidden /> Next game
          </b-dropdown-item-button>

          <add-remove-game v-if="list" :game="game" :list="list" />
        </b-dropdown>
      </modal-header>
    </template>

    <b-container
      v-if="game.name"
      fluid
      class="m-0 p-0"
    >
      <b-row>
        <b-col
          cols="12"
          md="5"
          lg="4"
          class="sidebar pr-md-1"
        >
          <b-skeleton-img
            v-if="loading"
            width="100%"
            height="200px"
          />

          <template v-else>
            <b-img
              :src="activeGameCoverUrl"
              :alt="game.name"
              class="game-cover"
              v-observe-visibility="toggleCoverVisible"
              rounded
            />

            <game-screenshots :game="game" />
            <!-- <game-videos :videos="game.videos" v-if="game.videos" /> -->
            <amazon-links :game="game" class="d-none d-md-inline" />
          </template>

          <!-- <pre>{{ game.genres.map(({ id }) => id) }}</pre> -->
          <!-- TODO: add bundles to game detail? -->
          <!-- {{ game.bundles ? `Found in ${game.bundles.length} compilations.` : null }} -->
        </b-col>

        <!-- cols="12"
        md="7"  -->
        <b-col
          cols="12"
          md="7"
          lg="8"
        >
          <h3 class="mb-0">{{ game.name }}</h3>

          <b-progress
            v-if="progress"
            :value="progress"
            variant="success"
            height="8px"
            v-b-modal.progress
            class="my-1 w-25"
          />

          <!-- <b-form-rating
            v-if="rating"
            :value="rating"
            :class="['p-0 mt-1', { 'bg-dark': nightMode }]"
            inline
            readonly
            variant="warning"
            size="lg"
            no-border
          />

          <br /> -->

          <b-badge
            v-for="({ games, hex, tagTextColor }, name) in tags"
            v-if="games.includes(game.id)"
            :key="name"
            pill
            tag="small"
            class="mr-1 mb-2"
            :style="`background-color: ${hex}; color: ${tagTextColor}`"
            v-b-modal.tags
          >
            {{ name }}
          </b-badge>

          <template v-if="loading">
            <b-skeleton v-for="n in 3" :key="n" />
          </template>

          <template v-else>
            <amazon-links
              :game="game"
              class="d-md-none"
              modal-id="mobile-amazon"
            />

            <game-description :game="game" />
            <game-notes :game="game" />
            <game-details :game="game" />
            <game-websites :game="game" />

            <similar-games
              :game="game"
              :loading="loading"
              class="mb-2"
            />
          </template>
        </b-col>

        <igdb-logo />
      </b-row>
    </b-container>
  </b-modal>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import GameDetails from '@/components/Game/GameDetails';
import GameDescription from '@/components/Game/GameDescription';
import SimilarGames from '@/components/Game/SimilarGames';
import GameNotes from '@/components/Game/GameNotes';
import GameScreenshots from '@/components/Game/GameScreenshots';
import AmazonLinks from '@/components/Game/AmazonLinks';
import GameVideos from '@/components/Game/GameVideos';
import GameWebsites from '@/components/Game/GameWebsites';
import GameNotesModal from '@/components/Game/GameNotesModal';
import GameProgress from '@/components/Game/GameProgress';
import AddRemoveGame from '@/components/Game/AddRemoveGame';
import GameTagsModal from '@/components/Game/GameTagsModal';
import IgdbLogo from '@/components/IgdbLogo';

export default {
  components: {
    GameTagsModal,
    IgdbLogo,
    GameDetails,
    GameDescription,
    SimilarGames,
    GameNotes,
    GameScreenshots,
    AmazonLinks,
    GameVideos,
    GameWebsites,
    GameNotesModal,
    GameProgress,
    AddRemoveGame,
  },

  data() {
    return {
      gameId: null,
      coverVisible: true,
      game: {},
      loading: true,
    };
  },

  computed: {
    // TODO: rename gameModalData
    ...mapState(['board', 'gameModalData', 'games', 'platform', 'progresses', 'tags', 'user']),
    ...mapGetters(['nightMode', 'activeGameCoverUrl']),

    hasMultipleGames() {
      // TODO: use optional chaining
      return this.gameModalData
        && this.gameModalData.list
        && this.gameModalData.list.games
        && this.gameModalData.list.games.length > 1;
    },

    progress() {
      const { gameId, progresses } = this;

      return progresses[gameId] || null;
    },

    rating() {
      return this.game && this.game.rating
        ? Math.round((this.game.rating / 20) * 2) / 2
        : false;
    },

    gameIndex() {
      const { gameId, list } = this.gameModalData;

      return list && list.games.indexOf(gameId);
    },

    prevDisabled() {
      return this.gameIndex === 0;
    },

    nextDisabled() {
      const { list } = this.gameModalData;

      return this.list && list.games && this.gameIndex === list.games.length - 1;
    },
  },

  watch: {
    gameModalData(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.gameModalData;

      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.gameModalData;

      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.gameModalData;

      this.gameId = gameId;
      this.list = list;
      this.game = this.games[gameId];

      this.loadGame();
    },

    async loadGame() {
      this.loading = true;

      const { gameId } = this.gameModalData;

      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>


<style lang="scss" rel="stylesheet/scss" scoped>
  .b-rating {
    line-height: normal !important;
    height: auto !important;
  }

  .game-cover {
    width: 100%;
    height: auto;
  }

  .sidebar {
    @media(min-width: 768px) {
      position: sticky;
      top: 0;
      align-self: baseline;
    }
  }
</style>