drm/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cooking with websockets

Browse Source
This commit is contained in:
Daniel McCrystal
2025-08-18 23:31:28 -04:00
parent 3f1635880a
commit 287c19fc0d
12 changed files with 205 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.dockerignore
View File

@@ -1,10 +0,0 @@
node_modules
Dockerfile
Makefile
README.md
.output
.vinxi
.git
.gitignore
.dockerignore
*.db

11
Dockerfile
View File

@@ -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"]

53
packages/client/src/app.tsx
View File

@@ -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")!);

46
packages/client/src/components/Game.tsx
View File

@@ -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>
);

2
packages/client/src/routes/[game]/index.tsx
View File

@@ -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

1
packages/client/src/style.css
View File

@@ -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 {

15
packages/server/db/migrations/20250819011115_gamestate_nullable/migration.sql Normal file
View File

@@ -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;

4
packages/server/db/schema.prisma
View File

@@ -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?
}

3
packages/server/package.json
View File

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

109
packages/server/src/games/simple.ts
View File

@@ -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 }) =>

2
packages/server/src/index.ts
View File

@@ -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 }) => {

30
pnpm-lock.yaml generated
View File

@@ -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: