around the table

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>