add emojis to lobbies

backend/server.py

@@ -82,13 +82,17 @@ def bang_handler(func):
             logging.exception(e)
             print(traceback.format_exc())
             send_to_debug(traceback.format_exc())
+        finally:
             save_lock = False
     return wrapper_func
 
+def count_bots_in_game(game):
+    return sum(1 for p in game.players if p.is_bot)
+
 def advertise_lobbies():
     open_lobbies = [g for g in games.values() if 0 < len(g.players) < 10 and not g.is_hidden][-10:]
-    sio.emit('lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'locked': g.password != ''} for g in open_lobbies if not g.started])
+    sio.emit('lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'bots': count_bots_in_game(g), 'locked': g.password != '', 'expansions': g.expansions} for g in open_lobbies if not g.started])
-    sio.emit('spectate_lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'locked': g.password != ''} for g in open_lobbies if g.started])
+    sio.emit('spectate_lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'bots': count_bots_in_game(g), 'locked': g.password != '', 'expansions': g.expansions} for g in open_lobbies if g.started])
     Metrics.send_metric('lobbies', points=[sum(not g.is_replay for g in games.values())])
     Metrics.send_metric('online_players', points=[online_players])
 
@@ -268,6 +272,7 @@ def private(sid):
 def toggle_expansion(sid, expansion_name):
     g = sio.get_session(sid).game
     g.toggle_expansion(expansion_name)
+    advertise_lobbies()
 
 @sio.event
 @bang_handler
@@ -476,6 +481,7 @@ def chat_message(sid, msg, pl=None):
                         while any((p for p in ses.game.players if p.name == bot.name)):
                             bot = Player(f'AI_{random.randint(0,10)}', 'bot', bot=True)
                         ses.game.add_player(bot)
+                        advertise_lobbies()
                         sio.start_background_task(bot.bot_spin)
                     return
                 if '/replay' in msg and not '/replayspeed' in msg and not '/replaypov' in msg:
@@ -515,6 +521,7 @@ def chat_message(sid, msg, pl=None):
                 elif '/removebot' in msg and not ses.game.started:
                     if any((p.is_bot for p in ses.game.players)):
                         [p for p in ses.game.players if p.is_bot][-1].disconnect()
+                    advertise_lobbies()
                     return
                 elif '/togglecomp' in msg and ses.game:
                     ses.game.toggle_competitive()

frontend/src/App.vue

@@ -13,7 +13,7 @@
 				</li>
 			</ul>
 		</div>
-		<help v-if="showHelp"/>
+		<help :inGame="true" v-if="showHelp"/>
 		<div style="position:fixed;bottom:4pt;right:4pt;display:flex;z-index:10">
 			<input v-if="connect_dev" type=button class="btn" style="min-width:28pt;cursor:pointer;" @click="resetConnection" :value="'💚'+connect_dev" />
 			<input type=button class="btn" style="min-width:28pt;cursor:pointer;" @click="()=>{sending_report = true}" :value=" $t('report') " />

frontend/src/components/Help.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<a v-if="!inGame" href=".."><p>Home</p></a>
 		<h1 id="help">{{$t('help.title')}}</h1>
 		<a href="#thecards"><p>{{$t('help.gotocards')}}</p></a>
 		<a href="#highnooncards"><p>{{$t('help.gotohighnoon')}}</p></a>
@@ -127,6 +128,9 @@ export default {
 	components: {
 		Card,
 	},
+	props: {
+		inGame: Boolean
+	},
 	data:()=>({
 		cardBack: {
 			name: 'PewPew!',

frontend/src/components/Lobby.vue

@@ -20,24 +20,6 @@
 					<!-- :style="p.style"/> -->
 				<!-- </div> -->
 			<!-- </div> -->
-			<div v-if="!started">
-				<h3>{{$t("expansions")}}</h3>
-				<div v-for="ex in expansionsStatus" v-bind:key="ex.id">
-					<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}}
-						<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>
-				<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> -->
-				<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>
-			</div>
 			<div style="position:relative;">
 				<div v-if="showTurnFlow" id="turn-indicator" :class="{reversed:turnReversed}"/>
 				<transition-group name="list" tag="div" class="players-table">
@@ -74,6 +56,24 @@
 					<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 v-for="ex in expansionsStatus" v-bind:key="ex.id">
+					<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}}
+						<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>
+				<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}"/>
@@ -113,6 +113,7 @@ 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'
 
 const cumulativeOffset = function(element) {
 	var top = 0, left = 0;
@@ -313,7 +314,8 @@ export default {
 					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
+					enabled: this.expansions.indexOf(x) !== -1,
+					emoji: emojiMap[x],
 				}
 			})
 		},

frontend/src/components/Menu.vue

@@ -15,10 +15,10 @@
 			<div v-if="!didSetUsername">
 				<p id="choose_username">{{$t("choose_username")}}</p>
 				<form @submit="setUsername" class="form" style="display:flex">
-					<input id="username" v-model="username" />
+					<input id="_username" v-model="username" />
 					<input type="submit" class="btn" :value="$t('submit')"/>
+					<input type="button" class="btn" @click="discordLogin" value="Login with Discord"/>
 				</form>
-				<a class="btn" :href="redirectUrl">Login with Discord</a>
 				<p v-if="onlinePlayers > 0">{{$t("online_players")}}{{onlinePlayers}}</p>
 			</div>
 			<div v-else>
@@ -44,7 +44,7 @@
 				</div>
 			</div>
 		</div>
-		<label for="username" style="opacity:0">Username</label>
+		<label for="_username" style="opacity:0">Username</label>
 		<label for="lobbyname" style="opacity:0">Lobby Name</label>
 		<div>
 			Still new to the game? Read the rules <a href="./help">here</a> or press the question mark in the bottom right corner anytime during your matches.
@@ -58,6 +58,7 @@ import Card from '@/components/Card.vue'
 import TinyHand from '@/components/TinyHand.vue'
 // import Lobby from './components/Lobby.vue'
 import { datadogRum } from '@datadog/browser-rum';
+import { emojiMap } from '@/utils/emoji-map.js'
 
 export default {
 	name: 'App',
@@ -134,11 +135,15 @@ export default {
 				e.preventDefault();
 			}
 		},
+		discordLogin() {
+			window.location = this.redirectUrl;
+		},
 		getLobbyCard(lobby) {
 			return {
 				name: lobby.name,
 				icon: "💥",
-				number: `${lobby.players}🤠 ${lobby.locked?'🔐':''}`,
+				number: `${lobby.players-lobby.bots}🤠${lobby.bots > 0 ? ' '+lobby.bots+'🤖':''} ${lobby.locked?'🔐':''}`,
+				alt_text: lobby.expansions?.map(e => emojiMap[e]).join(''),
 				is_equipment: true,
 			}
 		},
@@ -146,7 +151,8 @@ export default {
 			return {
 				name: lobby.name,
 				icon: "👁️",
-				number: `${lobby.players}🤠 ${lobby.locked?'🔐':''}`,
+				number: `${lobby.players-lobby.bots}🤠${lobby.bots > 0 ? ' '+lobby.bots+'🤖':''} ${lobby.locked?'🔐':''}`,
+				alt_text: lobby.expansions?.map(e => emojiMap[e]).join(''),
 				usable_next_turn: true,
 			}
 		},

frontend/src/utils/emoji-map.js

@@ -0,0 +1,7 @@
+export const emojiMap = {
+	'dodge_city': '🐄',
+	'gold_rush': '🤑',
+	'high_noon': '🔥',
+	'fistful_of_cards': '🎴',
+	'the_valley_of_shadows': '👻',
+}