bug fixes

packages/client/src/components/Table.tsx

@@ -1,10 +1,20 @@
-import { Accessor, createContext, For, onCleanup, Show } from "solid-js";
+import {
+	Accessor,
+	createContext,
+	createEffect,
+	createResource,
+	createSignal,
+	For,
+	onCleanup,
+	Show,
+} from "solid-js";
 import { TWsIn, TWsOut } from "../../../server/src/table";
 import api, { fromWebsocket } from "../api";
 import { createObservable, createObservableWithInit, cx } from "../fn";
 import { me } from "../profile";
 import Game from "./Game";
 import Player from "./Player";
+import { fromPromise } from "kefir";
 
 export const TableContext = createContext<{
 	players: Accessor<string[]>;
@@ -13,9 +23,20 @@ export const TableContext = createContext<{
 }>();
 
 export default (props: { tableKey: string }) => {
-	const ws = api.ws(props).subscribe();
-	const wsEvents = fromWebsocket<TWsOut>(ws);
-	onCleanup(() => ws.close());
+	const wsPromise = new Promise<
+		ReturnType<ReturnType<typeof api.ws>["subscribe"]>
+	>((res) => {
+		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));
+	const wsEvents = fromPromise(wsPromise).flatMap((ws) =>
+		fromWebsocket<TWsOut>(ws)
+	);
+	onCleanup(() => wsPromise.then((ws) => ws.close()));
 
 	const presenceEvents = wsEvents.filter((evt) => evt.players != null);
 
@@ -26,12 +47,14 @@ export default (props: { tableKey: string }) => {
 		[]
 	);
 
+	const [ready, setReady] = createSignal(false);
+	createEffect(() => sendWs({ ready: ready() }));
 	const view = createObservable(gameEvents.map((evt) => evt.view));
 
 	return (
 		<TableContext.Provider
 			value={{
-				sendWs: (evt) => ws.send(evt),
+				sendWs,
 				view,
 				players,
 			}}
@@ -83,10 +106,10 @@ export default (props: { tableKey: string }) => {
 				<Show when={view() == null}>
 					<div class="absolute center">
 						<button
-							onClick={() => ws.send({ ready: true })}
+							onClick={() => setReady((prev) => !prev)}
 							class="button p-1 "
 						>
-							Ready
+							{ready() ? "Not Ready" : "Ready"}
 						</button>
 					</div>
 				</Show>