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

Begin work on the multiplayer lobby view

Browse source
This commit is contained in:
Oliver-Akins 2021-12-15 02:42:58 -06:00
parent 9541bf144f
commit 9bc5fd1ad1
1 changed files with 109 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

109
web-svelte/src/views/lobby/multiplayer.svelte Normal file
View file

@ -0,0 +1,109 @@
<script lang="ts">
import SciFiButton from "../../components/SciFi-Button.svelte";
import Player from "../../components/Player.svelte";
function tempButtonHandler() {};
</script>
<main>
<div>
<h1>Gravwell</h1>
<div class="sci-fi-box">
<h2>Players</h2>
<div class="player-box">
<Player
name="Lorem Ipsupotas"
colour="#00aa00"
/>
<Player
name="Player 2"
colour="#aaaa00"
/>
<Player
name="Player 3"
colour="#00aaaa"
/>
<Player
name="Player 4"
colour="#ffaaff"
/>
</div>
</div>
<div class="sci-fi-box">
<h2>Options</h2>
</div>
<div class="flex-row">
<SciFiButton
handler={tempButtonHandler}
>
Start Game
</SciFiButton>
<SciFiButton
background="#ff0000"
handler={tempButtonHandler}
>
Delete Game
</SciFiButton>
</div>
</div>
</main>
<style lang="scss">
main {
color: #FFFFFF;
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 4rem;
font-weight: 100;
line-height: 1.1;
margin: 2rem auto;
max-width: 14rem;
}
.sci-fi-box {
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: white;
margin: 5px;
background: rgba(0, 0, 0, 0.5);
h2 {
margin: 0px;
margin-top: 10px;
}
}
.player-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
> :global(div) {
flex-grow: 1;
}
}
.flex-row {
display: flex;
align-items: center;
justify-content: center;
}
.flex-row > :global(div) {
flex-grow: 1;
}
@media (min-width: 480px) {
h1 {
max-width: none;
}
}
</style>