From 4f8b5ea0c8a0459bfaceb5183cdd51022b14e0ba Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sat, 22 May 2021 20:05:12 +0200
Subject: [PATCH] visual fixes

---
 backend/bang/game.py               |  2 +-
 frontend/src/App.vue               | 24 +++++++++++++++++++++---
 frontend/src/components/Chat.vue   | 12 ++++++++++--
 frontend/src/components/Lobby.vue  | 16 +++++++++-------
 frontend/src/components/Menu.vue   |  4 ++--
 frontend/src/components/Player.vue | 14 ++++++++------
 6 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/backend/bang/game.py b/backend/bang/game.py
index 6d91f2d..13c14a2 100644
--- a/backend/bang/game.py
+++ b/backend/bang/game.py
@@ -51,12 +51,12 @@ class Game:
                 'started': self.started,
                 'players': [{'name':p.name, 'ready': p.character != None, 'is_bot': p.is_bot} for p in self.players],
                 'password': self.password,
-                'debug': self.debug,
                 'is_competitive': self.is_competitive,
                 'disconnect_bot': self.disconnect_bot,
                 'expansions': self.expansions,
                 'available_expansions': self.available_expansions,
             })
+        self.sio.emit('debug', room=self.name, data=self.debug)
         self.sio.emit('spectators', room=self.name, data=len(self.spectators))
 
     def toggle_expansion(self, expansion_name):
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5ff6d9b..79a2986 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,8 +9,8 @@
 		</div>
 		<help v-if="showHelp"/>
 		<div style="position:fixed;bottom:4pt;right:4pt;display:flex;">
-			<input type="button" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
-			<select id="lang" v-model="theme">
+			<input type="button" class="btn" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
+			<select id="theme" class="btn" v-model="theme">
 				<option
 					v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']"
 					:key="`theme-${i}`"
@@ -18,7 +18,7 @@
 						{{theme.split('.')[1]}} {{theme.split('.')[2]}}
 				</option>
 			</select>
-			<select id="lang" v-model="$i18n.locale" @change="storeLangPref">
+			<select id="lang" class="btn" v-model="$i18n.locale" @change="storeLangPref">
 				<option
 					v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
 					:key="`lang-${i}`"
@@ -218,6 +218,7 @@ input:disabled {
 :root {
 	--font-color: #2c3e50;
 	--bg-color: white;
+	--muted-color: #ccc;
 }
 [data-theme="dark"] {
 	--font-color: rgb(174, 194, 211);
@@ -226,14 +227,31 @@ input:disabled {
 [data-theme="sepia"] {
 	--font-color: rgb(54, 43, 33);
 	--bg-color: #e7d6bb;
+	--muted-color: rgba(54, 43, 33, 0.5);
 }
 [data-theme="grayscale"] {
 	--font-color: rgb(66, 66, 66);
 	--bg-color: #e2e0e0;
+	--muted-color: rgba(66, 66, 66, 0.5);
 }
 html, #app, input, select {
 	background-color: var(--bg-color);
 	color: var(--font-color);
 }
 
+.btn {
+	background-color: var(--bg-color);
+	color: var(--font-color);
+	border: 2px solid var(--font-color);
+	border-radius: 12pt;
+	cursor: pointer;
+	transition: all 0.13s ease-in-out;
+}
+.btn:hover:not([disabled]) {
+	background-color: var(--font-color); /* Green */
+	color: var(--bg-color);
+}
+.btn:disabled {
+	cursor: not-allowed;
+}
 </style>
diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index ac14072..ac30d90 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -10,7 +10,7 @@
 		</transition-group>
 		<form @submit="sendChatMessage" id="msg-form">
 			<input v-model="text" style="flex-grow:2;"/>
-			<input type="submit" :value="$t('submit')"/>
+			<input id="submit-message" type="submit" class="btn" :value="$t('submit')"/>
 		</form>
 	</div>
 </template>
@@ -112,7 +112,7 @@ export default {
 	overflow-x: hidden;
 	overflow-wrap: break-word;
 	overflow-wrap: normal;
-	border: 2pt solid #ccc;
+	border: 2pt solid var(--muted-color);
 	border-radius: 4pt;
 }
 input {
@@ -129,6 +129,7 @@ input {
 #msg-form {
 	width:100%;
 	padding:0;
+	margin-top: 6pt;
 	display:flex;
 }
 .message-enter-active, .message-leave-active {
@@ -143,11 +144,18 @@ input {
 		height: 90vh;
 		margin-left: 10pt;
 	}
+	#submit-message {
+		margin-left: 6pt;
+		margin-right: -5pt;
+	}
 }
 @media only screen and (max-width:1000px) {
 	#msg-form {
 		flex-direction: column;
 	}
+	#submit-message {
+		margin-top: 6pt;
+	}
 	#chatbox {
 		max-height:150px;
 	}
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 5c70a3d..4d8c946 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -3,16 +3,16 @@
 		<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" @click="leaveRoom" :value="$t('leave_room')"/>
