replace checkbox for expansions

frontend/src/components/Card.vue

@@ -137,6 +137,53 @@ 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),
+		rgb(198 78 45) 5px,
+		rgb(178 58 25) 5px,
+		rgb(178 58 25) 10px
+	);
+	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),
+		rgb(98 88 85) 5px,
+		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),
+		0 0 5pt 6pt #aaa;
+}
+.card.back.cant-play {
+	transform: scale(0.9);
+	filter: grayscale(1);
+	opacity: 0.5;
+}
+.card.back.cant-play:hover {
+	transform: scale(0.95);
+	filter: grayscale(0.6);
+	opacity: 0.8;
+}
+.beta::after {
+	content: "Beta";
+	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 {
 	position: absolute;
 	width: 36pt;
@@ -166,6 +213,9 @@ export default {
 	top: -10pt;
 	font-size: 11pt;
 }
+.card.back h4{
+	font-size: 12pt;
+}
 .card .emoji {
 	position: absolute;
 	text-align: center;
@@ -180,7 +230,7 @@ export default {
 .card.must-be-used {
 	filter: drop-shadow(0 0 5px red);
 }
-.fistful-of-cards .emoji, .high-noon .emoji{
+.fistful-of-cards .emoji, .high-noon .emoji, .exp-pack .emoji{
 	top:auto !important;
 	bottom:15% !important;
 }

frontend/src/components/Lobby.vue

@@ -60,12 +60,10 @@
 				<p v-if="players.length < 3" class="center-stuff" style="min-height: 19px;">{{$t('minimum_players')}}</p>
 				<p v-else style="min-height: 19px;"> </p>
 				<h3>{{$t("expansions")}}</h3>
-				<div v-for="ex in expansionsStatus" v-bind:key="ex.id">
+				<div class="players-table" style="justify-content: flex-start;">
-					<PrettyCheck @click.native="toggleExpansions(ex.id)" :disabled="!isRoomOwner" :checked="ex.enabled" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{ex.name}} {{ex.emoji}}
+					<card v-for="ex in expansionsStatus"  v-bind:key="ex.id" :card="ex.card" :class="{'cant-play':!ex.enabled, 'beta':ex.is_beta, ...ex.card.classes}" :donotlocalize="true" @click.native="toggleExpansions(ex.id)"/>
-						<p v-if="ex.is_beta"  style="padding: 0px 10px;color: red;border-radius: 12pt;position: absolute;right: -50pt;top: -12pt;">BETA</p>
-					</PrettyCheck>
-					<br>
 				</div>
+				<p v-if="isRoomOwner">{{$t('click_to_toggle')}}</p>
 				<h3>{{$t('mods')}}</h3>
 				<PrettyCheck @click.native="toggleCompetitive" :disabled="!isRoomOwner" v-model="is_competitive" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('mod_comp')}}</PrettyCheck>
 				<h3>{{$t('bots')}}</h3>
@@ -114,6 +112,7 @@ import Status from './Status.vue'
 import DeadRoleNotification from './DeadRoleNotification.vue'
 import AnimatedCard from './AnimatedCard.vue'
 import { emojiMap } from '@/utils/emoji-map.js'
+import { expansionsMap } from '@/utils/expansions-map.js'
 
 const cumulativeOffset = function(element) {
 	var top = 0, left = 0;
@@ -141,7 +140,8 @@ export default {
 		FullScreenInput,
 		Status,
 		DeadRoleNotification,
-		AnimatedCard
+		AnimatedCard,
+Card
 	},
 	data: () => ({
 		username: '',
@@ -316,6 +316,7 @@ export default {
 					is_beta: this.beta_expansions.indexOf(x) !== -1,
 					enabled: this.expansions.indexOf(x) !== -1,
 					emoji: emojiMap[x],
+					card: this.getExpansionCard(x),
 				}
 			})
 		},
@@ -368,6 +369,15 @@ export default {
 		}
 	},
 	methods: {
+		getExpansionCard(id) {
+			let ex = expansionsMap[id]
+			ex.classes = {
+				back: true,
+				'exp-pack': true
+			}
+			ex.classes[ex.expansion] = true
+			return ex
+		},
 		is_toggled_expansion(ex) {
 			if (Vue.config.devtools)
 				console.log(ex+' '+ this.expansions+ (this.expansions.indexOf(ex) !== -1))

frontend/src/i18n/cs.json

@@ -26,6 +26,7 @@
 	"end_turn": "Konec tahu!",
 	"start_game": "Začít!",
 	"expansions": "Rozšíření",
+	"click_to_toggle": "Klikněte pro přepnutí",
 	"details": "Podrobnosti",
 	"ok": "OK",
 	"you": "TY",

frontend/src/i18n/en.json

@@ -26,6 +26,7 @@
   "end_turn": "End Turn!",
   "start_game": "Start!",
   "expansions": "Expansions",
+  "click_to_toggle": "Click to toggle",
   "details": "Details",
   "ok": "OK",
   "you": "YOU",

frontend/src/i18n/it.json

@@ -26,6 +26,7 @@
   "end_turn": "Termina turno!",
   "start_game": "Avvia!",
   "expansions": "Espansioni",
+  "click_to_toggle": "Clicca per attivare/disattivare",
   "details": "Dettagli",
   "ok": "OK",
   "you": "TU",

frontend/src/utils/expansions-map.js

@@ -0,0 +1,32 @@
+export const expansionsMap = {
+	'dodge_city' : {
+		name: 'Dodge City',
+		icon: '🐄',
+		back: true,
+		expansion: 'dodge-city',
+	},
+	'fistful_of_cards' : {
+		name: 'Fistful of Cards',
+		icon: '🎴',
+		back: true,
+		expansion: 'fistful-of-cards',
+	},
+	'high_noon': {
+		name: 'High Noon',
+		icon: '🔥',
+		back: true,
+		expansion: 'high-noon',
+	},
+	'gold_rush': {
+		name: 'Gold Rush',
+		icon: '🤑',
+		back: true,
+		expansion: 'gold-rush',
+	},
+	'the_valley_of_shadows': {
+		name: 'The Valley of Shadows',
+		icon: '👻',
+		back: true,
+		expansion: 'the-valley-of-shadows',
+	}
+}