More backgrounds. Work on message purging.

frontend/package.json

@@ -99,6 +99,7 @@
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
     "react-modal-image": "^2.6.0",
+    "react-scrollable-feed": "^2.0.2",
     "react-timer-hook": "^3.0.8",
     "react-use-websocket": "^4.11.1",
     "steamid": "^2.1.0",

frontend/src/api/profile.ts

@@ -34,6 +34,8 @@ export interface UserNotification {
     created_on: Date;
 }
 
+export type ChatStatus = 'readwrite' | 'readonly' | 'noaccess';
+
 export interface UserProfile extends TimeStamped {
     steam_id: string;
     permission_level: PermissionLevel;
@@ -43,6 +45,7 @@ export interface UserProfile extends TimeStamped {
     avatarhash: string;
     ban_id: number;
     muted: boolean;
+    playerqueue_chat_status: ChatStatus;
 }
 
 export interface Person extends UserProfile {

frontend/src/api/queue.ts

@@ -8,7 +8,8 @@ export enum Operation {
     MessageSend,
     MessageRecv,
     StateUpdate,
-    StartGame
+    StartGame,
+    Purge
 }
 
 export type QueueMember = {
@@ -22,6 +23,10 @@ export type QueuePayload<T> = {
     payload: T;
 };
 
+export type PurgePayload = {
+    message_ids: string[];
+};
+
 export type pingPayload = QueuePayload<{ created_on: Date }>;
 
 export type clientQueueState = {
@@ -39,7 +44,7 @@ export type ServerQueueMessage = {
     avatarhash: string;
     permission_level: PermissionLevel;
     body_md: string;
-    id: string;
+    message_id: string;
 };
 
 export type JoinQueuePayload = {

frontend/src/auth.tsx

@@ -43,7 +43,8 @@ export function AuthProvider({
                 discord_id: '',
                 created_on: new Date(),
                 updated_on: new Date(),
-                patreon_id: ''
+                patreon_id: '',
+                playerqueue_chat_status: 'noaccess'
             });
         }
     }, [setProfile]);
@@ -73,7 +74,7 @@ export function AuthProvider({
                 await logout();
             }
         };
-        loadProfile();
+        loadProfile().catch(logErr);
     }, [login, logout]);
 
     return (

frontend/src/component/BackgroundImageProvider.tsx

@@ -16,7 +16,7 @@ function getImageUrl(name: string | number) {
 }
 
 const randBGNum = () => {
-    const numberOfBgImages = 115;
+    const numberOfBgImages = 265;
 
     return Math.floor(Math.random() * numberOfBgImages);
 };

frontend/src/component/PersonCell.tsx

@@ -24,7 +24,7 @@ export const PersonCell = ({ steam_id, avatar_hash, personaname, onClick, showCo
     const { sendFlash } = useUserFlashCtx();
 
     return (
-        <Stack minWidth={200} direction={'row'} alignItems={'center'}>
+        <Stack minWidth={200} direction={'row'} alignItems={'center'} overflow={'hidden'}>
             {showCopy && (
                 <Tooltip title={'Copy Steamid'}>
                     <IconButton

frontend/src/component/QueueChat.tsx

@@ -1,5 +1,7 @@
-import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FormEvent, useCallback, useState } from 'react';
+import ScrollableFeed from 'react-scrollable-feed';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import PersonIcon from '@mui/icons-material/Person';
 import PersonOffIcon from '@mui/icons-material/PersonOff';
 import SendIcon from '@mui/icons-material/Send';
@@ -22,23 +24,10 @@ import { SubmitButton } from './modal/Buttons.tsx';
 
 export const QueueChat = () => {
     const { messages, isReady, sendMessage, showChat, users } = useQueueCtx();
-    const { hasPermission } = useAuth();
+    const { hasPermission, profile } = useAuth();
     const [showPeople, setShowPeople] = useState<boolean>(false);
     const [msg, setMsg] = useState<string>('');
     const [sending, setSending] = useState(false);
-    const messagesEndRef = useRef<null | HTMLDivElement>(null);
-
-    const scrollToBottom = () => {
-        if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
-        }
-    };
-
-    useEffect(() => {
-        if (showChat) {
-            scrollToBottom();
-        }
-    }, [messages, showChat]);
 
     const onSubmit = useCallback(
         async (event: FormEvent<HTMLFormElement | HTMLDivElement>) => {
@@ -53,16 +42,17 @@ export const QueueChat = () => {
         },
         [msg]
     );
+    const isMod = hasPermission(PermissionLevel.Moderator);
 
-    if (!hasPermission(PermissionLevel.Moderator)) {
+    if (!isMod || profile.playerqueue_chat_status == 'noaccess') {
         return <></>;
     }
 
     return (
         <Collapse in={showChat}>
-            <Grid container spacing={1}>
+            <Grid container spacing={1} sx={{ marginBottom: 3 }}>
                 <Grid xs={showPeople ? 10 : 12}>
-                    <Paper sx={{ marginBottom: 3 }}>
+                    <Paper>
                         <Stack
                             maxHeight={200}
                             minHeight={200}
@@ -74,17 +64,24 @@ export const QueueChat = () => {
                             {!isReady ? (
                                 <LoadingPlaceholder></LoadingPlaceholder>
                             ) : (
-                                messages.map((message, i) => {
-                                    return <ChatRow message={message} key={`${message.id}-${i}`} />;
-                                })
+                                <ScrollableFeed>
+                                    {messages.map((message, i) => {
+                                        return (
+                                            <ChatRow
+                                                message={message}
+                                                key={`${message.message_id}-${i}`}
+                                                showControls={isMod}
+                                            />
+                                        );
+                                    })}
+                                </ScrollableFeed>
                             )}
-                            {isReady && showChat && <div ref={messagesEndRef} key={'hi'} />}
                         </Stack>
 
                         <form onSubmit={onSubmit}>
-                            <Stack direction={'row'} spacing={1}>
+                            <Stack direction={'row'} spacing={1} padding={2}>
                                 <TextField
-                                    disabled={sending || !isReady}
+                                    disabled={sending || !isReady || profile.playerqueue_chat_status != 'readwrite'}
                                     onSubmit={onSubmit}
                                     fullWidth={true}
                                     size={'small'}
@@ -94,8 +91,9 @@ export const QueueChat = () => {
                                         setMsg(event.target.value);
                                     }}
                                 />
+
                                 <IconButton
-                                    color={'warning'}
+                                    color={'primary'}
                                     onClick={() => {
                                         setShowPeople((prevState) => !prevState);
                                     }}
@@ -181,9 +179,10 @@ const ChatName = ({
         </ButtonLink>
     );
 };
-const ChatRow = ({ message }: { message: ServerQueueMessage }) => {
+
+const ChatRow = ({ message, showControls }: { message: ServerQueueMessage; showControls: boolean }) => {
     return (
-        <Grid container key={`${message.id}-id`} spacing={1}>
+        <Grid container key={`${message.message_id}-id`} spacing={1} paddingLeft={1} paddingRight={1}>
             <Grid xs={2} alignItems="flex-start" justifyContent="flex-start">
                 <ChatName
                     personaname={message.personaname}
@@ -192,9 +191,25 @@ const ChatRow = ({ message }: { message: ServerQueueMessage }) => {
                 />
             </Grid>
             <Grid xs={10}>
-                <Typography variant="body1" color="text">
-                    {message.body_md}
-                </Typography>
+                <Stack direction={'row'} spacing={1}>
+                    {showControls && (
+                        <IconButton
+                            color={'primary'}
+                            sx={{
+                                size: '10',
+                                padding: 0,
+                                borderLeft: '1px solid #666',
+                                borderRadius: 0,
+                                paddingLeft: 1
+                            }}
+                        >
+                            <ManageAccountsIcon color={'error'} />
+                        </IconButton>
+                    )}
+                    <Typography variant="body1" color="text" sx={{ borderLeft: '1px solid #666', paddingLeft: 1 }}>
+                        {message.body_md}
+                    </Typography>
+                </Stack>
             </Grid>
         </Grid>
     );

frontend/src/component/QueueHelp.tsx

@@ -0,0 +1,44 @@
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+export const QueueHelp = () => {
+    return (
+        <Paper>
+            <Grid container>
+                <Grid xs={12} padding={2}>
+                    <Typography variant={'h2'} padding={1}>
+                        Welcome To The Server Queue!
+                    </Typography>
+                    <Typography variant={'body1'} padding={1}>
+                        The primary goal of the queueing system is to help users in seeding a empty server. This does
+                        not mean that it can only be used for empty servers, If you wish to join a server only once its
+                        18/24, then that will work as well. This will not place all players on the team automatically.
+                    </Typography>
+                    <Typography variant={'body1'} padding={1}>
+                        To queue for servers, simply click on the queue icon for the relevant servers. Once the queue
+                        count reaches the minimum required amount of participants, the queue window will popup for
+                        players to join.
+                    </Typography>
+                    <Typography variant={'body1'} padding={1}>
+                        The current minimum queue size is <span style={{ fontWeight: 700 }}>4</span>
+                    </Typography>
+                    <Typography variant={'body1'} padding={1}>
+                        There is a audible sound that plays when your queue is ready, be sure to have sound on if you
+                        are going to rely on this.
+                    </Typography>
+                    <Typography variant={'body1'} padding={1}>
+                        Players can chat using the queue chat window above. Its accessible though the keyboard icon on
+                        the top navigation bar of the site. Note that the same rules as far as language applies here as
+                        it does in-game on the servers. Failure to comply with this will have your queue privileges
+                        revoked and possibly further actions taken as well.
+                    </Typography>
+                    <Typography variant={'body1'} padding={1} fontWeight={'bold'} textAlign={'center'}>
+                        This functionality requires that you be logged in, and on the same account that you are playing
+                        on.
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Paper>
+    );
+};