+				<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" style="position: absolute;top: 6pt;right: 6pt;">
+			<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" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
+				<input type="button" class="btn" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
 			</div>
 			
 			<!-- <div class="players-table"> -->
@@ -56,8 +56,8 @@
 				<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')}"/>
+				<input type="button" class="btn" :value="$t('add_bot')" :disabled="!isRoomOwner || players.length > 7" @click="()=>{this.$socket.emit('chat_message', '/addbot')}"/>
+				<input type="button" class="btn" 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>
@@ -117,7 +117,7 @@ export default {
 		hasToSetUsername: false,
 		is_competitive: false,
 		disconnect_bot: false,
-		debug: false,
+		debug_mode: false,
 	}),
 	sockets: {
 		room(data) {
@@ -134,7 +134,6 @@ export default {
 			this.disconnect_bot = data.disconnect_bot
 			this.togglable_expansions = data.available_expansions
 			this.expansions = data.expansions
-			this.debug = data.debug
 			this.players = data.players.map(x => {
 				return {
 					name: x.name,
@@ -144,6 +143,9 @@ export default {
 				}
 			})
 		},
+		debug(data) {
+			this.debug_mode = data;
+		},
 		start() {
 			this.started = true;
 		},
diff --git a/frontend/src/components/Menu.vue b/frontend/src/components/Menu.vue
index 006ff9c..5e5fff0 100644
--- a/frontend/src/components/Menu.vue
+++ b/frontend/src/components/Menu.vue
@@ -14,7 +14,7 @@
 				<p>{{$t("choose_username")}}</p>
 				<form @submit="setUsername">
 					<input id="username" v-model="username" />
-					<input type="submit" :value="$t('submit')"/>
+					<input type="submit" class="btn" :value="$t('submit')"/>
 				</form>
 				<p v-if="onlinePlayers > 0">{{$t("online_players")}}{{onlinePlayers}}</p>
 			</div>
@@ -26,7 +26,7 @@
 					<form @submit="createLobby" style="display:flex">
 						<p>{{$t("lobby_name")}}</p>
 						<input id="lobbyname" v-model="lobbyName"/>
-						<input type="submit" :value="$t('submit')"/>
+						<input type="submit" class="btn" :value="$t('submit')"/>
 					</form>
 					<h2>{{$t("available_lobbies")}}</h2>
 					<div style="display: flex">
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index e90b3cf..1b9f51a 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -20,10 +20,12 @@
 		<transition name="list">
 			<p v-if="desc"><i>{{desc}}</i></p>
 		</transition>
-		<button v-if="is_my_turn && character.name === 'Sid Ketchum' && lives < max_lives && hand.length > 1" @click="sidWantsScrapForHealth=true">{{$t('special_ability')}}</button>
-		<button v-if="is_my_turn && character.name === 'Chuck Wengam' && lives > 1" @click="chuckSpecial">{{$t('special_ability')}}</button>
-		<button v-if="is_my_turn && character.name === 'José Delgrado' && special_use_count < 2 && hand.filter(x => x.is_equipment).length > 0" @click="joseScrap=true">{{$t('special_ability')}}</button>
-		<button v-if="is_my_turn && character.name === 'Doc Holyday' && special_use_count < 1 && hand.length > 1" @click="holydayScrap=true">{{$t('special_ability')}}</button>
+		<div style="margin-bottom:6pt;margin-bottom: 6pt;display: flex;flex-direction: column;">
+			<button class="btn" v-if="is_my_turn && character.name === 'Sid Ketchum' && lives < max_lives && hand.length > 1" @click="sidWantsScrapForHealth=true">{{$t('special_ability')}}</button>
+			<button class="btn" v-if="is_my_turn && character.name === 'Chuck Wengam' && lives > 1" @click="chuckSpecial">{{$t('special_ability')}}</button>
+			<button class="btn" v-if="is_my_turn && character.name === 'José Delgrado' && special_use_count < 2 && hand.filter(x => x.is_equipment).length > 0" @click="joseScrap=true">{{$t('special_ability')}}</button>
+			<button class="btn" v-if="is_my_turn && character.name === 'Doc Holyday' && special_use_count < 1 && hand.length > 1" @click="holydayScrap=true">{{$t('special_ability')}}</button>
+		</div>
 		<div v-if="lives > 0 || is_ghost" style="position:relative">
 			<span id="hand_text">{{$t('hand')}}</span>
 			<transition-group name="list" tag="div" :class="{hand:true, 'play-cards':pending_action===2}">
@@ -421,7 +423,7 @@ export default {
 .hand {
 	position: relative;
 	display:flex;
-	border: 2px dashed #ccc;
+	border: 2px dashed var(--muted-color);
 	padding: 10pt 40pt 0pt 40pt;
 	overflow:auto;
 	border-radius: 4pt;
@@ -442,7 +444,7 @@ export default {
 	transform: translateY(-15px);
 }
 #hand_text{
-	color: #ccc;
+	color: var(--muted-color);
 	position: absolute;
 	font-size: xxx-large;
 	font-weight: 300;