Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a Player component for player data in the lobby

Browse source
This commit is contained in:
Oliver-Akins 2021-12-15 02:42:15 -06:00
parent a81a1f983a
commit cfa6dff9b9
1 changed files with 89 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

89
web-svelte/src/components/Player.svelte Normal file
View file

@ -0,0 +1,89 @@
<script lang="ts">
import { myName, hostName } from "../stores";
import SciFiButton from "./SciFi-Button.svelte";
export let name: string;
export let colour: string;
function exitPlayer() {};
function changeColour() {};
function canLeave() {
if ($myName == $hostName) {
return true;
};
return name == $myName;
}
</script>
<div class="player" style="--colour: {colour};">
<!-- The player's change Colour button -->
{#if $myName == name}
<SciFiButton
background="{colour}"
handler={changeColour}
height="60px"
width="60px"
hoverBackground="{colour}"
>
<div style="display: flex; align-items: center; justify-content: center;">
<img src="/assets/icons/change_colour.svg" alt="Remove person from the game" 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">
{name}
{#if $myName == name}
(You)
{/if}
</div>
<!-- Whether or not to show the kick Player button in the row -->
{#if canLeave()}
<SciFiButton
background="#ff0000"
handler={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">
.player {
height: 70px;
display: flex;
align-items: center;
text-align: left;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
margin: 10px;
> div.player-colour {
margin: 10px;
width: 40px;
height: 40px;
background: var(--colour);
display: inline-block;
border-radius: 7px;
}
> .player-name {
flex-grow: 1;
}
}
</style>