diff --git a/pkg/client/src/components/Player.tsx b/pkg/client/src/components/Player.tsx
index e4a21ec..229a311 100644
--- a/pkg/client/src/components/Player.tsx
+++ b/pkg/client/src/components/Player.tsx
@@ -6,11 +6,9 @@ import { Stylable } from "./toolbox";
export default (props: { playerKey: string } & Stylable) => {
const table = useContext(TableContext);
- onMount(() => console.log("Player mounted"));
-
return (
table?.setPlayers(props.playerKey, "ref", e)}
+ ref={(e) => table?.setPlayers(props.playerKey, { ref: e })}
style={{
...props.style,
"background-color": playerColor(props.playerKey),
diff --git a/pkg/client/src/components/Table.tsx b/pkg/client/src/components/Table.tsx
index 1711849..5411763 100644
--- a/pkg/client/src/components/Table.tsx
+++ b/pkg/client/src/components/Table.tsx
@@ -52,36 +52,40 @@ export default (props: { tableKey: string }) => {
// #region inbound table properties
const [players, setPlayers] = createStore
({});
- const playerKeys = () => Object.keys(players);
+
wsEvents
.thru(extractProperty("playersPresent"))
.onValue((P) =>
- P.filter((p) => !(p in players)).forEach((p) =>
- setPlayers(p, { name: "", ready: false })
+ setPlayers(
+ Object.fromEntries(
+ P.map((p) => [
+ p,
+ p in players ? players[p] : { name: "", ready: false },
+ ])
+ )
)
);
- wsEvents
- .thru(extractProperty("playerNames"))
- .onValue((P) =>
- Object.entries(P).map(([player, name]) =>
- setPlayers(player, "name", name)
- )
- );
+ wsEvents.thru(extractProperty("playerNames")).onValue((P) =>
+ Object.entries(P)
+ .filter(([player]) => player in players)
+ .map(([player, name]) => setPlayers(player, "name", name))
+ );
- wsEvents
- .thru(extractProperty("playersReady"))
- .onValue((P) =>
- Object.entries(P).map(([player, ready]) =>
- setPlayers(player, "ready", ready)
- )
- );
+ wsEvents.thru(extractProperty("playersReady")).onValue((P) =>
+ Object.entries(P)
+ .filter(([player]) => player in players)
+ .map(([player, ready]) => setPlayers(player, "ready", ready))
+ );
// #endregion
// #region inbound game properties
const [gameConfig, setGameConfig] = createSynced({
- ws: wsEvents.thru(extractProperty("gameConfig")) as Property,
+ ws: wsEvents.thru(extractProperty("gameConfig")) as Property<
+ { game: string; players: string[] },
+ any
+ >,
sendWs: (gameConfig) => sendWs({ gameConfig }),
});
const view = wsEvents.thru(extractProperty("view")).thru(createObservable);
@@ -94,6 +98,7 @@ export default (props: { tableKey: string }) => {
ws.on("open", () => {
wsEvents.plug(fromWebsocket(ws));
+ // TODO: these need to be in a tracking scope to be disposed
createEffect(() => sendWs({ ready: ready() }));
createEffect(() => sendWs({ name: name() }));
});
@@ -103,7 +108,7 @@ export default (props: { tableKey: string }) => {
const GamePicker = () => {
return (
-