basic shape

packages/client/src/components/Game.tsx

@@ -0,0 +1,54 @@
+import {
+	Accessor,
+	createContext,
+	createResource,
+	JSX,
+	Show,
+	Suspense,
+} from "solid-js";
+import Card from "./Card";
+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";
+
+export const GameContext = createContext<{
+	gameState: Accessor<GameState | undefined>;
+	setGameState: (state: GameState) => Promise<any>;
+}>();
+
+export default (props: { instanceId: number }) => {
+	const [gameState, { refetch }] = createResource(() =>
+		getGameState(props.instanceId)
+	);
+	const setGameState = (state: GameState) =>
+		updateGameState(props.instanceId, 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" }}
+				>
+					<div class="full center">
+						<Pile
+							pile={gameState()!.deck}
+							style={{ cursor: "pointer" }}
+							onClick={() => {
+								const [drawn, ...rest] = gameState()!.deck;
+								setGameState({
+									deck: rest,
+									hand: [drawn, ...gameState()!.hand],
+								});
+							}}
+						/>
+					</div>
+					<Hand hand={gameState()!.hand} />
+				</div>
+			</Show>
+		</GameContext.Provider>
+	);
+};