allow for alpha status

frontend/src/components/Card.vue

@@ -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="suit">
-		<div class="expansion" v-if="card.expansion_icon">{{card.expansion_icon}}</div>
+      {{ 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`) {
+      if (
-				return this.$t(`cards.${this.card.name}.name`)
+        !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))
+      if (isNaN(this.card.suit)) return this.card.number;
-				return this.card.number
+      if (this.card.number === 1) return "A";
-			if (this.card.number === 1) return 'A'
+      else if (this.card.number === 11) return "J";
-			else if (this.card.number === 11) return 'J'
+      else if (this.card.number === 12) return "Q";
-			else if (this.card.number === 12) return 'Q'
+      else if (this.card.number === 13) return "K";
-			else if (this.card.number === 13) return 'K'
+      else return this.card.number;
-			else return this.card.number
+    },
-		}
+  },
-	}
+};
-}
 </script>
 
 <style>
@@ -60,18 +90,13 @@ export default {
   height: 100pt;
   margin: 12pt;
   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,
-		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: 
+  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 {
-	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 {
-	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 {
   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: 
+  box-shadow: 0 0 0 3pt rgb(98 88 85), 0 0 0 6pt var(--bg-color),
-		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>

frontend/src/utils/expansions-map.js

@@ -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',
 	}
 }