cooking with kefir

packages/client/src/components/Game.tsx

@@ -9,6 +9,7 @@ import {
 	Resource,
 	ResourceReturn,
 	Show,
+	untrack,
 } from "solid-js";
 import {
 	GameState,
@@ -28,35 +29,38 @@ export const GameContext = createContext<{
 }>();
 
 const [playerProfiles, setPlayerProfiles] = createStore<
-	Record<
-		string,
-		ReturnType<typeof createResource<ApiType<typeof api.profile.get>>>[0]
-	>
+	Record<string, Resource<ApiType<typeof api.profile.get>>>
 >({});
 
-export default (props: { instanceId: string }) => {
+export default (props: { tableKey: string }) => {
 	const [view, setView] = createSignal<PlayerView>();
 	const [players, setPlayers] = createSignal<string[]>([]);
 
 	createEffect(() => {
 		players().forEach((player) => {
-			if (!playerProfiles[player]) {
+			if (!untrack(() => playerProfiles[player])) {
 				const [playerProfile] = createResource(() =>
 					api.profile
 						.get({ query: { otherHumanKey: player } })
 						.then((r) => r.data)
 				);
-				setPlayerProfiles(player, playerProfile);
+				setPlayerProfiles((prev) => ({
+					...prev,
+					[player]: playerProfile,
+				}));
 			}
 		});
 	});
 
-	const ws = api.simple(props).subscribe();
+	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);
+		}
 	});
 
 	const submitAction = (action: Action) => api.simple(props).post({ action });
@@ -66,7 +70,11 @@ export default (props: { instanceId: string }) => {
 			<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>{playerProfiles[player]?.()?.name}</p>}
+					{(player) => (
+						<p style={{ "font-size": "2em" }}>
+							{playerProfiles[player]?.()?.name}
+						</p>
+					)}
 				</For>
 			</div>
 		);