From f3af5a77d712bacc06952e328c357693ed483214 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 24 Dec 2021 03:22:38 -0700
Subject: [PATCH] Add the ColourChoice modal to the lobby

---
 web-svelte/src/views/lobby/multiplayer.svelte | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/web-svelte/src/views/lobby/multiplayer.svelte b/web-svelte/src/views/lobby/multiplayer.svelte
index 181e353..4f74989 100644
--- a/web-svelte/src/views/lobby/multiplayer.svelte
+++ b/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">
-				<Player
-					name="Player 1"
-					colour="#00aa00"
-				/>
-				<Player
-					name="Player 2"
-					colour="#aaaa00"
-				/>
-				<div class="divider"></div>
-				<Player
-					name="Player 3"
-					colour="#00aaaa"
-				/>
-				<Player
-					name="Player 4"
-					colour="#ffaaff"
-				/>
+				{#each $players as p, i}
+					<Player
+						name="{p.name}"
+						colour="{p.colour}"
+						on:changeColour="{_ => modal.colourChoice = true}"
+					/>
+					{#if i == 1}
+						<div class="divider"></div>
+					{/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}"
 					>