around the table

packages/client/src/api.ts

@@ -1,3 +1,4 @@
+import { createResource } from "solid-js";
 import { type Api } from "../../server/src/api";
 import { treaty } from "@elysiajs/eden";
 
@@ -8,3 +9,5 @@ const { api } = treaty<Api>(
 	}
 );
 export default api;
+
+export const [me] = createResource(() => api.whoami.post().then((r) => r.data));

packages/client/src/app.tsx

@@ -35,7 +35,6 @@ const Profile = () => {
 };
 
 const App = () => {
-	api.whoami.post();
 	return (
 		<Router
 			root={(props) => (

packages/client/src/components/Table.tsx

@@ -17,7 +17,7 @@ import {
 	vGameState,
 	PlayerView,
 } from "../../../server/src/games/simple";
-import api from "../api";
+import api, { me } from "../api";
 import Hand from "./Hand";
 import Pile from "./Pile";
 import { ApiType } from "../fn";
@@ -66,23 +66,48 @@ export default (props: { tableKey: string }) => {
 		});
 	});
 
-	const Lobby = () => {
-		return (
-			<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 style={{ "font-size": "2em" }}>
-							{playerProfiles[player]?.()?.name}
-						</p>
-					)}
-				</For>
-			</div>
-		);
-	};
 	return (
 		<TableContext.Provider value={{ view, players }}>
-			<Show when={view() != null} fallback={<Lobby />}>
+			<div class="flex justify-around p-t-10">
+				<For each={players().filter((p) => p != me())}>
+					{(player, i) => {
+						const verticalOffset = () => {
+							const N = players().length - 1;
+							const x = Math.abs((2 * i() + 1) / (N * 2) - 0.5);
+							const y = Math.sqrt(1 - x * x);
+							return 1 - y;
+						};
+						return (
+							<div
+								style={{
+									transform: `translate(0, ${
+										verticalOffset() * 1500
+									}px)`,
+								}}
+								class="w-20 h-20 rounded-full bg-red-900 flex justify-center items-center"
+							>
+								<p style={{ "font-size": "1em" }}>
+									{playerProfiles[player]?.()?.name}
+								</p>
+							</div>
+						);
+					}}
+				</For>
+			</div>
+			<div
+				id="table"
+				class="fixed bg-radial from-orange-950 to-stone-950 border-neutral-950 border-4 top-40 bottom-20 left-10 right-10 shadow-lg"
+				style={{
+					"border-radius": "50% 50%",
+				}}
+			>
+				<Show when={view() == null}>
+					<div class="absolute center">
+						<button class="button p-1 ">Start Game!</button>
+					</div>
+				</Show>
+			</div>
+			<Show when={view() != null}>
 				<Game tableKey={props.tableKey} />
 			</Show>
 		</TableContext.Provider>

packages/server/src/api.ts

@@ -7,17 +7,24 @@ import { liveTable } from "./table";
 
 const api = new Elysia({ prefix: "/api" })
 	.post("/whoami", async ({ cookie: { token } }) => {
+		let human;
 		if (token.value == null) {
-			const newHuman = await db.human.create({
+			human = await db.human.create({
 				data: {},
 			});
 			token.set({
-				value: newHuman.token,
+				value: human.token,
 				expires: dayjs().add(1, "year").toDate(),
 				httpOnly: true,
 			});
+		} else {
+			human = await db.human.findUniqueOrThrow({
+				where: {
+					token: token.value,
+				},
+			});
 		}
-		return token.value;
+		return human.key;
 	})
 	.use(human)
 	.post(