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">
+			<div class="fixed tc mt-20 flex flex-col items-center">
-				<For each={players()}>{(player) => <p>{player}</p>}</For>
+				<button class="button p-1 m-10">Start Game!</button>
+				<For each={players()}>
+					{(player) => <p>{playerProfiles[player]?.()?.name}</p>}
+				</For>
 			</div>
 		);
 	};

packages/client/src/fn.ts

@@ -7,3 +7,7 @@ Array.prototype.thru = function <T, S>(this: T[], fn: (arr: T[]) => S) {
 	return fn(this);
 };
 export const clone = <T>(o: T): T => JSON.parse(JSON.stringify(o));
+
+export type ApiType<T extends () => Promise<{ data: any }>> = Awaited<
+	ReturnType<T>
+>["data"];

packages/client/uno.config.ts

@@ -31,6 +31,16 @@ export default defineConfig({
 				"margin-right": "auto",
 			},
 		],
+		[
+			"tc",
+			{
+				top: 0,
+				left: 0,
+				right: 0,
+				"margin-left": "auto",
+				"margin-right": "auto",
+			},
+		],
 
 		[
 			"center",

packages/server/src/api.ts

@@ -36,8 +36,16 @@ const api = new Elysia({ prefix: "/api" })
 			}),
 		}
 	)
-	.get("/profile", ({ humanKey }) =>
+	.get("/profile", ({ humanKey, query: { otherHumanKey } }) =>
-		db.human.findFirst({ where: { key: humanKey } })
+		db.human
+			.findFirst({ where: { key: otherHumanKey ?? humanKey } })
+			.then((human) => {
+				if (human == null) {
+					return null;
+				}
+				const { token, ...safeProfile } = human;
+				return safeProfile;
+			})
 	)
 	.get("/games", () => [{ key: "simple", name: "simple" }])