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

Add a basic movement phase screen with a board.

Browse source
This commit is contained in:
Oliver Akins 2022-07-19 22:54:49 -06:00
parent 378e4315ba
commit 599a4140a3
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
3 changed files with 234 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web-svelte/src/App.svelte
View file

@ -5,6 +5,7 @@ import Particles from "svelte-particles";
// View imports
import MultiplayerLobby from "./views/lobby/multiplayer.svelte";
import MovementView from "./views/movement.svelte";
import Home from "./views/home.svelte";
// Store imports
@ -21,6 +22,8 @@ import { state } from "./stores";
<Home />
{:else if $state == "multiplayer-lobby"}
<MultiplayerLobby />
{:else if $state == "game-movement"}
<MovementView />
{/if}
<style lang="scss">

205
web-svelte/src/components/Board.svelte Normal file
View file

@ -0,0 +1,205 @@
<script lang="ts">
import Spaceship from "./icons/spaceship.svelte";
import Hexagon from "./Hexagon.svelte";
import type { PlayerData } from "common";
const board: PlayerData[] = new Array(54).fill(null);
board[5] = {
colour: {
name: "Green",
hex: `#00aa00`
},
name: `Oliver`,
ship: {
id: `space-shuttle`,
name: `Space Shuttle`
},
host: false,
}
board[18] = {
colour: {
name: "Pink",
hex: `#f72585`
},
name: `Oliver`,
ship: {
id: `space-shuttle`,
name: `Space Shuttle`
},
host: false,
}
function calculateMidNumber(row: number, col: number) {
return col + (( row * 10 ) + (1 * row));
};
</script>
<main class="board">
<div class="singularity inner-grid"></div>
<div class="right-down-1 inner-grid">
<Hexagon>
{#if board[10] != null}
<div
class="spaceship-icon"
style="--colour: {board[10].colour.hex};"
>
<Spaceship
spaceship="{board[10].ship.id}"
/>
</div>
{/if}
</Hexagon>
</div>
<div class="left-down-1 inner-grid">
<Hexagon>
{#if board[21] != null}
<div
class="spaceship-icon"
style="--colour: {board[21].colour.hex};"
>
<Spaceship
spaceship="{board[21].ship.id}"
/>
</div>
{/if}
</Hexagon>
</div>
<div class="right-down-2 inner-grid">
<Hexagon>
{#if board[32] != null}
<div
class="spaceship-icon"
style="--colour: {board[32].colour.hex};"
>
<Spaceship
spaceship="{board[32].ship.id}"
/>
</div>
{/if}
</Hexagon>
</div>
<div class="left-down-2 inner-grid">
<Hexagon>
{#if board[43] != null}
<div
class="spaceship-icon"
style="--colour: {board[43].colour.hex};"
>
<Spaceship
spaceship="{board[43].ship.id}"
/>
</div>
{/if}
</Hexagon>
</div>
<div class="warp-gate inner-grid"></div>
{#each Array(5) as _, r}
<div class="main-row {r % 2 == 1 ? `row-reverse` : ``}">
{#each Array(10) as _, c}
<div>
<Hexagon>
{#if board[calculateMidNumber(r, c)] != null}
<div
class="spaceship-icon"
style="--colour: {board[calculateMidNumber(r, c)].colour.hex};"
>
<Spaceship
spaceship="{board[calculateMidNumber(r, c)].ship.id}"
/>
</div>
{/if}
</Hexagon>
</div>
{/each}
</div>
{/each}
</main>
<style lang="scss">
main {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: repeat(5, 20fr);
grid-template-columns: 100px 100fr 100px;
}
.main-row {
display: flex;
justify-content: space-evenly;
> div {
display: flex;
justify-content: center;
align-items: center;
height: 95%;
width: 100%;
.spaceship-icon {
/*
Smaller version: 55px
Larger version: 75px
*/
--size: 55px;
width: var(--size);
height: var(--size);
display: flex;
color: var(--colour);
justify-content: center;
align-items: center;
}
}
}
.row-reverse {
flex-direction: row-reverse;
div {
.spaceship-icon {
transform: rotate(180deg);
}
}
}
.inner-grid {
display: flex;
justify-content: center;
align-items: center;
}
.singularity {
background-image: url(/assets/black-hole.svg);
background-repeat: no-repeat;
background-position: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.right-down-1 {
grid-column: -1 / -2;
grid-row: 1 / 3;
}
.left-down-1 {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.right-down-2 {
grid-column: -1 / -2;
grid-row: 3 / 5;
}
.left-down-2 {
grid-column: 1 / 2;
grid-row: 4 / 6;
}
.warp-gate {
background-image: url(/assets/nether_portal.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 10px;
grid-column: -1 / -2;
grid-row: -1 / -2;
}
</style>

26
web-svelte/src/views/movement.svelte Normal file
View file

@ -0,0 +1,26 @@
<script lang="ts">
import Board from "../components/Board.svelte";
</script>
<main>
<div id="main-board">
<Board />
</div>
</main>
<style lang="scss">
main {
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 15px 70fr 75px 30fr 15px;
grid-template-columns: 15px 100fr 15px;
}
#main-board {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
</style>