gamebrary/src/pages/GameBoard.vue

276 lines
7.3 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
<div
class="lists"
ref="lists"
2019-01-24 06:16:08 +00:00
v-if="user && platform"
2019-01-12 05:33:01 +00:00
:class="{ dark: darkModeEnabled }"
2019-02-06 06:55:00 +00:00
@click.self="loseFocus"
2018-10-19 05:15:28 +00:00
>
2019-02-15 21:57:11 +00:00
<game-board-placeholder :id="gameDetailId" v-if="loading" />
2018-11-27 06:45:37 +00:00
2019-02-08 06:13:48 +00:00
<modal
ref="game"
large
no-padding
@close="closeGame"
>
2019-04-19 06:20:29 +00:00
<game-detail
v-if="gameDetailId"
2019-05-08 22:40:15 +00:00
slot="content"
2019-04-19 06:20:29 +00:00
:id="gameDetailId"
:list-id="gameDetailListIndex"
/>
2019-02-06 06:55:00 +00:00
</modal>
2019-02-08 06:15:16 +00:00
<modal
ref="tag"
:title="$t('tags.applyTag')"
:message="$t('tags.useTags')"
2019-02-22 06:27:39 +00:00
padded
2019-02-08 06:15:16 +00:00
>
<div slot="content">
2019-05-08 22:40:15 +00:00
<div
class="tags"
v-for="(tag, name) in tags"
:key="name"
>
2019-04-26 06:18:53 +00:00
<tag
:label="name"
:hex="tag.hex"
:readonly="!tag.games.includes(gameTagsId)"
@action="tryAdd(tag.games, name)"
@close="removeTag(name)"
/>
2019-02-08 06:15:16 +00:00
</div>
</div>
</modal>
2018-12-19 16:30:22 +00:00
<template>
2018-11-17 22:21:50 +00:00
<list
:name="list.name"
:games="list.games"
:listIndex="listIndex"
:key="`${list.name}-${listIndex}`"
2019-01-11 20:20:21 +00:00
v-if="list && !loading"
2018-11-17 22:21:50 +00:00
v-for="(list, listIndex) in gameLists[platform.code]"
@end="dragEnd"
/>
2019-04-05 22:46:56 +00:00
<list-add
v-if="addingList || !list"
@scroll="scroll"
@update="updateLists"
/>
<game-board-actions
2019-04-05 22:46:56 +00:00
v-else
@update="updateLists"
2018-11-17 22:21:50 +00:00
@scroll="scroll"
/>
</template>
2019-04-25 18:45:42 +00:00
<!-- <dev-debug /> -->
2018-10-19 05:15:28 +00:00
</div>
</template>
<script>
import GameBoardActions from '@/components/GameBoard/GameBoardActions';
2019-01-11 20:20:21 +00:00
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
2019-05-17 05:45:15 +00:00
import Tag from '@/components/Tags/Tag';
2019-04-05 22:46:56 +00:00
import ListAdd from '@/components/Lists/ListAdd';
2018-12-19 16:30:22 +00:00
import Panel from '@/components/Panel/Panel';
2019-04-18 04:52:21 +00:00
import GameDetail from '@/pages/GameDetail';
2019-02-06 06:55:00 +00:00
import Modal from '@/components/Modal/Modal';
2019-04-25 18:45:42 +00:00
// import DevDebug from '@/components/DevDebug/DevDebug';
import List from '@/components/Lists/List';
2018-10-19 05:15:28 +00:00
import draggable from 'vuedraggable';
2018-12-21 21:52:11 +00:00
import { mapState, mapGetters } from 'vuex';
import firebase from 'firebase/app';
import 'firebase/firestore';
2018-10-19 05:15:28 +00:00
const db = firebase.firestore();
2018-10-19 05:15:28 +00:00
export default {
components: {
draggable,
List,
2019-04-25 18:45:42 +00:00
// DevDebug,
GameBoardActions,
2019-01-11 20:20:21 +00:00
GameBoardPlaceholder,
2019-04-05 22:46:56 +00:00
ListAdd,
2019-04-26 06:18:53 +00:00
Tag,
2018-12-19 16:30:22 +00:00
Panel,
2019-02-06 06:55:00 +00:00
GameDetail,
Modal,
2018-10-19 05:15:28 +00:00
},
data() {
return {
dragging: false,
draggingId: null,
2018-11-17 22:21:50 +00:00
loading: false,
2018-10-19 05:15:28 +00:00
gameData: null,
2019-04-19 06:20:29 +00:00
gameDetailListIndex: null,
2019-02-06 06:55:00 +00:00
gameDetailId: null,
2019-02-08 06:15:16 +00:00
gameTagsId: null,
2018-10-19 05:15:28 +00:00
};
},
computed: {
2019-04-05 22:46:56 +00:00
...mapState(['user', 'gameLists', 'addingList', 'platform', 'tags', 'games']),
2018-12-21 21:52:11 +00:00
...mapGetters(['darkModeEnabled']),
2018-10-19 05:15:28 +00:00
list() {
2019-01-24 06:16:08 +00:00
return this.gameLists && this.platform && this.gameLists[this.platform.code]
2018-12-19 16:30:22 +00:00
? this.gameLists[this.platform.code]
: null;
2018-10-19 05:15:28 +00:00
},
},
mounted() {
2019-04-03 23:21:27 +00:00
this.$store.commit('CLEAR_ACTIVE_LIST_INDEX');
2019-02-05 07:31:40 +00:00
2019-02-16 04:45:14 +00:00
if (this.platform || this.$route.name === 'share-list') {
2019-01-24 06:16:08 +00:00
this.loadGameData();
2019-02-08 06:13:48 +00:00
this.setPageTitle();
2019-01-24 06:16:08 +00:00
} else {
2019-02-08 06:13:48 +00:00
this.$router.push({ name: 'platforms' });
2019-01-24 06:16:08 +00:00
}
2019-02-06 06:55:00 +00:00
this.$bus.$on('OPEN_GAME', this.openGame);
2019-02-08 06:15:16 +00:00
this.$bus.$on('OPEN_TAGS', this.openTags);
2019-02-06 06:55:00 +00:00
},
beforeDestroy() {
this.$bus.$off('OPEN_GAME');
2019-02-08 06:15:16 +00:00
this.$bus.$off('OPEN_TAGS');
2018-10-19 05:15:28 +00:00
},
methods: {
2019-04-26 06:18:53 +00:00
tryAdd(games, tagName) {
if (!games.includes(this.gameTagsId)) {
this.addTag(tagName);
}
},
2019-02-08 06:15:16 +00:00
addTag(tagName) {
this.$store.commit('ADD_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
2019-02-08 06:13:48 +00:00
closeGame() {
this.setPageTitle();
this.gameDetailId = null;
},
setPageTitle() {
document.title = this.platform
? `${this.platform.name} - Gamebrary`
: 'Gamebrary';
},
2019-04-26 06:55:05 +00:00
removeTag(tagName) {
this.$store.commit('REMOVE_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
2019-04-19 06:20:29 +00:00
openGame({ id, listId }) {
2019-02-06 06:55:00 +00:00
this.gameDetailId = id;
2019-04-19 06:20:29 +00:00
this.gameDetailListIndex = listId;
2019-02-06 06:55:00 +00:00
this.$refs.game.open();
},
2019-02-08 06:15:16 +00:00
openTags(id) {
this.gameTagsId = id;
this.$refs.tag.open(id);
},
2019-02-06 06:55:00 +00:00
loseFocus() {
2019-04-03 23:21:27 +00:00
this.$store.commit('CLEAR_ACTIVE_LIST_INDEX');
2019-02-06 06:55:00 +00:00
},
2018-10-19 05:15:28 +00:00
scroll() {
this.$nextTick(() => {
const lists = this.$refs.lists;
lists.scrollLeft = lists.scrollWidth;
});
},
dragEnd() {
this.dragging = false;
this.draggingId = null;
this.$bus.$emit('TOAST', { message: 'Collection updated' });
2018-10-19 05:15:28 +00:00
this.updateLists();
},
updateLists(force) {
db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: !force })
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
2018-10-19 05:15:28 +00:00
});
},
loadGameData() {
if (this.list) {
const gameList = [];
this.list.forEach((list) => {
if (list && list.games.length) {
list.games.forEach((id) => {
if (!gameList.includes(id)) {
gameList.push(id);
}
});
}
});
if (gameList.length > 0) {
2018-11-17 22:21:50 +00:00
this.loading = true;
this.$store.dispatch('LOAD_GAMES', gameList)
2019-02-05 07:31:40 +00:00
.then(() => {
2018-11-17 22:21:50 +00:00
this.loading = false;
2019-02-05 07:31:40 +00:00
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Error loading game', type: 'error' });
});
}
}
2018-10-19 05:15:28 +00:00
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
2019-04-05 19:16:32 +00:00
@import "~styles/styles.scss";
2018-10-19 05:15:28 +00:00
.draggable * {
color: $color-white;
}
2018-12-19 16:30:22 +00:00
.panel {
margin-right: $gp;
2019-01-11 20:20:21 +00:00
width: $list-width;
2018-12-19 16:30:22 +00:00
}
2018-10-29 23:53:49 +00:00
.lists {
2018-11-17 22:21:50 +00:00
user-select: none;
2018-10-29 23:53:49 +00:00
display: flex;
align-items: flex-start;
height: calc(100vh - 48px);
padding: 0 $gp;
2018-10-29 23:53:49 +00:00
box-sizing: border-box;
overflow-x: auto;
overflow-x: overlay;
display: flex;
&.empty {
background: $color-white;
2018-10-19 05:15:28 +00:00
}
}
2018-10-29 23:53:49 +00:00
.list-placeholder {
opacity: 0.25;
}
2018-10-19 05:15:28 +00:00
</style>