train robbery deck display

frontend/src/components/Card.vue

@@ -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>

frontend/src/components/Deck.vue

@@ -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: {

frontend/src/components/StationCard.vue

@@ -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>