Add a basic movement phase screen with a board.

web-svelte/src/App.svelte

@@ -5,6 +5,7 @@ import Particles from "svelte-particles";
 
 // View imports
 import MultiplayerLobby from "./views/lobby/multiplayer.svelte";
+import MovementView from "./views/movement.svelte";
 import Home from "./views/home.svelte";
 
 // Store imports
@@ -21,6 +22,8 @@ import { state } from "./stores";
 	<Home />
 {:else if $state == "multiplayer-lobby"}
 	<MultiplayerLobby />
+{:else if $state == "game-movement"}
+	<MovementView />
 {/if}
 
 <style lang="scss">

web-svelte/src/components/Board.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+import Spaceship from "./icons/spaceship.svelte";
+import Hexagon from "./Hexagon.svelte";
+import type { PlayerData } from "common";
+
+const board: PlayerData[] = new Array(54).fill(null);
+
+board[5] = {
+	colour: {
+		name: "Green",
+		hex: `#00aa00`
+	},
+	name: `Oliver`,
+	ship: {
+		id: `space-shuttle`,
+		name: `Space Shuttle`
+	},
+	host: false,
+}
+board[18] = {
+	colour: {
+		name: "Pink",
+		hex: `#f72585`
+	},
+	name: `Oliver`,
+	ship: {
+		id: `space-shuttle`,
+		name: `Space Shuttle`
+	},
+	host: false,
+}
+
+function calculateMidNumber(row: number, col: number) {
+	return col + (( row * 10 ) + (1 * row));
+};
+</script>
+
+
+<main class="board">
+	<div class="singularity inner-grid"></div>
+	<div class="right-down-1 inner-grid">
+		<Hexagon>
+			{#if board[10] != null}
+			<div
+				class="spaceship-icon"
+				style="--colour: {board[10].colour.hex};"
+			>
+				<Spaceship
+					spaceship="{board[10].ship.id}"
+				/>
+			</div>
+			{/if}
+		</Hexagon>
+	</div>
+	<div class="left-down-1 inner-grid">
+		<Hexagon>
+			{#if board[21] != null}
+			<div
+				class="spaceship-icon"
+				style="--colour: {board[21].colour.hex};"
+			>
+				<Spaceship
+					spaceship="{board[21].ship.id}"
+				/>
+			</div>
+			{/if}
+		</Hexagon>
+	</div>
+	<div class="right-down-2 inner-grid">
+		<Hexagon>
+			{#if board[32] != null}
+			<div
+				class="spaceship-icon"
+				style="--colour: {board[32].colour.hex};"
+			>
+				<Spaceship
+					spaceship="{board[32].ship.id}"
+				/>
+			</div>
+			{/if}
+		</Hexagon>
+	</div>
+	<div class="left-down-2 inner-grid">
+		<Hexagon>
+			{#if board[43] != null}
+			<div
+				class="spaceship-icon"
+				style="--colour: {board[43].colour.hex};"
+			>
+				<Spaceship
+					spaceship="{board[43].ship.id}"
+				/>
+			</div>
+			{/if}
+		</Hexagon>
+	</div>
+	<div class="warp-gate inner-grid"></div>
+	{#each Array(5) as _, r}
+	<div class="main-row {r % 2 == 1 ? `row-reverse` : ``}">
+		{#each Array(10) as _, c}
+		<div>
+			<Hexagon>
+				{#if board[calculateMidNumber(r, c)] != null}
+				<div
+					class="spaceship-icon"
+					style="--colour: {board[calculateMidNumber(r, c)].colour.hex};"
+				>
+					<Spaceship
+						spaceship="{board[calculateMidNumber(r, c)].ship.id}"
+					/>
+				</div>
+				{/if}
+			</Hexagon>
+		</div>
+		{/each}
+	</div>
+	{/each}
+</main>
+
+
+<style lang="scss">
+main {
+	width: 100%;
+	height: 100%;
+	display: grid;
+	grid-template-rows: repeat(5, 20fr);
+	grid-template-columns: 100px 100fr 100px;
+}
+
+.main-row {
+	display: flex;
+	justify-content: space-evenly;
+
+	> div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 95%;
+		width: 100%;
+
+		.spaceship-icon {
+			/*
+				Smaller version: 55px
+				Larger version: 75px
+			*/
+			--size: 55px;
+			width: var(--size);
+			height: var(--size);
+			display: flex;
+			color: var(--colour);
+			justify-content: center;
+			align-items: center;
+		}
+	}
+}
+
+.row-reverse {
+	flex-direction: row-reverse;
+
+	div {
+		.spaceship-icon {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.inner-grid {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.singularity {
+	background-image: url(/assets/black-hole.svg);
+	background-repeat: no-repeat;
+	background-position: center;
+	grid-column: 1 / 2;
+	grid-row: 1 / 2;
+}
+.right-down-1 {
+	grid-column: -1 / -2;
+	grid-row: 1 / 3;
+}
+.left-down-1 {
+	grid-column: 1 / 2;
+	grid-row: 2 / 4;
+}
+.right-down-2 {
+	grid-column: -1 / -2;
+	grid-row: 3 / 5;
+}
+.left-down-2 {
+	grid-column: 1 / 2;
+	grid-row: 4 / 6;
+}
+.warp-gate {
+	background-image: url(/assets/nether_portal.png);
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	border-radius: 10px;
+	grid-column: -1 / -2;
+	grid-row: -1 / -2;
+}
+</style>

web-svelte/src/views/movement.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import Board from "../components/Board.svelte";
+</script>
+
+
+<main>
+	<div id="main-board">
+		<Board />
+	</div>
+</main>
+
+
+<style lang="scss">
+main {
+	display: grid;
+	width: 100%;
+	height: 100%;
+	grid-template-rows: 15px 70fr 75px 30fr 15px;
+	grid-template-columns: 15px 100fr 15px;
+}
+
+#main-board {
+	grid-column: 2 / 3;
+	grid-row: 2 / 3;
+}
+</style>