allow for alpha status
This commit is contained in:
Alberto Xamin
parent
d3a056cc6a
commit
555e48a10a
@ -1,271 +1,299 @@
|
|||||||
<template>
|
<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
|
||||||
<h4>{{cardName}}</h4>
|
:class="{
|
||||||
<div v-if="card.avatar" class="avatar" :style="`background-image: url(${card.avatar});`"></div>
|
card: true,
|
||||||
<div :class="{emoji:true, bottomed:card.avatar}">{{emoji}}</div>
|
avatarred: card.avatar,
|
||||||
<div class="alt_text">{{card.alt_text}}</div>
|
equipment: card.is_equipment,
|
||||||
<div class="suit">{{number}}<span :style="`${(card.suit !== undefined && card.suit%2 === 0)? 'color:red':''}`">{{suit}}</span></div>
|
character: card.is_character,
|
||||||
<div class="expansion" v-if="card.expansion_icon">{{card.expansion_icon}}</div>
|
back: card.is_back,
|
||||||
</div>
|
'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 :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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Card',
|
name: "Card",
|
||||||
props: {
|
props: {
|
||||||
card: Object,
|
card: Object,
|
||||||
donotlocalize: Boolean
|
donotlocalize: Boolean,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
cardName(){
|
cardName() {
|
||||||
// console.log(this.$t(`cards.${this.card.name}.name`))
|
// console.log(this.$t(`cards.${this.card.name}.name`))
|
||||||
if (!this.donotlocalize && this.$t(`cards.${this.card.name}.name`) !== `cards.${this.card.name}.name`) {
|
if (
|
||||||
return this.$t(`cards.${this.card.name}.name`)
|
!this.donotlocalize &&
|
||||||
}
|
this.$t(`cards.${this.card.name}.name`) !==
|
||||||
if (this.card.name == "you") {
|
`cards.${this.card.name}.name`
|
||||||
return this.$t('you')
|
) {
|
||||||
}
|
return this.$t(`cards.${this.card.name}.name`);
|
||||||
return this.card.name
|
}
|
||||||
},
|
if (this.card.name == "you") {
|
||||||
emoji(){
|
return this.$t("you");
|
||||||
return this.card.icon != "you" ? this.card.icon : this.$t('you')
|
}
|
||||||
},
|
return this.card.name;
|
||||||
suit() {
|
},
|
||||||
if (this.card && !isNaN(this.card.suit)) {
|
emoji() {
|
||||||
let x = ['♦️','♣️','♥️','♠️','🤑']
|
return this.card.icon != "you" ? this.card.icon : this.$t("you");
|
||||||
return x[this.card.suit];
|
},
|
||||||
} else if (this.card.suit) {
|
suit() {
|
||||||
return this.card.suit;
|
if (this.card && !isNaN(this.card.suit)) {
|
||||||
}
|
let x = ["♦️", "♣️", "♥️", "♠️", "🤑"];
|
||||||
return '';
|
return x[this.card.suit];
|
||||||
},
|
} else if (this.card.suit) {
|
||||||
number() {
|
return this.card.suit;
|
||||||
if (isNaN(this.card.suit))
|
}
|
||||||
return this.card.number
|
return "";
|
||||||
if (this.card.number === 1) return 'A'
|
},
|
||||||
else if (this.card.number === 11) return 'J'
|
number() {
|
||||||
else if (this.card.number === 12) return 'Q'
|
if (isNaN(this.card.suit)) return this.card.number;
|
||||||
else if (this.card.number === 13) return 'K'
|
if (this.card.number === 1) return "A";
|
||||||
else return this.card.number
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card {
|
.card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 60pt;
|
width: 60pt;
|
||||||
min-width:60pt;
|
min-width: 60pt;
|
||||||
height: 100pt;
|
height: 100pt;
|
||||||
margin: 12pt;
|
margin: 12pt;
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
box-shadow:
|
box-shadow: 0 0 0 3pt #987e51, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||||
0 0 0 3pt #987e51,
|
border-radius: 6pt;
|
||||||
0 0 0 6pt var(--bg-color),
|
position: relative;
|
||||||
0 0 5pt 6pt #aaa;
|
transition: all 0.5s ease-in-out;
|
||||||
border-radius: 6pt;
|
color: var(--font-color);
|
||||||
position: relative;
|
text-overflow: ellipsis;
|
||||||
transition: all 0.5s ease-in-out;
|
word-wrap: normal;
|
||||||
color: var(--font-color);
|
|
||||||
/* overflow: hidden; */
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
word-wrap: normal;
|
|
||||||
/* word-wrap: break-word; */
|
|
||||||
}
|
}
|
||||||
.avatarred {
|
.avatarred {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.card.back{
|
.card.back {
|
||||||
color:white;
|
color: white;
|
||||||
background: repeating-linear-gradient(
|
background: repeating-linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
#987e51,
|
#987e51,
|
||||||
#987e51 5px,
|
#987e51 5px,
|
||||||
#816b45 5px,
|
#816b45 5px,
|
||||||
#816b45 10px
|
#816b45 10px
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
.card:not(.back,.fistful-of-cards,.high-noon,.gold-rush):before{
|
.card:not(.back, .fistful-of-cards, .high-noon, .gold-rush):before {
|
||||||
content: "";
|
content: "";
|
||||||
background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
|
background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
|
||||||
radial-gradient(var(--bg-color) 14%, transparent 5%),
|
radial-gradient(var(--bg-color) 14%, transparent 5%),
|
||||||
radial-gradient(var(--bg-color) 8%, transparent 5%);
|
radial-gradient(var(--bg-color) 8%, transparent 5%);
|
||||||
background-position: -12px 0, 12px 14px, 0 -12pt;
|
background-position: -12px 0, 12px 14px, 0 -12pt;
|
||||||
background-size: 50px 50px;
|
background-size: 50px 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
bottom: -4px;
|
bottom: -4px;
|
||||||
right: -4px;
|
right: -4px;
|
||||||
}
|
}
|
||||||
.card.equipment {
|
.card.equipment {
|
||||||
box-shadow:
|
box-shadow: 0 0 0 3pt #5c5e83, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||||
0 0 0 3pt #5c5e83,
|
|
||||||
0 0 0 6pt var(--bg-color),
|
|
||||||
0 0 5pt 6pt #aaa;
|
|
||||||
}
|
}
|
||||||
.card.character {
|
.card.character {
|
||||||
box-shadow:
|
box-shadow: 0 0 0 3pt #7c795b, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||||
0 0 0 3pt #7c795b,
|
|
||||||
0 0 0 6pt var(--bg-color),
|
|
||||||
0 0 5pt 6pt #aaa;
|
|
||||||
}
|
}
|
||||||
.card.usable-next-turn {
|
.card.usable-next-turn {
|
||||||
box-shadow:
|
box-shadow: 0 0 0 3pt #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
|
||||||
0 0 0 3pt #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa
|
|
||||||
}
|
}
|
||||||
.card.wild-west-show{
|
.card.wild-west-show {
|
||||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||||
border: 2pt dotted #987e51;
|
border: 2pt dotted #987e51;
|
||||||
}
|
}
|
||||||
.card.high-noon{
|
.card.high-noon {
|
||||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||||
border: 2pt dotted rgb(198 78 45);
|
border: 2pt dotted rgb(198 78 45);
|
||||||
}
|
}
|
||||||
.card.fistful-of-cards{
|
.card.fistful-of-cards {
|
||||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||||
border: 2pt dashed rgb(50 122 172);
|
border: 2pt dashed rgb(50 122 172);
|
||||||
}
|
}
|
||||||
.card.back.fistful-of-cards{
|
.card.back.fistful-of-cards {
|
||||||
color:var(--bg-color);
|
background: repeating-linear-gradient(
|
||||||
background: repeating-linear-gradient(
|
45deg,
|
||||||
45deg,
|
rgb(50 122 172),
|
||||||
rgb(50 122 172),
|
rgb(50 122 172) 5px,
|
||||||
rgb(50 122 172) 5px,
|
rgb(30 102 152) 5px,
|
||||||
rgb(30 102 152) 5px,
|
rgb(30 102 152) 10px
|
||||||
rgb(30 102 152) 10px
|
);
|
||||||
);
|
border: 2pt solid rgb(50 122 172);
|
||||||
border: 2pt solid rgb(50 122 172);
|
|
||||||
}
|
}
|
||||||
.card.back.high-noon{
|
.card.back.high-noon {
|
||||||
color:var(--bg-color);
|
background: repeating-linear-gradient(
|
||||||
background: repeating-linear-gradient(
|
45deg,
|
||||||
45deg,
|
rgb(198 78 45),
|
||||||
rgb(198 78 45),
|
rgb(198 78 45) 5px,
|
||||||
rgb(198 78 45) 5px,
|
rgb(178 58 25) 5px,
|
||||||
rgb(178 58 25) 5px,
|
rgb(178 58 25) 10px
|
||||||
rgb(178 58 25) 10px
|
);
|
||||||
);
|
border: 2pt solid rgb(198 78 45);
|
||||||
border: 2pt solid rgb(198 78 45);
|
|
||||||
}
|
}
|
||||||
.card.back.the-valley-of-shadows{
|
.card.back.the-valley-of-shadows {
|
||||||
color:var(--bg-color);
|
background: repeating-linear-gradient(
|
||||||
background: repeating-linear-gradient(
|
45deg,
|
||||||
45deg,
|
rgb(98 88 85),
|
||||||
rgb(98 88 85),
|
rgb(98 88 85) 5px,
|
||||||
rgb(98 88 85) 5px,
|
rgb(78 68 65) 5px,
|
||||||
rgb(78 68 65) 5px,
|
rgb(78 68 65) 10px
|
||||||
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 5pt 6pt #aaa;
|
||||||
0 0 0 3pt rgb(98 88 85),
|
|
||||||
0 0 0 6pt var(--bg-color),
|
|
||||||
0 0 5pt 6pt #aaa;
|
|
||||||
}
|
}
|
||||||
.card.back.cant-play {
|
.card.back.cant-play {
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
filter: grayscale(1);
|
filter: grayscale(1);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
.card.back.cant-play:hover {
|
.card.back.cant-play:hover {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
filter: grayscale(0.6);
|
filter: grayscale(0.6);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.beta::after {
|
.beta::after {
|
||||||
content: "Beta";
|
content: "Beta";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -12pt;
|
bottom: -12pt;
|
||||||
right: -12pt;
|
right: -12pt;
|
||||||
background: red;
|
background: red;
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
color: white;
|
||||||
font-weight: bold;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
padding: 4pt;
|
font-weight: bold;
|
||||||
border-radius: 12pt;
|
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;
|
||||||
}
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 36pt;
|
width: 36pt;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
top: 25%;
|
top: 25%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border-radius: 36pt;
|
border-radius: 36pt;
|
||||||
height: 36pt;
|
height: 36pt;
|
||||||
}
|
}
|
||||||
.card.brown.gold-rush {
|
.card.brown.gold-rush {
|
||||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
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 {
|
.card.black.gold-rush {
|
||||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||||
border: 2pt dotted #000;
|
border: 2pt dotted #000;
|
||||||
}
|
}
|
||||||
.card.back.gold-rush {
|
.card.back.gold-rush {
|
||||||
background: repeating-linear-gradient(347deg, #ffb32f, #987e51 );
|
background: repeating-linear-gradient(347deg, #ffb32f, #987e51);
|
||||||
}
|
}
|
||||||
.card h4 {
|
.card h4 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: -10pt;
|
top: -10pt;
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
.card.back h4{
|
.card.back h4 {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
.card .emoji {
|
.card .emoji {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size:26pt;
|
font-size: 26pt;
|
||||||
top: 35%;
|
top: 35%;
|
||||||
}
|
}
|
||||||
.emoji.bottomed {
|
.emoji.bottomed {
|
||||||
top: 45%;
|
top: 45%;
|
||||||
left: 8pt;
|
left: 8pt;
|
||||||
}
|
}
|
||||||
.card.must-be-used {
|
.card.must-be-used {
|
||||||
filter: drop-shadow(0 0 5px red);
|
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,
|
||||||
top:auto !important;
|
.high-noon .emoji,
|
||||||
bottom:15% !important;
|
.card.wild-west-show .emoji,
|
||||||
|
.exp-pack .emoji {
|
||||||
|
top: auto !important;
|
||||||
|
bottom: 15% !important;
|
||||||
}
|
}
|
||||||
.card .suit {
|
.card .suit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 3pt;
|
bottom: 3pt;
|
||||||
left:3pt;
|
left: 3pt;
|
||||||
}
|
}
|
||||||
.card.character .suit {
|
.card.character .suit {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
right: 3pt;
|
right: 3pt;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.alt_text {
|
.alt_text {
|
||||||
right: 3pt;
|
right: 3pt;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
bottom: 20pt;
|
bottom: 20pt;
|
||||||
left: 3pt;
|
left: 3pt;
|
||||||
}
|
}
|
||||||
.cant-play {
|
.cant-play {
|
||||||
filter: brightness(0.5);
|
filter: brightness(0.5);
|
||||||
}
|
}
|
||||||
.expansion {
|
.expansion {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -5pt;
|
bottom: -5pt;
|
||||||
right: -5pt;
|
right: -5pt;
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,11 @@
|
|||||||
export const expansionsMap = {
|
export const expansionsMap = {
|
||||||
'dodge_city' : {
|
'dodge_city': {
|
||||||
name: 'Dodge City',
|
name: 'Dodge City',
|
||||||
icon: '🐄',
|
icon: '🐄',
|
||||||
back: true,
|
back: true,
|
||||||
expansion: 'dodge-city',
|
expansion: 'dodge-city',
|
||||||
},
|
},
|
||||||
'fistful_of_cards' : {
|
'fistful_of_cards': {
|
||||||
name: 'Fistful of Cards',
|
name: 'Fistful of Cards',
|
||||||
icon: '🎴',
|
icon: '🎴',
|
||||||
back: true,
|
back: true,
|
||||||
@ -28,11 +28,13 @@ export const expansionsMap = {
|
|||||||
icon: '👻',
|
icon: '👻',
|
||||||
back: true,
|
back: true,
|
||||||
expansion: 'the-valley-of-shadows',
|
expansion: 'the-valley-of-shadows',
|
||||||
|
status: 'beta',
|
||||||
},
|
},
|
||||||
'wild_west_show': {
|
'wild_west_show': {
|
||||||
name: 'Wild West Show',
|
name: 'Wild West Show',
|
||||||
icon: '🎪',
|
icon: '🎪',
|
||||||
back: true,
|
back: true,
|
||||||
expansion: 'wild-west-show'
|
expansion: 'wild-west-show',
|
||||||
|
status: 'alpha',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user