wip: small randoms + separated socketio hooks

panel/src/hooks/pages.ts

@@ -1,10 +1,11 @@
-import { atom, useSetAtom } from 'jotai';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { atomEffect } from 'jotai-effect'
 import faviconDefault from '/favicon_default.svg';
 import faviconOnline from '/favicon_online.svg';
 import faviconPartial from '/favicon_partial.svg';
 import faviconOffline from '/favicon_offline.svg';
-import { globalStatusAtom } from './socketio';
+import { globalStatusAtom } from './status';
+import { playerCountAtom } from './playerlist';
 
 /**
  * This atom is used to change the key of the main page error boundry, which also resets the router 
@@ -43,6 +44,7 @@ export const pageTitleWatcher = atomEffect((get, set) => {
     if (!window.txConsts.isWebInterface) return;
     const pageTitle = get(pageTitleAtom);
     const globalStatus = get(globalStatusAtom);
+    const playerCount = get(playerCountAtom);
 
     if (!globalStatus) {
         faviconEl.href = faviconDefault;
@@ -55,7 +57,7 @@ export const pageTitleWatcher = atomEffect((get, set) => {
         } else {
             faviconEl.href = faviconOffline;
         }
-        document.title = `(${globalStatus.server.players}) ${globalStatus.server.name} · ${pageTitle}`;
+        document.title = `(${playerCount}) ${globalStatus.server.name} · ${pageTitle}`;
     }
 
     return () => {

panel/src/hooks/playerlist.ts

@@ -0,0 +1,10 @@
+import { PlayerlistEventType, PlayerlistPlayerType } from "@shared/socketioTypes";
+import { atom, useAtomValue } from "jotai";
+
+
+/**
+ * Atoms
+ */
+export const playerlistAtom = atom<PlayerlistPlayerType[]>([]);
+export const playerCountAtom = atom((get) => get(playerlistAtom).length);
+

panel/src/hooks/socketio.ts → panel/src/hooks/status.ts

@@ -1,29 +1,13 @@
 import { GlobalStatusType } from "@shared/socketioTypes";
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { io } from "socket.io-client";
 
 
-export const getSocket = (rooms: string[] | string) => {
-    const socketOpts = {
-        transports: ['polling'],
-        upgrade: false,
-        query: { rooms }
-    };
-
-    const socket = window.txConsts.isWebInterface
-        ? io({ ...socketOpts, path: '/socket.io' })
-        : io('monitor', { ...socketOpts, path: '/WebPipe/socket.io' });
-
-    return socket;
-}
-
 /**
- * Consts
+ * Atoms
  */
 export const globalStatusAtom = atom<GlobalStatusType | null>(null);
 export const serverNameAtom = atom((get) => get(globalStatusAtom)?.server.name ?? 'unconfigured');
 export const processInstantiatedAtom = atom((get) => get(globalStatusAtom)?.server.instantiated ?? false);
-export const serverMutexAtom = atom((get) => get(globalStatusAtom)?.server.mutex);
 
 
 /**

panel/src/layout/Header.tsx

@@ -13,12 +13,14 @@ import { useAuth } from "@/hooks/auth";
 import { useGlobalMenuSheet, usePlayerlistSheet, useServerSheet } from "@/hooks/sheets";
 import { useTheme } from "@/hooks/useTheme";
 import { FaDiscord } from "react-icons/fa";
+import { useAtomValue } from "jotai";
+import { serverNameAtom } from "@/hooks/status";
+import { playerCountAtom } from "@/hooks/playerlist";
 
 
 function ServerTitle() {
-    // FIXME: make data dynamic
-    const playerCount = 1234;
-    const serverName = '{{serverName}}';
+    const playerCount = useAtomValue(playerCountAtom);
+    const serverName = useAtomValue(serverNameAtom);
 
     return (
         <div className="flex justify-start">

panel/src/layout/MainShell.tsx

@@ -8,10 +8,11 @@ import MainSheets from './MainSheets';
 import WarningBar from './WarningBar';
 import BreakpointDebugger from '@/components/BreakpointDebugger';
 import { useEffect, useRef } from 'react';
-import { getSocket, useSetGlobalStatus } from '@/hooks/socketio';
+import { useSetGlobalStatus } from '@/hooks/status';
 import { useSetOfflineWarning } from '@/hooks/useWarningBar';
 import { pageTitleWatcher } from '@/hooks/pages';
 import { useAtomValue } from 'jotai';
+import { getSocket } from '@/lib/utils';
 
 
 
@@ -54,7 +55,6 @@ export default function MainShell() {
             expireSession('main socketio');
         });
         socket.on('status', function (status) {
-            console.log('status', status);
             setGlobalStatus(status);
         });
         socket.on('playerlist', function (playerlistData) {
@@ -73,7 +73,7 @@ export default function MainShell() {
 
     return <>
         <Header />
-        <div className="px-3 py-4 w-full max-w-[1920px] flex flex-row gap-2">
+        <div className="px-3 py-4 w-full max-w-[1920px] mx-auto flex flex-row gap-2">
             <ServerSidebar />
             <main className="flex flex-1 min-h-[calc(100vh-5.5rem-1px)]">
                 <MainRouter />

panel/src/layout/serverSidebar/ServerControls.tsx

@@ -1,5 +1,5 @@
 import KickAllIcon from '@/components/KickAllIcon';
-import { processInstantiatedAtom } from '@/hooks/socketio';
+import { processInstantiatedAtom } from '@/hooks/status';
 import { cn } from '@/lib/utils';
 import { cva } from 'class-variance-authority';
 import { useAtomValue } from 'jotai';

panel/src/layout/serverSidebar/ServerMenu.tsx

@@ -1,5 +1,5 @@
 import { MenuNavLink } from '@/components/MainPageLink';
-import { serverNameAtom } from '@/hooks/socketio';
+import { serverNameAtom } from '@/hooks/status';
 import { useAtomValue } from 'jotai';
 import { Box, ChevronRightSquare, Dna, Eye, FileEdit, LayoutDashboard } from 'lucide-react';
 

panel/src/layout/serverSidebar/ServerSchedule.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button';
-import { useGlobalStatus } from '@/hooks/socketio';
+import { useGlobalStatus } from '@/hooks/status';
 import { cn, msToDuration } from '@/lib/utils';
 import { PenLineIcon, PlayCircleIcon, PlusCircleIcon, XCircleIcon } from 'lucide-react';
 

panel/src/layout/serverSidebar/ServerStatus.tsx

@@ -1,4 +1,4 @@
-import { useGlobalStatus } from '@/hooks/socketio';
+import { useGlobalStatus } from '@/hooks/status';
 import { VariantProps, cva } from 'class-variance-authority';
 import {
     Tooltip,

panel/src/lib/utils.ts

@@ -1,6 +1,7 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 import humanizeDuration from '@/lib/humanizeDuration';
+import { io } from "socket.io-client";
 
 
 /**
@@ -56,3 +57,21 @@ export const msToShortDuration = humanizeDuration.humanizer({
     spacer: '',
     language: 'shortEn',
 });
+
+
+/**
+ * Returns a socket.io client instance
+ */
+export const getSocket = (rooms: string[] | string) => {
+    const socketOpts = {
+        transports: ['polling'], 
+        upgrade: false,
+        query: { rooms }
+    };
+
+    const socket = window.txConsts.isWebInterface
+        ? io({ ...socketOpts, path: '/socket.io' })
+        : io('monitor', { ...socketOpts, path: '/WebPipe/socket.io' });
+
+    return socket;
+}

