From 287c19fc0def8c642f91d3cda07ba4683e3d2760 Mon Sep 17 00:00:00 2001
From: Daniel McCrystal <drmccrystal@gmail.com>
Date: Mon, 18 Aug 2025 23:31:28 -0400
Subject: [PATCH] cooking with websockets

---
 .dockerignore                                 |  10 --
 Dockerfile                                    |  11 --
 packages/client/src/app.tsx                   |  53 +++++----
 packages/client/src/components/Game.tsx       |  46 +++++---
 packages/client/src/routes/[game]/index.tsx   |   2 +-
 packages/client/src/style.css                 |   1 -
 .../migration.sql                             |  15 +++
 packages/server/db/schema.prisma              |   4 +-
 packages/server/package.json                  |   3 +
 packages/server/src/games/simple.ts           | 109 +++++++++++++++---
 packages/server/src/index.ts                  |   2 +-
 pnpm-lock.yaml                                |  30 +++++
 12 files changed, 205 insertions(+), 81 deletions(-)
 delete mode 100644 .dockerignore
 delete mode 100644 Dockerfile
 create mode 100644 packages/server/db/migrations/20250819011115_gamestate_nullable/migration.sql

diff --git a/.dockerignore b/.dockerignore
deleted file mode 100644
index 27b82d1..0000000
--- a/.dockerignore
+++ /dev/null
@@ -1,10 +0,0 @@
-node_modules
-Dockerfile
-Makefile
-README.md
-.output
-.vinxi
-.git
-.gitignore
-.dockerignore
-*.db
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index 9933f5b..0000000
--- a/Dockerfile
+++ /dev/null
@@ -1,11 +0,0 @@
-FROM node:22-alpine
-WORKDIR /app
-EXPOSE 3000
-
-COPY package.json ./
-RUN --mount=type=cache,target=/root/.npm npm install
-
-COPY . .
-RUN --mount=type=cache,target=/app/.vinxi npm run build
-
-CMD ["npm", "run", "start"]
diff --git a/packages/client/src/app.tsx b/packages/client/src/app.tsx
index 6e22a44..09de5f3 100644
--- a/packages/client/src/app.tsx
+++ b/packages/client/src/app.tsx
@@ -34,30 +34,33 @@ const Profile = () => {
 	);
 };
 
-const App = () => (
-	<Router
-		root={(props) => (
-			<>
-				<Suspense>{props.children}</Suspense>
-				<Profile />
+const App = () => {
+	api.whoami.post();
+	return (
+		<Router
+			root={(props) => (
+				<>
+					<Suspense>{props.children}</Suspense>
+					<Profile />
 
-				{/* Version */}
-				<span class="fixed br m-2 font-mono text-xs">
-					{"v" + pkg.version}
-				</span>
-			</>
-		)}
-	>
-		<Route path="/" component={lazy(() => import("./routes/index"))} />
-		<Route
-			path="/:game"
-			component={lazy(() => import("./routes/[game]/index"))}
-		/>
-		<Route
-			path="/:game/:instance"
-			component={lazy(() => import("./routes/[game]/[instance]"))}
-		/>
-	</Router>
-);
+					{/* Version */}
+					<span class="fixed br m-2 font-mono text-xs">
+						{"v" + pkg.version}
+					</span>
+				</>
+			)}
+		>
+			<Route path="/" component={lazy(() => import("./routes/index"))} />
+			<Route
+				path="/:game"
+				component={lazy(() => import("./routes/[game]/index"))}
+			/>
+			<Route
+				path="/:game/:instance"
+				component={lazy(() => import("./routes/[game]/[instance]"))}
+			/>
+		</Router>
+	);
+};
 
