workin on it

properties/color.json

@@ -39,7 +39,9 @@
 		"gray-1000": {
 			"value": "rgb(25, 25, 25)"
 		},
-
+		"green-lightest": {
+			"value": "#4ca658"
+		},
 		"green-light": {
 			"value": "#63c74d"
 		},
@@ -70,6 +72,9 @@
 		"red": {
 			"value": "#ff0044"
 		},
+		"orange-lightest": {
+			"value": "#eb6d72"
+		},
 		"orange-medium": {
 			"value": "#e22b33"
 		},
@@ -80,7 +85,7 @@
 			"value": "#c0cbdc"
 		},
 		"grayblue-medium": {
-			"value": "#8b9bb4"
+			"value": "#8596b0"
 		},
 		"grayblue-dark": {
 			"value": "#5a6988"

src/components/Game.svelte

@@ -67,6 +67,7 @@
 
 			if (str.length < MAX_LENGTH) {
 				storage.value.path = path;
+				game.path = $state.snapshot(path);
 				if (!alreadyCompleted) {
 					// TODO if we can do heuristic on front end, only submit if not already completed
 					// const response = await server("submit", str);

src/components/Grid.svelte

@@ -1,13 +1,27 @@
 <script>
 	import { browser } from "$app/environment";
+	import { scaleLinear, interpolateRgb, interpolateHcl } from "d3";
+	import { draw, fade } from "svelte/transition";
+
 	let {
 		size = 10,
 		path = [],
 		perspective,
 		obstacles = [],
-		game = false
+		game = false,
+		active = true,
+		color
 	} = $props();
 
+	const colorScale = $state({
+		user: scaleLinear()
+			.interpolate(interpolateHcl)
+			.range(["#9e2835", "#eb6d72"]),
+		solution: scaleLinear()
+			.interpolate(interpolateHcl)
+			.range(["#265c42", "#4ca658"])
+	});
+
 	const defaultCells = Array(size ** 2)
 		.fill()
 		.map((_, i) => ({
@@ -29,6 +43,23 @@
 	let latest = $derived(path[path.length - 1] || [0, 0]);
 	let offsetWidth = $state(0);
 	let nodes = $derived(!game);
+	let animating = $state(false);
+
+	let pathD = $derived.by(() => {
+		const str = path.map(([x, y], i) => {
+			const x1 = x + 0.5;
+			const y1 = y + 0.5;
+			const x2 = (path[i + 1] ? path[i + 1][0] : x) + 0.5;
+			const y2 = (path[i + 1] ? path[i + 1][1] : y) + 0.5;
+			return `M ${x1} ${y1} L ${x2} ${y2}`;
+		});
+
+		return str.join("");
+	});
+
+	export const animate = () => {
+		animating = true;
+	};
 </script>
 
 <figure
@@ -40,13 +71,41 @@
 	<div class="inner">
 		{#if !game && path.length > 1}
 			<svg viewbox="0 0 10 10">
-				{#each path as [x, y], i}
-					{@const x1 = x + 0.5}
-					{@const y1 = y + 0.5}
-					{@const x2 = (path[i + 1] ? path[i + 1][0] : x) + 0.5}
-					{@const y2 = (path[i + 1] ? path[i + 1][1] : y) + 0.5}
-					<path d="M {x1} {y1} L {x2} {y2}" />
-				{/each}
+				{#if animating}
+					{#each path as [x, y], i (i)}
+						{@const x1 = x + 0.5}
+						{@const y1 = y + 0.5}
+						{@const x2 = (path[i + 1] ? path[i + 1][0] : x) + 0.5}
+						{@const y2 = (path[i + 1] ? path[i + 1][1] : y) + 0.5}
+						<path
+							transition:fade|global={{ delay: 500 + i * 50, duration: 50 }}
+							class="line"
+							d={`M ${x1} ${y1} L ${x2} ${y2}`}
+							style:stroke={colorScale[color](i / path.length)}
+						></path>
+						<!-- {#if i < path.length - 1}
+						{@const angle = Math.atan2(y2 - y1, x2 - x1)}
+						{@const size = 0.15}
+						{@const xTip = x1 + size * Math.cos(angle) * 2}
+						{@const yTip = y1 + size * Math.sin(angle) * 2}
+						{@const xLeft = x1 + size * Math.cos(angle + Math.PI * 0.2)}
+						{@const yLeft = y1 + size * Math.sin(angle + Math.PI * 0.2)}
+						{@const xRight = x1 + size * Math.cos(angle - Math.PI * 0.2)}
+						{@const yRight = y1 + size * Math.sin(angle - Math.PI * 0.2)}
+						<path
+							class="arrow"
+							d={`M ${xLeft} ${yLeft} L ${xTip} ${yTip} L ${xRight} ${yRight}`}
+						></path>
+					{/if} -->
+					{/each}
+				{/if}
+				<!-- {#if pathD && mounted}
+					<path
+						transition:draw|global={{ delay: 1000, duration: 1000 }}
+						class="line"
+						d={pathD}
+					></path>
+				{/if} -->
 			</svg>
 		{/if}
 
@@ -98,8 +157,8 @@
 
 	figure.perspective {
 		perspective-origin: 50% 100%;
-		transform: scale(0.9);
-		margin-top: -3.25%;
+		transform: scale(0.75);
+		margin-top: -10%;
 	}
 
 	.grid {
@@ -120,7 +179,7 @@
 	}
 
 	.perspective .inner {
-		transform: rotateX(40deg);
+		transform: rotateX(35deg);
 	}
 
 	.cell {
@@ -245,11 +304,11 @@
 
 	/* nodes mode */
 	.nodes .grid {
-		border: 0.5px solid var(--color-gray-300);
+		/* border: 0.5px solid var(--color-gray-500); */
 	}
 
 	.nodes .cell {
-		border: 0.5px solid var(--color-gray-300);
+		/* border: 0.5px solid var(--color-gray-500); */
 		background: none;
 	}
 
@@ -262,17 +321,22 @@
 		width: 20%;
 		height: 20%;
 		border-radius: 50%;
-		border: 1px solid var(--color-fg-light);
+		border: 1px solid var(--color-gray-500);
+		background: var(--color-bg);
+		/* opacity: 0.5; */
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
 
 	.nodes .obstacle {
-		background: var(--color-fg-light);
-		/* background: var(--color-fg-light); */
-		/* border-radius: 0; */
+		background: var(--color-gray-500);
+		border: 0.5px solid var(--color-bg);
+	}
+
+	.nodes .obstacle .fg {
+		display: none;
 	}
 
 	svg {
@@ -284,9 +348,18 @@
 		left: 0;
 	}
 
-	path {
-		stroke: var(--path);
-		stroke-width: 0.2;
+	path.line {
+		stroke-width: 0.5;
 		stroke-linecap: round;
+		/* stroke-opacity: 0.2; */
+		fill: none;
+		stroke: var(--path-start);
+	}
+
+	path.arrow {
+		stroke-width: 0.1;
+		/* stroke-linecap: round; */
+		fill: none;
+		stroke: var(--path-start);
 	}
 </style>

src/components/Index.svelte

@@ -38,11 +38,15 @@
 		padding: 0 16px;
 	}
 
-	:global(.c p, .c h1, .c figure) {
+	:global(.c p, .c h1) {
 		margin: 32px auto;
 		max-width: var(--grid-max-width);
 	}
 
+	:global(.c figure) {
+		max-width: 800px;
+	}
+
 	@media (min-width: 960px) {
 		.byline p {
 			font-size: var(--16px);

src/components/Keypad.svelte

@@ -21,7 +21,7 @@
 
 <svelte:window onkeydown={onKeydown} />
 
-<div class="c" bind:offsetWidth style="--margin: {offsetWidth * -0.3}px;">
+<div class="c" bind:offsetWidth style="--margin: {offsetWidth * -0.25}px;">
 	<div class="keypad">
 		<div class="row">
 			<button onpointerdown={() => onmove("ArrowUp")}>&uarr;</button>

src/components/Result.svelte

@@ -2,34 +2,46 @@
 	import Grid from "$components/Grid.svelte";
 	import obstacles from "$data/obstacles.json";
 	import solution from "$data/solution.json";
+	import { game } from "$runes/misc.svelte.js";
+	import inView from "$actions/inview.js";
+
 	const size = 10;
-	const user = [
-		[0, 0],
-		[1, 0],
-		[2, 0]
-	];
+	let visible = $state(false);
+	let gridUser = $state();
+	let gridSolution = $state();
+
+	$effect(() => {
+		if (visible) {
+			if (gridUser) gridUser.animate();
+			gridSolution.animate();
+		}
+	});
 </script>
 
-<div class="c">
+<div class="c" use:inView onenter={() => (visible = true)}>
 	<div class="inner">
+		{#if game.path.length}
+			<div class="g">
+				<Grid
+					bind:this={gridUser}
+					{size}
+					perspective={false}
+					{obstacles}
+					path={game.path}
+					game={false}
+					color="user"
+				></Grid>
+			</div>
+		{/if}
 		<div class="g">
 			<Grid
-				{size}
-				perspective={false}
-				{obstacles}
-				path={user}
-				game={false}
-				--path="var(--color-green-medium)"
-			></Grid>
-		</div>
-		<div class="g">
-			<Grid
+				bind:this={gridSolution}
 				{size}
 				perspective={false}
 				{obstacles}
 				path={solution}
 				game={false}
-				--path="var(--color-orange-medium)"
+				color="solution"
 			></Grid>
 		</div>
 	</div>
@@ -39,7 +51,7 @@
 	.inner {
 		display: flex;
 		justify-content: center;
-		max-width: 640px;
+		max-width: 800px;
 		margin: 0 auto;
 	}
 

src/data/variables.json

@@ -22,8 +22,9 @@
     "gray-800": "rgb(55, 55, 55)",
     "gray-900": "rgb(38, 38, 38)",
     "gray-1000": "rgb(25, 25, 25)",
+    "green-lightest": "#4ca658",
     "green-light": "#63c74d",
-    "green-medium": "#3e8948",
+    "green-medium": "#3c8446",
     "green-dark": "#265c42",
     "pink-light": "#f6757a",
     "pink-medium": "#b55088",
@@ -32,10 +33,11 @@
     "brown-medium": "#b86f50",
     "brown-light": "#e4a672",
     "red": "#ff0044",
-    "orange-medium": "#e43b44",
+    "orange-lightest": "#eb6d72",
+    "orange-medium": "#e22b33",
     "orange-dark": "#9e2835",
     "grayblue-light": "#c0cbdc",
-    "grayblue-medium": "#8b9bb4",
+    "grayblue-medium": "#8596b0",
     "grayblue-dark": "#5a6988",
     "grayblue-darkest": "#262b44",
     "blue-lightest": "#cefafd",

src/runes/misc.svelte.js

@@ -1 +1 @@
-export const game = $state({ active: true, completed: false });
+export const game = $state({ active: true, completed: false, path: [] });

src/styles/app.css

@@ -132,4 +132,4 @@ span.you.visible, span.skip.visible {
 
 main p:first-of-type {
 	margin-top: 0;
-}
+}

src/styles/variables.css

@@ -23,8 +23,9 @@
   --color-gray-800: rgb(55, 55, 55);
   --color-gray-900: rgb(38, 38, 38);
   --color-gray-1000: rgb(25, 25, 25);
+  --color-green-lightest: #4ca658;
   --color-green-light: #63c74d;
-  --color-green-medium: #3e8948;
+  --color-green-medium: #3c8446;
   --color-green-dark: #265c42;
   --color-pink-light: #f6757a;
   --color-pink-medium: #b55088;
@@ -33,10 +34,11 @@
   --color-brown-medium: #b86f50;
   --color-brown-light: #e4a672;
   --color-red: #ff0044;
-  --color-orange-medium: #e43b44;
+  --color-orange-lightest: #eb6d72;
+  --color-orange-medium: #e22b33;
   --color-orange-dark: #9e2835;
   --color-grayblue-light: #c0cbdc;
-  --color-grayblue-medium: #8b9bb4;
+  --color-grayblue-medium: #8596b0;
   --color-grayblue-dark: #5a6988;
   --color-grayblue-darkest: #262b44;
   --color-blue-lightest: #cefafd;