Manual deployment

dashboard/src/lib/components/Card.svelte

@@ -11,14 +11,21 @@
 
 	$: back = side === "corp" ? BACK_CORPORATION : BACK_RUNNER;
 
-	$: url = code ? `https://card-images.netrunnerdb.com/v1/large/{code}.jpg`.replace("{code}", code) : false;
+	$: url = code
+		? `https://card-images.netrunnerdb.com/v1/large/{code}.jpg`.replace(
+				"{code}",
+				code,
+			)
+		: false;
 </script>
 
 <div
 	class="aspect-[64/89] [transform-style:preserve-3d] flex transition-transform [transform:var(--transform)] {glow
 		? 'card--glow'
 		: ''} {$$props['class']}"
-	style="transform: {flip ? 'rotateY(-180deg)' : 'rotateY(0deg)' }; transition-duration: 480ms; transition-delay: var(--transition-delay, 0ms);"
+	style="transform: {flip
+		? 'rotateY(-180deg)'
+		: 'rotateY(0deg)'}; transition-duration: 480ms; transition-delay: var(--transition-delay, 0ms);"
 >
 	<div
 		class="face {glow

dashboard/src/lib/components/dashboard/Connection.svelte

@@ -2,17 +2,26 @@
 	import { PUBLIC_WEBSOCKET_CONNECTION } from "$env/static/public";
 	import { globalData } from "$lib/store";
 	import Loading from "$components/Loading.svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { Check } from "lucide-svelte";
 
 	$: connection = $globalData.websocket.status;
 </script>
 
 {#if PUBLIC_WEBSOCKET_CONNECTION.toLowerCase() === "true"}
-	<p class="flex flex-row gap-2 items-center">
+	<Button
+		variant="outline"
+		class="flex flex-row gap-2 items-center {connection
+			? 'bg-green-500/10 border-green-500 hover:bg-transparent cursor-default'
+			: 'bg-red-500/10 border-red-500'}"
+		disabled={!connection}
+	>
 		{#if connection}
-			Connected to websocket
+			<Check slot="icon-before" size={16} class="mt-0.5" />
+			WebSocket Connected
 		{:else}
-			<Loading size={1.5} />
-			Connecting to websocket
+			<Loading slot="icon-before" size={0.75} />
+			Connecting
 		{/if}
-	</p>
+	</Button>
 {/if}

dashboard/src/lib/components/dashboard/Counter.svelte

@@ -3,7 +3,6 @@
 	import { createEventDispatcher } from "svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
 
 	const dispatch = createEventDispatcher();
 

dashboard/src/lib/components/dashboard/Country.svelte

@@ -13,9 +13,10 @@
 	let open = false;
 	let value = "";
 
-	$: selected =
-		JSON_COUNTRIES.find((f: any) => f.alpha2 === value) ??
-		"Select a country";
+	$: selected = JSON_COUNTRIES.find((f: any) => f.alpha2 === value) ?? {
+		name: "Select a country",
+		alpha2: "",
+	};
 
 	// We want to refocus the trigger button when the user selects
 	// an item from the list so users can continue navigating the

dashboard/src/lib/components/dashboard/GlobalSettings.svelte

@@ -2,15 +2,11 @@
 	import { createEventDispatcher } from "svelte";
 	import Card from "$components/dashboard/ui/Card.svelte";
 	import { globalData, deploy } from "$lib/store";
-	import Heading from "$components/dashboard/ui/Heading.svelte";
 	import * as Dialog from "$lib/components/ui/dialog";
 
 	// Icons
-	import ICON_CLICKS from "$lib/assets/icons/NSG_CLICK.svg";
-	import ICON_CREDITS from "$lib/assets/icons/NSG_CREDIT.svg";
-	import ICON_AGENDAS from "$lib/assets/icons/NSG_AGENDA.svg";
 	import { Settings } from "lucide-svelte";
-	import { Button, buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from "$lib/components/ui/button";
 	import Column from "./ui/Column.svelte";
 	import { Label } from "$lib/components/ui/label";
 	import { Switch } from "$lib/components/ui/switch";
@@ -19,15 +15,14 @@
 	import type { GlobalData as TGlobalData } from "$lib/types";
 	import { Slider } from "$lib/components/ui/slider";
 	import { Input } from "$lib/components/ui/input";
-	import * as Select from "$lib/components/ui/select";
 
 	let global: TGlobalData = $globalData;
 	let deployType: boolean = $deploy.type !== "automatic";
 
 	const icons: Record<string, string> = {
-		clicks: ICON_CLICKS,
-		credits: ICON_CREDITS,
-		agendas: ICON_AGENDAS,
+		clicks: "/NSG_CLICK.svg",
+		credits: "/NSG_CREDIT.svg",
+		agendas: "/NSG_AGENDA.svg",
 	};
 
 	const dispatch = createEventDispatcher();
@@ -43,32 +38,39 @@
 			<Dialog.Title>{$t("global_settings")}</Dialog.Title>
 		</Dialog.Header>
 		<div>
-			<Card title="Deploy method" outline={false} uid="display">
-				<Column columns={3}>
-					<Column span="1/-1">
-						<CardNew.Root>
-							<CardNew.Header>Deployment type</CardNew.Header>
-							<CardNew.Content class="switch-group">
-								<Switch
-									id="deploy-type"
-									bind:checked={deployType}
-									on:click={(event) => {
-										$deploy.type = deployType
-											? "automatic"
-											: "manual";
-										$deploy.proceed =
-											$deploy.type === "automatic";
-									}}
-								/>
-								<Label for="deploy-type">
-									{$deploy.type === "manual"
-										? "Manual"
-										: "Automatic (instant)"}
-								</Label>
-							</CardNew.Content>
-						</CardNew.Root>
-					</Column>
+			<Card outline={false} uid="display">
+				<Column>
+					<CardNew.Root>
+						<CardNew.Header>Deployment type</CardNew.Header>
+						<CardNew.Content class="switch-group">
+							<Switch
+								id="deploy-type"
+								bind:checked={deployType}
+								on:click={(event) => {
+									$deploy.type = deployType
+										? "automatic"
+										: "manual";
+									$deploy.proceed =
+										$deploy.type === "automatic";
+								}}
+							/>
+							<Label for="deploy-type">
+								{$deploy.type === "manual"
+									? "Manual"
+									: "Automatic (instant)"}
+							</Label>
+						</CardNew.Content>
+					</CardNew.Root>
+				</Column>
+			</Card>
+		</div>
 
+		<Dialog.Header>
+			<Dialog.Title>{$t("global_settings")}</Dialog.Title>
+		</Dialog.Header>
+		<div>
+			<Card>
+				<Column columns={3}>
 					<!-- <Column span="1/-1">
 						<CardNew.Root>
 							<CardNew.Header
@@ -146,7 +148,7 @@
 						</CardNew.Header>
 					</CardNew.Root>
 
-					<CardNew.Root>
+					<CardNew.Root class="col-[auto/span_2]">
 						<CardNew.Header class="switch-group justify-between">
 							<Label for="commentators">Commentators</Label>
 						</CardNew.Header>
@@ -188,7 +190,6 @@
 							</Select.Root>
 						</CardNew.Content>
 					</CardNew.Root> -->
-
 				</Column>
 			</Card>
 		</div>

dashboard/src/lib/components/dashboard/Header.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import Preview from "$components/dashboard/Preview.svelte";
 	import ResetState from "$components/dashboard/ResetState.svelte";
 	import FlipPlayers from "$components/dashboard/FlipPlayers.svelte";
@@ -24,6 +23,7 @@
 	import { Button } from "$lib/components/ui/button";
 
 	export let update: Function;
+	export let deploy_data: Function;
 
 	let global: TGlobalData = $globalData;
 	let timer: TTimerData = $timerData;
@@ -153,30 +153,32 @@
 	</Actions>
 	<Actions>
 		<Connection />
-
 		{#if $deploy.type === "manual"}
 			<Button
 				variant="default"
+				disabled={!$deploy.proceed}
 				on:click={() => {
-					$deploy.proceed = true;
 					update({
 						type: "global",
-						data: global,
+						data: $globalData,
 					});
 					update({
 						type: "timer",
-						data: timer,
+						data: $timerData,
 					});
 					update({
 						type: "playerOne",
-						data: playerOneData,
+						data: $playerOneData,
 					});
 					update({
 						type: "playerTwo",
-						data: playerTwoData,
+						data: $playerTwoData,
 					});
-				}}>Deploy</Button
+					deploy_data();
+				}}
 			>
+				{$deploy.proceed ? "Deploy" : "Waiting for changes"}
+			</Button>
 		{/if}
 	</Actions>
 </header>