Rename the ColourChoice modal to ShipDesigner
This commit is contained in:
Oliver-Akins
parent
174add9e49
commit
e7533f60aa
2 changed files with 6 additions and 6 deletions
220
web-svelte/src/components/modals/ShipDesigner.svelte
Normal file
220
web-svelte/src/components/modals/ShipDesigner.svelte
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<script lang="ts">
|
||||
import { IColour, SaveShipResponse, Status, ISpaceship } from "common";
|
||||
import SpaceShuttle from "../icons/spaceship.svelte";
|
||||
import SciFiButton from "../SciFi-Button.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { myName, players } from "../../stores";
|
||||
import BaseModal from "./BaseModal.svelte";
|
||||
import Hexagon from "../Hexagon.svelte";
|
||||
|
||||
const emit = createEventDispatcher();
|
||||
|
||||
export let open: boolean = false;
|
||||
|
||||
/** This will be fetched from the server when opening the modal */
|
||||
const colours: IColour[] = [
|
||||
{ name: "Green", hex: "#00aa00" },
|
||||
{ name: "Blue", hex: "#0077b6" },
|
||||
{ name: "Red", hex: "#cb0b0a" },
|
||||
{ name: "Purple", hex: "#7400b8" },
|
||||
{ name: "Orange", hex: "#faa307" },
|
||||
{ name: "Light Green", hex: "#9ef01a" },
|
||||
{ name: "Magenta", hex: "#b7094c" },
|
||||
{ name: "Pink", hex: "#f72585" },
|
||||
{ name: "Yellow", hex: "#f9c80e" },
|
||||
];
|
||||
const spaceships: ISpaceship[] = [
|
||||
{ name: "Space Shuttle", id: "space-shuttle" },
|
||||
{ name: "Rocket", id: "rocket" },
|
||||
]
|
||||
|
||||
let player = $players.find(p => p.name == $myName);
|
||||
|
||||
$: myColour = player.colour;
|
||||
$: takenColours = $players.map(p => p.colour);
|
||||
|
||||
var selectedColour = player.colour;
|
||||
var selectedShip = player.ship;
|
||||
var error = null;
|
||||
|
||||
function saveShipDesign() {
|
||||
/* TODO: Send event to server, wait for confirmation */
|
||||
let response: SaveShipResponse = {
|
||||
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
|
||||
&& takenColours.includes(c.hex)
|
||||
}"
|
||||
>
|
||||
{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);
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 10px;
|
||||
background: #ff000033;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
border-color: red;
|
||||
border-width: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue