gamebrary/src/components/Game/GameDetails.vue

131 lines
3.3 KiB
Vue
Raw Normal View History

2020-08-22 12:21:15 +00:00
<template lang="html">
2021-01-10 19:56:37 +00:00
<dl>
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.platforms') }}</dt>
<dd class="text-wrap">{{ platforms }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.genres') }}</dt>
<dd class="text-wrap">{{ genres }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.gameModes') }}</dt>
<dd class="text-wrap">{{ gameModes }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.developers') }}</dt>
<dd class="text-wrap">{{ gameDevelopers }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.publishers') }}</dt>
<dd class="text-wrap">{{ gamePublishers }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.perspective') }}</dt>
<dd class="text-wrap">{{ playerPerspectives }}</dd>
2020-08-22 12:21:15 +00:00
2020-11-01 16:54:19 +00:00
<dt class="w-100">{{ $t('board.gameModal.ageRatings') }}</dt>
<dd class="text-wrap">{{ ageRatings }}</dd>
2020-08-22 12:21:15 +00:00
2021-01-26 22:10:56 +00:00
<dt class="w-100">{{ $t('board.gameModal.releaseDate') }}</dt>
<dd class="text-wrap">
<div v-for="releaseDate in releaseDates">
{{ releaseDate }}
</div>
</dd>
2020-11-01 16:54:19 +00:00
</dl>
2020-08-22 12:21:15 +00:00
</template>
<script>
2021-01-26 22:10:56 +00:00
import { mapGetters } from 'vuex';
2020-08-22 12:21:15 +00:00
export default {
props: {
game: Object,
},
data() {
return {
ageRating: {
categories: {
1: 'ESRB',
2: 'PEGI',
},
values: {
1: '3',
2: '7',
3: '12',
4: '16',
5: '18',
6: 'RP',
7: 'EC',
8: 'E',
9: 'E10',
10: 'T',
11: 'M',
12: 'AO',
},
},
};
},
computed: {
2021-01-26 22:10:56 +00:00
...mapGetters(['platformNames']),
2020-08-22 12:21:15 +00:00
genres() {
return this.game && this.game.genres
? this.game.genres.map(({ name }) => name).join(', ')
: 'N/A';
},
platforms() {
return this.game && this.game.platforms
? this.game.platforms.map(({ name }) => name).join(', ')
: 'N/A';
},
gameDevelopers() {
return this.game && this.game.involved_companies
? this.game.involved_companies
.filter(({ developer }) => developer)
.map(({ company }) => company.name).join(', ')
: 'N/A';
},
gamePublishers() {
return this.game && this.game.involved_companies
? this.game.involved_companies
.filter(({ publisher }) => publisher)
.map(({ company }) => company.name).join(', ')
: 'N/A';
},
gameModes() {
return this.game && this.game.game_modes
? this.game.game_modes.map(({ name }) => name).join(', ')
: 'N/A';
},
playerPerspectives() {
return this.game && this.game.player_perspectives
? this.game.player_perspectives.map(({ name }) => name).join(', ')
: 'N/A';
},
ageRatings() {
return this.game && this.game.age_ratings
? this.game.age_ratings.map(({ category, rating }) => `${this.ageRating.categories[category]}: ${this.ageRating.values[rating]}`).join(', ')
: 'N/A';
},
2021-01-26 22:10:56 +00:00
releaseDates() {
const hasReleaseDates = this.game && this.game.release_dates;
if (!hasReleaseDates) {
return 'N/A';
}
return this.game.release_dates.map(({ platform, date }) => {
const formattedDate = new Date(date).toLocaleDateString('en-US');
return `${this.platformNames[platform].name}: ${formattedDate}`;
});
},
2020-08-22 12:21:15 +00:00
},
};
</script>