wip: socketio changes + some playerlist events

core/components/PlayerlistManager/index.ts

@@ -4,6 +4,7 @@ import TxAdmin from '@core/txAdmin.js';
 import { ServerPlayer } from '@core/playerLogic/playerClasses.js';
 import { DatabasePlayerType } from '../PlayerDatabase/databaseTypes';
 import consoleFactory from '@extras/console';
+import { PlayerDroppedEventType, PlayerJoiningEventType } from '@shared/socketioTypes';
 const console = consoleFactory(modulename);
 
 
@@ -106,7 +107,7 @@ export default class PlayerlistManager {
      * Returns a specifc ServerPlayer or undefined.
      * NOTE: this returns the actual object and not a deep clone!
      */
-     getOnlinePlayersByLicense(searchLicense: string) {
+    getOnlinePlayersByLicense(searchLicense: string) {
         return this.#playerlist.filter(p => p && p.license === searchLicense && p.isConnected) as ServerPlayer[];
     }
 
@@ -129,7 +130,7 @@ export default class PlayerlistManager {
                     ts: Date.now(),
                     data: { ids: this.#playerlist[payload.id]!.ids }
                 }], mutex);
-                this.#txAdmin.webServer.webSocket!.buffer('playerlist', {
+                this.#txAdmin.webServer.webSocket.buffer<PlayerJoiningEventType>('playerlist', {
                     mutex,
                     type: 'playerJoining',
                     netid: svPlayer.netid,
@@ -153,7 +154,7 @@ export default class PlayerlistManager {
                     ts: Date.now(),
                     data: { reason: payload.reason }
                 }], mutex);
-                this.#txAdmin.webServer.webSocket!.buffer('playerlist', {
+                this.#txAdmin.webServer.webSocket.buffer<PlayerDroppedEventType>('playerlist', {
                     mutex,
                     type: 'playerDropped',
                     netid: this.#playerlist[payload.id]!.netid,

core/components/WebServer/index.ts

@@ -45,7 +45,7 @@ export default class WebServer {
     private koaCallback: (req: any, res: any) => Promise<void>;
     //setupWebSocket
     private io: SocketIO;
-    private webSocket: WebSocket;
+    public webSocket: WebSocket;
     //setupServerCallbacks
     private httpServer?: HttpClass.Server;
 

core/components/WebServer/webSocket.ts

@@ -142,7 +142,7 @@ export default class WebSocket {
     /**
      * Adds data to the buffer
      */
-    buffer(roomName: RoomNames, data: any) {
+    buffer<T>(roomName: RoomNames, data: T) {
         const room = this.#rooms[roomName];
         if (!room) throw new Error('Room not found');
 

core/components/WebServer/wsRooms/playerlist.ts

@@ -2,6 +2,7 @@ const modulename = 'SocketRoom:Playerlist';
 import TxAdmin from "@core/txAdmin";
 import { RoomType } from "../webSocket";
 import consoleFactory from '@extras/console';
+import { FullPlayerlistEventType } from "@shared/socketioTypes";
 const console = consoleFactory(modulename);
 
 
@@ -18,6 +19,6 @@ export default (txAdmin: TxAdmin): RoomType => ({
             mutex: txAdmin.fxRunner.currentMutex,
             type: 'fullPlayerlist',
             playerlist: txAdmin.playerlistManager.getPlayerList(),
-        }];
+        } satisfies FullPlayerlistEventType];
     },
 })

core/components/WebServer/wsRooms/status.ts

