From 686529507ec8f2c4c96cbf4b517ead8663b10c3b Mon Sep 17 00:00:00 2001
From: Daniel McCrystal <drmccrystal@gmail.com>
Date: Tue, 26 Aug 2025 21:42:44 -0400
Subject: [PATCH] basic hand viewing

---
 package.json                                  |  2 +-
 packages/client/src/components/FannedHand.tsx | 21 +++++++++++++++++++
 packages/client/src/components/Game.tsx       | 15 ++++++++++++-
 packages/client/src/components/Player.tsx     |  4 ++++
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/FannedHand.tsx

diff --git a/package.json b/package.json
index dcbc4c7..90131cc 100644
--- a/package.json
+++ b/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",
diff --git a/packages/client/src/components/FannedHand.tsx b/packages/client/src/components/FannedHand.tsx
new file mode 100644
index 0000000..70b787c
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/packages/client/src/components/Game.tsx b/packages/client/src/components/Game.tsx
index be274d7..987c765 100644
--- a/packages/client/src/components/Game.tsx
+++ b/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>
 	);
 };
diff --git a/packages/client/src/components/Player.tsx b/packages/client/src/components/Player.tsx
index 614ff4d..4989e8d 100644
--- a/packages/client/src/components/Player.tsx
+++ b/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),