adam/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

start websocket context

Browse source
This commit is contained in:
Adam 2024-11-12 20:48:24 -05:00
parent 11ba1f88be
commit 79dfe73b85
3 changed files with 98 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
clients/solid/src/App.tsx
View file

@ -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">
<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">
<h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
Cards For Humanity
</h1>
<br />
<Websocket />
<Tabs defaultValue="home">
<TabsList>
<TabsTrigger value="home">Home</TabsTrigger>
<TabsTrigger value="browser">Browser</TabsTrigger>
<TabsTrigger value="game">Game</TabsTrigger>
<TabsIndicator variant="underline" />
</TabsList>
<TabsContent value="home">
<Home />
</TabsContent>
<TabsContent value="browser">
<Browser />
</TabsContent>
<TabsContent value="game">
<Game />
</TabsContent>
</Tabs>
<Footer />
<WebsocketProvider>
<div class="lg:container m-auto relative">
<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">
<h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
Cards For Humanity
</h1>
<br />
<Tabs defaultValue="home">
<TabsList>
<TabsTrigger value="home">Home</TabsTrigger>
<TabsTrigger value="browser">Browser</TabsTrigger>
<TabsTrigger value="game">Game</TabsTrigger>
<TabsIndicator variant="underline" />
</TabsList>
<TabsContent value="home">
<Home />
</TabsContent>
<TabsContent value="browser">
<Browser />
</TabsContent>
<TabsContent value="game">
<Game />
</TabsContent>
</Tabs>
<Footer />
</div>
</div>
</div>
</WebsocketProvider>
</ColorModeProvider>
</>
);

37
clients/solid/src/components/Debug.tsx
View file

@ -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>
);
}

50
clients/solid/src/components/Websocket.tsx
View file

@ -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 [chat_update, set_chat_update] = createSignal(null);
let [judge_round, set_judge_round] = createSignal(null);
let [card_packs_meta, set_card_packs_meta] = 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_chat_update(null);
set_judge_round(null);
set_card_packs_meta(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);
}