package -> pkg

pkg/client/src/components/Player.tsx

@@ -0,0 +1,38 @@
+import { createSignal, useContext } from "solid-js";
+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);
+	const playerReady =
+		table?.wsEvents
+			.filter((evt) => evt.playersReady != null)
+			.map((evt) => evt.playersReady![props.playerKey])
+			.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),
+				...(playerReady() && table?.view() == null
+					? {
+							border: "10px solid green",
+					  }
+					: {}),
+			}}
+			class={`${props.class} w-20 h-20 rounded-full flex justify-center items-center`}
+		>
+			<p style={{ "font-size": "1em" }}>
+				{profile(props.playerKey)()?.name}
+			</p>
+		</div>
+	);
+};