131 lines
2.2 KiB
Vue
131 lines
2.2 KiB
Vue
<template>
|
|
<div :class="{ card: true, equipment: card.is_equipment, character:card.is_character, back:card.is_back}">
|
|
<h4>{{card.name}}</h4>
|
|
<div class="emoji">{{card.icon}}</div>
|
|
<div v-if="card.is_character" class="alt_text">{{card.alt_text}}</div>
|
|
<div class="suit">{{card.number}}{{suit}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Card',
|
|
props: {
|
|
card: Object
|
|
},
|
|
computed: {
|
|
suit() {
|
|
if (this.card && !isNaN(this.card.suit)) {
|
|
let x = ['♦️','♣️','♥️','♠️']
|
|
return x[this.card.suit];
|
|
}
|
|
return '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.card {
|
|
cursor: pointer;
|
|
width: 60pt;
|
|
min-width:60pt;
|
|
height: 100pt;
|
|
margin: 12pt;
|
|
background: white;
|
|
box-shadow:
|
|
0 0 0 3pt #987e51,
|
|
0 0 0 6pt white,
|
|
0 0 5pt 6pt #aaa;
|
|
border-radius: 6pt;
|
|
position: relative;
|
|
transition: all 0.5s ease-in-out;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal;
|
|
/* word-wrap: break-word; */
|
|
}
|
|
.card.back{
|
|
color:white;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#987e51,
|
|
#987e51 5px,
|
|
#816b45 5px,
|
|
#816b45 10px
|
|
);
|
|
}
|
|
.card.equipment {
|
|
box-shadow:
|
|
0 0 0 3pt #5c5e83,
|
|
0 0 0 6pt white,
|
|
0 0 5pt 6pt #aaa;
|
|
}
|
|
.card.character {
|
|
box-shadow:
|
|
0 0 0 3pt #7c795b,
|
|
0 0 0 6pt white,
|
|
0 0 5pt 6pt #aaa;
|
|
}
|
|
.card h4 {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
top: -10pt;
|
|
}
|
|
.card .emoji {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size:26pt;
|
|
top: 35%;
|
|
}
|
|
.card .suit {
|
|
position: absolute;
|
|
bottom: 3pt;
|
|
left:3pt;
|
|
}
|
|
.card.character .suit {
|
|
font-size: x-small;
|
|
right: 3pt;
|
|
text-align: center;
|
|
}
|
|
.card.character .alt_text {
|
|
right: 3pt;
|
|
text-align: center;
|
|
position: absolute;
|
|
font-size: small;
|
|
bottom: 16pt;
|
|
left: 3pt;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root, #app {
|
|
background-color: #181a1b;
|
|
color: rgb(174, 194, 211);
|
|
}
|
|
.card {
|
|
background-color: #181a1b;
|
|
color: rgb(174, 194, 211);
|
|
box-shadow:
|
|
0 0 0 3pt #987e51,
|
|
0 0 0 6pt #181a1b,
|
|
0 0 5pt 6pt #aaa;
|
|
}
|
|
.card.back{
|
|
color:#181a1b;
|
|
}
|
|
.card.equipment {
|
|
box-shadow:
|
|
0 0 0 3pt #5c5e83,
|
|
0 0 0 6pt #181a1b,
|
|
0 0 5pt 6pt #aaa;
|
|
}
|
|
.card.character {
|
|
box-shadow:
|
|
0 0 0 3pt #7c795b,
|
|
0 0 0 6pt #181a1b,
|
|
0 0 5pt 6pt #aaa;
|
|
}
|
|
}
|
|
</style> |