add button to leave the game

site/src/App.vue

@@ -37,7 +37,7 @@ const toggleDark = useToggle(dark);
 const theme = computed(() => dark.value ? 'dark' : 'light');
 const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
 
-const { status, data, send, open } = useWebSocket<string>(`wss://${window.location.host}/queue`, {
+const { status, data, send, open, close } = useWebSocket<string>(`wss://${window.location.host}/queue`, {
 	immediate: false,
 });
 const game = ref<Game | null>(null);
@@ -72,6 +72,12 @@ function clickPlay() {
 }
 
 function action(evt: Action) {
+	if (evt.action === 'quit') {
+		// Just close the connection. The server knows what to do.
+		data.value = null;
+		close(1000, 'I quit.');
+		return;
+	}
 	const s = JSON.stringify({action: evt.action});
 	console.log('send action', evt, s);
 	send(s);

site/src/components/Game.vue

@@ -35,6 +35,9 @@
                 </v-row>
             </v-sheet>
         </v-row>
+        <v-row class="d-flex justify-center">
+            <v-btn @click="leave">Leave</v-btn>
+        </v-row>
     </v-container>
 </template>
 
@@ -75,4 +78,8 @@ function useItem(evt: number) {
     const action = evt.toString() as "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7";
     emit('action', { action });
 }
+
+function leave() {
+    emit('action', { action: 'quit' });
+}
 </script>