Add the player order and e-stop panels

web-svelte/src/components/ShipsMoving.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { players } from "../stores";
+import Spaceship from "./icons/spaceship.svelte";
+import Card from "./Card.svelte";
+
+$: stopped = false;
+
+$: sortedPlayers = Object.values($players).sort(
+	(p1, p2) => p1.fuel.symbol.localeCompare(p2.fuel.symbol)
+);
+
+$: activePlayer = "a";
+</script>
+
+
+<div id="ships-moving">
+	<div id="player-order-container">
+		<div class="player-order background">
+			{#each sortedPlayers as player (player.id)}
+			<div class="player">
+				<div class="card">
+					<Card card={player.fuel} half={true} />
+				</div>
+				<div class="meta">
+					<div
+						class="spaceship-icon"
+						style="--colour: {player.colour.hex};"
+					>
+						<Spaceship
+							spaceship="{player.ship.id}"
+						/>
+					</div>
+					<div class="name">
+						{player.name}
+					</div>
+				</div>
+			</div>
+			{/each}
+		</div>
+	</div>
+	<div id="e-stop-container">
+		<div class="e-stop background">
+			<h2>Emergency Stop!</h2>
+			<p>
+				Pressing this will stop you from moving
+			</p>
+			<div class="button-container">
+				<button
+					disabled={stopped}
+					on:click="{() => {stopped = true}}"
+				>
+					<h1>STOP{#if stopped}PED{/if}</h1>
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<style lang="scss">
+#ships-moving {
+	display: grid;
+	grid-template-columns: 1fr 30%;
+	height: 100%;
+	padding: 0;
+	width: 100%;
+}
+
+#player-order-container {
+	grid-column: 1 / 2;
+
+	.player-order {
+		color: white;
+		display: flex;
+		height: 100%;
+		justify-content: space-evenly;
+		margin-right: 5px;
+		width: calc(100% - 5px);
+	}
+
+	.card {
+		display: flex;
+	}
+
+	.player {
+		display: grid;
+		grid-template-rows: 50% 50%;
+
+		.meta {
+			align-items: center;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-evenly;
+			text-align: center;
+
+			.name {
+				background: rgba(255,255,255,0.2);
+				border-radius: 5px;
+				padding: 5px;
+				width: 80%;
+			}
+
+			.spaceship-icon {
+				aspect-ratio: 1 / 1;
+				color: var(--colour);
+				height: 50%;
+			}
+		}
+	}
+}
+
+#e-stop-container {
+	grid-column: 2 / 3;
+
+	.e-stop {
+		align-items: center;
+		color: white;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		margin-left: 5px;
+		text-align: center;
+		width: calc(100% - 5px);
+
+
+		> h2,
+		> p {
+			margin-bottom: 0;
+			margin-top: 10px;
+			width: 90%;
+		}
+
+		> .button-container {
+			align-items: center;
+			display: flex;
+			flex-grow: 1;
+			justify-content: center;
+			width: 100%;
+		}
+
+		button {
+			$height: 10px;
+			background: red;
+			border-radius: 10px;
+			border-style: none;
+			box-shadow: 0 $height 0 darken(red, 20%);
+			font-family: 'Orbitron', sans-serif;
+			margin-top: -5px;
+			outline: none;
+			width: 80%;
+
+			&[disabled],
+			&:active {
+				box-shadow: none;
+				transform: translateY($height);
+			}
+
+			&[disabled] {
+				color: rgba(0,0,0, 0.6);
+			}
+		}
+	}
+}
+
+.background {
+	background: rgba(0,0,0, 0.6);
+	border-color: white;
+	border-radius: 15px;
+	border-style: solid;
+	border-width: 1px;
+}
+</style>