diff --git a/backend/tests/__init__.py b/backend/tests/__init__.py
index dfa24b0..02a3aa6 100644
--- a/backend/tests/__init__.py
+++ b/backend/tests/__init__.py
@@ -36,4 +36,4 @@ def current_player_with_cards(g: Game, cards):
     p = current_player(g)
     p.draw('')
     p.hand = cards
-    return p
\ No newline at end of file
+    return p
diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index fc83483..a1540f7 100644
--- a/frontend/src/components/Card.vue
+++ b/frontend/src/components/Card.vue
@@ -1,271 +1,299 @@
 <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,}">
-		<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>
+  <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 :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>
 
 <script>
 export default {
-	name: 'Card',
-	props: {
-		card: Object,
-		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`) {
-				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
-		}
-	}
-}
+  name: "Card",
+  props: {
+    card: Object,
+    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`
+      ) {
+        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>
 .card {
-	cursor: pointer;
-	width: 60pt;
-	min-width:60pt;
-	height: 100pt;
-	margin: 12pt;
-	background: var(--bg-color);
-	box-shadow: 
-		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; */
+  cursor: pointer;
+  width: 60pt;
+  min-width: 60pt;
+  height: 100pt;
+  margin: 12pt;
+  background: var(--bg-color);
+  box-shadow: 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);
+  text-overflow: ellipsis;
+  word-wrap: normal;
 }
 .avatarred {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
-.card.back{
-	color:white;
-	background: repeating-linear-gradient(
-		45deg,
-		#987e51,
-		#987e51 5px,
-		#816b45 5px,
-		#816b45 10px
-	);
+.card.back {
+  color: white;
+  background: repeating-linear-gradient(
+    45deg,
+    #987e51,
+    #987e51 5px,
+    #816b45 5px,
+    #816b45 10px
+  );
 }
-.card:not(.back,.fistful-of-cards,.high-noon,.gold-rush):before{
-	content: "";
-	background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
-				radial-gradient(var(--bg-color) 14%, transparent 5%),
-				radial-gradient(var(--bg-color) 8%, transparent 5%);
-	background-position: -12px 0, 12px 14px, 0 -12pt;
-	background-size: 50px 50px;
-	position: absolute;
-	top: -10px;
-	left: -10px;
-	bottom: -4px;
-	right: -4px;
+.card:not(.back, .fistful-of-cards, .high-noon, .gold-rush):before {
+  content: "";
+  background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
+    radial-gradient(var(--bg-color) 14%, transparent 5%),
+    radial-gradient(var(--bg-color) 8%, transparent 5%);
+  background-position: -12px 0, 12px 14px, 0 -12pt;
+  background-size: 50px 50px;
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  bottom: -4px;
+  right: -4px;
 }
 .card.equipment {
-	box-shadow: 
-		0 0 0 3pt #5c5e83,
-		0 0 0 6pt var(--bg-color),
-		0 0 5pt 6pt #aaa;
+  box-shadow: 0 0 0 3pt #5c5e83, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
 }
 .card.character {
-	box-shadow: 
-		0 0 0 3pt #7c795b,
-		0 0 0 6pt var(--bg-color),
-		0 0 5pt 6pt #aaa;
+  box-shadow: 0 0 0 3pt #7c795b, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa;
 }
 .card.usable-next-turn {
-	box-shadow: 
-		0 0 0 3pt  #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa
+  box-shadow: 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;
-	border: 2pt dotted #987e51;
+.card.wild-west-show {
+  box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
+  border: 2pt dotted #987e51;
 }
-.card.high-noon{
-	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
-	border: 2pt dotted rgb(198 78 45);
+.card.high-noon {
+  box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
+  border: 2pt dotted rgb(198 78 45);
 }
-.card.fistful-of-cards{
-	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
-	border: 2pt dashed rgb(50 122 172);
+.card.fistful-of-cards {
+  box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
+  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),
-		rgb(50 122 172) 5px,
-		rgb(30 102 152) 5px,
-		rgb(30 102 152) 10px
-	);
-	border: 2pt solid rgb(50 122 172);
+.card.back.fistful-of-cards {
+  background: repeating-linear-gradient(
+    45deg,
+    rgb(50 122 172),
+    rgb(50 122 172) 5px,
+    rgb(30 102 152) 5px,
+    rgb(30 102 152) 10px
+  );
+  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.high-noon {
+  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.the-valley-of-shadows {
+  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;
+  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;
+  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;
+  content: "Beta";
+  position: absolute;
+  bottom: -12pt;
+  right: -12pt;
+  background: red;
+  font-size: 10pt;
+  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;
 }
 .avatar {
-	position: absolute;
-	width: 36pt;
-	margin: auto;
-	top: 25%;
-	background-position: center;
-	background-size: contain;
-	background-repeat: no-repeat;
-	border-radius: 36pt;
-	height: 36pt;
+  position: absolute;
+  width: 36pt;
+  margin: auto;
+  top: 25%;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  border-radius: 36pt;
+  height: 36pt;
 }
 .card.brown.gold-rush {
-	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
-	border: 2pt dotted #9C7340;
+  box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
+  border: 2pt dotted #9c7340;
 }
 .card.black.gold-rush {
-	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
-	border: 2pt dotted #000;
+  box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
+  border: 2pt dotted #000;
 }
 .card.back.gold-rush {
-	background: repeating-linear-gradient(347deg, #ffb32f, #987e51 );
+  background: repeating-linear-gradient(347deg, #ffb32f, #987e51);
 }
 .card h4 {
-	position: absolute;
-	text-align: center;
-	width: 100%;
-	top: -10pt;
-	font-size: 11pt;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  top: -10pt;
+  font-size: 11pt;
 }
-.card.back h4{
-	font-size: 12pt;
+.card.back h4 {
+  font-size: 12pt;
 }
 .card .emoji {
-	position: absolute;
-	text-align: center;
-	width: 100%;
-	font-size:26pt;
-	top: 35%;
-} 
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  font-size: 26pt;
+  top: 35%;
+}
 .emoji.bottomed {
-	top: 45%;
-	left: 8pt;
+  top: 45%;
+  left: 8pt;
 }
 .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{
-	top:auto !important;
-	bottom:15% !important;
+.fistful-of-cards .emoji,
+.high-noon .emoji,
+.card.wild-west-show .emoji,
+.exp-pack .emoji {
+  top: auto !important;
+  bottom: 15% !important;
 }
 .card .suit {
-	position: absolute;
-	bottom: 3pt;
-	left:3pt;
+  position: absolute;
+  bottom: 3pt;
+  left: 3pt;
 }
 .card.character .suit {
-	font-size: small;
-	right: 3pt;
-	text-align: center;
+  font-size: small;
+  right: 3pt;
+  text-align: center;
 }
 .alt_text {
-	right: 3pt;
-	text-align: center;
-	position: absolute;
-	font-size: small;
-	bottom: 20pt;
-	left: 3pt;
+  right: 3pt;
+  text-align: center;
+  position: absolute;
+  font-size: small;
+  bottom: 20pt;
+  left: 3pt;
 }
 .cant-play {
-	filter: brightness(0.5);
+  filter: brightness(0.5);
 }
 .expansion {
-	position: absolute;
-	bottom: -5pt;
-	right: -5pt;
-	background: var(--bg-color);
-	border-radius: 100%;
-	transform: scale(0.8);
+  position: absolute;
+  bottom: -5pt;
+  right: -5pt;
+  background: var(--bg-color);
+  border-radius: 100%;
+  transform: scale(0.8);
 }
-
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 230f7fb..61eab6b 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -1,622 +1,896 @@
 <template>
-	<div class="lobby">
-		<div style="flex-grow: 4;">
-			<div style="position:relative;">
-				<h2 v-if="!started">{{$t('room')}}{{ lobbyName }}</h2>
-				<input style="position:absolute;top:0;right:0;max-height:100pt" v-if="!started" type="button" class="btn" @click="leaveRoom" :value="$t('leave_room')"/>
-			</div>
-			<h3>{{$t('room_players', {username:username})}}</h3>
-			<div v-if="debug_mode" style="position: absolute;top: 6pt;right: 6pt;">
-				<p style="padding:0 10px;background:red;color:white;border-radius:12pt;">DEBUG ON</p>
-			</div>
-			<div v-if="!started">
-				<PrettyCheck v-if="isRoomOwner" class="p-switch p-fill" v-model="privateRoom" style="margin-top:5px; margin-bottom:3px;">{{$t("private_room")}}</PrettyCheck>
-				<label v-if="password !== ''">{{$t('password')}}<b class="selectable" style="font-size:larger;">{{ password }}</b></label>
-				<input type="button" class="btn" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
-			</div>
-			
-			<!-- <div class="players-table"> -->
-				<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
-					<!-- :style="p.style"/> -->
-				<!-- </div> -->
-			<!-- </div> -->
-			<div style="position:relative;">
-				<div v-if="showTurnFlow" id="turn-indicator" :class="{reversed:turnReversed}"/>
-				<transition-group name="list" tag="div" class="players-table">
-					<Card v-if="startGameCard" key="_start_game_" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
-					<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;" class="player-in-table">
-						<transition-group v-if="p.gold_nuggets && p.gold_nuggets > 0" name="list" tag="div" style="position: absolute;top: -10pt; font-size:9pt;">
-							<span v-for="(n, i) in p.gold_nuggets" v-bind:key="i" :alt="i">💵️</span>
-						</transition-group>
-						<transition-group v-if="p.max_lives && !p.is_ghost" name="list" tag="div" class="tiny-health">
-							<span v-for="(n, i) in p.lives" v-bind:key="i" :alt="i">❤️</span>
-							<span v-for="(n, i) in (p.max_lives-p.lives)" v-bind:key="`${i}-sk`" :alt="i">💀</span>
-						</transition-group>
-						<div v-else-if="p.is_ghost" class="tiny-health">
-							<span>👻</span>
-						</div>
-						<Card :card="p.card" @click.native="drawFromPlayer(p.name)"  :donotlocalize="true" :class="{is_my_turn:p.is_my_turn}"/>
-						<Card v-if="p.character" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/>
-						<Card v-if="p.character && p.character.name !== p.real_character.name" style="transform:scale(0.5) translate(-90px, -50px);" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/>
-						<tiny-hand :id="p.name+'-hand'" :ncards="p.ncards" :cards="p.hand_cards" @click.native="drawFromPlayer(p.name)" :ismyturn="p.pending_action === 2"/>
-						<span style="position:absolute;top:10pt;" class="center-stuff">{{getActionEmoji(p)}}</span>
-						<div class="tiny-equipment">
-							<Card v-for="(card, i) in p.equipment" v-bind:key="card.name+card.number"
-										:card="card" @click.native="selectedInfo = p.equipment"
-										:style="`margin-top: ${i < 1 ? 10 : -(Math.min((p.equipment.length + p.gold_rush_equipment.length + 1) * 12, 80))}pt;`"/>
-							<Card v-for="(card, i) in p.gold_rush_equipment" v-bind:key="card.name+card.number"
-										:card="card" @click.native="selectedInfo = p.gold_rush_equipment"
-										:style="`margin-top: ${i+p.equipment.length<1?10:-(Math.min((p.equipment.length+p.gold_rush_equipment.length+1)*12,80))}pt`"/>
-						</div>
-						<button v-if="is_replay" style="position:absolute" @click="replayPlayer(p.name)">{{$t('spectate_player')}}</button>
-						<div v-if="p.is_bot" style="position:absolute;bottom:57%;width:20pt;" class="center-stuff">
-							<span>🤖</span>
-						</div>
-					</div>
-					<Card v-if="startGameCard" key="_shuffle_players_" :donotlocalize="true" :card="shufflePlayersCard" @click.native="shufflePlayers" class="fistful-of-cards"/>
-				</transition-group>
-			</div>
-			<div v-if="!started">
-				<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 class="players-table" style="justify-content: flex-start;">
-					<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)"/>
-				</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>
-				<input type="button" class="btn" :value="$t('add_bot')" :disabled="!isRoomOwner || players.length > 7" @click="(e)=>{this.$socket.emit('chat_message', '/addbot'); e.preventDefault()}"/>
-				<input type="button" class="btn" style="margin-left: 10pt;" :value="$t('remove_bot')" :disabled="!isRoomOwner || !isThereAnyBot" @click="(e)=>{this.$socket.emit('chat_message', '/removebot'); e.preventDefault()}"/>
-				<!-- <br> -->
-				<!-- <PrettyCheck @click.native="toggleReplaceWithBot" :disabled="!isRoomOwner" v-model="disconnect_bot" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('disconnect_bot')}}</PrettyCheck> -->
-			</div>
-			<AnimatedCard v-for="c in cardsToAnimate" v-bind:key="c.key" :card="c.card" :startPosition="c.startPosition" :midPosition="c.midPosition" :endPosition="c.endPosition"/>
-			<div v-if="started">
-				<deck :endTurnAction="()=>{wantsToEndTurn = true}"/>
-				<player :isEndingTurn="wantsToEndTurn" :cancelEndingTurn="()=>{wantsToEndTurn = false}" :chooseCardFromPlayer="choose" :cancelChooseCardFromPlayer="()=>{hasToChoose=false}"/>
-			</div>
-		</div>
-		<chat :username="username"/>
-		<Chooser v-if="selectedInfo" :text="$t('details')" :cards="selectedInfo" :cancelText="$t('ok')" :cancel="()=>{selectedInfo = null}" :select="()=>{selectedInfo = null}"/>
-		<transition name="bounce">
-			<Chooser v-show="hasToChoose" :text="`${$t('choose_card')}${target_p?$t('choose_card_from') + target_p:''}`" :cards="chooseCards" :select="chooseCard"/>
-		</transition>
-		<transition name="bounce">
-			<full-screen-input v-if="!started && hasToSetUsername" :defaultValue="storedUsername" :text="$t('choose_username')" :val="username" :send="setUsername" :sendText="$t('ok')"/>
-		</transition>
-		<transition name="bounce">
-			<div v-if="displayAdminStatus" id="admin-status">
-				<input type="button" @click="displayAdminStatus = false" value="close"/>
-				<Status deploy_key="ok" :onpage="false"/>
-			</div>
-		</transition>
-		<transition name="bounce">
-			<DeadRoleNotification v-if="deadRoleData" :playerCard="deadRoleData" :playerRole="deadRoleData.role"/>
-		</transition>
-	</div>
+  <div class="lobby">
+    <div style="flex-grow: 4">
+      <div style="position: relative">
+        <h2 v-if="!started">{{ $t("room") }}{{ lobbyName }}</h2>
+        <input
+          style="position: absolute; top: 0; right: 0; max-height: 100pt"
+          v-if="!started"
+          type="button"
+          class="btn"
+          @click="leaveRoom"
+          :value="$t('leave_room')"
+        />
+      </div>
+      <h3>{{ $t("room_players", { username: username }) }}</h3>
+      <div v-if="debug_mode" style="position: absolute; top: 6pt; right: 6pt">
+        <p
+          style="
+            padding: 0 10px;
+            background: red;
+            color: white;
+            border-radius: 12pt;
+          "
+        >
+          DEBUG ON
+        </p>
+      </div>
+      <div v-if="!started">
+        <PrettyCheck
+          v-if="isRoomOwner"
+          class="p-switch p-fill"
+          v-model="privateRoom"
+          style="margin-top: 5px; margin-bottom: 3px"
+          >{{ $t("private_room") }}</PrettyCheck
+        >
+        <label v-if="password !== ''"
+          >{{ $t("password")
+          }}<b class="selectable" style="font-size: larger">{{
+            password
+          }}</b></label
+        >
+        <input
+          type="button"
+          class="btn"
+          style="margin-left: 10pt"
+          v-clipboard:copy="inviteLink"
+          :value="$t('copy')"
+        />
+      </div>
+
+      <!-- <div class="players-table"> -->
+      <!-- <div style="position: relative;width:260pt;height:400pt;"> -->
+      <!-- :style="p.style"/> -->
+      <!-- </div> -->
+      <!-- </div> -->
+      <div style="position: relative">
+        <div
+          v-if="showTurnFlow"
+          id="turn-indicator"
+          :class="{ reversed: turnReversed }"
+        />
+        <transition-group name="list" tag="div" class="players-table">
+          <Card
+            v-if="startGameCard"
+            key="_start_game_"
+            :donotlocalize="true"
+            :card="startGameCard"
+            @click.native="startGame"
+          />
+          <div
+            v-for="p in playersTable"
+            v-bind:key="p.card.name"
+            style="position: relative"
+            class="player-in-table"
+          >
+            <transition-group
+              v-if="p.gold_nuggets && p.gold_nuggets > 0"
+              name="list"
+              tag="div"
+              style="position: absolute; top: -10pt; font-size: 9pt"
+            >
+              <span v-for="(n, i) in p.gold_nuggets" v-bind:key="i" :alt="i"
+                >💵️</span
+              >
+            </transition-group>
+            <transition-group
+              v-if="p.max_lives && !p.is_ghost"
+              name="list"
+              tag="div"
+              class="tiny-health"
+            >
+              <span v-for="(n, i) in p.lives" v-bind:key="i" :alt="i">❤️</span>
+              <span
+                v-for="(n, i) in p.max_lives - p.lives"
+                v-bind:key="`${i}-sk`"
+                :alt="i"
+                >💀</span
+              >
+            </transition-group>
+            <div v-else-if="p.is_ghost" class="tiny-health">
+              <span>👻</span>
+            </div>
+            <Card
+              :card="p.card"
+              @click.native="drawFromPlayer(p.name)"
+              :donotlocalize="true"
+              :class="{ is_my_turn: p.is_my_turn }"
+            />
+            <Card
+              v-if="p.character"
+              :card="p.character"
+              class="character tiny-character"
+              @click.native="selectedInfo = [p.character]"
+            />
+            <Card
+              v-if="p.character && p.character.name !== p.real_character.name"
+              style="transform: scale(0.5) translate(-90px, -50px)"
+              :card="p.character"
+              class="character tiny-character"
+              @click.native="selectedInfo = [p.character]"
+            />
+            <tiny-hand
+              :id="p.name + '-hand'"
+              :ncards="p.ncards"
+              :cards="p.hand_cards"
+              @click.native="drawFromPlayer(p.name)"
+              :ismyturn="p.pending_action === 2"
+            />
+            <span style="position: absolute; top: 10pt" class="center-stuff">{{
+              getActionEmoji(p)
+            }}</span>
+            <div class="tiny-equipment">
+              <Card
+                v-for="(card, i) in p.equipment"
+                v-bind:key="card.name + card.number"
+                :card="card"
+                @click.native="selectedInfo = p.equipment"
+                :style="`margin-top: ${
+                  i < 1
+                    ? 10
+                    : -Math.min(
+                        (p.equipment.length +
+                          p.gold_rush_equipment.length +
+                          1) *
+                          12,
+                        80
+                      )
+                }pt;`"
+              />
+              <Card
+                v-for="(card, i) in p.gold_rush_equipment"
+                v-bind:key="card.name + card.number"
+                :card="card"
+                @click.native="selectedInfo = p.gold_rush_equipment"
+                :style="`margin-top: ${
+                  i + p.equipment.length < 1
+                    ? 10
+                    : -Math.min(
+                        (p.equipment.length +
+                          p.gold_rush_equipment.length +
+                          1) *
+                          12,
+                        80
+                      )
+                }pt`"
+              />
+            </div>
+            <button
+              v-if="is_replay"
+              style="position: absolute"
+              @click="replayPlayer(p.name)"
+            >
+              {{ $t("spectate_player") }}
+            </button>
+            <div
+              v-if="p.is_bot"
+              style="position: absolute; bottom: 57%; width: 20pt"
+              class="center-stuff"
+            >
+              <span>🤖</span>
+            </div>
+          </div>
+          <Card
+            v-if="startGameCard"
+            key="_shuffle_players_"
+            :donotlocalize="true"
+            :card="shufflePlayersCard"
+            @click.native="shufflePlayers"
+            class="fistful-of-cards"
+          />
+        </transition-group>
+      </div>
+      <div v-if="!started">
+        <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 class="players-table" style="justify-content: flex-start">
+          <card
+            v-for="ex in expansionsStatus"
+            v-bind:key="ex.id"
+            :card="ex.card"
+            :class="{
+              'cant-play': !ex.enabled,
+              ...ex.card.classes,
+            }"
+            :donotlocalize="true"
+            @click.native="toggleExpansions(ex.id)"
+          />
+        </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>
+        <input
+          type="button"
+          class="btn"
+          :value="$t('add_bot')"
+          :disabled="!isRoomOwner || players.length > 7"
+          @click="
+            (e) => {
+              this.$socket.emit('chat_message', '/addbot');
+              e.preventDefault();
+            }
+          "
+        />
+        <input
+          type="button"
+          class="btn"
+          style="margin-left: 10pt"
+          :value="$t('remove_bot')"
+          :disabled="!isRoomOwner || !isThereAnyBot"
+          @click="
+            (e) => {
+              this.$socket.emit('chat_message', '/removebot');
+              e.preventDefault();
+            }
+          "
+        />
+        <!-- <br> -->
+        <!-- <PrettyCheck @click.native="toggleReplaceWithBot" :disabled="!isRoomOwner" v-model="disconnect_bot" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('disconnect_bot')}}</PrettyCheck> -->
+      </div>
+      <AnimatedCard
+        v-for="c in cardsToAnimate"
+        v-bind:key="c.key"
+        :card="c.card"
+        :startPosition="c.startPosition"
+        :midPosition="c.midPosition"
+        :endPosition="c.endPosition"
+      />
+      <div v-if="started">
+        <deck
+          :endTurnAction="
+            () => {
+              wantsToEndTurn = true;
+            }
+          "
+        />
+        <player
+          :isEndingTurn="wantsToEndTurn"
+          :cancelEndingTurn="
+            () => {
+              wantsToEndTurn = false;
+            }
+          "
+          :chooseCardFromPlayer="choose"
+          :cancelChooseCardFromPlayer="
+            () => {
+              hasToChoose = false;
+            }
+          "
+        />
+      </div>
+    </div>
+    <chat :username="username" />
+    <Chooser
+      v-if="selectedInfo"
+      :text="$t('details')"
+      :cards="selectedInfo"
+      :cancelText="$t('ok')"
+      :cancel="
+        () => {
+          selectedInfo = null;
+        }
+      "
+      :select="
+        () => {
+          selectedInfo = null;
+        }
+      "
+    />
+    <transition name="bounce">
+      <Chooser
+        v-show="hasToChoose"
+        :text="`${$t('choose_card')}${
+          target_p ? $t('choose_card_from') + target_p : ''
+        }`"
+        :cards="chooseCards"
+        :select="chooseCard"
+      />
+    </transition>
+    <transition name="bounce">
+      <full-screen-input
+        v-if="!started && hasToSetUsername"
+        :defaultValue="storedUsername"
+        :text="$t('choose_username')"
+        :val="username"
+        :send="setUsername"
+        :sendText="$t('ok')"
+      />
+    </transition>
+    <transition name="bounce">
+      <div v-if="displayAdminStatus" id="admin-status">
+        <input
+          type="button"
+          @click="displayAdminStatus = false"
+          value="close"
+        />
+        <Status deploy_key="ok" :onpage="false" />
+      </div>
+    </transition>
+    <transition name="bounce">
+      <DeadRoleNotification
+        v-if="deadRoleData"
+        :playerCard="deadRoleData"
+        :playerRole="deadRoleData.role"
+      />
+    </transition>
+  </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import PrettyCheck from 'pretty-checkbox-vue/check'
-import Card from '@/components/Card.vue'
-import Chooser from './Chooser.vue'
-import Chat from './Chat.vue'
-import Player from './Player.vue'
-import Deck from './Deck.vue'
-import TinyHand from './TinyHand.vue'
-import FullScreenInput from './FullScreenInput.vue'
-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'
+import Vue from "vue";
+import PrettyCheck from "pretty-checkbox-vue/check";
+import Card from "@/components/Card.vue";
+import Chooser from "./Chooser.vue";
+import Chat from "./Chat.vue";
+import Player from "./Player.vue";
+import Deck from "./Deck.vue";
+import TinyHand from "./TinyHand.vue";
+import FullScreenInput from "./FullScreenInput.vue";
+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;
-	do {
-		top += element.offsetTop  || 0;
-		left += element.offsetLeft || 0;
-		element = element.offsetParent;
-	} while(element);
-	return {
-			top: top,
-			left: left-Math.floor(Math.random() * 20)+10
-	};
+const cumulativeOffset = function (element) {
+  var top = 0,
+    left = 0;
+  do {
+    top += element.offsetTop || 0;
+    left += element.offsetLeft || 0;
+    element = element.offsetParent;
+  } while (element);
+  return {
+    top: top,
+    left: left - Math.floor(Math.random() * 20) + 10,
+  };
 };
 
 export default {
-	name: 'Lobby',
-	components: {
-		Card,
-		Chooser,
-		Chat,
-		Player,
-		Deck,
-		TinyHand,
-		PrettyCheck,
-		FullScreenInput,
-		Status,
-		DeadRoleNotification,
-		AnimatedCard,
-		Card
-	},
-	data: () => ({
-		username: '',
-		lobbyName: '',
-		started: false,
-		players: [],
-		messages: [],
-		distances: {},
-		hasToChoose: false,
-		target_p: '', 
-		chooseCards: [],
-		wantsToEndTurn: false,
-		selectedInfo: null,
-		privateRoom: false,
-		password: '',
-		togglable_expansions: [],
-		expansions: [],
-		beta_expansions: ['the_valley_of_shadows', 'wild_west_show'],
-		hasToSetUsername: false,
-		is_competitive: false,
-		disconnect_bot: false,
-		debug_mode: false,
-		showTurnFlow: false,
-		turnReversed: false,
-		displayAdminStatus: false,
-		is_replay: false,
-		turn: -1,
-		deadRoleData: null,
-		cardsToAnimate: [],
-	}),
-	sockets: {
-		room(data) {
-			this.lobbyName = data.name
-			if (!data.started) {
-				document.title = this.lobbyName +' | PewPew!'
-			}	else if (data.started && !this.started) {
-				document.title = 'PewPew!'
-			}
-			this.started = data.started
-			this.password = data.password
-			this.privateRoom = data.password !== ''
-			this.is_competitive = data.is_competitive
-			this.disconnect_bot = data.disconnect_bot
-			this.togglable_expansions = data.available_expansions
-			this.expansions = data.expansions
-			this.is_replay = data.is_replay
-			this.players = data.players.map(x => {
-				return {
-					name: x.name,
-					ready: x.ready,
-					is_bot: x.is_bot,
-					avatar: x.avatar,
-					ncards: 0,
-				}
-			})
-		},
-		notify_dead_role(data) {
-			this.deadRoleData = data
-			setTimeout(() => {
-				this.deadRoleData = null
-			}, 4000);
-		},
-		debug(data) {
-			this.debug_mode = data;
-		},
-		start() {
-			this.started = true;
-		},
-		players_update(data) {
-			if (Vue.config.devtools)
-				console.log(data)
-			this.players = data
-		},
-		me(username) {
-			if (username.error) { 
-				alert(username.error)
-				this.$router.push('/')
-			}
-			this.username = username
-		},
-		card_drawn(data) {
-			let from = data.pile === 'deck' ? 'actual-deck' : `${data.pile}-hand`;
-			let decel = document.getElementById(from)
-			if (!decel)
-				return
-			let decelOffset = cumulativeOffset(decel)
-			let phand = document.getElementById(`${data.player}-hand`)
-			if (!phand)
-				return
-			let playerOffset = cumulativeOffset(phand)
-			playerOffset.top -= 30
-			playerOffset.left += 10
-			let key = Math.random()
-			this.cardsToAnimate.push({
-				key: key,
-				card: {
-					name: 'PewPew!',
-					icon: '💥',
-					back: true,
-				}, startPosition: decelOffset, endPosition: playerOffset
-			})
-			setTimeout(() => {
-				this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
-			}, 900);
-		},
-		card_against(data) {
-			let target = document.getElementById(`${data.target}-hand`)
-			let targetOffset = cumulativeOffset(target.parentElement)
-			let decel = document.getElementById('actual-scrap')
-			let decelOffset = cumulativeOffset(decel)
-			let phand = document.getElementById(`${data.player}-hand`)
-			let playerOffset = cumulativeOffset(phand)
-			playerOffset.top -= 30
-			playerOffset.left += 10
-			let key = data.card.name+data.card.number+data.player
-			this.cardsToAnimate.push({
-				key: key,
-				card: data.card, startPosition: playerOffset, midPosition: targetOffset, endPosition: decelOffset
-			})
-			setTimeout(() => {
-				this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
-			}, 1800);
-		},
-		card_scrapped(data) {
-			let decel = document.getElementById('actual-scrap')
-			if (!decel) {
-				console.log('card_scrapped no deck')
-				return
-			}
-			let decelOffset = cumulativeOffset(decel)
-			let phand = document.getElementById(`${data.player}-hand`)
-			if (!phand) {
-				console.log('card_scrapped no phand')
-				return
-			}
-			let playerOffset = cumulativeOffset(phand)
-			playerOffset.top -= 30
-			playerOffset.left += 10
-			console.log('card_scrapped' + decelOffset + ' ' + playerOffset)
-			let key = data.card.name+data.card.number+data.player
-			this.cardsToAnimate.push({
-				key: key,
-				card: data.card, startPosition: playerOffset, endPosition: decelOffset
-			})
-			setTimeout(() => {
-				this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
-			}, 900);
-		},
-		mount_status() {
-			this.displayAdminStatus = true
-		},
-		change_username() {
-			this.hasToSetUsername = true
-		},
-		kicked() {
-			window.location.replace(window.location.origin)
-			document.title = 'PewPew!'
-		},
-	},
-	computed: {
-		inviteLink() {
-			return `${window.location.origin}/game?code=${encodeURIComponent(this.lobbyName)}${this.password?`&pwd=${this.password}`:''}`
-		},
-		isThereAnyBot() {
-			return this.players.filter(x => x.is_bot).length > 0;
-		},
-		expansionsStatus() { 
-			return this.togglable_expansions.map(x=>{
-				return {
-					id: x,
-					name: x.replace(/(^|_)([a-z])/g, function($0,$1,$2) {return ' ' + $2.toUpperCase()}),
-					is_beta: this.beta_expansions.indexOf(x) !== -1,
-					enabled: this.expansions.indexOf(x) !== -1,
-					emoji: emojiMap[x],
-					card: this.getExpansionCard(x),
-				}
-			})
-		},
-		storedUsername() {
-			if (localStorage.getItem('username'))
-				return localStorage.getItem('username')
-			return ''
-		},
-		isRoomOwner() {
-			if (this.players.length > 0){
-				let pls = this.players.filter(x => !x.is_bot)
-				return pls.length > 0 && pls[0].name == this.username
-			}
-			return false
-		},
-		startGameCard() {
-			if (!this.started && this.players.length > 2 && this.isRoomOwner) {
-				return {
-					name: this.$t('start_game'),
-					icon: '▶️',
-					is_equipment: true,
-					number: `${this.players.length}🤠`
-				}
-			}
-			return null;
-		},
-		shufflePlayersCard() {
-			if (!this.started && this.players.length > 2 && this.isRoomOwner) {
-				return {
-					name: this.$t('shuffle_players'),
-					icon: '🔀',
-					is_equipment: true,
-				}
-			}
-			return null;
-		},
-		playersTable() {
-			if (Vue.config.devtools)
-				console.log('update players')
-			return this.players.map((x, i) => {
-				let offsetAngle = 360.0 / this.players.length
-				let rotateAngle = (i) * offsetAngle
-				let size = 130
-				return {
-					card: this.getPlayerCard(x),
-					style: `position:absolute;transform: rotate(${rotateAngle}deg) translate(0, -${size}pt) rotate(-${rotateAngle}deg) translate(${size}pt,${size}pt)`,
-					...x
-				}
-			})
-		}
-	},
-	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))
-			return this.expansions.indexOf(ex) !== -1
-		},
-		replayPlayer(player) {
-			this.$socket.emit('chat_message', `/replaypov ${player}`)
-		},
-		leaveRoom() {
-			window.location.replace(window.location.origin)
-			document.title = 'PewPew!'
-		},
-		toggleExpansions(name) {
-			if (!this.isRoomOwner) return;
-			this.$socket.emit('toggle_expansion', name)
-		},
-		toggleCompetitive() {
-			if (!this.isRoomOwner) return;
-			this.$socket.emit('toggle_comp')
-		},
-		toggleReplaceWithBot() {
-			if (!this.isRoomOwner) return;
-			this.$socket.emit('toggle_replace_with_bot')
-		},
-		getActionEmoji(p) {
-			if (p.is_my_turn === undefined || p.pending_action === undefined) return '';
-			if (p.pending_action != 4) {
-				return ['↙️', '⏬', '▶️', '↩️', '4', '🔽'][p.pending_action]
-			} else if (p.is_my_turn) {
-				return '⏸'
-			} else {
-				return ''
-			}
-		},
-		getPlayerCard(player) {
-			let icon = ''
-			let nonBots = this.players.filter(x => !x.is_bot)
-			let isOwner = nonBots.length > 0 && nonBots[0].name == player.name;
-			if (!this.started) icon = '🤠'
-			else icon = player.ready !== undefined ? ((player.ready)?'👍': '🤔') : (player.is_sheriff ? '⭐' : player.icon)
-			return {
-				name: player.name,
-				number: ((this.username == player.name) ? this.$t('you') : isOwner ? this.$t('owner') :'') + (player.dist ? `${player.dist}⛰` : ''),
-				icon: icon,
-				is_character: true,
-				avatar: player.avatar,
-				is_player: true
-			}
-		},
-		startGame() {
-			this.started = true;
-			this.$socket.emit('start_game')
-		},
-		shufflePlayers() {
-			this.$socket.emit('shuffle_players')
-		},
-		choose(player_name) {
-			if (Vue.config.devtools)
-				console.log('choose from' + player_name)
-			this.target_p = player_name
-			let pl = this.players.filter(x=>x.name === player_name)[0]
-			if (Vue.config.devtools)
-				console.log(pl)
-			let arr = []
-			if (this.username != player_name)
-				for (let i=0; i<pl.ncards; i++)
-					arr.push({
-						name: 'PewPew!',
-						icon: '💥',
-						is_back: true,
-					})
-			pl.equipment.forEach(x=>arr.push(x))
-			this.chooseCards = arr
-			this.hasToChoose = true
-		},
-		chooseCard(card) {
-			let index = this.chooseCards.indexOf(card)
-			if (!this.debug_mode) {
-				let pl = this.players.filter(x=>x.name === this.target_p)[0]
-				if (index < pl.ncards) {
-					index = Math.floor(Math.random() * pl.ncards)
-				}
-			}
-			this.$socket.emit('choose', index)
-			if (Vue.config.devtools)
-				console.log(card + ' ' + index)
-			this.chooseCards = []
-			this.hasToChoose = false
-			this.target_p = ''
-		},
-		drawFromPlayer(name) {
-			if (Vue.config.devtools)
-				console.log(name)
-			this.$socket.emit('draw', name)
-		},
-		setUsername(name){
-			if (name.trim().length > 0){
-				localStorage.setItem('username', name)
-				this.hasToSetUsername = false
-				this.$socket.emit('set_username', {name:name})
-			}
-		},
-	},
-	watch: {
-		privateRoom(old, _new) {
-			if (this.isRoomOwner && old !== _new)
-				this.$socket.emit('private')
-		},
-		players(_, _new) {
-			let x = _new.findIndex(x => x.is_my_turn);
-			if (x !== -1 && x !== this.turn) {
-				this.turnReversed = (x+1 === this.turn)
-				this.showTurnFlow = true;
-				setTimeout(() => {
-					this.showTurnFlow = false
-				}, 1000);
-				this.turn = x;
-			}
-		},
-	},
-	mounted() {
-		if (Vue.config.devtools)
-			console.log('mounted lobby')
-		if (!this.$route.query.code && !this.$route.query.replay)
-			return this.$router.push('/')
-		this.$socket.emit('get_me', {name:this.$route.query.code, password:this.$route.query.pwd, username: localStorage.getItem('username'), discord_token: localStorage.getItem('discord_token'), replay: this.$route.query.replay, ffw: this.$route.query.ffw})
-	},
-}
+  name: "Lobby",
+  components: {
+    Card,
+    Chooser,
+    Chat,
+    Player,
+    Deck,
+    TinyHand,
+    PrettyCheck,
+    FullScreenInput,
+    Status,
+    DeadRoleNotification,
+    AnimatedCard,
+    Card,
+  },
+  data: () => ({
+    username: "",
+    lobbyName: "",
+    started: false,
+    players: [],
+    messages: [],
+    distances: {},
+    hasToChoose: false,
+    target_p: "",
+    chooseCards: [],
+    wantsToEndTurn: false,
+    selectedInfo: null,
+    privateRoom: false,
+    password: "",
+    togglable_expansions: [],
+    expansions: [],
+    hasToSetUsername: false,
+    is_competitive: false,
+    disconnect_bot: false,
+    debug_mode: false,
+    showTurnFlow: false,
+    turnReversed: false,
+    displayAdminStatus: false,
+    is_replay: false,
+    turn: -1,
+    deadRoleData: null,
+    cardsToAnimate: [],
+  }),
+  sockets: {
+    room(data) {
+      this.lobbyName = data.name;
+      if (!data.started) {
+        document.title = this.lobbyName + " | PewPew!";
+      } else if (data.started && !this.started) {
+        document.title = "PewPew!";
+      }
+      this.started = data.started;
+      this.password = data.password;
+      this.privateRoom = data.password !== "";
+      this.is_competitive = data.is_competitive;
+      this.disconnect_bot = data.disconnect_bot;
+      this.togglable_expansions = data.available_expansions;
+      this.expansions = data.expansions;
+      this.is_replay = data.is_replay;
+      this.players = data.players.map((x) => {
+        return {
+          name: x.name,
+          ready: x.ready,
+          is_bot: x.is_bot,
+          avatar: x.avatar,
+          ncards: 0,
+        };
+      });
+    },
+    notify_dead_role(data) {
+      this.deadRoleData = data;
+      setTimeout(() => {
+        this.deadRoleData = null;
+      }, 4000);
+    },
+    debug(data) {
+      this.debug_mode = data;
+    },
+    start() {
+      this.started = true;
+    },
+    players_update(data) {
+      if (Vue.config.devtools) console.log(data);
+      this.players = data;
+    },
+    me(username) {
+      if (username.error) {
+        alert(username.error);
+        this.$router.push("/");
+      }
+      this.username = username;
+    },
+    card_drawn(data) {
+      let from = data.pile === "deck" ? "actual-deck" : `${data.pile}-hand`;
+      let decel = document.getElementById(from);
+      if (!decel) return;
+      let decelOffset = cumulativeOffset(decel);
+      let phand = document.getElementById(`${data.player}-hand`);
+      if (!phand) return;
+      let playerOffset = cumulativeOffset(phand);
+      playerOffset.top -= 30;
+      playerOffset.left += 10;
+      let key = Math.random();
+      this.cardsToAnimate.push({
+        key: key,
+        card: {
+          name: "PewPew!",
+          icon: "💥",
+          back: true,
+        },
+        startPosition: decelOffset,
+        endPosition: playerOffset,
+      });
+      setTimeout(() => {
+        this.cardsToAnimate = this.cardsToAnimate.filter((x) => x.key !== key);
+      }, 900);
+    },
+    card_against(data) {
+      let target = document.getElementById(`${data.target}-hand`);
+      let targetOffset = cumulativeOffset(target.parentElement);
+      let decel = document.getElementById("actual-scrap");
+      let decelOffset = cumulativeOffset(decel);
+      let phand = document.getElementById(`${data.player}-hand`);
+      let playerOffset = cumulativeOffset(phand);
+      playerOffset.top -= 30;
+      playerOffset.left += 10;
+      let key = data.card.name + data.card.number + data.player;
+      this.cardsToAnimate.push({
+        key: key,
+        card: data.card,
+        startPosition: playerOffset,
+        midPosition: targetOffset,
+        endPosition: decelOffset,
+      });
+      setTimeout(() => {
+        this.cardsToAnimate = this.cardsToAnimate.filter((x) => x.key !== key);
+      }, 1800);
+    },
+    card_scrapped(data) {
+      let decel = document.getElementById("actual-scrap");
+      if (!decel) {
+        console.log("card_scrapped no deck");
+        return;
+      }
+      let decelOffset = cumulativeOffset(decel);
+      let phand = document.getElementById(`${data.player}-hand`);
+      if (!phand) {
+        console.log("card_scrapped no phand");
+        return;
+      }
+      let playerOffset = cumulativeOffset(phand);
+      playerOffset.top -= 30;
+      playerOffset.left += 10;
+      console.log("card_scrapped" + decelOffset + " " + playerOffset);
+      let key = data.card.name + data.card.number + data.player;
+      this.cardsToAnimate.push({
+        key: key,
+        card: data.card,
+        startPosition: playerOffset,
+        endPosition: decelOffset,
+      });
+      setTimeout(() => {
+        this.cardsToAnimate = this.cardsToAnimate.filter((x) => x.key !== key);
+      }, 900);
+    },
+    mount_status() {
+      this.displayAdminStatus = true;
+    },
+    change_username() {
+      this.hasToSetUsername = true;
+    },
+    kicked() {
+      window.location.replace(window.location.origin);
+      document.title = "PewPew!";
+    },
+  },
+  computed: {
+    inviteLink() {
+      return `${window.location.origin}/game?code=${encodeURIComponent(
+        this.lobbyName
+      )}${this.password ? `&pwd=${this.password}` : ""}`;
+    },
+    isThereAnyBot() {
+      return this.players.filter((x) => x.is_bot).length > 0;
+    },
+    expansionsStatus() {
+      return this.togglable_expansions.map((x) => {
+        return {
+          id: x,
+          name: x.replace(/(^|_)([a-z])/g, function ($0, $1, $2) {
+            return " " + $2.toUpperCase();
+          }),
+          enabled: this.expansions.indexOf(x) !== -1,
+          emoji: emojiMap[x],
+          card: this.getExpansionCard(x),
+        };
+      });
+    },
+    storedUsername() {
+      if (localStorage.getItem("username"))
+        return localStorage.getItem("username");
+      return "";
+    },
+    isRoomOwner() {
+      if (this.players.length > 0) {
+        let pls = this.players.filter((x) => !x.is_bot);
+        return pls.length > 0 && pls[0].name == this.username;
+      }
+      return false;
+    },
+    startGameCard() {
+      if (!this.started && this.players.length > 2 && this.isRoomOwner) {
+        return {
+          name: this.$t("start_game"),
+          icon: "▶️",
+          is_equipment: true,
+          number: `${this.players.length}🤠`,
+        };
+      }
+      return null;
+    },
+    shufflePlayersCard() {
+      if (!this.started && this.players.length > 2 && this.isRoomOwner) {
+        return {
+          name: this.$t("shuffle_players"),
+          icon: "🔀",
+          is_equipment: true,
+        };
+      }
+      return null;
+    },
+    playersTable() {
+      if (Vue.config.devtools) console.log("update players");
+      return this.players.map((x, i) => {
+        let offsetAngle = 360.0 / this.players.length;
+        let rotateAngle = i * offsetAngle;
+        let size = 130;
+        return {
+          card: this.getPlayerCard(x),
+          style: `position:absolute;transform: rotate(${rotateAngle}deg) translate(0, -${size}pt) rotate(-${rotateAngle}deg) translate(${size}pt,${size}pt)`,
+          ...x,
+        };
+      });
+    },
+  },
+  methods: {
+    getExpansionCard(id) {
+      let ex = expansionsMap[id];
+      ex.classes = {
+        back: true,
+        "exp-pack": true,
+      };
+      if (ex.status) ex.classes[ex.status] = 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)
+        );
+      return this.expansions.indexOf(ex) !== -1;
+    },
+    replayPlayer(player) {
+      this.$socket.emit("chat_message", `/replaypov ${player}`);
+    },
+    leaveRoom() {
+      window.location.replace(window.location.origin);
+      document.title = "PewPew!";
+    },
+    toggleExpansions(name) {
+      if (!this.isRoomOwner) return;
+      this.$socket.emit("toggle_expansion", name);
+    },
+    toggleCompetitive() {
+      if (!this.isRoomOwner) return;
+      this.$socket.emit("toggle_comp");
+    },
+    toggleReplaceWithBot() {
+      if (!this.isRoomOwner) return;
+      this.$socket.emit("toggle_replace_with_bot");
+    },
+    getActionEmoji(p) {
+      if (p.is_my_turn === undefined || p.pending_action === undefined)
+        return "";
+      if (p.pending_action != 4) {
+        return ["↙️", "⏬", "▶️", "↩️", "4", "🔽"][p.pending_action];
+      } else if (p.is_my_turn) {
+        return "⏸";
+      } else {
+        return "";
+      }
+    },
+    getPlayerCard(player) {
+      let icon = "";
+      let nonBots = this.players.filter((x) => !x.is_bot);
+      let isOwner = nonBots.length > 0 && nonBots[0].name == player.name;
+      if (!this.started) icon = "🤠";
+      else
+        icon =
+          player.ready !== undefined
+            ? player.ready
+              ? "👍"
+              : "🤔"
+            : player.is_sheriff
+            ? "⭐"
+            : player.icon;
+      return {
+        name: player.name,
+        number:
+          (this.username == player.name
+            ? this.$t("you")
+            : isOwner
+            ? this.$t("owner")
+            : "") + (player.dist ? `${player.dist}⛰` : ""),
+        icon: icon,
+        is_character: true,
+        avatar: player.avatar,
+        is_player: true,
+      };
+    },
+    startGame() {
+      this.started = true;
+      this.$socket.emit("start_game");
+    },
+    shufflePlayers() {
+      this.$socket.emit("shuffle_players");
+    },
+    choose(player_name) {
+      if (Vue.config.devtools) console.log("choose from" + player_name);
+      this.target_p = player_name;
+      let pl = this.players.filter((x) => x.name === player_name)[0];
+      if (Vue.config.devtools) console.log(pl);
+      let arr = [];
+      if (this.username != player_name)
+        for (let i = 0; i < pl.ncards; i++)
+          arr.push({
+            name: "PewPew!",
+            icon: "💥",
+            is_back: true,
+          });
+      pl.equipment.forEach((x) => arr.push(x));
+      this.chooseCards = arr;
+      this.hasToChoose = true;
+    },
+    chooseCard(card) {
+      let index = this.chooseCards.indexOf(card);
+      if (!this.debug_mode) {
+        let pl = this.players.filter((x) => x.name === this.target_p)[0];
+        if (index < pl.ncards) {
+          index = Math.floor(Math.random() * pl.ncards);
+        }
+      }
+      this.$socket.emit("choose", index);
+      if (Vue.config.devtools) console.log(card + " " + index);
+      this.chooseCards = [];
+      this.hasToChoose = false;
+      this.target_p = "";
+    },
+    drawFromPlayer(name) {
+      if (Vue.config.devtools) console.log(name);
+      this.$socket.emit("draw", name);
+    },
+    setUsername(name) {
+      if (name.trim().length > 0) {
+        localStorage.setItem("username", name);
+        this.hasToSetUsername = false;
+        this.$socket.emit("set_username", { name: name });
+      }
+    },
+  },
+  watch: {
+    privateRoom(old, _new) {
+      if (this.isRoomOwner && old !== _new) this.$socket.emit("private");
+    },
+    players(_, _new) {
+      let x = _new.findIndex((x) => x.is_my_turn);
+      if (x !== -1 && x !== this.turn) {
+        this.turnReversed = x + 1 === this.turn;
+        this.showTurnFlow = true;
+        setTimeout(() => {
+          this.showTurnFlow = false;
+        }, 1000);
+        this.turn = x;
+      }
+    },
+  },
+  mounted() {
+    if (Vue.config.devtools) console.log("mounted lobby");
+    if (!this.$route.query.code && !this.$route.query.replay)
+      return this.$router.push("/");
+    this.$socket.emit("get_me", {
+      name: this.$route.query.code,
+      password: this.$route.query.pwd,
+      username: localStorage.getItem("username"),
+      discord_token: localStorage.getItem("discord_token"),
+      replay: this.$route.query.replay,
+      ffw: this.$route.query.ffw,
+    });
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style >
 .is_my_turn {
-	box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa !important;
-	animation-name: turn-animation;
-	animation-duration: 2s;
-	animation-iteration-count: infinite;
+  box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt var(--bg-color),
+    0 0 5pt 6pt #aaa !important;
+  animation-name: turn-animation;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
 }
 
 @keyframes turn-animation {
-	0% {
-		transform: scale(1);
-	}
-	50% {
-		transform: scale(1.02);
-	}
-	100% {
-		transform: scale(1);
-	}
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 .tiny-equipment {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	right: -35pt;
-	transform: scale(0.45);
-	transform-origin: 50% 0%;
-	top: 10pt;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: -35pt;
+  transform: scale(0.45);
+  transform-origin: 50% 0%;
+  top: 10pt;
 }
 .tiny-health {
-	display: flex;
-	justify-content: space-evenly;
-	transform: scale(0.8);
-	margin-bottom: -4pt;
+  display: flex;
+  justify-content: space-evenly;
+  transform: scale(0.8);
+  margin-bottom: -4pt;
 }
 .tiny-equipment .card {
-	transform: rotate(2deg);
+  transform: rotate(2deg);
 }
 .tiny-equipment .card:nth-child(odd) {
-	transform: rotate(-2deg);
+  transform: rotate(-2deg);
 }
 .tiny-equipment .card:hover {
-	transform: translateY(10px) scale(1.2);
-	z-index: 1;
+  transform: translateY(10px) scale(1.2);
+  z-index: 1;
 }
 .tiny-character {
-	position: absolute;
-	transform: scale(0.5) translate(-80px, -40px);
-	top: 0;
+  position: absolute;
+  transform: scale(0.5) translate(-80px, -40px);
+  top: 0;
 }
 .players-table {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-evenly;
-	margin-bottom: 12pt;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  margin-bottom: 12pt;
 }
 #admin-status {
-	position:absolute;width:100%;height:100%;overflow:auto;background:var(--bg-color); opacity: 0.8;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--bg-color);
+  opacity: 0.8;
 }
-#turn-indicator{
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background-image:  linear-gradient(135deg, #cbcbcb33 25%, transparent 25%), linear-gradient(45deg, #cbcbcb33 25%, transparent 25%);
-	background-size: 80px 200px;
-	background-position: 0 100px;
-	background-position-x: 0;
-	opacity: 0;
-	background-repeat: repeat;
-	animation-name: next-turn-animation;
-	animation-duration: 1s;
-	animation-iteration-count: 3;
-	animation-timing-function: linear;
+#turn-indicator {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(135deg, #cbcbcb33 25%, transparent 25%),
+    linear-gradient(45deg, #cbcbcb33 25%, transparent 25%);
+  background-size: 80px 200px;
+  background-position: 0 100px;
+  background-position-x: 0;
+  opacity: 0;
+  background-repeat: repeat;
+  animation-name: next-turn-animation;
+  animation-duration: 1s;
+  animation-iteration-count: 3;
+  animation-timing-function: linear;
 }
 #turn-indicator.reversed {
-	background-image:  linear-gradient(225deg, #cbcbcb33 25%, transparent 25%), linear-gradient(315deg, #cbcbcb33 25%, transparent 25%);
+  background-image: linear-gradient(225deg, #cbcbcb33 25%, transparent 25%),
+    linear-gradient(315deg, #cbcbcb33 25%, transparent 25%);
 }
 
 @keyframes next-turn-animation {
-	0% {
-background-position-x: 0;
-opacity: 1;
-	}
-	50% {
-background-position-x: 80px;
-	}
-	100% {
-		opacity: 0;
-		background-position-x: 160px;
-	}
-	
+  0% {
+    background-position-x: 0;
+    opacity: 1;
+  }
+  50% {
+    background-position-x: 80px;
+  }
+  100% {
+    opacity: 0;
+    background-position-x: 160px;
+  }
 }
 .lobby {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
-@media only screen and (min-width:1000px) {
-	.lobby {
-		flex-direction: row;
-	}
-	.chat {
-		min-width: 25vw;
-		max-width: 25vw;
-	}
-	.player-in-table {
-		transition: all 0.2s ease-in-out;
-	}
-	.player-in-table:hover {
-		transform: translateY(-5px) scale(1.05);
-	}
+@media only screen and (min-width: 1000px) {
+  .lobby {
+    flex-direction: row;
+  }
+  .chat {
+    min-width: 25vw;
+    max-width: 25vw;
+  }
+  .player-in-table {
+    transition: all 0.2s ease-in-out;
+  }
+  .player-in-table:hover {
+    transform: translateY(-5px) scale(1.05);
+  }
 }
 </style>
diff --git a/frontend/src/utils/expansions-map.js b/frontend/src/utils/expansions-map.js
index b8b61d8..0b3ccc5 100644
--- a/frontend/src/utils/expansions-map.js
+++ b/frontend/src/utils/expansions-map.js
@@ -1,11 +1,11 @@
 export const expansionsMap = {
-	'dodge_city' : {
+	'dodge_city': {
 		name: 'Dodge City',
 		icon: '🐄',
 		back: true,
 		expansion: 'dodge-city',
 	},
-	'fistful_of_cards' : {
+	'fistful_of_cards': {
 		name: 'Fistful of Cards',
 		icon: '🎴',
 		back: true,
@@ -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',
 	}
 }
\ No newline at end of file