Add the list of game options to the common module and make the multiplayer lobby begin listening to lobby info events + some style tweaks.

common/src/data/game_options.ts

@@ -0,0 +1,33 @@
+/** The options that games can support */
+export const gameOptions = [
+	{
+		name: `No Secrets`,
+		id: `no-secrets`,
+		active: false,
+		hidden: true,
+	},
+	{
+		name: `Warp Gate Activated`,
+		id: `warp-gate-activated`,
+		active: false,
+		hidden: false,
+	},
+	{
+		name: `Chaos Theory`,
+		id: `Chaos Theory`,
+		active: false,
+		hidden: false,
+	},
+	{
+		name: `Hardcore`,
+		id: `hardcore`,
+		active: false,
+		hidden: false,
+	},
+	{
+		name: `Fate`,
+		id: `fate`,
+		active: false,
+		hidden: true,
+	},
+];

common/src/index.ts

@@ -7,6 +7,7 @@
 // Data
 	export * from "./data/colours";
 	export * from "./data/spaceships";
+	export * from "./data/game_options";
 
 // Data Structures
 	export * from "./types/Colour";

web-svelte/src/views/lobby/multiplayer.svelte

@@ -5,6 +5,16 @@ import SciFiCheckbox from "../../components/SciFi-Checkbox.svelte";
 import SciFiButton from "../../components/SciFi-Button.svelte";
 import Player from "../../components/Player.svelte";
 import { isHost, players } from "../../stores";
+import { onMount, onDestroy } from "svelte"
+import type { ILobbyInfo } from "common";
+import { gameOptions } from "common";
+import { socket } from "../../main";
+
+function handleLobbyInfo(data: ILobbyInfo) {};
+
+onMount(() => {
+	socket.on(`res:lobby.info`, handleLobbyInfo);
+});
 
 function tempButtonHandler() {};
 
@@ -14,38 +24,6 @@ const modal = {
 	shipDesigner: false,
 };
 
-const gameOptions = [
-	{
-		name: `No Secrets`,
-		id: `no-secrets`,
-		active: false,
-		hidden: false,
-	},
-	{
-		name: `Warp Gate Activated`,
-		id: `warp-gate-activated`,
-		active: true,
-		hidden: false,
-	},
-	{
-		name: `Chaos Theory`,
-		id: `Chaos Theory`,
-		active: false,
-		hidden: false,
-	},
-	{
-		name: `Hardcore`,
-		id: `hardcore`,
-		active: false,
-		hidden: false,
-	},
-	{
-		name: `Fate`,
-		id: `fate`,
-		active: false,
-		hidden: true,
-	}
-]
 $: visibleOptions = gameOptions.filter(x => !x.hidden);
 
 /**
@@ -58,6 +36,10 @@ function toggleOption(e: CustomEvent<string>) {
 
 	// TODO: Send websocket event to server
 };
+
+onDestroy(() => {
+	socket.off(`res:lobby.info`);
+});
 </script>
 
 <OptionInfo
@@ -190,7 +172,14 @@ h1 {
 		background: rgba(255, 255, 255, 0.1);
 		border-radius: 5px;
 		padding: 3px 7px;
-		margin-bottom: 10px;
+		margin: 5px 5px 10px 5px;
+	}
+
+	> div:first-child {
+		margin-left: 10px;
+	}
+	> div:last-child {
+		margin-right: 10px;
 	}
 }