allow for alpha status
This commit is contained in:
Alberto Xamin
parent
d3a056cc6a
commit
555e48a10a
@ -1,55 +1,85 @@
|
||||
<template>
|
||||
<div :class="{ card: true, avatarred:card.avatar, equipment: card.is_equipment, character:card.is_character, back:card.is_back, 'usable-next-turn':card.usable_next_turn, 'must-be-used':card.must_be_used, 'gold-rush': card.expansion === 'gold_rush', 'brown':card.kind === 0, 'black':card.kind === 1,}">
|
||||
<div
|
||||
:class="{
|
||||
card: true,
|
||||
avatarred: card.avatar,
|
||||
equipment: card.is_equipment,
|
||||
character: card.is_character,
|
||||
back: card.is_back,
|
||||
'usable-next-turn': card.usable_next_turn,
|
||||
'must-be-used': card.must_be_used,
|
||||
'gold-rush': card.expansion === 'gold_rush',
|
||||
brown: card.kind === 0,
|
||||
black: card.kind === 1,
|
||||
}"
|
||||
>
|
||||
<h4>{{ cardName }}</h4>
|
||||
<div v-if="card.avatar" class="avatar" :style="`background-image: url(${card.avatar});`"></div>
|
||||
<div
|
||||
v-if="card.avatar"
|
||||
class="avatar"
|
||||
:style="`background-image: url(${card.avatar});`"
|
||||
></div>
|
||||
<div :class="{ emoji: true, bottomed: card.avatar }">{{ emoji }}</div>
|
||||
<div class="alt_text">{{ card.alt_text }}</div>
|
||||
<div class="suit">{{number}}<span :style="`${(card.suit !== undefined && card.suit%2 === 0)? 'color:red':''}`">{{suit}}</span></div>
|
||||
<div class="expansion" v-if="card.expansion_icon">{{card.expansion_icon}}</div>
|
||||
<div class="suit">
|
||||
{{ number
|
||||
}}<span
|
||||
:style="`${
|
||||
card.suit !== undefined && card.suit % 2 === 0 ? 'color:red' : ''
|
||||
}`"
|
||||
>{{ suit }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="expansion" v-if="card.expansion_icon">
|
||||
{{ card.expansion_icon }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Card',
|
||||
name: "Card",
|
||||
props: {
|
||||
card: Object,
|
||||
donotlocalize: Boolean
|
||||
donotlocalize: Boolean,
|
||||
},
|
||||
computed: {
|
||||
cardName() {
|
||||
// console.log(this.$t(`cards.${this.card.name}.name`))
|
||||
if (!this.donotlocalize && this.$t(`cards.${this.card.name}.name`) !== `cards.${this.card.name}.name`) {
|
||||
return this.$t(`cards.${this.card.name}.name`)
|
||||
if (
|
||||
!this.donotlocalize &&
|
||||
this.$t(`cards.${this.card.name}.name`) !==
|
||||
`cards.${this.card.name}.name`
|
||||
) {
|
||||
return this.$t(`cards.${this.card.name}.name`);
|
||||
}
|
||||
if (this.card.name == "you") {
|
||||
return this.$t('you')
|
||||
return this.$t("you");
|
||||
}
|
||||
return this.card.name
|
||||
return this.card.name;
|
||||
},
|
||||
emoji() {
|
||||
return this.card.icon != "you" ? this.card.icon : this.$t('you')
|
||||
return this.card.icon != "you" ? this.card.icon : this.$t("you");
|
||||
},
|
||||
suit() {
|
||||
if (this.card && !isNaN(this.card.suit)) {
|
||||
let x = ['♦️','♣️','♥️','♠️','🤑']
|
||||
let x = ["♦️", "♣️", "♥️", "♠️", "🤑"];
|
||||
return x[this.card.suit];
|
||||
} else if (this.card.suit) {
|
||||
return this.card.suit;
|
||||
}
|
||||
return '';
|
||||
return "";
|
||||
},
|
||||
number() {
|
||||
if (isNaN(this.card.suit))
|
||||
return this.card.number
|
||||
if (this.card.number === 1) return 'A'
|
||||
else if (this.card.number === 11) return 'J'
|
||||
else if (this.card.number === 12) return 'Q'
|
||||
else if (this.card.number === 13) return 'K'
|
||||
else return this.card.number
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isNaN(this.card.suit)) return this.card.number;
|
||||
if (this.card.number === 1) return "A";
|
||||
else if (this.card.number === 11) return "J";
|
||||
else if (this.card.number === 12) return "Q";
|
||||
else if (this.card.number === 13) return "K";
|
||||
else return this.card.number;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -60,18 +90,13 @@ export default {
|
||||
height: 100pt;
|
||||
margin: 12pt;
|
||||
background: var(--bg-color);
|
||||
box-shadow:
|
||||
0 0 0 3pt #987e51,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
box-shadow: 0 0 0 3pt #987e51, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||
border-radius: 6pt;
|
||||
position: relative;
|
||||
transition: all 0.5s ease-in-out;
|
||||
color: var(--font-color);
|
||||
/* overflow: hidden; */
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
/* word-wrap: break-word; */
|
||||
}
|
||||
.avatarred {
|
||||
display: flex;
|
||||
@ -103,20 +128,13 @@ export default {
|
||||
right: -4px;
|
||||
}
|
||||
.card.equipment {
|
||||
box-shadow:
|
||||
0 0 0 3pt #5c5e83,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
box-shadow: 0 0 0 3pt #5c5e83, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.character {
|
||||
box-shadow:
|
||||
0 0 0 3pt #7c795b,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
box-shadow: 0 0 0 3pt #7c795b, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.usable-next-turn {
|
||||
box-shadow:
|
||||
0 0 0 3pt #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa
|
||||
box-shadow: 0 0 0 3pt #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.wild-west-show {
|
||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||
@ -131,7 +149,6 @@ export default {
|
||||
border: 2pt dashed rgb(50 122 172);
|
||||
}
|
||||
.card.back.fistful-of-cards {
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(50 122 172),
|
||||
@ -142,7 +159,6 @@ export default {
|
||||
border: 2pt solid rgb(50 122 172);
|
||||
}
|
||||
.card.back.high-noon {
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(198 78 45),
|
||||
@ -153,7 +169,6 @@ export default {
|
||||
border: 2pt solid rgb(198 78 45);
|
||||
}
|
||||
.card.back.the-valley-of-shadows {
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(98 88 85),
|
||||
@ -161,9 +176,7 @@ export default {
|
||||
rgb(78 68 65) 5px,
|
||||
rgb(78 68 65) 10px
|
||||
);
|
||||
box-shadow:
|
||||
0 0 0 3pt rgb(98 88 85),
|
||||
0 0 0 6pt var(--bg-color),
|
||||
box-shadow: 0 0 0 3pt rgb(98 88 85), 0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.back.cant-play {
|
||||
@ -183,7 +196,20 @@ export default {
|
||||
right: -12pt;
|
||||
background: red;
|
||||
font-size: 10pt;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: white;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4pt;
|
||||
border-radius: 12pt;
|
||||
}
|
||||
.alpha::after {
|
||||
content: "Alpha";
|
||||
position: absolute;
|
||||
bottom: -12pt;
|
||||
right: -12pt;
|
||||
background: red;
|
||||
font-size: 10pt;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4pt;
|
||||
border-radius: 12pt;
|
||||
@ -201,7 +227,7 @@ export default {
|
||||
}
|
||||
.card.brown.gold-rush {
|
||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||
border: 2pt dotted #9C7340;
|
||||
border: 2pt dotted #9c7340;
|
||||
}
|
||||
.card.black.gold-rush {
|
||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||
@ -234,7 +260,10 @@ export default {
|
||||
.card.must-be-used {
|
||||
filter: drop-shadow(0 0 5px red);
|
||||
}
|
||||
.fistful-of-cards .emoji, .high-noon .emoji, .card.wild-west-show .emoji, .exp-pack .emoji{
|
||||
.fistful-of-cards .emoji,
|
||||
.high-noon .emoji,
|
||||
.card.wild-west-show .emoji,
|
||||
.exp-pack .emoji {
|
||||
top: auto !important;
|
||||
bottom: 15% !important;
|
||||
}
|
||||
@ -267,5 +296,4 @@ export default {
|
||||
border-radius: 100%;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -28,11 +28,13 @@ export const expansionsMap = {
|
||||
icon: '👻',
|
||||
back: true,
|
||||
expansion: 'the-valley-of-shadows',
|
||||
status: 'beta',
|
||||
},
|
||||
'wild_west_show': {
|
||||
name: 'Wild West Show',
|
||||
icon: '🎪',
|
||||
back: true,
|
||||
expansion: 'wild-west-show'
|
||||
expansion: 'wild-west-show',
|
||||
status: 'alpha',
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user