-api.whoami.post().then(() => render(App, document.getElementById("app")!));
+render(App, document.getElementById("app")!);
diff --git a/packages/client/src/components/Game.tsx b/packages/client/src/components/Game.tsx
index 588ff47..de4e762 100644
--- a/packages/client/src/components/Game.tsx
+++ b/packages/client/src/components/Game.tsx
@@ -1,4 +1,12 @@
-import { Accessor, createContext, createResource, Show } from "solid-js";
+import {
+	Accessor,
+	createContext,
+	createResource,
+	createSignal,
+	For,
+	onCleanup,
+	Show,
+} from "solid-js";
 import {
 	GameState,
 	Action,
@@ -15,28 +23,36 @@ export const GameContext = createContext<{
 }>();
 
 export default (props: { instanceId: string }) => {
-	const [view, { mutate }] = createResource(() =>
-		api
-			.simple(props)
-			.get()
-			.then((res) => res.data as PlayerView)
-	);
-	const submitAction = (action: Action) =>
-		api
-			.simple(props)
-			.post({ action })
-			.then((res) => res.status == 200 && mutate(res.data as PlayerView));
+	const [view, setView] = createSignal<PlayerView>();
+	const [players, setPlayers] = createSignal<string[]>([]);
 
+	const ws = api.simple(props).subscribe();
+	onCleanup(() => ws.close());
+	ws.on("message", (evt) => {
+		if (evt.data.players) {
+			setPlayers(evt.data.players);
+		}
+	});
+
+	const submitAction = (action: Action) => api.simple(props).post({ action });
+
+	const Lobby = () => {
+		return (
+			<div class="fixed center">
+				<For each={players()}>{(player) => <p>{player}</p>}</For>
+			</div>
+		);
+	};
 	return (
 		<GameContext.Provider value={{ view, submitAction }}>
-			<Show when={view.latest != undefined}>
+			<Show when={view() != undefined} fallback={<Lobby />}>
 				<Pile
-					count={view.latest!.deckCount}
+					count={view()!.deckCount}
 					class="cursor-pointer fixed center"
 					onClick={() => submitAction({ type: "draw" })}
 				/>
 
-				<Hand class="fixed bc" hand={view.latest!.myHand} />
+				<Hand class="fixed bc" hand={view()!.myHand} />
 			</Show>
 		</GameContext.Provider>
 	);
diff --git a/packages/client/src/routes/[game]/index.tsx b/packages/client/src/routes/[game]/index.tsx
index 80588ef..30dc219 100644
--- a/packages/client/src/routes/[game]/index.tsx
+++ b/packages/client/src/routes/[game]/index.tsx
@@ -16,7 +16,7 @@ export default () => {
 			<div style={{ padding: "20px" }}>
 				<p class="text-[40px]">{param.game}</p>
 				<button
-					class="px-2 py-1.5 m-4 button rounded"
+					class="px-2 py-1.5 m-4 button"
 					onClick={() => api.simple.newGame.post().then(refetch)}
 				>
 					New Game
diff --git a/packages/client/src/style.css b/packages/client/src/style.css
index 8951ad2..75be824 100644
--- a/packages/client/src/style.css
+++ b/packages/client/src/style.css
@@ -29,7 +29,6 @@ a:visited {
 	background-color: white;
 	color: black;
 	box-shadow: 0px 5px 10px black;
-	border-radius: 10%;
 	transition: background-color 0.15s, color 0.15s, transform 0.15s;
 }
 .button:hover {
diff --git a/packages/server/db/migrations/20250819011115_gamestate_nullable/migration.sql b/packages/server/db/migrations/20250819011115_gamestate_nullable/migration.sql
new file mode 100644
index 0000000..99b6453
--- /dev/null
+++ b/packages/server/db/migrations/20250819011115_gamestate_nullable/migration.sql
@@ -0,0 +1,15 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Instance" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "createdByKey" TEXT NOT NULL,
+    "gameKey" TEXT NOT NULL,
+    "gameState" JSONB,
+    CONSTRAINT "Instance_gameKey_fkey" FOREIGN KEY ("gameKey") REFERENCES "Game" ("key") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_Instance" ("createdByKey", "gameKey", "gameState", "id") SELECT "createdByKey", "gameKey", "gameState", "id" FROM "Instance";
+DROP TABLE "Instance";
+ALTER TABLE "new_Instance" RENAME TO "Instance";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
diff --git a/packages/server/db/schema.prisma b/packages/server/db/schema.prisma
index 9e46f85..14d9f80 100644
--- a/packages/server/db/schema.prisma
+++ b/packages/server/db/schema.prisma
@@ -32,6 +32,6 @@ model Instance {
 
   players Human[]
 
-  game      Game @relation(fields: [gameKey], references: [key])
-  gameState Json
+  game      Game  @relation(fields: [gameKey], references: [key])
+  gameState Json?
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index f2e6bc9..abbd070 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -20,10 +20,13 @@
 		"elysia": "^1.3.8",
 		"elysia-ip": "^1.0.10",
 		"elysia-rate-limit": "^4.4.0",
+		"kefir": "^3.8.8",
+		"kefir-bus": "^2.3.1",
 		"object-hash": "^3.0.0"
 	},
 	"devDependencies": {
 		"@types/bun": "latest",
+		"@types/kefir": "^3.8.11",
 		"concurrently": "^9.2.0",
 		"prisma": "6.13.0"
 	}
diff --git a/packages/server/src/games/simple.ts b/packages/server/src/games/simple.ts
index 3af847b..e4883fc 100644
--- a/packages/server/src/games/simple.ts
+++ b/packages/server/src/games/simple.ts
@@ -3,6 +3,9 @@ import { heq } from "@games/shared/utils";
 import { Elysia, t } from "elysia";
 import db from "../db";
 import { human } from "../human";
+import { ElysiaWS } from "elysia/dist/ws";
+import K, { Stream } from "kefir";
+import Bus, { type Bus as TBus } from "kefir-bus";
 
 // omniscient game state
 export type GameState = {
@@ -104,13 +107,18 @@ export const resolveAction = (
 	};
 };
 
+const instanceEvents: {
+	[instanceId: string]: TBus<
+		{ view?: PlayerView; players?: string[] },
+		never
+	>;
+} = {};
+
 export const simpleApi = new Elysia({ prefix: "/simple" })
 	.use(human)
 	.post("/newGame", ({ humanKey }) => {
-		console.log("KEY", humanKey);
 		return db.instance.create({
 			data: {
-				gameState: newGame([humanKey]),
 				gameKey: "simple",
 				createdByKey: humanKey,
 				players: {
@@ -119,25 +127,96 @@ export const simpleApi = new Elysia({ prefix: "/simple" })
 			},
 		});
 	})
+
 	.group("/:instanceId", (app) =>
 		app
-			.get("/", ({ params: { instanceId }, humanKey }) =>
-				db.instance
-					.findUnique({
+			.ws("/", {
+				async open(ws) {
+					console.log("Got ws connection");
+					ws.send("Hello!");
+
+					// send initial state
+					const instanceId = ws.data.params.instanceId;
+					const humanKey = ws.data.humanKey;
+
+					const instance = await db.instance.update({
+						data: {
+							players: {
+								connect: { key: humanKey },
+							},
+						},
 						where: {
 							id: instanceId,
 						},
-					})
-					.then((game) =>
-						getView(
-							getKnowledge(
-								game!.gameState as GameState,
+						select: {
+							createdByKey: true,
+							gameState: true,
+							players: {
+								select: {
+									key: true,
+								},
+							},
+						},
+					});
+					if (instance == null) {
+						ws.close(1011, "no such instance");
+						return;
+					}
+
+					// register this socket as a listener for events of this instance
+					if (!instanceEvents[instanceId]) {
+						instanceEvents[instanceId] = Bus();
+					}
+					// @ts-ignore
+					ws.data.cb = instanceEvents[instanceId].onValue((evt) =>
+						ws.send(evt)
+					);
+					ws.send({ creator: instance.createdByKey });
+					if (instance.gameState != null) {
+						ws.send(
+							getView(
+								getKnowledge(
+									instance.gameState as GameState,
+									humanKey
+								),
 								humanKey
-							),
-							humanKey
-						)
-					)
-			)
+							)
+						);
+					}
+					instanceEvents[instanceId]?.emit({
+						players: instance.players.map((p) => p.key),
+					});
+				},
+				close(ws) {
+					console.log("Got ws close");
+					const instanceId = ws.data.params.instanceId;
+					// @ts-ignore
+					instanceEvents[instanceId]?.offValue(ws.data.cb);
+					db.instance
+						.update({
+							where: {
+								id: instanceId,
+							},
+							data: {
+								players: {
+									disconnect: { key: ws.data.humanKey },
+								},
+							},
+							select: {
+								players: {
+									select: {
+										key: true,
+									},
+								},
+							},
+						})
+						.then((instance) => {
+							instanceEvents[instanceId]?.emit({
+								players: instance.players.map((p) => p.key),
+							});
+						});
+				},
+			})
 			.post(
 				"/",
 				({ params: { instanceId }, body: { action }, humanKey }) =>
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 0820878..4e9d7d5 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -9,7 +9,7 @@ const port = env.PORT || 5001;
 const app = new Elysia()
 	.use(
 		cors({
-			origin: ["localhost:3000", "games.drm.dev"],
+			origin: ["http://localhost:3000", "https://games.drm.dev"],
 		})
 	)
 	.onRequest(({ request }) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6cf7b9b..3411674 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,12 @@ importers:
       elysia-rate-limit:
         specifier: ^4.4.0
         version: 4.4.0(elysia@1.3.11(exact-mirror@0.1.5(@sinclair/typebox@0.34.38))(file-type@21.0.0)(typescript@5.9.2))
+      kefir:
+        specifier: ^3.8.8
+        version: 3.8.8
+      kefir-bus:
+        specifier: ^2.3.1
+        version: 2.3.1(kefir@3.8.8)
       object-hash:
         specifier: ^3.0.0
         version: 3.0.0
@@ -91,6 +97,9 @@ importers:
       '@types/bun':
         specifier: latest
         version: 1.2.20(@types/react@19.1.9)
+      '@types/kefir':
+        specifier: ^3.8.11
+        version: 3.8.11
       concurrently:
         specifier: ^9.2.0
         version: 9.2.0
@@ -450,6 +459,9 @@ packages:
   '@types/js-cookie@3.0.6':
     resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
 
+  '@types/kefir@3.8.11':
+    resolution: {integrity: sha512-5TRdFXQYsVUvqIH6nYjslHzBgn4hnptcutXnqAhfbKdWD/799c44hFhQGF3887E2t/Q4jSp3RvNFCaQ+b9w6vQ==}
+
   '@types/node@24.2.0':
     resolution: {integrity: sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==}
 
@@ -884,6 +896,14 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  kefir-bus@2.3.1:
+    resolution: {integrity: sha512-wLCQfEw8PddSNeyjDCH2WNgNg3Rb/c+OaG5WEPfEwod+LQfGX4isHcHRWsYNLmdFEw3/KyA+9qDSy+VC4NsifA==}
+    peerDependencies:
+      kefir: ^3.5.1
+
+  kefir@3.8.8:
+    resolution: {integrity: sha512-xWga7QCZsR2Wjy2vNL3Kq/irT+IwxwItEWycRRlT5yhqHZK2fmEhziP+LzcJBWSTAMranGKtGTQ6lFpyJS3+jA==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -1601,6 +1621,10 @@ snapshots:
 
   '@types/js-cookie@3.0.6': {}
 
+  '@types/kefir@3.8.11':
+    dependencies:
+      '@types/node': 24.2.0
+
   '@types/node@24.2.0':
     dependencies:
       undici-types: 7.10.0
@@ -2076,6 +2100,12 @@ snapshots:
 
   json5@2.2.3: {}
 
+  kefir-bus@2.3.1(kefir@3.8.8):
+    dependencies:
+      kefir: 3.8.8
+
+  kefir@3.8.8: {}
+
   kolorist@1.8.0: {}
 
   local-pkg@1.1.1: