really solid

pkg/client/src/components/Player.tsx

@@ -1,29 +1,21 @@
 import { createSignal, onMount, useContext } from "solid-js";
-import { createObservableWithInit } from "~/fn";
+import { createObservableWithInit, extractProperty } from "~/fn";
 import { playerColor } from "~/profile";
 import { TableContext } from "./Table";
 import { Stylable } from "./toolbox";
 
 export default (props: { playerKey: string } & Stylable) => {
 	const table = useContext(TableContext);
-	const playerReady =
-		table?.wsEvents
-			.filter((evt) => evt.playersReady != null)
-			.map((evt) => evt.playersReady![props.playerKey])
-			.thru((Evt) => createObservableWithInit(Evt, false)) ??
-		createSignal(false)[0];
 
 	onMount(() => console.log("Player mounted"));
 
 	return (
 		<div
-			ref={(e) => {
-				if (table != null) table.playerRefs[props.playerKey] = e;
-			}}
+			ref={(e) => table?.setPlayers(props.playerKey, "ref", e)}
 			style={{
 				...props.style,
 				"background-color": playerColor(props.playerKey),
-				...(playerReady() && table?.view() == null
+				...(table?.view() == null && table?.players[props.playerKey].ready
 					? {
 							border: "10px solid green",
 					  }
@@ -31,8 +23,8 @@ export default (props: { playerKey: string } & Stylable) => {
 			}}
 			class={`${props.class} w-20 h-20 rounded-full flex justify-center items-center`}
 		>
-			<p style={{ "font-size": "1em" }}>
-				{table?.playerNames[props.playerKey]}
+			<p class="font-[1em] text-align-center">
+				{table?.players[props.playerKey].name}
 			</p>
 		</div>
 	);