full e2e behavior, nice

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" }}
 				>