2019-06-06 13:44:06 +00:00
|
|
|
<template lang="html">
|
2019-12-18 05:47:35 +00:00
|
|
|
<div v-if="gameId && games[gameId]" :class="gameCardClass">
|
2019-11-08 20:34:06 +00:00
|
|
|
<img
|
|
|
|
:src="coverUrl"
|
|
|
|
:alt="game.name"
|
|
|
|
@click="openDetails"
|
|
|
|
>
|
2019-12-15 04:32:40 +00:00
|
|
|
|
2020-01-28 16:41:50 +00:00
|
|
|
<game-progress
|
|
|
|
v-if="!showGameInfo && gameProgress"
|
|
|
|
small
|
|
|
|
:progress="gameProgress"
|
|
|
|
@click.native="openDetails"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<i
|
|
|
|
v-if="!showGameInfo"
|
|
|
|
class="fas fa-grip-vertical game-drag-handle"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-if="showGameInfo"
|
|
|
|
class="game-info"
|
|
|
|
>
|
2019-12-17 05:05:35 +00:00
|
|
|
<a
|
|
|
|
v-text="game.name"
|
|
|
|
@click="openDetails"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<game-rating
|
|
|
|
v-if="showGameRatings"
|
|
|
|
:rating="game.rating"
|
|
|
|
small
|
|
|
|
@click.native="openDetails"
|
|
|
|
/>
|
|
|
|
|
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"
|
|
|
|
@click.native="openDetails"
|
2019-12-17 05:05:35 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
<i
|
|
|
|
v-if="note"
|
|
|
|
:title="note"
|
|
|
|
class="fas fa-sticky-note note"
|
|
|
|
@click="openDetails"
|
|
|
|
/>
|
|
|
|
|
2019-12-18 05:47:35 +00:00
|
|
|
<i class="fas fa-grip-vertical game-drag-handle" />
|
|
|
|
|
|
|
|
<div v-if="hasTags" class="game-tags">
|
|
|
|
<tag
|
|
|
|
v-for="({ games, hex, tagTextColor }, name) in tags"
|
|
|
|
v-if="games.includes(game.id)"
|
|
|
|
:key="name"
|
|
|
|
:label="name"
|
|
|
|
:hex="hex"
|
|
|
|
:text-hex="tagTextColor"
|
|
|
|
readonly
|
|
|
|
@action="openTags"
|
|
|
|
/>
|
|
|
|
</div>
|
2019-12-15 04:32:40 +00:00
|
|
|
</div>
|
2019-11-08 20:34:06 +00:00
|
|
|
</div>
|
2019-06-06 13:44:06 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-12-15 04:32:40 +00:00
|
|
|
import GameRating from '@/components/GameDetail/GameRating';
|
2020-01-06 17:05:49 +00:00
|
|
|
import GameProgress from '@/components/GameDetail/GameProgress';
|
2019-06-06 13:44:06 +00:00
|
|
|
import GameCardUtils from '@/components/GameCards/GameCard';
|
2019-12-15 04:32:40 +00:00
|
|
|
import Tag from '@/components/Tag';
|
2019-06-06 13:44:06 +00:00
|
|
|
|
|
|
|
export default {
|
2019-12-15 04:32:40 +00:00
|
|
|
components: {
|
|
|
|
GameRating,
|
2020-01-06 17:05:49 +00:00
|
|
|
GameProgress,
|
2019-12-15 04:32:40 +00:00
|
|
|
Tag,
|
|
|
|
},
|
|
|
|
|
2019-11-08 19:56:03 +00:00
|
|
|
mixins: [GameCardUtils],
|
2019-06-06 13:44:06 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
2019-11-08 20:34:06 +00:00
|
|
|
@import "~styles/styles";
|
2019-06-06 13:44:06 +00:00
|
|
|
|
2019-11-08 20:34:06 +00:00
|
|
|
.game-card {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
position: relative;
|
2020-01-22 16:39:16 +00:00
|
|
|
border-radius: var(--border-radius);
|
2019-11-08 20:34:06 +00:00
|
|
|
overflow: hidden;
|
|
|
|
cursor: pointer;
|
2019-06-06 13:44:06 +00:00
|
|
|
|
2019-12-15 04:32:40 +00:00
|
|
|
&.card-placeholder {
|
|
|
|
background: var(--game-card-background);
|
|
|
|
opacity: 0.3;
|
|
|
|
|
|
|
|
.game-card-options {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-11-08 20:34:06 +00:00
|
|
|
img {
|
|
|
|
width: 100%;
|
2019-12-15 04:32:40 +00:00
|
|
|
height: 185px;
|
|
|
|
object-fit: cover;
|
|
|
|
display: flex;
|
|
|
|
align-self: center;
|
|
|
|
cursor: pointer;
|
2020-01-28 16:41:50 +00:00
|
|
|
|
|
|
|
+ .game-progress {
|
|
|
|
width: calc(100% - #{$gp});
|
|
|
|
position: absolute;
|
|
|
|
bottom: $gp / 6;
|
|
|
|
left: $gp / 2;
|
|
|
|
}
|
2019-12-15 04:32:40 +00:00
|
|
|
}
|
|
|
|
|
2019-12-18 05:47:35 +00:00
|
|
|
progress {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
|
2019-12-15 04:32:40 +00:00
|
|
|
.game-info {
|
|
|
|
padding: $gp / 2;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
2020-01-22 16:39:16 +00:00
|
|
|
border-bottom-left-radius: var(--border-radius);
|
|
|
|
border-bottom-right-radius: var(--border-radius);
|
2019-12-15 04:32:40 +00:00
|
|
|
flex-direction: column;
|
|
|
|
background: var(--game-card-background);
|
|
|
|
|
|
|
|
.game-tags {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
margin-top: $gp / 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
margin-right: $gp / 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
i.tags {
|
|
|
|
position: absolute;
|
|
|
|
bottom: $gp * 1.5;
|
|
|
|
right: $gp / 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-rating, a {
|
|
|
|
display: inline-flex;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
a {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
cursor: pointer;
|
|
|
|
margin-right: $gp / 2;
|
|
|
|
color: var(--game-card-text-color);
|
|
|
|
}
|
2019-12-17 05:05:35 +00:00
|
|
|
|
|
|
|
.title-progress {
|
|
|
|
display: grid;
|
|
|
|
grid-template: auto auto / auto auto;
|
|
|
|
|
|
|
|
a {
|
|
|
|
grid-column: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-rating {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 2;
|
|
|
|
}
|
|
|
|
|
2020-01-06 17:05:49 +00:00
|
|
|
.game-progress {
|
2019-12-17 05:05:35 +00:00
|
|
|
justify-self: end;
|
|
|
|
grid-column: 2;
|
|
|
|
grid-row: span 2;
|
|
|
|
}
|
|
|
|
}
|
2019-11-08 20:34:06 +00:00
|
|
|
}
|
2019-12-15 04:32:40 +00:00
|
|
|
|
|
|
|
.game-drag-handle {
|
|
|
|
@include drag-cursor;
|
|
|
|
position: absolute;
|
|
|
|
color: #e5e5e5;
|
|
|
|
right: $gp / 3;
|
|
|
|
top: $gp / 3;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: #a5a2a2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-tag {
|
|
|
|
margin-bottom: $gp / 3;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.note {
|
|
|
|
color: var(--note-color);
|
2019-11-08 20:34:06 +00:00
|
|
|
}
|
2019-06-06 13:44:06 +00:00
|
|
|
</style>
|