better command suggestion

backend/bang/game.py

@@ -82,10 +82,31 @@ class Game:
             })
         self.sio.emit('debug', room=self.name, data=self.debug)
         if self.debug:
-            commands = ['/debug', '/set_chars', '/suicide', '/nextevent', '/notify', '/show_cards', '/ddc', '/dsh', '/togglebot', '/cancelgame', '/startgame', '/setbotspeed', '/addex', '/setcharacter', '/setevent', '/removecard', '/getcard', '/meinfo', '/gameinfo', '/mebot', '/getnuggets']
+            commands = [
+                {'cmd':'/debug', 'help':'Toggles the debug mode'},
+                {'cmd':'/set_chars', 'help':'Set how many characters to distribute - sample /set_chars 3'},
+                {'cmd':'/suicide', 'help':'Kills you'},
+                {'cmd':'/nextevent', 'help':'Flip the next event card'},
+                {'cmd':'/notify', 'help':'Send a message to a player - sample /notify player hi!'},
+                {'cmd':'/show_cards', 'help':'View the hand of another - sample /show_cards player'},
+                {'cmd':'/ddc', 'help':'Destroy all cards - sample /ddc player'},
+                {'cmd':'/dsh', 'help':'Set health - sample /dsh player'},
+                # {'cmd':'/togglebot', 'help':''},
+                {'cmd':'/cancelgame', 'help':'Stops the current game'},
+                {'cmd':'/startgame', 'help':'Force starts the game'},
+                {'cmd':'/setbotspeed', 'help':'Changes the bot response time - sample /setbotspeed 0.5'},
+                # {'cmd':'/addex', 'help':''},
+                {'cmd':'/setcharacter', 'help':'Changes your current character - sample /setcharacter Willy The Kid'},
+                {'cmd':'/setevent', 'help':'Changes the event deck - sample /setevent 0 Manette'},
+                {'cmd':'/removecard', 'help':'Remove a card from hand/equip - sample /removecard 0'},
+                {'cmd':'/getcard', 'help':'Get a brand new card - sample /getcard Birra'},
+                {'cmd':'/meinfo', 'help':'Get player data'},
+                {'cmd':'/gameinfo', 'help':'Get game data'},
+                {'cmd':'/mebot', 'help':'Toggles bot mode'},
+                {'cmd':'/getnuggets', 'help':'Adds nuggets to yourself - sample /getnuggets 5'}]
             self.sio.emit('commands', room=self.name, data=commands)
         else:
-            self.sio.emit('commands', room=self.name, data=['/debug'])
+            self.sio.emit('commands', room=self.name, data=[{'cmd':'/debug', 'help':'Toggles the debug mode'}])
         self.sio.emit('spectators', room=self.name, data=len(self.spectators))
 
     def toggle_expansion(self, expansion_name):

frontend/src/components/Chat.vue

@@ -5,12 +5,15 @@
 		<transition-group name="message" tag="div" id="chatbox">
 		<!-- <div id="chatbox"> -->
 			<p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color}`">{{msg.text}}</p>
-			<p style="margin:1pt 15pt;" class="chat-message" v-for="(msg, i) in commandSuggestion" v-bind:key="`${i}-c`" :style="`color:orange`">{{msg}}</p>
 			<p class="end" key="end" style="color:#0000">.</p>
 		<!-- </div> -->
 		</transition-group>
+		<div v-if="commandSuggestion.length > 0">
+			<p style="margin:1pt 15pt;cursor:pointer;" class="chat-message" v-for="(msg, i) in commandSuggestion" v-bind:key="`${i}-c`" :style="`color:orange`"
+					@click="fillCmd(msg.cmd)">{{msg.cmd}} <i class="std-text" style="font-size:8pt;">{{msg.help}}</i></p>
+		</div>
 		<form @submit="sendChatMessage" id="msg-form">
-			<input v-model="text" style="flex-grow:2;"/>
+			<input id="my-msg" v-model="text" style="flex-grow:2;"/>
 			<input id="submit-message" type="submit" class="btn" :value="$t('submit')"/>
 		</form>
 	</div>
@@ -32,7 +35,7 @@ export default {
 		messages: [],
 		text: '',
 		spectators: 0,
-		commands: ['/debug'],
+		commands: [{cmd:'/debug', help:'Toggles the debug mode'}],
 	}),
 	computed: {
 		commandSuggestion() {
@@ -40,7 +43,7 @@ export default {
 			if (this.text.length < 1) {
 				return [];
 			}
-			return this.commands.filter(x => x.slice(0, this.text.length) == this.text);
+			return this.commands.filter(x => x.cmd.slice(0, this.text.length) == this.text);
 		},
 	},
 	sockets: {
@@ -115,6 +118,10 @@ export default {
 			}
 			e.preventDefault();
 		},
+		fillCmd(cmd) {
+			this.text = cmd;
+			document.getElementById('my-msg').focus();
+		}
 	},
 }
 </script>
@@ -136,6 +143,9 @@ input {
 	height: 0pt;
 	margin-top: -1.5pt;
 }
+.std-text {
+	color: var(--font-color);
+}
 .chat {
 	display: flex;
 	flex-direction: column;