full e2e behavior, nice

packages/client/src/app.tsx

@@ -35,6 +35,10 @@ const App = () => (
 			path="/:game"
 			component={lazy(() => import("./routes/[game]/index"))}
 		/>
+		<Route
+			path="/:game/:instance"
+			component={lazy(() => import("./routes/[game]/[instance]"))}
+		/>
 	</Router>
 );
 

packages/client/src/components/Game.tsx

@@ -1,6 +1,7 @@
 import {
 	Accessor,
 	createContext,
+	createEffect,
 	createResource,
 	JSX,
 	Show,
@@ -11,7 +12,7 @@ import Hand from "./Hand";
 import Pile from "./Pile";
 import { GameState, newDeck, shuffle, Hand as THand } from "../types/cards";
 import { createStore, produce, SetStoreFunction, Store } from "solid-js/store";
-import { getGameState, updateGameState } from "../db/Instances";
+import api from "../api";
 
 export const GameContext = createContext<{
 	gameState: Accessor<GameState | undefined>;
@@ -19,17 +20,24 @@ export const GameContext = createContext<{
 }>();
 
 export default (props: { instanceId: number }) => {
-	const [gameState, { refetch }] = createResource(() =>
-		getGameState(props.instanceId)
+	const [gameState, { refetch }] = createResource<GameState>(() =>
+		api.gameState[":gameId"]
+			.$get({ param: { gameId: props.instanceId.toString() } })
+			.then((res) => res.json())
 	);
+
 	const setGameState = (state: GameState) =>
-		updateGameState(props.instanceId, state).then(refetch);
+		api.gameState[":gameId"]
+			.$put({
+				param: { gameId: props.instanceId.toString() },
+				json: state,
+			})
+			.then(refetch);
 
 	return (
 		<GameContext.Provider value={{ gameState, setGameState }}>
 			<Show when={gameState() != undefined}>
 				<div
-					onClick={() => {}}
 					class="full column center"
 					style={{ "row-gap": "20px", "font-size": "32px" }}
 				>

packages/client/src/db/Games.ts

@@ -1,4 +0,0 @@
-"use server";
-import { prisma } from "./db";
-
-export const queryAll = async () => await prisma.game.findMany();

packages/client/src/db/Instances.ts

@@ -1,25 +0,0 @@
-"use server";
-
-import { GameState, newDeck, shuffle } from "../types/cards";
-import { prisma } from "./db";
-
-export const queryInstances = async (gameName: string) =>
-	prisma.instance.findMany({ where: { game: { name: gameName } } });
-
-export const createInstance = (gameName: string) =>
-	prisma.instance.create({
-		data: {
-			gameState: { deck: shuffle(newDeck()), hand: [] } as GameState,
-			game: { connect: { name: gameName } },
-		},
-	});
-
-export const getGameState = (instanceId: number) =>
-	prisma.instance
-		.findUnique({ where: { id: instanceId } })
-		.then((i) => i?.gameState as GameState | undefined);
-
-export const updateGameState = async (
-	instanceId: number,
-	gameState: GameState
-) => prisma.instance.update({ where: { id: instanceId }, data: { gameState } });

packages/client/src/db/db.ts

@@ -1,5 +0,0 @@
-"use server";
-
-import { PrismaClient } from "@prisma/client";
-
-export const prisma = new PrismaClient();

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

@@ -2,7 +2,6 @@ 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 }>();

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>

packages/client/src/routes/index.tsx

@@ -1,19 +1,17 @@
 import { A } from "@solidjs/router";
 import { createEffect, createResource, For } from "solid-js";
-import * as Games from "../db/Games";
 import api from "../api";
 
 export default () => {
-	const [ping] = createResource(async () =>
-		api.ping.$get().then(async (res) => await res.text())
+	const [games] = createResource(async () =>
+		api.games.$get().then((res) => res.json())
 	);
 
 	return (
 		<div style={{ padding: "20px" }}>
-			{ping()}
-			{/* <For each={games()}>
+			<For each={games()}>
 				{(game) => <A href={`/${game.name}`}>{game.name}</A>}
-			</For> */}
+			</For>
 		</div>
 	);
 };