when in doubt make it a property I guess

packages/client/src/components/Game.tsx

@@ -2,11 +2,11 @@ import { Accessor, createContext, useContext } from "solid-js";
 import {
 	SimpleAction,
 	SimplePlayerView,
-	vSimpleGameState,
 } from "../../../server/src/games/simple";
+import { me, profile } from "../profile";
+import Hand from "./Hand";
 import Pile from "./Pile";
 import { TableContext } from "./Table";
-import Hand from "./Hand";
 
 export const GameContext = createContext<{
 	view: Accessor<SimplePlayerView>;
@@ -31,6 +31,15 @@ export default () => {
 				hand={view().myHand}
 				onClickCard={(card) => submitAction({ type: "discard", card })}
 			/>
+			<div class="absolute tc text-align-center">
+				It's{" "}
+				<span class="font-bold">
+					{view().playerTurn == me()
+						? "your"
+						: profile(view().playerTurn)()?.name + "'s"}
+				</span>{" "}
+				turn
+			</div>
 		</GameContext.Provider>
 	);
 };

packages/client/src/components/Hand.tsx

@@ -1,8 +1,6 @@
-import { Component, For, useContext } from "solid-js";
+import { Component, For } from "solid-js";
+import type { Card as TCard, Hand as THand } from "../../../shared/cards";
 import Card from "./Card";
-import type { Hand as THand, Card as TCard } from "../../../shared/cards";
-import { GameContext } from "./Game";
-import { produce } from "solid-js/store";
 import { Stylable } from "./toolbox";
 
 export default ((props) => {

packages/client/src/components/Player.tsx

@@ -1,12 +1,28 @@
+import { createSignal, useContext } from "solid-js";
 import { playerColor, profile } from "../profile";
+import { TableContext } from "./Table";
 import { Stylable } from "./toolbox";
+import { createObservable, createObservableWithInit } from "../fn";
 
 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];
+
 	return (
 		<div
 			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`}
 		>

packages/client/src/components/Table.tsx

@@ -14,12 +14,12 @@ import { createObservable, createObservableWithInit, cx } from "../fn";
 import { me } from "../profile";
 import Game from "./Game";
 import Player from "./Player";
-import { fromPromise } from "kefir";
+import { fromPromise, Stream } from "kefir";
 
 export const TableContext = createContext<{
-	players: Accessor<string[]>;
 	view: Accessor<any>;
 	sendWs: (msg: TWsIn) => void;
+	wsEvents: Stream<TWsOut, any>;
 }>();
 
 export default (props: { tableKey: string }) => {
@@ -29,7 +29,6 @@ export default (props: { tableKey: string }) => {
 		const ws = api.ws(props).subscribe();
 		ws.on("open", () => res(ws));
 		ws.on("error", () => res(ws));
-		ws.on("close", () => res(ws));
 	});
 
 	const sendWs = (msg: TWsIn) => wsPromise.then((ws) => ws.send(msg));
@@ -39,7 +38,6 @@ export default (props: { tableKey: string }) => {
 	onCleanup(() => wsPromise.then((ws) => ws.close()));
 
 	const presenceEvents = wsEvents.filter((evt) => evt.players != null);
-
 	const gameEvents = wsEvents.filter((evt) => evt.view != null);
 
 	const players = createObservableWithInit<string[]>(
@@ -55,8 +53,8 @@ export default (props: { tableKey: string }) => {
 		<TableContext.Provider
 			value={{
 				sendWs,
+				wsEvents,
 				view,
-				players,
 			}}
 		>
 			<div class="flex justify-around p-t-10">