train robbery deck display
This commit is contained in:
Alberto Xamin
Alberto Xamin
parent
9bc1922e76
commit
ca74f692ec
@ -115,7 +115,7 @@ export default {
|
||||
#816b45 10px
|
||||
);
|
||||
}
|
||||
.card:not(.back, .fistful-of-cards, .high-noon, .gold-rush):before {
|
||||
.card:not(.back, .fistful-of-cards, .high-noon, .gold-rush, .train-piece):before {
|
||||
content: "";
|
||||
background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
|
||||
radial-gradient(var(--bg-color) 14%, transparent 5%),
|
||||
@ -347,4 +347,21 @@ export default {
|
||||
border-radius: 100%;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.train-piece {
|
||||
background: linear-gradient(180deg, rgba(218,101,64,1) 0%, rgba(217,197,184,1) 13%, rgba(217,197,184,1) 53%, rgba(235,169,95,1) 61%, rgba(158,81,55,1) 91%, rgba(158,81,55,1) 100%);
|
||||
box-shadow: 0 0 0pt 2pt var(--font-color), 0 0 5pt 2pt #aaa;
|
||||
}
|
||||
.train-piece .emoji {
|
||||
transform: scaleX(-1);
|
||||
/* filter: grayscale(1); */
|
||||
}
|
||||
.train-piece h4 {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
bottom: -10pt;
|
||||
top: unset;
|
||||
font-size: 11pt;
|
||||
color: #FFE27E;
|
||||
}
|
||||
</style>
|
||||
@ -11,6 +11,21 @@
|
||||
<card :card="goldRushCardBack" :donotlocalize="true" class="gold-rush back last-event" @click.native="goldRushShopOpen = !goldRushShopOpen"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deck" :style="`position:relative;border: 2px dashed #6a6a6a42;border-radius:8pt;align-items: flex-end;`" >
|
||||
<station-card v-for="i in 8" :key="i" :card="{
|
||||
name: 'station' + i,
|
||||
}" :price="lastScrap" :trainPiece="
|
||||
i == 6 ? {
|
||||
name: 'Iron House',
|
||||
icon: '🚂',
|
||||
back: true,
|
||||
} : i > 6 ? {
|
||||
name: 'Passenger Car',
|
||||
icon: '🚃',
|
||||
back: true,
|
||||
} : undefined
|
||||
"/>
|
||||
</div>
|
||||
<div v-if="eventCard" style="position:relative">
|
||||
<div class="card fistful-of-cards" style="position:relative; bottom:-3pt;right:-3pt;"/>
|
||||
<div class="card fistful-of-cards" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/>
|
||||
@ -59,6 +74,7 @@
|
||||
|
||||
<script>
|
||||
import Card from '@/components/Card.vue'
|
||||
import StationCard from '@/components/StationCard.vue'
|
||||
|
||||
export default {
|
||||
name: 'Deck',
|
||||
@ -67,6 +83,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
Card,
|
||||
StationCard
|
||||
},
|
||||
data: () => ({
|
||||
card: {
|
||||
|
||||
112
frontend/src/components/StationCard.vue
Normal file
112
frontend/src/components/StationCard.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="stationcard">
|
||||
<h4>{{ cardName }}</h4>
|
||||
<div :class="{ emoji: true, bottomed: card.avatar }">{{ emoji }}</div>
|
||||
<div class="alt_text">{{ card.alt_text }}</div>
|
||||
<card :card="price" />
|
||||
</div>
|
||||
<card v-if="trainPiece" class="train-piece" :card="trainPiece" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '@/components/Card.vue'
|
||||
|
||||
export default {
|
||||
name: "StationCard",
|
||||
props: {
|
||||
card: Object,
|
||||
price: Object,
|
||||
trainPiece: Object,
|
||||
donotlocalize: Boolean,
|
||||
},
|
||||
components: {
|
||||
Card
|
||||
},
|
||||
computed: {
|
||||
cardName() {
|
||||
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.card.name;
|
||||
},
|
||||
emoji() {
|
||||
return this.card.icon != "you" ? this.card.icon : this.$t("you");
|
||||
},
|
||||
suit() {
|
||||
if (this.card && !isNaN(this.card.suit)) {
|
||||
let x = ["♦️", "♣️", "♥️", "♠️", "🤑"];
|
||||
return x[this.card.suit];
|
||||
} else if (this.card.suit) {
|
||||
return this.card.suit;
|
||||
}
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stationcard {
|
||||
cursor: pointer;
|
||||
width: 60pt;
|
||||
min-width: 60pt;
|
||||
height: 60pt;
|
||||
margin: 6pt;
|
||||
border-radius: 16pt 16pt 2pt 2pt;
|
||||
position: relative;
|
||||
transition: all 0.5s ease-in-out;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
color: white;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgb(198 78 45),
|
||||
rgb(198 78 45) 5px,
|
||||
rgb(178 58 25) 5px,
|
||||
rgb(178 58 25) 10px
|
||||
);
|
||||
border: 2pt solid rgb(198 78 45);
|
||||
box-shadow: 0 0 0pt 2pt var(--font-color), 0 0 5pt 2pt #aaa;
|
||||
}
|
||||
.stationcard h4 {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: -10pt;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.alt_text {
|
||||
right: 3pt;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
font-size: small;
|
||||
bottom: 20pt;
|
||||
left: 3pt;
|
||||
}
|
||||
.stationcard .card {
|
||||
position: absolute;
|
||||
transform: scale(0.3) rotate(14deg);
|
||||
left: -12pt;
|
||||
top: -22pt;
|
||||
}
|
||||
.train-piece {
|
||||
margin: 6pt;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user