Add a Player component for player data in the lobby

web-svelte/src/components/Player.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { myName, hostName } from "../stores";
+
+import SciFiButton from "./SciFi-Button.svelte";
+
+export let name: string;
+export let colour: string;
+
+function exitPlayer() {};
+
+function changeColour() {};
+
+function canLeave() {
+	if ($myName == $hostName) {
+		return true;
+	};
+	return name == $myName;
+}
+</script>
+
+<div class="player" style="--colour: {colour};">
+
+	<!-- The player's change Colour button -->
+	{#if $myName == name}
+		<SciFiButton
+			background="{colour}"
+			handler={changeColour}
+			height="60px"
+			width="60px"
+			hoverBackground="{colour}"
+		>
+			<div style="display: flex; align-items: center; justify-content: center;">
+				<img src="/assets/icons/change_colour.svg" alt="Remove person from the game" style="baseline: center">
+			</div>
+		</SciFiButton>
+
+	<!-- The placeholder element that just gets coloured for other player colours -->
+	{:else}
+		<div class="player-colour"></div>
+	{/if}
+
+	<!-- The player's name -->
+	<div class="player-name">
+		{name}
+		{#if $myName == name}
+			(You)
+		{/if}
+	</div>
+
+	<!-- Whether or not to show the kick Player button in the row -->
+	{#if canLeave()}
+	<SciFiButton
+		background="#ff0000"
+		handler={exitPlayer}
+		height="60px"
+		width="75px"
+		hoverBackground="#ff0000"
+	>
+		<div style="display: flex; align-items: center; justify-content: center;">
+			<img src="/assets/icons/kick_person.svg" alt="Remove person from the game" style="baseline: center">
+		</div>
+	</SciFiButton>
+	{/if}
+</div>
+
+<style lang="scss">
+.player {
+	height: 70px;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 10px;
+	margin: 10px;
+
+	> div.player-colour {
+		margin: 10px;
+		width: 40px;
+		height: 40px;
+		background: var(--colour);
+		display: inline-block;
+		border-radius: 7px;
+	}
+
+	> .player-name {
+		flex-grow: 1;
+	}
+}
+</style>