Begin work on a modal for changing the player's colour

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+import SciFiButton from "../SciFi-Button.svelte";
+import { createEventDispatcher } from "svelte";
+import BaseModal from "./BaseModal.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 },
+];
+
+function selectColour(colour: any) {
+	emit("selectColour", colour);
+};
+</script>
+
+
+<BaseModal {open} on:close>
+	<div>
+		<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>
+
+					<!-- 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)}"
+							>
+								Select {colour.name}
+							</SciFiButton>
+						</span>
+					{:else}
+						<span class="name">{colour.name}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</BaseModal>
+
+<style lang="scss">
+@import "../../styles/mixins";
+
+.flex-container {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+
+	> div {
+		display: flex;
+		align-items: center;
+		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;
+		}
+
+		@include medium {
+			width: 30%;
+		}
+	}
+}
+</style>