From dd5a1e8cb9373ce73f91854dda3f67bc24e606cd Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Sat, 12 Mar 2022 23:14:42 -0600
Subject: [PATCH] Make the lobby more compatible with the colour/ship objects

---
 web-svelte/src/components/Player.svelte              | 7 ++++---
 web-svelte/src/components/modals/ShipDesigner.svelte | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-svelte/src/components/Player.svelte b/web-svelte/src/components/Player.svelte
index 48cc909..588dfd6 100644
--- a/web-svelte/src/components/Player.svelte
+++ b/web-svelte/src/components/Player.svelte
@@ -2,9 +2,10 @@
 import SciFiButton from "./SciFi-Button.svelte";
 import { createEventDispatcher } from "svelte";
 import { myName, isHost } from "../stores";
+import type { IColour } from "common";
 
 export let name: string;
-export let colour: string;
+export let colour: IColour;
 
 const emit = createEventDispatcher();
 
@@ -22,11 +23,11 @@ let canLeave = $isHost || name == $myName;
 	<!-- The player's change Colour button -->
 	{#if $myName == name}
 		<SciFiButton
-			background="{colour}"
+			background="{colour.hex}"
 			on:click={changeColour}
 			height="60px"
 			width="60px"
-			hoverBackground="{colour}"
+			hoverBackground="{colour.hex}"
 		>
 			<div style="display: flex; align-items: center; justify-content: center;">
 				<img
diff --git a/web-svelte/src/components/modals/ShipDesigner.svelte b/web-svelte/src/components/modals/ShipDesigner.svelte
index fb0cb69..2257b35 100644
--- a/web-svelte/src/components/modals/ShipDesigner.svelte
+++ b/web-svelte/src/components/modals/ShipDesigner.svelte
@@ -16,8 +16,8 @@ let player = $players.find(p => p.name == $myName);
 $: myColour = player.colour;
 $: takenColours = $players.map(p => p.colour);
 
-var selectedColour = player.colour;
-var selectedShip = player.ship;
+var selectedColour = player.colour.hex;
+var selectedShip = player.ship.id;
 var error = null;
 
 function saveShipDesign() {
@@ -74,8 +74,8 @@ function saveShipDesign() {
 							<option
 								value="{c.hex}"
 								disabled="{
-									c.hex != myColour
-									&& takenColours.includes(c.hex)
+									c.hex != myColour.hex
+									&& takenColours.includes(c)
 								}"
 							>
 								{c.name}