Use an each block for option populating

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

@@ -3,9 +3,55 @@ import OptionInfo from "../../components/modals/OptionInfo.svelte";
 import SciFiCheckbox from "../../components/SciFi-Checkbox.svelte";
 import SciFiButton from "../../components/SciFi-Button.svelte";
 import Player from "../../components/Player.svelte";
+import { myName, hostName } from "../../stores";
 
 function tempButtonHandler() {};
 
+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);
+
+/**
+ * What gets called when the host toggles one of the options in the lobby so
+ * that the other players can see the change happen on their screen.
+ */
+function toggleOption(e: CustomEvent<string>) {
+	let option = visibleOptions.find(x => x.id == e.detail);
+	console.debug(`Toggled option: ${option.name}`);
+
+	// TODO: Send websocket event to server
+};
+
 let optionsModal = false;
 function toggleOptionsModal() {
 	console.log(`Toggling options modal`)
@@ -57,30 +103,17 @@ function toggleOptionsModal() {
 			</div>
 			<h2>Options</h2>
 			<div class="options-box">
+				{#each visibleOptions as option}
 					<SciFiCheckbox
-					name="No Secrets"
+						name="{option.name}"
-					id="no-secrets"
+						id="{option.id}"
+						disabled="{$myName != $hostName}"
+						bind:state="{option.active}"
+						on:toggle="{toggleOption}"
 					>
-					No Secrets
+						{option.name}
-				</SciFiCheckbox>
-				<SciFiCheckbox
-					name="Hardcore Mode"
-					id="hardcore"
-				>
-					Hardcore Mode
-				</SciFiCheckbox>
-				<SciFiCheckbox
-					name="Warp Gate Activated"
-					id="warp-gate"
-				>
-					Warp Gate Activated!
-				</SciFiCheckbox>
-				<SciFiCheckbox
-					name="Chaos Theory"
-					id="chaos-theory"
-				>
-					Chaos Theory
 					</SciFiCheckbox>
+				{/each}
 			</div>
 		</div>
 		<div class="flex-row">
@@ -128,8 +161,7 @@ h1 {
 	position: relative;
 
 	h2 {
-		margin: 0px;
+		margin: 10px 0px;
-		margin-top: 10px;
 	}
 }
 
@@ -152,7 +184,6 @@ h1 {
 	display: flex;
 	justify-content: space-evenly;
 	flex-wrap: wrap;
-
 }
 
 .info-button-container {