end to end!

packages/client/src/components/Player.tsx

@@ -0,0 +1,18 @@
+import { playerColor, profile } from "../profile";
+import { Stylable } from "./toolbox";
+
+export default (props: { playerKey: string } & Stylable) => {
+	return (
+		<div
+			style={{
+				...props.style,
+				"background-color": playerColor(props.playerKey),
+			}}
+			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>
+	);
+};