172 lines
No EOL
2.9 KiB
Svelte
172 lines
No EOL
2.9 KiB
Svelte
<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> |