Gravwell-Online/web-svelte/src/components/modals/ShipDesigner.svelte

<script lang="ts">
import { Status, colours, spaceships } from "common";
import SpaceShuttle from "../icons/spaceship.svelte";
import SciFiButton from "../SciFi-Button.svelte";
import { createEventDispatcher, onMount } from "svelte";
import { myName, players } from "../../stores";
import BaseModal from "./BaseModal.svelte";
import Hexagon from "../Hexagon.svelte";
import { socket } from "../../main";

const emit = createEventDispatcher();

export let open: boolean = false;

let player = $players.find(p => p.name == $myName);

$: myColour = player.colour;
$: takenColours = $players.map(p => p.colour);

var selectedColour = player.colour.hex;
var selectedShip = player.ship.id;
var error = null;

function designUpdate(data: any) {};

onMount(() => {
	socket.on(`req:lobby.players.update`, designUpdate);
	return () => {
		socket.off(`req:lobby.players.update`);
	};
});

function saveShipDesign() {
	/* TODO: Send event to server, wait for confirmation */
	let response: any = {
		status: Status.UnknownError,
		message: `Testing the error design`,
	};

	if (response.status != Status.Success) {
		error = response.message;

		/*
		TODO (Maybe): If the list of colours doesn't auto-update the available
		colours based on which are already taken when another player saves, we
		will need to update the list manually here on Status.OutOfDate
		*/
		return;
	};

	// Alert the parent and remove any errors
	error = null;
	emit(`save`, {
		colour: selectedColour,
		ship: selectedShip,
	});

	emit(`close`);
};
</script>


<BaseModal {open} on:close>
	<div>
		<h2>Spaceship Designer</h2>
		<hr>
		<div class="flex-container">
			<div class="options">
				<div class="colour">
					<h3>Colour:</h3>

					<!--
						Create the dropdown that allows the user to see all of
						the colours but not choose ones that other users
						currently have selected.
					-->
					<select
						name="colour"
						id="spaceship-colour"
						bind:value="{selectedColour}"
					>
						<!-- Display each colour as given by the server -->
						{#each colours as c}
							<option
								value="{c.hex}"
								disabled="{
									c.hex != myColour.hex
									&& takenColours.includes(c)
								}"
							>
								{c.name}
							</option>
						{/each}
					</select>
				</div>
				<div class="spaceship">
					<h3>Spaceship</h3>

					<!--
						Create the dropdown that allows users to select which
						spaceship icon they want for their player.
					-->
					<select
						name="spaceship"
						id="spaceship-icon"
						bind:value="{selectedShip}"
					>
						{#each spaceships as ship}
							<option value="{ship.id}">{ship.name}</option>
						{/each}
					</select>
				</div>
			</div>
			<div class="preview">
				<h3>Preview:</h3>
				<Hexagon>
					<div
						class="spaceship-icon"
						style="--colour: {selectedColour};"
					>
						<SpaceShuttle
							spaceship="{selectedShip}"
						/>
					</div>
				</Hexagon>
				<SciFiButton
					on:click="{saveShipDesign}"
				>
					Save Design
				</SciFiButton>
			</div>
		</div>
		{#if error}
			<div class="error">
				{error}
			</div>
		{/if}
	</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;
		flex-direction: column;

		> * {
			text-align: center;
			width: 100%;
		}

		@include medium {
			width: 30%;
		}
	}
}

h3 {
	margin-bottom: 5px;
}

select {
	border-radius: 5px;
	background: black;
	color: white;
	outline: none;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	padding: 5px 7px;
	width: 90%;

	&:focus {
		border-color: #00aa00;
	}
}

.spaceship-icon {
	/*
		Smaller version: 55px
		Larger version: 75px
	*/
	--size: 80px;
	width: var(--size);
	height: var(--size);
	display: flex;
	color: var(--colour);
	justify-content: center;
	align-items: center;
	transform: rotate(-90deg);
}
</style>