basic shape

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>
+	);
+};