122 lines
No EOL
2.3 KiB
Svelte
122 lines
No EOL
2.3 KiB
Svelte
<script lang="ts">
|
|
import SciFiButton from "./SciFi-Button.svelte";
|
|
import { createEventDispatcher } from "svelte";
|
|
import { myName, isHost } from "../stores";
|
|
import type { IColour } from "common";
|
|
|
|
export let name: string;
|
|
export let colour: IColour;
|
|
|
|
const emit = createEventDispatcher();
|
|
|
|
function exitPlayer() {};
|
|
|
|
function changeColour() {
|
|
emit("changeColour");
|
|
};
|
|
|
|
let canLeave = $isHost || name == $myName;
|
|
</script>
|
|
|
|
<div class="player" style="--colour: {colour.hex};">
|
|
|
|
<!-- The player's change Colour button -->
|
|
{#if $myName == name}
|
|
<SciFiButton
|
|
background="{colour.hex}"
|
|
on:click={changeColour}
|
|
height="60px"
|
|
width="60px"
|
|
hoverBackground="{colour.hex}"
|
|
>
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
<img
|
|
src="/assets/icons/change_colour.svg"
|
|
alt="Change your spaceship's colour"
|
|
style="baseline: center"
|
|
>
|
|
</div>
|
|
</SciFiButton>
|
|
|
|
<!-- The placeholder element that just gets coloured for other player colours -->
|
|
{:else}
|
|
<div class="player-colour"></div>
|
|
{/if}
|
|
|
|
<!-- The player's name -->
|
|
<div class="player-name">
|
|
<span class="name">
|
|
{name}
|
|
</span>
|
|
{#if $myName == name}
|
|
<span class="player-indicator">
|
|
You
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
|
|
<!-- Whether or not to show the kick Player button in the row -->
|
|
{#if canLeave}
|
|
<SciFiButton
|
|
background="#ff0000"
|
|
on:click={exitPlayer}
|
|
height="60px"
|
|
width="75px"
|
|
hoverBackground="#ff0000"
|
|
>
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
<img
|
|
src="/assets/icons/kick_person.svg"
|
|
alt="Remove person from the game"
|
|
style="baseline: center"
|
|
>
|
|
</div>
|
|
</SciFiButton>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import "../styles/mixins";
|
|
|
|
.player {
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: left;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
margin: 10px;
|
|
max-width: 95%;
|
|
|
|
> div.player-colour {
|
|
margin: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--colour);
|
|
display: inline-block;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
> .player-name {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.name {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.player-indicator {
|
|
border-radius: 5px;
|
|
background-color: #00aa00;
|
|
color: black;
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
@include medium {
|
|
max-width: 47%;
|
|
}
|
|
}
|
|
</style> |