command suggestion

backend/bang/game.py

@@ -77,6 +77,11 @@ class Game:
                 'available_expansions': self.available_expansions,
             })
         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']
+            self.sio.emit('commands', room=self.name, data=commands)
+        else:
+            self.sio.emit('commands', room=self.name, data=['/debug'])
         self.sio.emit('spectators', room=self.name, data=len(self.spectators))
 
     def toggle_expansion(self, expansion_name):

frontend/src/components/Chat.vue

@@ -5,6 +5,7 @@
 		<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>
@@ -31,7 +32,17 @@ export default {
 		messages: [],
 		text: '',
 		spectators: 0,
+		commands: ['/debug'],
 	}),
+	computed: {
+		commandSuggestion() {
+			this.text;
+			if (this.text.length < 1) {
+				return [];
+			}
+			return this.commands.filter(x => x.slice(0, this.text.length) == this.text);
+		},
+	},
 	sockets: {
 		chat_message(msg) {
 			// console.log(msg)
@@ -84,6 +95,9 @@ export default {
 		},
 		spectators(val) {
 			this.spectators = val
+		},
+		commands(list) {
+			this.commands = list;
 		}
 	},
 	methods: {