@@ -14,7 +14,6 @@ const getinitialData = (txAdmin: TxAdmin): GlobalStatusType => {
         // @ts-ignore simplifying the status enum to a string
         discord: txAdmin.discordBot.wsStatus, //no push events, only passively updated
         server: {
-            mutex: txAdmin.fxRunner?.currentMutex,
             status: txAdmin.healthMonitor.currentStatus || '??',
             process: txAdmin.fxRunner.getStatus(),
             instantiated: !!txAdmin.fxRunner.fxChild, //used to disable the control buttons

docs/dev_notes.md

@@ -127,6 +127,10 @@ Quickies
 
 Bugs
 - [ ] when you open the server sheet, the control tooltip shows automatically
+- [ ] nui iframe scroll on 1080p screen
+    - should not scroll even with 7 server menu items
+    - possible solution would be to hide the zap ad if !isWebInterface
+- [ ] no `target="_blank"` will work in NUI (zap ad + support), so either hide the buttons or find a way to open links
 
 
 =======================================================================

panel/src/hooks/playerlist.ts

@@ -1,5 +1,5 @@
 import { PlayerlistEventType, PlayerlistPlayerType } from "@shared/socketioTypes";
-import { atom, useAtomValue } from "jotai";
+import { atom, useAtomValue, useSetAtom } from "jotai";
 
 
 /**
@@ -8,3 +8,33 @@ import { atom, useAtomValue } from "jotai";
 export const playerlistAtom = atom<PlayerlistPlayerType[]>([]);
 export const playerCountAtom = atom((get) => get(playerlistAtom).length);
 
+//NOTE: In the old UI, we didn't store the mutex separately, but as a prop of players
+// export const serverMutexAtom = atom<string | null>(null);
+
+
+/**
+ * Hooks
+ */
+export const useProcessPlayerlistEvents = () => {
+    const setPlayerlist = useSetAtom(playerlistAtom);
+
+    return (events: PlayerlistEventType[]) => {
+        //If there is a fullPlayerlist, skip everything before it
+        const fullListIndex = events.findIndex(e => e.type === 'fullPlayerlist');
+        if (fullListIndex > 0) events = events.slice(fullListIndex);
+
+        //Process events
+        for (const event of events) {
+            if (event.type === 'fullPlayerlist') {
+                setPlayerlist(event.playerlist);
+            } else if (event.type === 'playerJoining') {
+                setPlayerlist((oldList) => [...oldList, event]);
+            } else if (event.type === 'playerDropped') {
+                setPlayerlist((oldList) => oldList.filter(p => p.netid !== event.netid));
+            } else {
+                console.error('Unknown playerlist event type', event);
+            }
+        }
+    }
+};
+

panel/src/layout/MainShell.tsx

@@ -13,6 +13,7 @@ import { useSetOfflineWarning } from '@/hooks/useWarningBar';
 import { pageTitleWatcher } from '@/hooks/pages';
 import { useAtomValue } from 'jotai';
 import { getSocket } from '@/lib/utils';
+import { useProcessPlayerlistEvents } from '@/hooks/playerlist';
 
 
 
@@ -28,6 +29,7 @@ export default function MainShell() {
     const socketStateChangeCounter = useRef(0);
     const setIsSocketOffline = useSetOfflineWarning();
     const setGlobalStatus = useSetGlobalStatus();
+    const processPlayerlistEvents = useProcessPlayerlistEvents();
 
     useEffect(() => {
         const rooms = window.txConsts.isWebInterface ? ['status', 'playerlist'] : ['status'];
@@ -43,7 +45,7 @@ export default function MainShell() {
             const newId = socketStateChangeCounter.current + 1;
             socketStateChangeCounter.current = newId;
             setTimeout(() => {
-                if(socketStateChangeCounter.current === newId){
+                if (socketStateChangeCounter.current === newId) {
                     setIsSocketOffline(true);
                 }
             }, 500);
@@ -59,8 +61,7 @@ export default function MainShell() {
         });
         socket.on('playerlist', function (playerlistData) {
             if (!window.txConsts.isWebInterface) return;
-            console.log('playerlist', playerlistData);
-            // processPlayerlistEvents(playerlistData);
+            processPlayerlistEvents(playerlistData);
         });
 
         return () => {
@@ -78,7 +79,7 @@ export default function MainShell() {
             <main className="flex flex-1 min-h-[calc(100vh-5.5rem-1px)]">
                 <MainRouter />
             </main>
-            <PlayersSidebar />
+            {window.txConsts.isWebInterface && <PlayersSidebar />}
         </div>
 
         <MainSheets />

panel/src/layout/PlayersSidebar.tsx

@@ -1,9 +1,13 @@
+import { playerCountAtom } from '@/hooks/playerlist';
 import { cn } from '@/lib/utils';
+import { useAtomValue } from 'jotai';
 
 type PlayerSidebarProps = {
     isSheet?: boolean;
 };
 export function PlayersSidebar({ isSheet }: PlayerSidebarProps) {
+    const playerCount = useAtomValue(playerCountAtom);
+
     return (
         <aside
             className={cn(
@@ -17,7 +21,7 @@ export function PlayersSidebar({ isSheet }: PlayerSidebarProps) {
             text-3xl font-extralight text-center tracking-wider
             rounded-xl border border-border bg-card text-card-foreground shadow-sm"
             >
-                PLAYER CNT
+                PLAYERS: {playerCount}
             </div>
             <div className="flex justify-center items-center h-[500px]
                 text-3xl font-extralight text-center tracking-wider 

shared/socketioTypes.ts

@@ -1,7 +1,9 @@
+/**
+ * Status channel
+ */
 export type GlobalStatusType = {
     discord: false | number;
     server: {
-        mutex: string | null;
         status: string;
         process: string;
         instantiated: boolean;
@@ -18,3 +20,35 @@ export type GlobalStatusType = {
         nextIsTemp: false;
     };
 }
+
+/**
+ * Playerlist channel
+ * TODO: apply those types to the playerlistManager
+ */
+export type FullPlayerlistEventType = {
+    mutex: string | null,
+    type: 'fullPlayerlist',
+    playerlist: PlayerlistPlayerType[],
+}
+
+export type PlayerlistPlayerType = {
+    netid: number,
+    displayName: string,
+    pureName: string,
+    ids: string[],
+    license: string | null,
+}
+
+export type PlayerDroppedEventType = {
+    mutex: string,
+    type: 'playerDropped',
+    netid: number,
+}
+
+export type PlayerJoiningEventType = {
+    mutex: string,
+    type: 'playerJoining',
+} & PlayerlistPlayerType;
+
+
+export type PlayerlistEventType = FullPlayerlistEventType | PlayerDroppedEventType | PlayerJoiningEventType;