portal to decorate players by ref instead of ID

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),

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 */}

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 =