basic hand viewing

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "games",
 	"type": "module",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"scripts": {
 		"dev": "pnpm --parallel dev",
 		"build": "pnpm run -F client build",

packages/client/src/components/FannedHand.tsx

@@ -0,0 +1,21 @@
+import type { Hand } from "@games/shared/cards";
+import { For } from "solid-js";
+import Card from "./Card";
+
+export default (props: { handCount: number }) => {
+	return (
+		<div class="flex">
+			<For each={Array(props.handCount)}>
+				{() => (
+					<Card
+						face="down"
+						style={{
+							"margin-left": "-15px",
+							transform: "translate(0, 40px)",
+						}}
+					/>
+				)}
+			</For>
+		</div>
+	);
+};

packages/client/src/components/Game.tsx

@@ -1,4 +1,4 @@
-import { Accessor, createContext, useContext } from "solid-js";
+import { Accessor, createContext, For, useContext } from "solid-js";
 import type {
 	SimpleAction,
 	SimplePlayerView,
@@ -7,6 +7,8 @@ import { me, profile } from "~/profile";
 import Hand from "./Hand";
 import Pile from "./Pile";
 import { TableContext } from "./Table";
+import { Portal } from "solid-js/web";
+import FannedHand from "./FannedHand";
 
 export const GameContext = createContext<{
 	view: Accessor<SimplePlayerView>;
@@ -46,6 +48,17 @@ export default () => {
 			>
 				Quit
 			</button>
+			<For each={Object.entries(view().playerHandCounts)}>
+				{([playerKey, handCount]) => (
+					<Portal
+						mount={document.getElementById(`player-${playerKey}`)!}
+					>
+						<div class="absolute center">
+							<FannedHand handCount={handCount} />
+						</div>
+					</Portal>
+				)}
+			</For>
 		</GameContext.Provider>
 	);
 };

packages/client/src/components/Player.tsx

@@ -3,6 +3,7 @@ import { playerColor, profile } from "~/profile";
 import { TableContext } from "./Table";
 import { Stylable } from "./toolbox";
 import { createObservable, createObservableWithInit } from "~/fn";
+import { GameContext } from "./Game";
 
 export default (props: { playerKey: string } & Stylable) => {
 	const table = useContext(TableContext);
@@ -13,8 +14,11 @@ export default (props: { playerKey: string } & Stylable) => {
 			.thru((Evt) => createObservableWithInit(Evt, false)) ??
 		createSignal(false)[0];
 
+	const game = useContext(GameContext);
+
 	return (
 		<div
+			id={`player-${props.playerKey}`}
 			style={{
 				...props.style,
 				"background-color": playerColor(props.playerKey),