From 6e9ff8b7516279527b1ab3671928f4513df190fe Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Sun, 13 Mar 2022 01:33:38 -0600
Subject: [PATCH] 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               | 33 +++++++++++
 common/src/index.ts                           |  1 +
 web-svelte/src/views/lobby/multiplayer.svelte | 55 ++++++++-----------
 3 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 common/src/data/game_options.ts

diff --git a/common/src/data/game_options.ts b/common/src/data/game_options.ts
new file mode 100644
index 0000000..bb352f9
--- /dev/null
+++ b/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,
+	},
+];
\ No newline at end of file
diff --git a/common/src/index.ts b/common/src/index.ts
index 6df3fd5..94b8081 100644
--- a/common/src/index.ts
+++ b/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";
diff --git a/web-svelte/src/views/lobby/multiplayer.svelte b/web-svelte/src/views/lobby/multiplayer.svelte
index 831701d..d676657 100644
--- a/web-svelte/src/views/lobby/multiplayer.svelte
+++ b/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;
 	}
 }