add bot commands in lobby

and also a description on why it can't start the game

frontend/src/App.vue

@@ -119,62 +119,65 @@ h1,h2,h3,h4,p,span,b,label{
 	text-align: center;
 }
 .list-enter-active, .list-leave-active {
-  transition: all 0.5s;
+	transition: all 0.5s;
 }
 .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
-  opacity: 0;
+	opacity: 0;
-  transform: translateY(30px);
+	transform: translateY(30px);
 }
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 0.25s ease-out;
+	transition: opacity 0.25s ease-out;
 }
 
 .fade-enter, .fade-leave-to {
-  opacity: 0;
+	opacity: 0;
 }
 
 .bounce-enter-active, .bounce-leave-active {
-  animation: bounce-in .5s;
+	animation: bounce-in .5s;
 }
 
 .fade-enter, .bounce-leave-to {
-  animation: bounce-out .5s;
+	animation: bounce-out .5s;
 }
 @keyframes bounce-in {
-  0% {
+	0% {
-    transform: scale(0);
+		transform: scale(0);
-  }
+	}
-  50% {
+	50% {
-    transform: scale(1.2);
+		transform: scale(1.2);
-  }
+	}
-  100% {
+	100% {
-    transform: scale(1);
+		transform: scale(1);
-  }
+	}
 }
 @keyframes bounce-out {
-  0% {
+	0% {
-    transform: scale(1);
+		transform: scale(1);
-  }
+	}
-  50% {
+	50% {
-    transform: scale(1.1);
+		transform: scale(1.1);
-  }
+	}
-  100% {
+	100% {
-    transform: scale(0);
+		transform: scale(0);
-  }
+	}
 }
 input, select {
-  border: 2px solid;
+	border: 2px solid;
-  border-radius: 4px;
+	border-radius: 4px;
-  font-size: 1rem;
+	font-size: 1rem;
-  margin: 0.25rem;
+	margin: 0.25rem;
-  min-width: 125px;
+	min-width: 125px;
-  padding: 0.5rem;
+	padding: 0.5rem;
-  transition: border-color 0.5s ease-out;
+	transition: border-color 0.5s ease-out;
+}
+input:disabled {
+	opacity: 0.5;
 }
 @media (prefers-color-scheme: dark) {
 	:root, #app, input, select {
-    background-color: #181a1b;
+		background-color: #181a1b;
-    color: rgb(174, 194, 211);
+		color: rgb(174, 194, 211);
-  }
+	}
 }
 </style>

frontend/src/components/Lobby.vue

@@ -39,6 +39,7 @@
 				<!-- </div> -->
 			</div>
 			<div v-if="!started">
+				<p v-if="players.length < 3" class="center-stuff">{{$t('minimum_players')}}</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}}</PrettyCheck>
@@ -46,6 +47,9 @@
 				</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" :value="$t('add_bot')" :disabled="!isRoomOwner || players.length > 7" @click="()=>{this.$socket.emit('chat_message', '/addbot')}"/>
+				<input type="button" style="margin-left: 10pt;" :value="$t('remove_bot')" :disabled="!isRoomOwner || !isThereAnyBot" @click="()=>{this.$socket.emit('chat_message', '/removebot')}"/>
 				<!-- <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>
@@ -146,6 +150,9 @@ export default {
 		inviteLink() {
 			return `${window.location.origin}/game?code=${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 {
@@ -297,15 +304,15 @@ export default {
 	}
 }
 @keyframes turn-animation {
-  0% {
+	0% {
-    transform: scale(1);
+		transform: scale(1);
-  }
+	}
-  50% {
+	50% {
-    transform: scale(1.02);
+		transform: scale(1.02);
-  }
+	}
-  100% {
+	100% {
-    transform: scale(1);
+		transform: scale(1);
-  }
+	}
 }
 .tiny-equipment {
 	position: absolute;

frontend/src/i18n/en.json

@@ -105,6 +105,10 @@
 		"leggedelwest": "He must play this card on this turn if possible."
 	},
 	"mods": "Modifiers",
+	"bots": "Bots",
+	"add_bot": "Add a bot",
+	"remove_bot": "Remove a bot",
+	"minimum_players": "The game needs at least 3 players to start",
 	"mod_comp": "Competitive mode (disables automatic take damage)",
 	"disconnect_bot": "Replace players that disconnect with bots",
 	"your_turn": "Play your turn!",

frontend/src/i18n/it.json

@@ -105,6 +105,10 @@
 		"leggedelwest": "Ed è obbligato a usarla nel suo turno, se possibile"
 	},
 	"mods": "Modificatori",
+	"bots": "Bot",
+	"add_bot": "Aggiungi un bot",
+	"remove_bot": "Rimuovi un bot",
+	"minimum_players": "Per iniziare la partita servono minimo 3 giocatori",
 	"mod_comp": "Modalità competitiva (disattiva il prendi danno automatico)",
 	"disconnect_bot": "Sostituisci i giocatori che si disconnettono con bot",
 	"your_turn": "È il tuo turno!",