Add the ColourChoice modal to the lobby

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

@@ -1,12 +1,19 @@
 <script lang="ts">
+import ColourChoice from "../../components/modals/ColourChoice.svelte";
 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";
+import { isHost, players } from "../../stores";
 
 function tempButtonHandler() {};
 
+// The modals that can appear in the lobby
+const modal = {
+	options: false,
+	colourChoice: false,
+};
+
 const gameOptions = [
 	{
 		name: `No Secrets`,
@@ -51,17 +58,16 @@ function toggleOption(e: CustomEvent<string>) {
 
 	// TODO: Send websocket event to server
 };
-
-let optionsModal = false;
-function toggleOptionsModal() {
-	console.log(`Toggling options modal`)
-	optionsModal = !optionsModal;
-}
 </script>
 
 <OptionInfo
-	open="{optionsModal}"
-	on:close="{toggleOptionsModal}"
+	open="{modal.options}"
+	on:close="{_ => modal.options = false}"
+/>
+<ColourChoice
+	open="{modal.colourChoice}"
+	on:selectColour="{tempButtonHandler}"
+	on:close="{_ => modal.colourChoice = false}"
 />
 
 <main>
@@ -70,23 +76,16 @@ function toggleOptionsModal() {
 		<div class="sci-fi-box">
 			<h2>Players</h2>
 			<div class="player-box">
+				{#each $players as p, i}
 					<Player
-					name="Player 1"
-					colour="#00aa00"
-				/>
-				<Player
-					name="Player 2"
-					colour="#aaaa00"
+						name="{p.name}"
+						colour="{p.colour}"
+						on:changeColour="{_ => modal.colourChoice = true}"
 					/>
+					{#if i == 1}
 						<div class="divider"></div>
-				<Player
-					name="Player 3"
-					colour="#00aaaa"
-				/>
-				<Player
-					name="Player 4"
-					colour="#ffaaff"
-				/>
+					{/if}
+				{/each}
 			</div>
 		</div>
 		<div class="sci-fi-box">
@@ -107,7 +106,7 @@ function toggleOptionsModal() {
 					<SciFiCheckbox
 						name="{option.name}"
 						id="{option.id}"
-						disabled="{$myName != $hostName}"
+						disabled="{!$isHost}"
 						bind:state="{option.active}"
 						on:toggle="{toggleOption}"
 					>