mirror of
https://github.com/romancm/gamebrary
synced 2025-01-12 19:28:43 +00:00
395 lines
9.7 KiB
Vue
395 lines
9.7 KiB
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>
|