From 0045cd4184de9ff63032ee875c3da814a07c3998 Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Sat, 30 Jul 2022 17:45:38 -0600
Subject: [PATCH] Add a state that allows changing the controls bar

---
 web-svelte/src/views/movement.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web-svelte/src/views/movement.svelte b/web-svelte/src/views/movement.svelte
index b860285..deb56f3 100644
--- a/web-svelte/src/views/movement.svelte
+++ b/web-svelte/src/views/movement.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
+import ShipsMoving from "../components/ShipsMoving.svelte";
 import PlayerHand from "../components/PlayerHand.svelte";
 import Board from "../components/Board.svelte";
 import { board } from "../stores";
 
+const controlsState: string = "player-order";
+
 const notice = {
 	visible: false,
 	message: null,
@@ -48,11 +51,17 @@ function previewBoard(e: any) {
 		</div>
 	</div>
 	{/if}
-	<div id="player-hand">
+	{#if controlsState == "player-hand"}
+	<div id="player-controls">
 		<PlayerHand
 			on:hover="{previewBoard}"
 		/>
 	</div>
+	{:else if controlsState == "player-order"}
+	<div id="player-controls">
+		<ShipsMoving />
+	</div>
+	{/if}
 </main>
 
 
@@ -106,7 +115,7 @@ main {
 	}
 }
 
-#player-hand {
+#player-controls {
 	grid-column: 2 / 3;
 	grid-row: 4 / 5;
 }