panel/src/pages/testing/TmpColors.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { PersonStandingIcon } from "lucide-react";
-import TmpHexHslConverter from "./tmpHexHslConverter";
+import TmpHexHslConverter from "./TmpHexHslConverter";
 
 export default function TmpColors() {
     return <>

panel/src/pages/testing/TmpSocket.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { getSocket } from "@/hooks/socketio";
+import { getSocket } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { Socket } from "socket.io-client";
 

web/public/js/txadmin/main.js

@@ -40,7 +40,7 @@ const setNextRestartTimeClass = (cssClass) => {
     }
 };
 
-const updateStatusCard = (discordData, serverData) => {
+const updateStatusCard = (discordData, serverData, schedulerData) => {
     if(!statusCard.self) return;
 
     setBadgeColor(statusCard.discord, discordData.statusClass);
@@ -49,13 +49,13 @@ const updateStatusCard = (discordData, serverData) => {
     statusCard.server.textContent = serverData.status;
     statusCard.serverProcess.textContent = serverData.process;
 
-    if (typeof serverData.scheduler.nextRelativeMs !== 'number') {
+    if (typeof schedulerData.nextRelativeMs !== 'number') {
         setNextRestartTimeClass('font-weight-light');
         statusCard.nextRestartTime.textContent = 'not scheduled';
     } else {
-        const tempFlag = (serverData.scheduler.nextIsTemp)? '(tmp)' : '';
-        const relativeTime = msToDuration(serverData.scheduler.nextRelativeMs, {units: ['h', 'm']});
-        const isLessThanMinute = serverData.scheduler.nextRelativeMs < 60_000;
+        const tempFlag = (schedulerData.nextIsTemp)? '(tmp)' : '';
+        const relativeTime = msToDuration(schedulerData.nextRelativeMs, {units: ['h', 'm']});
+        const isLessThanMinute = schedulerData.nextRelativeMs < 60_000;
         if(isLessThanMinute){
             statusCard.nextRestartTime.textContent = `right now ${tempFlag}`;
             statusCard.nextRestartBtnCancel.classList.add('d-none');
@@ -64,7 +64,7 @@ const updateStatusCard = (discordData, serverData) => {
             statusCard.nextRestartTime.textContent = `in ${relativeTime} ${tempFlag}`;
         }
 
-        if (serverData.scheduler.nextSkip) {
+        if (schedulerData.nextSkip) {
             setNextRestartTimeClass('text-muted');
             if(!isLessThanMinute) {
                 statusCard.nextRestartBtnCancel.classList.add('d-none');
@@ -107,11 +107,11 @@ const updateHostStats = (hostData) => {
 };
 
 function updateStatus(data) {
-    updateStatusCard(data.discord, data.server);
-    if (isWebInterface) {
-        updatePageTitle(data.server.statusClass, data.server.name, data.server.players);
-        updateHostStats(data.host);
-    }
+    updateStatusCard(data.discord, data.server, data.scheduler);
+    // if (isWebInterface) {
+    //     updatePageTitle(data.server.statusClass, data.server.name, data.server.players);
+    //     updateHostStats(data.host);
+    // }
 }
 function updateStatusOffline() {
     if (statusCard.self) {
@@ -226,7 +226,7 @@ const getSocket = (rooms) => {
 }
 
 const startMainSocket = () => {
-    return;
+    // return;
     const rooms = isWebInterface ? ['status', 'playerlist'] : ['status'];
     const socket = getSocket(rooms);
     socket.on('error', (error) => {