lots more kefir tinkering

packages/client/src/api.ts

@@ -1,6 +1,8 @@
 import { createResource } from "solid-js";
 import { type Api } from "../../server/src/api";
 import { treaty } from "@elysiajs/eden";
+import { EdenWS } from "@elysiajs/eden/treaty";
+import { fromEvents } from "kefir";
 
 const { api } = treaty<Api>(
 	import.meta.env.DEV ? "http://localhost:5001" : window.location.origin,
@@ -10,4 +12,5 @@ const { api } = treaty<Api>(
 );
 export default api;
 
-export const [me] = createResource(() => api.whoami.post().then((r) => r.data));
+export const fromWebsocket = <T>(ws: any) =>
+	fromEvents<T, never>(ws, "message");

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

packages/client/src/fn.ts

@@ -1,3 +1,6 @@
+import { Observable } from "kefir";
+import { Accessor, createSignal } from "solid-js";
+
 declare global {
 	interface Array<T> {
 		thru<S>(fn: (arr: T[]) => S): S;
@@ -11,3 +14,24 @@ export const clone = <T>(o: T): T => JSON.parse(JSON.stringify(o));
 export type ApiType<T extends () => Promise<{ data: any }>> = Awaited<
 	ReturnType<T>
 >["data"];
+
+export type WSEvent<
+	T extends { subscribe: (handler: (...args: any[]) => any) => any }
+> = Parameters<Parameters<T["subscribe"]>[0]>[0];
+
+export const createObservable = <T>(obs: Observable<T, any>) => {
+	const [signal, setSignal] = createSignal<T>();
+	obs.onValue((val) => setSignal(() => val));
+
+	return signal;
+};
+
+export const createObservableWithInit = <T>(
+	obs: Observable<T, any>,
+	init: T
+) => {
+	const [signal, setSignal] = createSignal<T>(init);
+	obs.onValue((val) => setSignal(() => val));
+
+	return signal;
+};

packages/client/src/global.d.ts

@@ -1 +0,0 @@
-/// <reference types="@solidjs/start/env" />

packages/client/src/profile.ts

@@ -0,0 +1,25 @@
+import { createResource, Resource } from "solid-js";
+import { ApiType } from "./fn";
+import api from "./api";
+import hash from "object-hash";
+
+export const [me] = createResource(() => api.whoami.post().then((r) => r.data));
+
+const playerProfiles: {
+	[humanKey: string]: Resource<ApiType<typeof api.profile.get>>;
+} = {};
+
+export const profile = (humanKey: string) => {
+	if (!(humanKey in playerProfiles)) {
+		playerProfiles[humanKey] = createResource(() =>
+			api.profile
+				.get({ query: { otherHumanKey: humanKey } })
+				.then((r) => r.data)
+		)[0];
+	}
+
+	return playerProfiles[humanKey];
+};
+
+export const playerColor = (humanKey: string) =>
+	"#" + hash(humanKey).substring(0, 6);