2019-11-26 21:37:10 +00:00
|
|
|
<!-- TODO: abstract styles, only add card specific styles in each component -->
|
2019-04-19 05:33:49 +00:00
|
|
|
<template lang="html">
|
2020-07-22 20:09:23 +00:00
|
|
|
<b-card no-body class="mb-2">
|
|
|
|
<b-row no-gutters class="game-card">
|
|
|
|
<b-col md="4">
|
|
|
|
<b-card-img
|
|
|
|
:src="coverUrl"
|
|
|
|
:alt="game.name"
|
|
|
|
@click="openDetails"
|
|
|
|
/>
|
|
|
|
</b-col>
|
|
|
|
|
|
|
|
<b-col md="8">
|
|
|
|
<b-card-body :title="game.name" title-tag="h6">
|
|
|
|
<b-form-rating
|
|
|
|
inline
|
|
|
|
:value="Math.round((game.rating / 20) * 2) / 2"
|
|
|
|
readonly
|
|
|
|
variant="warning"
|
|
|
|
size="sm"
|
|
|
|
no-border
|
|
|
|
/>
|
|
|
|
</b-card-body>
|
|
|
|
</b-col>
|
|
|
|
</b-row>
|
|
|
|
</b-card>
|
2019-11-08 20:34:06 +00:00
|
|
|
|
2020-07-22 20:09:23 +00:00
|
|
|
<!-- <div v-if="gameId && games[gameId]" :class="gameCardClass">
|
2019-11-08 20:34:06 +00:00
|
|
|
<div class="game-info">
|
2020-02-18 17:30:34 +00:00
|
|
|
<span
|
|
|
|
v-if="showReleaseDates && releaseDate"
|
|
|
|
v-text="releaseDateText"
|
|
|
|
class="release-date drag-filter"
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
|
2020-01-06 17:05:49 +00:00
|
|
|
<game-progress
|
2019-12-18 05:47:35 +00:00
|
|
|
v-if="gameProgress"
|
2020-01-06 17:05:49 +00:00
|
|
|
small
|
|
|
|
:progress="gameProgress"
|
2020-02-03 16:26:03 +00:00
|
|
|
class="drag-filter"
|
2020-01-06 17:05:49 +00:00
|
|
|
@click.native="openDetails"
|
2019-12-18 05:47:35 +00:00
|
|
|
/>
|
|
|
|
|
2019-11-08 20:34:06 +00:00
|
|
|
<i
|
|
|
|
v-if="note"
|
|
|
|
:title="note"
|
2020-02-03 16:26:03 +00:00
|
|
|
class="fas fa-sticky-note note drag-filter"
|
2019-11-08 20:34:06 +00:00
|
|
|
@click="openDetails"
|
|
|
|
/>
|
|
|
|
|
2020-02-03 16:26:03 +00:00
|
|
|
<div v-if="hasTags" class="game-tags drag-filter">
|
|
|
|
<div
|
|
|
|
v-for="({ games, hex, tagTextColor }, name) in tags"
|
2019-11-08 20:34:06 +00:00
|
|
|
v-if="games.includes(game.id)"
|
2020-02-03 16:26:03 +00:00
|
|
|
:key="name"
|
|
|
|
>
|
|
|
|
<tag
|
|
|
|
v-if="games.includes(game.id)"
|
|
|
|
:label="name"
|
|
|
|
:hex="hex"
|
|
|
|
:text-hex="tagTextColor"
|
|
|
|
readonly
|
|
|
|
@action="openTags"
|
|
|
|
/>
|
|
|
|
</div>
|
2019-04-19 05:33:49 +00:00
|
|
|
</div>
|
2019-11-08 20:34:06 +00:00
|
|
|
</div>
|
2020-07-22 20:09:23 +00:00
|
|
|
</div> -->
|
2019-04-19 05:33:49 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-01-06 17:05:49 +00:00
|
|
|
import GameProgress from '@/components/GameDetail/GameProgress';
|
2019-04-19 05:33:49 +00:00
|
|
|
import GameCardUtils from '@/components/GameCards/GameCard';
|
2019-11-21 22:06:14 +00:00
|
|
|
import Tag from '@/components/Tag';
|
2019-04-19 05:33:49 +00:00
|
|
|
|
|
|
|
export default {
|
2019-11-08 19:56:03 +00:00
|
|
|
components: {
|
2020-01-06 17:05:49 +00:00
|
|
|
GameProgress,
|
2019-11-08 19:56:03 +00:00
|
|
|
Tag,
|
|
|
|
},
|
2019-04-19 05:33:49 +00:00
|
|
|
|
2019-11-08 19:56:03 +00:00
|
|
|
mixins: [GameCardUtils],
|
2019-04-19 05:33:49 +00:00
|
|
|
};
|
|
|
|
</script>
|