Gravwell-Online/web-svelte/src/components/Board.svelte

<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%;
	}
}

.row-reverse {
	flex-direction: row-reverse;

	.spaceship-icon {
		transform: scaleX(-1);
	}
}

.inner-grid {
	display: flex;
	justify-content: center;
	align-items: center;
}

.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;
}
.side-hex {
	.spaceship-icon {
		transform: rotate(90deg);
	}
}


.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>