From 296aa7f2988c0a5d548f07bed4837405d6b4ec0e Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Mon, 25 Jul 2022 23:55:30 -0600
Subject: [PATCH] Modify the board to accept the position array as a prop
 instead of accessing the store directly.

---
 web-svelte/src/components/Board.svelte | 44 +++++++++++---------------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/web-svelte/src/components/Board.svelte b/web-svelte/src/components/Board.svelte
index cb903c6..cbf64ce 100644
--- a/web-svelte/src/components/Board.svelte
+++ b/web-svelte/src/components/Board.svelte
@@ -1,19 +1,11 @@
 <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 { players } from "../stores";
+import type { Board } from "common"
 
-const ship = `space-shuttle`
-// 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,}
+export let board: Board;
 </script>
 
 
@@ -21,13 +13,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 board[10] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {$players[$board[10]].colour.hex};"
+				style="--colour: {$players[board[10]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{$players[$board[10]].ship.id}"
+					spaceship="{$players[board[10]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -35,13 +27,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 board[21] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {$players[$board[21]].colour.hex};"
+				style="--colour: {$players[board[21]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{$players[$board[21]].ship.id}"
+					spaceship="{$players[board[21]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -49,13 +41,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 board[32] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {$players[$board[32]].colour.hex};"
+				style="--colour: {$players[board[32]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{$players[$board[32]].ship.id}"
+					spaceship="{$players[board[32]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -63,13 +55,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 board[43] != null}
 			<div
 				class="spaceship-icon"
-				style="--colour: {$players[$board[43]].colour.hex};"
+				style="--colour: {$players[board[43]].colour.hex};"
 			>
 				<Spaceship
-					spaceship="{$players[$board[43]].ship.id}"
+					spaceship="{$players[board[43]].ship.id}"
 				/>
 			</div>
 			{/if}
@@ -84,13 +76,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 board[boardIndex] != null}
 				<div
 					class="spaceship-icon"
-					style="--colour: {$players[$board[boardIndex]].colour.hex};"
+					style="--colour: {$players[board[boardIndex]].colour.hex};"
 				>
 					<Spaceship
-						spaceship="{$players[$board[boardIndex]].ship.id}"
+						spaceship="{$players[board[boardIndex]].ship.id}"
 					/>
 				</div>
 				{/if}