gamebrary/src/components/Game/SimilarGames.vue

97 lines
1.9 KiB
Vue
Raw Normal View History

2021-02-16 15:54:25 +00:00
<template lang="html">
2021-02-16 20:39:48 +00:00
<div class="games" v-if="loading">
<b-skeleton-img
v-for="game in similarGames"
:key="game.id"
v-if="game.cover"
height="100px"
/>
</div>
2021-02-16 15:54:25 +00:00
2021-02-16 20:39:48 +00:00
<div v-else-if="similarGames.length">
You may also like:
2021-02-16 15:54:25 +00:00
2021-02-16 20:39:48 +00:00
<div class="games">
2021-02-16 15:54:25 +00:00
<b-img
v-for="game in similarGames"
v-if="game.cover"
:key="game.id"
:src="getCoverUrl(game.cover)"
2021-02-21 01:49:03 +00:00
class="rounded my-2 mr-2 cursor-pointer"
2021-02-16 20:39:48 +00:00
height="80"
2021-02-16 15:54:25 +00:00
@click="loadGame(game.id)"
/>
</div>
</div>
</template>
<script>
import GameCardCompact from '@/components/GameCards/GameCardCompact';
import { mapState } from 'vuex';
export default {
components: {
GameCardCompact,
},
props: {
game: Object,
2021-02-16 20:39:48 +00:00
loading: Boolean,
2021-02-16 15:54:25 +00:00
},
data() {
return {
similarGames: [],
};
},
computed: {
2021-02-22 16:29:37 +00:00
...mapState(['games', 'activeGame']),
2021-02-16 15:54:25 +00:00
similarGameIds() {
return this.game && this.game.similar_games;
},
},
mounted() {
if (this.similarGameIds) {
this.loadGames();
}
},
methods: {
getCoverUrl(cover) {
return cover && cover.image_id
? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${cover.image_id}.jpg`
: '/static/no-image.jpg';
},
loadGame(gameId) {
2021-02-22 16:29:37 +00:00
const { list } = this.activeGame;
2021-02-16 15:54:25 +00:00
2021-02-16 20:39:48 +00:00
this.$store.commit('SET_GAME_MODAL_DATA', { gameId, list });
2021-02-16 15:54:25 +00:00
},
async loadGames() {
2021-02-16 20:39:48 +00:00
this.similarGames = [];
2021-02-16 15:54:25 +00:00
2021-02-16 20:39:48 +00:00
await this.$store.dispatch('LOAD_GAMES', this.similarGameIds.toString());
2021-02-16 15:54:25 +00:00
2021-02-16 20:39:48 +00:00
this.similarGames = this.similarGameIds ?
this.similarGameIds
.filter(game => this.games && this.games[game])
.map(game => this.games && this.games[game])
: [];
2021-02-16 15:54:25 +00:00
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.games {
2021-02-16 20:39:48 +00:00
display: flex;
align-items: center;
overflow-x: auto;
2021-02-16 15:54:25 +00:00
}
</style>