From bedafb0b7c51888b271c5c2589342627fb804134 Mon Sep 17 00:00:00 2001
From: Daniel McCrystal <drmccrystal@gmail.com>
Date: Sat, 6 Sep 2025 16:53:06 -0400
Subject: [PATCH] portal to decorate players by ref instead of ID

---
 pkg/client/src/components/Player.tsx       | 4 +++-
 pkg/client/src/components/Table.tsx        | 2 ++
 pkg/client/src/components/games/simple.tsx | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/pkg/client/src/components/Player.tsx b/pkg/client/src/components/Player.tsx
index 020d9ad..3dff113 100644
--- a/pkg/client/src/components/Player.tsx
+++ b/pkg/client/src/components/Player.tsx
@@ -17,7 +17,9 @@ export default (props: { playerKey: string } & Stylable) => {
 
 	return (
 		<div
-			id={`player-${props.playerKey}`}
+			ref={(e) => {
+				if (table != null) table.playerRefs[props.playerKey] = e;
+			}}
 			style={{
 				...props.style,
 				"background-color": playerColor(props.playerKey),
diff --git a/pkg/client/src/components/Table.tsx b/pkg/client/src/components/Table.tsx
index 6e5d320..f68ee04 100644
--- a/pkg/client/src/components/Table.tsx
+++ b/pkg/client/src/components/Table.tsx
@@ -30,6 +30,7 @@ export const TableContext = createContext<{
 	wsEvents: Stream<TWsOut, any>;
 	playerNames: Store<{ [key: string]: string }>;
 	players: Accessor<string[]>;
+	playerRefs: { [key: string]: HTMLDivElement };
 }>();
 
 export default (props: { tableKey: string }) => {
@@ -94,6 +95,7 @@ export default (props: { tableKey: string }) => {
 				view,
 				playerNames,
 				players,
+				playerRefs: {},
 			}}
 		>
 			{/* Player avatars around the table */}
diff --git a/pkg/client/src/components/games/simple.tsx b/pkg/client/src/components/games/simple.tsx
index 1a3c5ce..28aa804 100644
--- a/pkg/client/src/components/games/simple.tsx
+++ b/pkg/client/src/components/games/simple.tsx
@@ -59,7 +59,7 @@ export default () => {
 				>
 					{([playerKey, handCount], i) => (
 						<Portal
-							mount={document.getElementById(`player-${playerKey}`)!}
+							mount={table.playerRefs[playerKey]}
 							ref={(ref) => {
 								console.log("Setting hand ref");
 								const midOffset =