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);
|
||||
},
|
||||
|
||||
SET_GAME_MODAL_DATA(state, activeGame) {
|
||||
state.activeGame = activeGame;
|
||||
},
|
||||
|
||||
SET_GAME(state, game) {
|
||||
state.game = game;
|
||||
},
|
||||
|
|
@ -148,9 +144,6 @@ export default {
|
|||
state.game.gog = data;
|
||||
},
|
||||
|
||||
CLEAR_GAME_MODAL_DATA(state) {
|
||||
state.activeGame = null;
|
||||
},
|
||||
|
||||
ADD_GAME_TO_LIST({ board }, { listIndex, game }) {
|
||||
board.lists[listIndex].games.push(game.id);
|
||||
|
|
@ -233,7 +226,6 @@ export default {
|
|||
state.boards = [];
|
||||
state.board = {};
|
||||
state.boardGames = [];
|
||||
state.activeGame = null;
|
||||
state.wallpaperUrl = null;
|
||||
state.wallpapers = [];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,10 +15,6 @@ export default {
|
|||
board: {},
|
||||
game: {},
|
||||
boardGames: [],
|
||||
activeGame: {
|
||||
gameId: null,
|
||||
list: null,
|
||||
},
|
||||
wallpapers: [],
|
||||
platform: null,
|
||||
sessionExpired: false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue