start websocket context

clients/solid/src/App.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/tabs";
 import Home from "@/pages/Home";
 import Footer from "@/components/Footer";
-import { Websocket } from "./components/Websocket";
+import { Websocket, WebsocketProvider } from "./components/Websocket";
 
 const Browser = lazy(() => import("@/pages/Browser"));
 const Game = lazy(() => import("@/pages/Game"));
@@ -20,33 +20,34 @@ export default function App(): JSXElement {
     <>
       <ColorModeScript />
       <ColorModeProvider>
-        <div class="lg:container m-auto relative">
+        <WebsocketProvider>
-          <div class="transition-all p-1 lg:p-5 lg:rounded-2xl lg:shadow-xl min-h-screen lg:min-h-0 dark:bg-black">
+          <div class="lg:container m-auto relative">
-            <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
+            <div class="transition-all p-1 lg:p-5 lg:rounded-2xl lg:shadow-xl min-h-screen lg:min-h-0 dark:bg-black">
-              Cards For Humanity
+              <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
-            </h1>
+                Cards For Humanity
-            <br />
+              </h1>
-            <Websocket />
+              <br />
-            <Tabs defaultValue="home">
+              <Tabs defaultValue="home">
-              <TabsList>
+                <TabsList>
-                <TabsTrigger value="home">Home</TabsTrigger>
+                  <TabsTrigger value="home">Home</TabsTrigger>
-                <TabsTrigger value="browser">Browser</TabsTrigger>
+                  <TabsTrigger value="browser">Browser</TabsTrigger>
-                <TabsTrigger value="game">Game</TabsTrigger>
+                  <TabsTrigger value="game">Game</TabsTrigger>
-                <TabsIndicator variant="underline" />
+                  <TabsIndicator variant="underline" />
-              </TabsList>
+                </TabsList>
-              <TabsContent value="home">
+                <TabsContent value="home">
-                <Home />
+                  <Home />
-              </TabsContent>
+                </TabsContent>
-              <TabsContent value="browser">
+                <TabsContent value="browser">
-                <Browser />
+                  <Browser />
-              </TabsContent>
+                </TabsContent>
-              <TabsContent value="game">
+                <TabsContent value="game">
-                <Game />
+                  <Game />
-              </TabsContent>
+                </TabsContent>
-            </Tabs>
+              </Tabs>
-            <Footer />
+              <Footer />
+            </div>
           </div>
-        </div>
+        </WebsocketProvider>
       </ColorModeProvider>
     </>
   );

clients/solid/src/components/Debug.tsx

@@ -1,5 +1,38 @@
-import { JSXElement } from "solid-js";
+import { createEffect, createSignal, JSXElement, useContext } from "solid-js";
+import { Button } from "@/components/ui/button";
+import { useWebsocket, WebsocketContext, WebsocketProvider } from "./Websocket";
 
 export function Debug(): JSXElement {
-  return <>debug</>;
+  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>
+  );
 }

clients/solid/src/components/Websocket.tsx

@@ -1,38 +1,48 @@
 import Joi from "joi";
-import { createEffect, createSignal, onCleanup } from "solid-js";
+import {
+  createEffect,
+  createSignal,
+  onCleanup,
+  createContext,
+  useContext,
+} from "solid-js";
 
-export function Websocket() {
+export const WebsocketContext = createContext();
+
+export function WebsocketProvider(props) {
   const socket = new WebSocket("ws://127.0.0.1:3030/websocket");
 
   // Signals
-  let [connected, set_connected] = createSignal(false);
-  let [users_count, set_users_count] = createSignal(null);
-  let [games_count, set_games_count] = createSignal(null);
   let [active_games, set_active_games] = createSignal(null);
-  let [user_update, set_user_update] = createSignal(null);
+  let [card_packs_meta, set_card_packs_meta] = createSignal(null);
-  let [chat_update, set_chat_update] = createSignal(null);
-  let [judge_round, set_judge_round] = createSignal(null);
   let [chat_message, set_chat_message] = createSignal(null);
+  let [chat_update, set_chat_update] = createSignal(null);
+  let [connected, set_connected] = createSignal(false);
   let [game_meta, set_game_meta] = createSignal(null);
   let [game_state, set_game_state] = createSignal(null);
-  let [card_packs_meta, set_card_packs_meta] = createSignal(null);
+  let [games_count, set_games_count] = createSignal(null);
+  let [judge_round, set_judge_round] = createSignal(null);
+  let [user_update, set_user_update] = createSignal(null);
+  let [users_count, set_users_count] = createSignal(null);
 
   // Wipe everything on disconnect
   createEffect(() => {
     if (!connected()) {
-      set_users_count(null);
-      set_games_count(null);
       set_active_games(null);
-      set_user_update(null);
+      set_card_packs_meta(null);
-      set_chat_update(null);
-      set_judge_round(null);
       set_chat_message(null);
+      set_chat_update(null);
       set_game_meta(null);
       set_game_state(null);
-      set_card_packs_meta(null);
+      set_games_count(null);
+      set_judge_round(null);
+      set_user_update(null);
+      set_users_count(null);
     }
   });
 
+  const state = [connected];
+
   // Incoming message types
   const UserUpdate = Joi.object({
     username: Joi.string(),
@@ -126,4 +136,14 @@ export function Websocket() {
     socket.removeEventListener("close", handleClose);
     socket.close();
   });
+
+  return (
+    <WebsocketContext.Provider value={state}>
+      {props.children}
+    </WebsocketContext.Provider>
+  );
+}
+
+export function useWebsocket() {
+  return useContext(WebsocketContext);
 }