Properly subscribe to the board store, and index the players data for proper information

This commit is contained in:
Oliver Akins 2022-07-20 22:24:04 -06:00
parent 885bebee71
commit b26911184f
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99

View file

@ -1,8 +1,8 @@
<script lang="ts">
import Spaceship from "./icons/spaceship.svelte";
import Warpgate from "./icons/warpgate.svelte";
import { board, players } from "../stores";
import Hexagon from "./Hexagon.svelte";
import { board } from "../stores";
const ship = `space-shuttle`
// board[5] = {colour: {name: "Green",hex: `#00aa00`},name: `Oliver`,ship: {id: ship,name: `Space Shuttle`},host: false,}
@ -21,13 +21,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
<div class="singularity inner-grid"></div>
<div class="side-hex right-down-1 inner-grid">
<Hexagon>
{#if board[10] != null}
{#if $players[$board[10]] != null}
<div
class="spaceship-icon"
style="--colour: {board[10].colour.hex};"
style="--colour: {$players[$board[10]].colour.hex};"
>
<Spaceship
spaceship="{board[10].ship.id}"
spaceship="{$players[$board[10]].ship.id}"
/>
</div>
{/if}
@ -35,13 +35,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div>
<div class="side-hex left-down-1 inner-grid">
<Hexagon>
{#if board[21] != null}
{#if $players[$board[21]] != null}
<div
class="spaceship-icon"
style="--colour: {board[21].colour.hex};"
style="--colour: {$players[$board[21]].colour.hex};"
>
<Spaceship
spaceship="{board[21].ship.id}"
spaceship="{$players[$board[21]].ship.id}"
/>
</div>
{/if}
@ -49,13 +49,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div>
<div class="side-hex right-down-2 inner-grid">
<Hexagon>
{#if board[32] != null}
{#if $players[$board[32]] != null}
<div
class="spaceship-icon"
style="--colour: {board[32].colour.hex};"
style="--colour: {$players[$board[32]].colour.hex};"
>
<Spaceship
spaceship="{board[32].ship.id}"
spaceship="{$players[$board[32]].ship.id}"
/>
</div>
{/if}
@ -63,13 +63,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
</div>
<div class="side-hex left-down-2 inner-grid">
<Hexagon>
{#if board[43] != null}
{#if $players[$board[43]] != null}
<div
class="spaceship-icon"
style="--colour: {board[43].colour.hex};"
style="--colour: {$players[$board[43]].colour.hex};"
>
<Spaceship
spaceship="{board[43].ship.id}"
spaceship="{$players[$board[43]].ship.id}"
/>
</div>
{/if}
@ -84,13 +84,13 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
{@const boardIndex = col + (( row * 10 ) + (1 * row))}
<div>
<Hexagon>
{#if board[boardIndex] != null}
{#if $players[$board[boardIndex]] != null}
<div
class="spaceship-icon"
style="--colour: {board[boardIndex].colour.hex};"
style="--colour: {$players[$board[boardIndex]].colour.hex};"
>
<Spaceship
spaceship="{board[boardIndex].ship.id}"
spaceship="{$players[$board[boardIndex]].ship.id}"
/>
</div>
{/if}