Update the ColourChoice to be better UI & UX

web-svelte/src/components/modals/ColourChoice.svelte

@@ -1,27 +1,41 @@
 <script lang="ts">
+import SpaceShuttle from "../icons/spaceship.svelte";
 import SciFiButton from "../SciFi-Button.svelte";
 import { createEventDispatcher } from "svelte";
+import { myName, players } from "../../stores";
 import BaseModal from "./BaseModal.svelte";
+import Hexagon from "../Hexagon.svelte";
 
 const emit = createEventDispatcher();
 
 export let open: boolean = false;
 
-let colours = [
-	{ name: "Green", hex: "#00aa00", taken: false },
-	{ name: "Blue", hex: "#0077b6", taken: false },
-	{ name: "Red", hex: "#cb0b0a", taken: false },
-	{ name: "Purple", hex: "#7400b8", taken: false },
-	{ name: "Orange", hex: "#faa307", taken: false },
-	{ name: "Light Green", hex: "#9ef01a", taken: true },
-	{ name: "Magenta", hex: "#b7094c", taken: false },
-	{ name: "Pink", hex: "#f72585", taken: false },
-	{ name: "Yellow", hex: "#f9c80e", taken: false },
+/** This will be fetched from the server when opening the modal */
+const colours = [
+	{ name: "Green", hex: "#00aa00" },
+	{ name: "Blue", hex: "#0077b6" },
+	{ name: "Red", hex: "#cb0b0a" },
+	{ name: "Purple", hex: "#7400b8" },
+	{ name: "Orange", hex: "#faa307" },
+	{ name: "Light Green", hex: "#9ef01a" },
+	{ name: "Magenta", hex: "#b7094c" },
+	{ name: "Pink", hex: "#f72585" },
+	{ name: "Yellow", hex: "#f9c80e" },
 ];
+const spaceships = [
+	{ name: "Space Shuttle", code: "space-shuttle" },
+	{ name: "Rocket", code: "rocket" },
+]
 
-function selectColour(colour: any) {
-	emit("selectColour", colour);
-};
+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;
+
+function saveShipDesign() {};
 </script>
 
 
@@ -30,28 +44,70 @@ function selectColour(colour: any) {
 		<h2>Choose a Colour</h2>
 		<hr>
 		<div class="flex-container">
-			{#each colours as colour}
-				<div
-					style="--colour: {colour.hex};"
-					disabled="{colour.taken}"
-				>
-					<div class="colour"></div>
+			<div class="options">
+				<div class="colour">
+					<h3>Colour:</h3>
 
-					<!-- Allow the colour to be chosen if it isn't already taken -->
-					{#if !colour.taken}
-						<span class="name">
-							<SciFiButton
-								title="Select {colour.name} to be your spaceship colour"
-								on:click="{_ => selectColour(colour)}"
+					<!--
+						Create the dropdown that allows the user to see all of
+						the colours but not choose ones that other users
+						currently have selected.
+					-->
+					<select
+						name="colour"
+						id="spaceship-colour"
+						bind:value="{selectedColour}"
 					>
-								Select {colour.name}
-							</SciFiButton>
-						</span>
-					{:else}
-						<span class="name">{colour.name}</span>
-					{/if}
-				</div>
+						<!-- Display each colour as given by the server -->
+						{#each colours as c}
+							<option
+								value="{c.hex}"
+								disabled="{
+									c.hex != myColour
+									&& takenColours.includes(c.hex)
+								}"
+							>
+								{c.name}
+							</option>
 						{/each}
+					</select>
+				</div>
+				<div class="spaceship">
+					<h3>Spaceship</h3>
+
+					<!--
+						Create the dropdown that allows users to select which
+						spaceship icon they want for their player.
+					-->
+					<select
+						name="spaceship"
+						id="spaceship-icon"
+						bind:value="{selectedShip}"
+					>
+						{#each spaceships as ship}
+							<option value="{ship.code}">{ship.name}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+			<div class="preview">
+				<h3>Preview:</h3>
+				<Hexagon>
+					<div
+						class="spaceship-icon"
+						style="--colour: {selectedColour};"
+					>
+						<SpaceShuttle
+							spaceship="{selectedShip}"
+						/>
+					</div>
+				</Hexagon>
+				<SciFiButton
+					on:click="{saveShipDesign}"
+				>
+					Save Design
+				</SciFiButton>
+			</div>
 		</div>
 	</div>
 </BaseModal>
@@ -71,22 +127,30 @@ function selectColour(colour: any) {
 		width: 90%;
 		flex-grow: 1;
 		margin: 5px;
-
-		.colour {
-			background: var(--colour);
-			width: 50px;
-			height: 50px;
-			margin-right: 5px;
-			border-radius: 5px;
-		}
-
-		.name {
-			flex-grow: 1;
-		}
+		flex-direction: column;
 
 		@include medium {
 			width: 30%;
 		}
 	}
 }
+
+h3 {
+	margin-bottom: 5px;
+}
+
+.spaceship-icon {
+	/*
+		Smaller version: 55px
+		Larger version: 75px
+	*/
+	--size: 80px;
+	width: var(--size);
+	height: var(--size);
+	display: flex;
+	color: var(--colour);
+	justify-content: center;
+	align-items: center;
+	transform: rotate(-90deg);
+}
 </style>