Make the lobby more compatible with the colour/ship objects

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