cooking with websockets

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