full e2e behavior, nice

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

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