lots more kefir tinkering

packages/client/src/components/Table.tsx

@@ -1,65 +1,48 @@
 import {
 	Accessor,
 	createContext,
-	createEffect,
-	createResource,
 	createSignal,
 	For,
 	onCleanup,
-	Resource,
 	Show,
-	untrack,
 } from "solid-js";
-import { createStore } from "solid-js/store";
 import { SimplePlayerView } from "../../../server/src/games/simple";
-import api, { me } from "../api";
-import { ApiType } from "../fn";
-import Game from "./Game";
-
-const [playerProfiles, setPlayerProfiles] = createStore<
-	Record<string, Resource<ApiType<typeof api.profile.get>>>
->({});
+import api, { fromWebsocket } from "../api";
+import { me, playerColor, profile } from "../profile";
+import { fromEvents, Stream, stream } from "kefir";
+import Bus from "kefir-bus";
+import { createObservable, createObservableWithInit, WSEvent } from "../fn";
+import { EdenWS } from "@elysiajs/eden/treaty";
+import { TWsIn, TWsOut } from "../../../server/src/table";
 
 export const TableContext = createContext<{
 	players: Accessor<string[]>;
-	view: Accessor<SimplePlayerView | undefined>;
-	// submitAction: (action: Action) => Promise<any>;
+	view: Accessor<any>;
+	sendWs: (msg: TWsIn) => void;
 }>();
 
 export default (props: { tableKey: string }) => {
-	const [players, setPlayers] = createSignal<string[]>([]);
-	const [view, setView] = createSignal<SimplePlayerView>();
-
 	const ws = api.ws(props).subscribe();
+	const wsEvents = fromWebsocket<TWsOut>(ws);
 	onCleanup(() => ws.close());
 
-	ws.on("message", (evt) => {
-		if (evt.data.players) {
-			setPlayers(evt.data.players);
-		}
-		if (evt.data.view) {
-			setView(evt.data.view);
-		}
-	});
+	const presenceEvents = wsEvents.filter((evt) => evt.players != null);
+	const gameEvents = wsEvents.filter((evt) => evt.view != null);
 
-	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 players = createObservableWithInit<string[]>(
+		presenceEvents.map((evt) => evt.players!),
+		[]
+	);
+	const view = createObservable(gameEvents.map((evt) => evt.view));
 
 	return (
-		<TableContext.Provider value={{ view, players }}>
+		<TableContext.Provider
+			value={{
+				sendWs: ws.send,
+				view,
+				players,
+			}}
+		>
 			<div class="flex justify-around p-t-10">
 				<For each={players().filter((p) => p != me())}>
 					{(player, i) => {
@@ -75,11 +58,12 @@ export default (props: { tableKey: string }) => {
 									transform: `translate(0, ${
 										verticalOffset() * 150
 									}vh)`,
+									"background-color": playerColor(player),
 								}}
-								class="w-20 h-20 rounded-full bg-red-900 flex justify-center items-center"
+								class="w-20 h-20 rounded-full flex justify-center items-center"
 							>
 								<p style={{ "font-size": "1em" }}>
-									{playerProfiles[player]?.()?.name}
+									{profile(player)()?.name}
 								</p>
 							</div>
 						);
@@ -105,7 +89,7 @@ export default (props: { tableKey: string }) => {
 				</Show>
 			</div>
 			<Show when={view() != null}>
-				<Game tableKey={props.tableKey} />
+				<div>Game started!</div>
 			</Show>
 		</TableContext.Provider>
 	);