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

Modify the board to accept the position array as a prop instead of accessing the store directly.

Browse source
This commit is contained in:
Oliver Akins 2022-07-25 23:55:30 -06:00
parent dd3662560d
commit 296aa7f298
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
1 changed files with 18 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web-svelte/src/components/Board.svelte
View file

@ -1,19 +1,11 @@
<script lang="ts"> <script lang="ts">
import Spaceship from "./icons/spaceship.svelte"; import Spaceship from "./icons/spaceship.svelte";
import Warpgate from "./icons/warpgate.svelte"; import Warpgate from "./icons/warpgate.svelte";
import { board, players } from "../stores";
import Hexagon from "./Hexagon.svelte"; import Hexagon from "./Hexagon.svelte";
import { players } from "../stores";
import type { Board } from "common"
const ship = `space-shuttle` export let board: Board;
// board[5] = {colour: {name: "Green",hex: `#00aa00`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[10] = {colour: {name: "Magenta",hex: `#0077b6`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[18] = {colour: {name: "Pink",hex: `#cb0b0a`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[21] = {colour: {name: "Magenta",hex: `#7400b8`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[26] = {colour: {name: "Magenta",hex: `#faa307`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[32] = {colour: {name: "Magenta",hex: `#9ef01a`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[43] = {colour: {name: "Magenta",hex: `#b7094c`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
// board[47] = {colour: {name: "Magenta",hex: `#f72585`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
</script> </script>
@ -21,13 +13,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
<div class="singularity inner-grid"></div> <div class="singularity inner-grid"></div>
<div class="side-hex right-down-1 inner-grid"> <div class="side-hex right-down-1 inner-grid">
<Hexagon> <Hexagon>
{#if $board[10] != null} {#if board[10] != null}
<div <div
class="spaceship-icon" class="spaceship-icon"
style="--colour: {$players[$board[10]].colour.hex};" style="--colour: {$players[board[10]].colour.hex};"
> >
<Spaceship <Spaceship
spaceship="{$players[$board[10]].ship.id}" spaceship="{$players[board[10]].ship.id}"
/> />
</div> </div>
{/if} {/if}
@ -35,13 +27,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div> </div>
<div class="side-hex left-down-1 inner-grid"> <div class="side-hex left-down-1 inner-grid">
<Hexagon> <Hexagon>
{#if $board[21] != null} {#if board[21] != null}
<div <div
class="spaceship-icon" class="spaceship-icon"
style="--colour: {$players[$board[21]].colour.hex};" style="--colour: {$players[board[21]].colour.hex};"
> >
<Spaceship <Spaceship
spaceship="{$players[$board[21]].ship.id}" spaceship="{$players[board[21]].ship.id}"
/> />
</div> </div>
{/if} {/if}
@ -49,13 +41,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div> </div>
<div class="side-hex right-down-2 inner-grid"> <div class="side-hex right-down-2 inner-grid">
<Hexagon> <Hexagon>
{#if $board[32] != null} {#if board[32] != null}
<div <div
class="spaceship-icon" class="spaceship-icon"
style="--colour: {$players[$board[32]].colour.hex};" style="--colour: {$players[board[32]].colour.hex};"
> >
<Spaceship <Spaceship
spaceship="{$players[$board[32]].ship.id}" spaceship="{$players[board[32]].ship.id}"
/> />
</div> </div>
{/if} {/if}
@ -63,13 +55,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div> </div>
<div class="side-hex left-down-2 inner-grid"> <div class="side-hex left-down-2 inner-grid">
<Hexagon> <Hexagon>
{#if $board[43] != null} {#if board[43] != null}
<div <div
class="spaceship-icon" class="spaceship-icon"
style="--colour: {$players[$board[43]].colour.hex};" style="--colour: {$players[board[43]].colour.hex};"
> >
<Spaceship <Spaceship
spaceship="{$players[$board[43]].ship.id}" spaceship="{$players[board[43]].ship.id}"
/> />
</div> </div>
{/if} {/if}
@ -84,13 +76,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
{@const boardIndex = col + (( row * 10 ) + (1 * row))} {@const boardIndex = col + (( row * 10 ) + (1 * row))}
<div> <div>
<Hexagon> <Hexagon>
{#if $board[boardIndex] != null} {#if board[boardIndex] != null}
<div <div
class="spaceship-icon" class="spaceship-icon"
style="--colour: {$players[$board[boardIndex]].colour.hex};" style="--colour: {$players[board[boardIndex]].colour.hex};"
> >
<Spaceship <Spaceship
spaceship="{$players[$board[boardIndex]].ship.id}" spaceship="{$players[board[boardIndex]].ship.id}"
/> />
</div> </div>
{/if} {/if}