Remove ping. Refactor naming of payloads.

leighmacdonald · Feb 8, 2025 · 2c92701 · 2c92701
1 parent 3a003cd
commit 2c92701
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 195 deletions.
diff --git a/frontend/src/api/playerqueue.ts b/frontend/src/api/playerqueue.ts
@@ -1,8 +1,14 @@
 import { apiCall, PermissionLevel } from './common.ts';
 
+export const apiQueueMessagesDelete = async (message_id: number, count: number) => {
+    return await apiCall(`/api/playerqueue/messages/${message_id}/${count}`, 'DELETE', {});
+};
+
+export const apiQueueSetUserStatus = async (steam_id: string, chat_status: ChatStatus, reason: string) => {
+    return await apiCall(`/api/playerqueue/status/${steam_id}`, 'PUT', { chat_status, reason });
+};
+
 export enum Operation {
-    Ping,
-    Pong,
     JoinQueue,
     LeaveQueue,
     Message,
@@ -28,19 +34,20 @@ export type PurgePayload = {
     message_ids: number[];
 };
 
-export type clientQueueState = {
+export type ClientQueueState = {
     steam_id: string;
 };
-export type ServerQueueState = {
+
+export type LobbyState = {
     server_id: number;
-    members: clientQueueState[];
+    members: ClientQueueState[];
 };
 
-export type createMessage = {
+export type MessageCreatePayload = {
     body_md: string;
 };
 
-export type ServerQueueMessage = {
+export type ChatLog = {
     steam_id: string;
     created_on: Date;
     personaname: string;
@@ -50,11 +57,15 @@ export type ServerQueueMessage = {
     message_id: number;
 };
 
-export type JoinQueuePayload = {
+export type MessagePayload = {
+    messages: ChatLog[];
+};
+
+export type JoinPayload = {
     servers: number[];
 };
 
-export type LeaveQueuePayload = JoinQueuePayload;
+export type LeavePayload = JoinPayload;
 
 export type Member = {
     name: string;
@@ -65,11 +76,11 @@ export type Member = {
 export type ClientStatePayload = {
     update_users: boolean;
     update_servers: boolean;
-    servers: ServerQueueState[];
+    lobbies: LobbyState[];
     users: Member[];
 };
 
-export type QueueServer = {
+export type LobbyServer = {
     name: string;
     short_name: string;
     cc: string;
@@ -84,7 +95,7 @@ export type ChatStatusChangePayload = {
 
 export type GameStartPayload = {
     users: Member[];
-    server: QueueServer;
+    server: LobbyServer;
 };
 
 export type ChatStatus = 'readwrite' | 'readonly' | 'noaccess';
@@ -96,11 +107,3 @@ export const websocketURL = () => {
     }
     return `${protocol}://${location.host}/ws`;
 };
-
-export const apiQueueMessagesDelete = async (message_id: number, count: number) => {
-    return await apiCall(`/api/playerqueue/messages/${message_id}/${count}`, 'DELETE', {});
-};
-
-export const apiQueueSetUserStatus = async (steam_id: string, chat_status: ChatStatus, reason: string) => {
-    return await apiCall(`/api/playerqueue/status/${steam_id}`, 'PUT', { chat_status, reason });
-};
diff --git a/frontend/src/component/QueueChat.tsx b/frontend/src/component/QueueChat.tsx
@@ -34,7 +34,7 @@ export const QueueChat = () => {
     const matches = useMediaQuery(theme.breakpoints.down('md'));
 
     const onSubmit = useCallback(
-        async (event: FormEvent<HTMLFormElement | HTMLDivElement>) => {
+        async (event: FormEvent<HTMLFormElement | HTMLDivElement | HTMLButtonElement>) => {
             event.preventDefault();
 
             if (msg.length > 0) {
@@ -60,7 +60,7 @@ export const QueueChat = () => {
     }, [matches, showPeople]);
 
     const inputStates: { readonly: boolean; label: string; reason: string } = useMemo(() => {
-        const canSend = profile.playerqueue_chat_status == 'readwrite';
+        const readonly = profile.playerqueue_chat_status != 'readwrite';
         if (!isReady) {
             return { readonly: true, label: 'Connecting', reason: '' };
         }
@@ -73,7 +73,7 @@ export const QueueChat = () => {
             return { readonly: true, label: 'Muted', reason: reason };
         }
 
-        return { readonly: !canSend, label: '', reason: '' };
+        return { readonly: readonly, label: '', reason: '' };
     }, [isReady, sending, profile.playerqueue_chat_status, reason, chatStatus]);
 
     return (
@@ -135,6 +135,7 @@ export const QueueChat = () => {
                                         disabled={inputStates.readonly}
                                         size={'small'}
                                         color={msg.length > 0 ? 'success' : 'default'}
+                                        onClick={onSubmit}
                                     >
                                         {inputStates.readonly ? <HourglassBottomIcon /> : <SendIcon />}
                                     </IconButton>

diff --git a/frontend/src/component/QueueChatMessageContainer.tsx b/frontend/src/component/QueueChatMessageContainer.tsx
@@ -10,7 +10,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
-import { ServerQueueMessage } from '../api';
+import { ChatLog } from '../api';
 import { useQueueCtx } from '../hooks/useQueueCtx.ts';
 import { LoadingPlaceholder } from './LoadingPlaceholder.tsx';
 import { QueueChatName } from './QueueChatName.tsx';
@@ -37,7 +37,7 @@ export const QueueChatMessageContainer = ({ showControls }: { showControls: bool
     );
 };
 
-const QueueChatMessage = ({ message, showControls }: { message: ServerQueueMessage; showControls: boolean }) => {
+const QueueChatMessage = ({ message, showControls }: { message: ChatLog; showControls: boolean }) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
 

diff --git a/frontend/src/component/QueueProvider.tsx b/frontend/src/component/QueueProvider.tsx
@@ -5,17 +5,18 @@ import {
     ChatStatus,
     ChatStatusChangePayload,
     ClientStatePayload,
-    createMessage,
+    MessageCreatePayload,
     GameStartPayload,
-    JoinQueuePayload,
-    LeaveQueuePayload,
+    JoinPayload,
+    LeavePayload,
+    MessagePayload,
     Operation,
     PermissionLevel,
     PurgePayload,
     QueueMember,
     QueueRequest,
-    ServerQueueMessage,
-    ServerQueueState,
+    ChatLog,
+    LobbyState,
     websocketURL
 } from '../api';
 import { useAuth } from '../hooks/useAuth.ts';
@@ -29,9 +30,9 @@ import { ModalQueueJoin } from './modal';
 export const QueueProvider = ({ children }: { children: ReactNode }) => {
     const [isReady, setIsReady] = useState(false);
     const [users, setUsers] = useState<QueueMember[]>([]);
-    const [messages, setMessages] = useState<ServerQueueMessage[]>([]);
+    const [messages, setMessages] = useState<ChatLog[]>([]);
     const [showChat, setShowChat] = useState(false);
-    const [servers, setServers] = useState<ServerQueueState[]>([]);
+    const [lobbies, setLobbies] = useState<LobbyState[]>([]);
     const { profile } = useAuth();
     const [chatStatus, setChatStatus] = useState<ChatStatus>(profile.playerqueue_chat_status);
     const [reason, setReason] = useState<string>('');
@@ -40,7 +41,8 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
 
     const { readyState, sendJsonMessage, lastJsonMessage } = useWebSocket(websocketURL(), {
         queryParams: { token: readAccessToken() },
-        share: false,
+        heartbeat: true,
+        share: true,
         //reconnectInterval: 10,
         shouldReconnect: () => true
     });
@@ -58,7 +60,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
                         permission_level: PermissionLevel.Reserved,
                         personaname: 'SYSTEM',
                         steam_id: 'SYSTEM'
-                    } as ServerQueueMessage
+                    } as ChatLog
                 ]);
                 break;
             case ReadyState.CLOSED:
@@ -72,7 +74,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
                         permission_level: PermissionLevel.Reserved,
                         personaname: 'SYSTEM',
                         steam_id: 'SYSTEM'
-                    } as ServerQueueMessage
+                    } as ChatLog
                 ]);
                 break;
             default:
@@ -97,7 +99,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
 
             case Operation.Message: {
                 setMessages((prev) => {
-                    const messages = (request.payload as ServerQueueMessage[]).map(transformCreatedOnDate);
+                    const messages = (request.payload as MessagePayload).messages.map(transformCreatedOnDate);
                     let all = [...prev, ...messages];
                     if (all.length > 100) {
                         all = all.slice(all.length - 100, 100);
@@ -132,7 +134,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
             setUsers(state.users);
         }
         if (state.update_servers) {
-            setServers(state.servers);
+            setLobbies(state.lobbies);
         }
     };
 
@@ -152,7 +154,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
     };
 
     const sendMessage = (body_md: string) => {
-        sendJsonMessage<QueueRequest<createMessage>>({
+        sendJsonMessage<QueueRequest<MessageCreatePayload>>({
             op: Operation.Message,
             payload: {
                 body_md
@@ -161,15 +163,15 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
     };
 
     const joinQueue = (servers: string[]) => {
-        sendJsonMessage<QueueRequest<JoinQueuePayload>>({
+        sendJsonMessage<QueueRequest<JoinPayload>>({
             op: Operation.JoinQueue,
             payload: {
                 servers: servers.map(Number)
             }
         });
     };
     const leaveQueue = (servers: string[]) => {
-        sendJsonMessage<QueueRequest<LeaveQueuePayload>>({
+        sendJsonMessage<QueueRequest<LeavePayload>>({
             op: Operation.LeaveQueue,
             payload: {
                 servers: servers.map(Number)
@@ -181,7 +183,7 @@ export const QueueProvider = ({ children }: { children: ReactNode }) => {
         <QueueCtx.Provider
             value={{
                 users,
-                servers,
+                lobbies,
                 messages,
                 isReady,
                 sendMessage,

diff --git a/frontend/src/component/ServerList.tsx b/frontend/src/component/ServerList.tsx
@@ -25,7 +25,7 @@ export const ServerList = () => {
     const { sendFlash } = useUserFlashCtx();
     const { profile, hasPermission } = useAuth();
     const { selectedServers } = useMapStateCtx();
-    const { joinQueue, leaveQueue, servers } = useQueueCtx();
+    const { joinQueue, leaveQueue, lobbies } = useQueueCtx();
     const columnHelper = createColumnHelper<ServerRow>();
 
     const metaServers = useMemo(() => {
@@ -35,7 +35,7 @@ export const ServerList = () => {
     const isQueued = (server_id: number) => {
         try {
             return Boolean(
-                servers.find((s) => s.server_id == server_id)?.members?.find((m) => m.steam_id == profile.steam_id)
+                lobbies.find((s) => s.server_id == server_id)?.members?.find((m) => m.steam_id == profile.steam_id)
             );
         } catch {
             return false;
@@ -119,8 +119,8 @@ export const ServerList = () => {
                 cell: (info) => {
                     const queued = isQueued(info.row.original.server_id);
 
-                    const count = servers
-                        ? (servers.find((value) => {
+                    const count = lobbies
+                        ? (lobbies.find((value) => {
                               return value.server_id == info.row.original.server_id;
                           })?.members?.length ?? 0)
                         : 0;
@@ -163,7 +163,7 @@ export const ServerList = () => {
                 )
             })
         ];
-    }, [servers, selectedServers, profile]);
+    }, [lobbies, selectedServers, profile]);
 
     const opts: TableOptions<ServerRow> = {
         data: metaServers,

diff --git a/frontend/src/component/modal/QueuePurgeModal.tsx b/frontend/src/component/modal/QueuePurgeModal.tsx
@@ -8,13 +8,13 @@ import { useForm } from '@tanstack/react-form';
 import { useMutation } from '@tanstack/react-query';
 import { zodValidator } from '@tanstack/zod-form-adapter';
 import { z } from 'zod';
-import { apiQueueMessagesDelete, ServerQueueMessage } from '../../api';
+import { apiQueueMessagesDelete, ChatLog } from '../../api';
 import { useUserFlashCtx } from '../../hooks/useUserFlashCtx.ts';
 import { Heading } from '../Heading';
 import { Buttons } from '../field/Buttons.tsx';
 import { TextFieldSimple } from '../field/TextFieldSimple.tsx';
 
-export const QueuePurgeModal = NiceModal.create(({ message }: { message: ServerQueueMessage }) => {
+export const QueuePurgeModal = NiceModal.create(({ message }: { message: ChatLog }) => {
     const modal = useModal();
     const { sendFlash } = useUserFlashCtx();
 

diff --git a/frontend/src/hooks/useQueueCtx.ts b/frontend/src/hooks/useQueueCtx.ts
@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { ChatStatus, QueueMember, ServerQueueMessage, ServerQueueState } from '../api';
+import { ChatStatus, QueueMember, ChatLog, LobbyState } from '../api';
 import { noop } from '../util/lists.ts';
 
 type QueueCtxProps = {
@@ -9,8 +9,8 @@ type QueueCtxProps = {
     chatStatus: ChatStatus;
     reason: string;
     users: QueueMember[];
-    servers: ServerQueueState[];
-    messages: ServerQueueMessage[];
+    lobbies: LobbyState[];
+    messages: ChatLog[];
     joinQueue: (serverIds: string[]) => void;
     leaveQueue: (serverIds: string[]) => void;
     sendMessage: (message: string) => void;
@@ -22,7 +22,7 @@ export const QueueCtx = createContext<QueueCtxProps>({
     chatStatus: 'noaccess',
     reason: '',
     users: [],
-    servers: [],
+    lobbies: [],
     messages: [],
     joinQueue: () => noop,
     leaveQueue: () => noop,

diff --git a/go.mod b/go.mod