checkpoint

packages/client/src/components/Game.tsx

@@ -1,10 +1,13 @@
 import {
 	Accessor,
 	createContext,
+	createEffect,
 	createResource,
 	createSignal,
 	For,
 	onCleanup,
+	Resource,
+	ResourceReturn,
 	Show,
 } from "solid-js";
 import {
@@ -16,16 +19,38 @@ import {
 import api from "../api";
 import Hand from "./Hand";
 import Pile from "./Pile";
+import { ApiType } from "../fn";
+import { createStore } from "solid-js/store";
 
 export const GameContext = createContext<{
 	view: Accessor<PlayerView | undefined>;
 	submitAction: (action: Action) => Promise<any>;
 }>();
 
+const [playerProfiles, setPlayerProfiles] = createStore<
+	Record<
+		string,
+		ReturnType<typeof createResource<ApiType<typeof api.profile.get>>>[0]
+	>
+>({});
+
 export default (props: { instanceId: string }) => {
 	const [view, setView] = createSignal<PlayerView>();
 	const [players, setPlayers] = createSignal<string[]>([]);
 
+	createEffect(() => {
+		players().forEach((player) => {
+			if (!playerProfiles[player]) {
+				const [playerProfile] = createResource(() =>
+					api.profile
+						.get({ query: { otherHumanKey: player } })
+						.then((r) => r.data)
+				);
+				setPlayerProfiles(player, playerProfile);
+			}
+		});
+	});
+
 	const ws = api.simple(props).subscribe();
 	onCleanup(() => ws.close());
 	ws.on("message", (evt) => {
@@ -38,8 +63,11 @@ export default (props: { instanceId: string }) => {
 
 	const Lobby = () => {
 		return (
-			<div class="fixed center">
-				<For each={players()}>{(player) => <p>{player}</p>}</For>
+			<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>}
+				</For>
 			</div>
 		);
 	};