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: {
|
|
|
|
...mapState(['games', 'gameModalData']),
|
|
|
|
|
|
|
|
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) {
|
|
|
|
const { list } = this.gameModalData;
|
|
|
|
|
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>
|