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