Begin implementing an error when the request fails

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { IColour, SaveShipResponse, Status, ISpaceship } from "common";
 import SpaceShuttle from "../icons/spaceship.svelte";
 import SciFiButton from "../SciFi-Button.svelte";
 import { createEventDispatcher } from "svelte";
@@ -11,7 +12,7 @@ const emit = createEventDispatcher();
 export let open: boolean = false;
 
 /** This will be fetched from the server when opening the modal */
-const colours = [
+const colours: IColour[] = [
 	{ name: "Green", hex: "#00aa00" },
 	{ name: "Blue", hex: "#0077b6" },
 	{ name: "Red", hex: "#cb0b0a" },
@@ -22,9 +23,9 @@ const colours = [
 	{ name: "Pink", hex: "#f72585" },
 	{ name: "Yellow", hex: "#f9c80e" },
 ];
-const spaceships = [
+const spaceships: ISpaceship[] = [
-	{ name: "Space Shuttle", code: "space-shuttle" },
+	{ name: "Space Shuttle", id: "space-shuttle" },
-	{ name: "Rocket", code: "rocket" },
+	{ name: "Rocket", id: "rocket" },
 ]
 
 let player = $players.find(p => p.name == $myName);
@@ -34,8 +35,35 @@ $: takenColours = $players.map(p => p.colour);
 
 var selectedColour = player.colour;
 var selectedShip = player.ship;
+var error = null;
 
-function saveShipDesign() {};
+function saveShipDesign() {
+	/* TODO: Send event to server, wait for confirmation */
+	let response: SaveShipResponse = {
+		status: Status.UnknownError,
+		message: `Testing the error design`,
+	};
+
+	if (response.status != Status.Success) {
+		error = response.message;
+
+		/*
+		TODO (Maybe): If the list of colours doesn't auto-update the available
+		colours based on which are already taken when another player saves, we
+		will need to update the list manually here on Status.OutOfDate
+		*/
+		return;
+	};
+
+	// Alert the parent and remove any errors
+	error = null;
+	emit(`save`, {
+		colour: selectedColour,
+		ship: selectedShip,
+	});
+
+	emit(`close`);
+};
 </script>
 
 
@@ -85,7 +113,7 @@ function saveShipDesign() {};
 						bind:value="{selectedShip}"
 					>
 						{#each spaceships as ship}
-							<option value="{ship.code}">{ship.name}</option>
+							<option value="{ship.id}">{ship.name}</option>
 						{/each}
 					</select>
 				</div>
@@ -109,6 +137,11 @@ function saveShipDesign() {};
 				</SciFiButton>
 			</div>
 		</div>
+		{#if error}
+			<div class="error">
+				{error}
+			</div>
+		{/if}
 	</div>
 </BaseModal>
 
@@ -153,4 +186,14 @@ h3 {
 	align-items: center;
 	transform: rotate(-90deg);
 }
+
+.error {
+	padding: 10px;
+	background: #ff000033;
+	border-radius: 10px;
+	border-style: solid;
+	border-color: red;
+	border-width: 2px;
+	text-align: center;
+}
 </style>