basic shape

packages/client/src/routes/[game]/[instance].tsx

@@ -0,0 +1,30 @@
+import { A, useParams } from "@solidjs/router";
+
+import { createEffect, createResource, Show, Suspense } from "solid-js";
+import Game from "../../components/Game";
+import { getGameState } from "../../db/Instances";
+
+export default () => {
+	const params = useParams<{ game: string; instance: string }>();
+
+	return (
+		<>
+			<Game instanceId={Number.parseInt(params.instance)} />
+			<A
+				href={`/${params.game}`}
+				style={{
+					position: "absolute",
+					padding: "10px",
+					top: "0",
+					left: "0",
+					margin: "20px",
+					"background-color": "white",
+					"border-radius": "8px",
+					border: "2px solid black",
+				}}
+			>
+				Back
+			</A>
+		</>
+	);
+};

packages/client/src/routes/[game]/index.tsx

@@ -0,0 +1,39 @@
+import { A, useParams } from "@solidjs/router";
+
+import { createEffect, createResource, For, Suspense } from "solid-js";
+import * as Instance from "../../db/Instances";
+
+export default () => {
+	const params = useParams<{ game: string }>();
+
+	const [instances, { refetch }] = createResource(
+		() => params.game,
+		() => Instance.queryInstances(params.game)
+	);
+
+	return (
+		<Suspense>
+			<div style={{ padding: "20px" }}>
+				<h1 style={{ margin: 0 }}>{params.game}</h1>
+				<button
+					onClick={() =>
+						Instance.createInstance(params.game).then(refetch)
+					}
+				>
+					New Game
+				</button>
+				<ul>
+					<For each={instances() ?? []}>
+						{(instance) => (
+							<li>
+								<A href={`/${params.game}/${instance.id}`}>
+									{instance.id}
+								</A>
+							</li>
+						)}
+					</For>
+				</ul>
+			</div>
+		</Suspense>
+	);
+};

packages/client/src/routes/index.tsx

@@ -0,0 +1,14 @@
+import { A } from "@solidjs/router";
+import { createResource, For } from "solid-js";
+import * as Games from "../db/Games";
+
+export default () => {
+	const [games] = createResource(() => Games.queryAll());
+	return (
+		<div style={{ padding: "20px" }}>
+			<For each={games()}>
+				{(game) => <A href={`/${game.name}`}>{game.name}</A>}
+			</For>
+		</div>
+	);
+};