cards/clients/solid/src/components/Debug.tsx

38 lines
1.2 KiB
TypeScript

import { createEffect, createSignal, JSXElement, useContext } from "solid-js";
import { Button } from "@/components/ui/button";
import { useWebsocket, WebsocketContext, WebsocketProvider } from "./Websocket";
export function Debug(): JSXElement {
const connected = useWebsocket;
// const [connected, set_connected] = createSignal(false);
const [user_count, _set_user_count] = createSignal("0");
const [game_count, _set_game_count] = createSignal("0");
// const toggle = () => set_connected(!connected());
createEffect(() => console.log(connected()));
return (
<div class="my-2 w-auto">
<h2 class="p-1 text-2xl">Debug:</h2>
<p class="p-1">
Connection Status: {connected() ? "Connected" : "Disconnected"}
</p>
<p class="p-1">Users Online: {user_count()}</p>
<p class="p-1">Active Games: {game_count()}</p>
<div class="p-1">
<Button
onClick={() => set_connected(!connected())}
disabled={connected()}
>
"Connect"
</Button>
<Button
onClick={() => set_connected(!connected())}
disabled={!connected()}
>
"Disconnect"
</Button>
</div>
</div>
);
}