cooking with kefir

packages/client/src/components/Table.tsx

@@ -0,0 +1,90 @@
+import {
+	Accessor,
+	createContext,
+	createEffect,
+	createResource,
+	createSignal,
+	For,
+	onCleanup,
+	Resource,
+	ResourceReturn,
+	Show,
+	untrack,
+} from "solid-js";
+import {
+	GameState,
+	Action,
+	vGameState,
+	PlayerView,
+} from "../../../server/src/games/simple";
+import api from "../api";
+import Hand from "./Hand";
+import Pile from "./Pile";
+import { ApiType } from "../fn";
+import { createStore } from "solid-js/store";
+import Game from "./Game";
+
+const [playerProfiles, setPlayerProfiles] = createStore<
+	Record<string, Resource<ApiType<typeof api.profile.get>>>
+>({});
+
+export const TableContext = createContext<{
+	players: Accessor<string[]>;
+	view: Accessor<PlayerView | undefined>;
+	// submitAction: (action: Action) => Promise<any>;
+}>();
+
+export default (props: { tableKey: string }) => {
+	const [players, setPlayers] = createSignal<string[]>([]);
+	const [view, setView] = createSignal<PlayerView>();
+
+	const ws = api(props).subscribe();
+	onCleanup(() => ws.close());
+
+	ws.on("message", (evt) => {
+		if (evt.data.players) {
+			setPlayers(evt.data.players);
+		}
+		if (evt.data.view) {
+			setView(evt.data.view);
+		}
+	});
+
+	createEffect(() => {
+		players().forEach((player) => {
+			if (!untrack(() => playerProfiles[player])) {
+				const [playerProfile] = createResource(() =>
+					api.profile
+						.get({ query: { otherHumanKey: player } })
+						.then((r) => r.data)
+				);
+				setPlayerProfiles((prev) => ({
+					...prev,
+					[player]: playerProfile,
+				}));
+			}
+		});
+	});
+
+	const Lobby = () => {
+		return (
+			<div class="fixed tc mt-20 flex flex-col items-center">
+				<button class="button p-1 m-10">Start Game!</button>
+				<For each={players()}>
+					{(player) => (
+						<p style={{ "font-size": "2em" }}>
+							{playerProfiles[player]?.()?.name}
+						</p>
+					)}
+				</For>
+			</div>
+		);
+	};
+	return (
+		<TableContext.Provider value={{ view, players }}>
+			<Show when={view() != null} fallback={<Lobby />}>
+				<Game tableKey={props.tableKey} />
+			</Show>
+		</TableContext.Provider>
+	);
+};