Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-09-20 05:41:57 +00:00
Code Issues Projects Releases Packages Wiki Activity

Clean up age ratings

Browse source
This commit is contained in:
Gamebrary 2024-02-04 21:16:35 -07:00
parent 2507445b6a
commit b8cb096ef9
1 changed files with 34 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/Game/GameRatings.vue
View file

@ -1,39 +1,33 @@
<!-- TODO: default to whatever is available if prefered age rating isn't availablem -->
<!-- TODO: use popover instead of deopdown -->
<template lang="html">
<!-- TODO: default to whatever is available if prefered age rating isn't availablem -->
<div v-if="ageRating === 'all'">
<b-img
v-for="{ rating, logoFormat, descriptions } in gameRatings"
:src="`/img/age-ratings/${rating}.${logoFormat || 'png'}`"
:alt="rating"
:key="rating"
:title="descriptions || rating"
v-b-tooltip
height="60"
class="mr-2 mb-2"
/>
</div>
<b-dropdown v-else-if="preferredRating" variant="link" toggle-class="p-0 mr-2 mb-2" no-caret>
<b-dropdown v-if="ratings" variant="link" toggle-class="p-0" no-caret>
<template #button-content>
<b-img
:src="`/img/age-ratings/${preferredRating.rating}.${preferredRating.logoFormat || 'png'}`"
:alt="preferredRating.rating"
:key="preferredRating.rating"
:src="`/img/age-ratings/${ratings.rating}.${ratings.logoFormat || 'png'}`"
:alt="ratings.rating"
:key="ratings.rating"
height="60"
/>
</template>
<b-dropdown-text href="#"
v-for="{ rating, logoFormat, descriptions } in gameRatings"
v-b-tooltip.right
:title="descriptions"
:key="rating"
>
<b-img
:src="`/img/age-ratings/${rating}.${logoFormat || 'png'}`"
width="40"
/>
{{ rating }}
</template>
<b-dropdown-text>
<div class="d-flex align-items-start">
<b-img
v-for="{ rating, logoFormat, description } in gameRatings"
:title="description"
:key="rating"
class="mr-2"
:src="`/img/age-ratings/${rating}.${logoFormat || 'png'}`"
height="60"
/>
<!-- <div>
<p class="m-0">{{ name }}</p>
<small v-if="description">{{ description }}</small>
</div> -->
</div>
</b-dropdown-text>
</b-dropdown>
</template>
@ -51,21 +45,25 @@ export default {
gameRatings() {
const formattedRatings = this.game?.age_ratings?.map(({ category, rating, content_descriptions }) => {
const { ratings } = AGE_RATINGS?.find(({ id }) => id === category);
const descriptions = content_descriptions?.map(({ description }) => description)?.join(', ') || null;
const { ratings, name } = AGE_RATINGS?.find(({ id }) => id === category);
const description = content_descriptions?.map(({ description }) => description)?.join(', ') || null;
const ratingData = ratings[rating];
return ratingData
? { rating: ratingData, descriptions, category }
? { rating: ratingData, description, category, name }
: {};
}) || [];
return formattedRatings.filter(value => Object.keys(value).length !== 0);
},
preferredRating() {
return this.gameRatings?.find(({ category }) => category === this.ageRating);
},
ratings() {
const preferredRating = this.gameRatings?.find(({ category }) => category === this.ageRating);
if (preferredRating) return preferredRating;
return this.gameRatings?.find(({ category }) => category);
}
},
};
</script>