mirror of
https://github.com/romancm/gamebrary
synced 2024-11-23 11:43:07 +00:00
Remove game modal and sidebar
This commit is contained in:
Gamebrary
parent
80b5b9fcd7
commit
0c4c715b6a
4 changed files with 0 additions and 417 deletions
|
|
@ -1,235 +0,0 @@
|
||||||
<!-- TODO: add bundles to game detail? -->
|
|
||||||
<!-- {{ game.bundles ? `Found in ${game.bundles.length} compilations.` : null }} -->
|
|
||||||
<!-- <b-form-rating
|
|
||||||
v-if="rating"
|
|
||||||
:value="rating"
|
|
||||||
inline
|
|
||||||
readonly
|
|
||||||
variant="warning"
|
|
||||||
size="lg"
|
|
||||||
no-border
|
|
||||||
/>
|
|
||||||
|
|
||||||
<br /> -->
|
|
||||||
<template lang="html">
|
|
||||||
<b-modal
|
|
||||||
id="game-modal"
|
|
||||||
scrollable
|
|
||||||
size="lg"
|
|
||||||
hide-footer
|
|
||||||
hide-header
|
|
||||||
@show="load"
|
|
||||||
@hidden="reset"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="game.name"
|
|
||||||
>
|
|
||||||
<modal-header
|
|
||||||
title="Game detail"
|
|
||||||
:subtitle="activeGame.list ? activeGame.list.name : null"
|
|
||||||
@close="$bvModal.hide('game-modal')"
|
|
||||||
>
|
|
||||||
<b-dropdown right v-if="user && user.uid && user.uid === board.owner">
|
|
||||||
<template v-slot:button-content>
|
|
||||||
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="board && user.uid === board.owner">
|
|
||||||
|
|
||||||
<b-dropdown-item-button
|
|
||||||
v-if="!prevDisabled"
|
|
||||||
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"
|
|
||||||
@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" />
|
|
||||||
</template>
|
|
||||||
</b-dropdown>
|
|
||||||
</modal-header>
|
|
||||||
|
|
||||||
<!-- <game :game="game" :loading="loading" /> -->
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex';
|
|
||||||
// import Game from '@/components/Game';
|
|
||||||
import GameProgress from '@/components/Game/GameProgress';
|
|
||||||
import AddRemoveGame from '@/components/Game/AddRemoveGame';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
// Game,
|
|
||||||
GameProgress,
|
|
||||||
AddRemoveGame,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
gameId: null,
|
|
||||||
coverVisible: true,
|
|
||||||
game: {},
|
|
||||||
loading: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
...mapState(['board', 'notes', 'activeGame', 'games', 'platform', 'user', 'settings']),
|
|
||||||
|
|
||||||
hasMultipleGames() {
|
|
||||||
return this.activeGame?.list?.games?.length > 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
standalone() {
|
|
||||||
return this.activeGame && !this.activeGame.list;
|
|
||||||
},
|
|
||||||
|
|
||||||
rating() {
|
|
||||||
return 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>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
|
||||||
.b-rating {
|
|
||||||
line-height: normal !important;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
@media(min-width: 768px) {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
align-self: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
<template lang="html">
|
|
||||||
<b-sidebar
|
|
||||||
:id="gameDetailView === 'side' ? 'game-sidebar' : ''"
|
|
||||||
right
|
|
||||||
backdrop
|
|
||||||
@shown="load"
|
|
||||||
@hidden="reset"
|
|
||||||
>
|
|
||||||
Load game here?
|
|
||||||
<!-- <game :game="game" :loading="loading" /> -->
|
|
||||||
</b-sidebar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex';
|
|
||||||
// import Game from '@/components/Game';
|
|
||||||
// import GameProgress from '@/components/Game/GameProgress';
|
|
||||||
// import AddRemoveGame from '@/components/Game/AddRemoveGame';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
// Game,
|
|
||||||
// GameProgress,
|
|
||||||
// AddRemoveGame,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
gameId: null,
|
|
||||||
coverVisible: true,
|
|
||||||
game: {},
|
|
||||||
loading: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
...mapState(['board', 'notes', 'activeGame', 'games', 'platform', 'user', 'settings']),
|
|
||||||
|
|
||||||
gameDetailView() {
|
|
||||||
return this.settings?.gameDetailView;
|
|
||||||
},
|
|
||||||
|
|
||||||
hasMultipleGames() {
|
|
||||||
return this.activeGame?.list?.games?.length > 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
standalone() {
|
|
||||||
return this.activeGame && !this.activeGame.list;
|
|
||||||
},
|
|
||||||
|
|
||||||
rating() {
|
|
||||||
return 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?.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>
|
|
||||||
|
|
||||||
|
|
@ -119,10 +119,6 @@ export default {
|
||||||
state.boards.splice(boardIndex, 1);
|
state.boards.splice(boardIndex, 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
SET_GAME_MODAL_DATA(state, activeGame) {
|
|
||||||
state.activeGame = activeGame;
|
|
||||||
},
|
|
||||||
|
|
||||||
SET_GAME(state, game) {
|
SET_GAME(state, game) {
|
||||||
state.game = game;
|
state.game = game;
|
||||||
},
|
},
|
||||||
|
|
@ -148,9 +144,6 @@ export default {
|
||||||
state.game.gog = data;
|
state.game.gog = data;
|
||||||
},
|
},
|
||||||
|
|
||||||
CLEAR_GAME_MODAL_DATA(state) {
|
|
||||||
state.activeGame = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
ADD_GAME_TO_LIST({ board }, { listIndex, game }) {
|
ADD_GAME_TO_LIST({ board }, { listIndex, game }) {
|
||||||
board.lists[listIndex].games.push(game.id);
|
board.lists[listIndex].games.push(game.id);
|
||||||
|
|
@ -233,7 +226,6 @@ export default {
|
||||||
state.boards = [];
|
state.boards = [];
|
||||||
state.board = {};
|
state.board = {};
|
||||||
state.boardGames = [];
|
state.boardGames = [];
|
||||||
state.activeGame = null;
|
|
||||||
state.wallpaperUrl = null;
|
state.wallpaperUrl = null;
|
||||||
state.wallpapers = [];
|
state.wallpapers = [];
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,6 @@ export default {
|
||||||
board: {},
|
board: {},
|
||||||
game: {},
|
game: {},
|
||||||
boardGames: [],
|
boardGames: [],
|
||||||
activeGame: {
|
|
||||||
gameId: null,
|
|
||||||
list: null,
|
|
||||||
},
|
|
||||||
wallpapers: [],
|
wallpapers: [],
|
||||||
platform: null,
|
platform: null,
|
||||||
sessionExpired: false,
|
sessionExpired: false,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue