Allow rendering a notice as well as a preview board

web-svelte/src/views/movement.svelte

@@ -1,15 +1,57 @@
 <script lang="ts">
 import PlayerHand from "../components/PlayerHand.svelte";
 import Board from "../components/Board.svelte";
+import { board } from "../stores";
+
+const notice = {
+	visible: false,
+	message: null,
+	classes: [],
+};
+
+const preview = {
+	visible: false,
+	board: null,
+};
+function previewBoard(e: any) {
+	let { card, visible } = e.detail;
+	if (visible) {
+		notice.message = `This is a preview of what the board would look like if you played ${card.name}, it doesn't guarantee the outcome of playing the card.`;
+		notice.classes = [ `warning` ];
+		preview.board = [ ...$board ];
+		preview.board[Math.abs(card.magnitude)] = "a";
+	} else {
+		notice.message = null;
+		notice.classes = [];
+		preview.board = null;
+	};
+	preview.visible = visible;
+	notice.visible = visible;
+};
 </script>
 
 
 <main>
+	{#if !preview.visible || !preview.board}
 		<div id="main-board">
-		<Board />
+			<Board board="{$board}"/>
 		</div>
+	{:else}
+		<div id="preview-board">
+			<Board board="{preview.board}"/>
+		</div>
+	{/if}
+	{#if notice.visible}
+	<div id="notice-container">
+		<div class="notice {notice.classes.join(` `)}">
+			{notice.message}
+		</div>
+	</div>
+	{/if}
 	<div id="player-hand">
-		<PlayerHand />
+		<PlayerHand
+			on:hover="{previewBoard}"
+		/>
 	</div>
 </main>
 
@@ -28,6 +70,42 @@ main {
 	grid-row: 2 / 3;
 }
 
+#preview-board {
+	z-index: 10;
+	grid-column: 2 / 3;
+	grid-row: 2 / 3;
+}
+
+#notice-container {
+	align-items: center;
+	display: flex;
+	grid-column: 2 / 3;
+	grid-row: 3 / 4;
+	justify-content: center;
+
+	.notice {
+		text-align: center;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		width: 75%;
+		height: 90%;
+		border-radius: 10px;
+
+		&.warning {
+			background: yellowgreen;
+		}
+
+		&.error {
+			background: red;
+		}
+
+		&.info {
+			background: blue;
+		}
+	}
+}
+
 #player-hand {
 	grid-column: 2 / 3;
 	grid-row: 4 / 5;