Initial support for randomized backgounds

frontend/src/component/BackgroundImageProvider.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import PauseIcon from '@mui/icons-material/Pause';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { GlobalStyles, Stack } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+function getImageUrl(name: string | number) {
+    // note that this does not include files in subdirectories
+    if (import.meta.env.MODE === 'development') {
+        return `/public/bg/${name}.png`;
+    } else {
+        return `/bg/${name}`;
+    }
+}
+
+const randBGNum = () => {
+    const numberOfBgImages = 115;
+
+    return Math.floor(Math.random() * numberOfBgImages);
+};
+
+const getPausedState = () => {
+    const bgPaused = localStorage.getItem('bg_paused');
+    if (!bgPaused) {
+        return false;
+    }
+
+    return bgPaused == 'true';
+};
+
+const savePausedState = (state: boolean) => {
+    localStorage.setItem('bg_paused', state.toString());
+};
+
+const saveBGNum = (num: number) => {
+    localStorage.setItem('bg_num', num.toString());
+};
+
+const getBGNum = () => {
+    return Number(localStorage.getItem('bg_num'));
+};
+
+export const BackgroundImageProvider = () => {
+    const [paused, setPaused] = useState(getPausedState());
+    const [num, setNum] = useState(() => {
+        if (paused) {
+            return getBGNum();
+        }
+        return randBGNum();
+    });
+
+    const setBG = (num: number) => {
+        setNum(num);
+        saveBGNum(num);
+    };
+
+    const togglePaused = () => {
+        setPaused((prev) => {
+            savePausedState(!prev);
+            return !prev;
+        });
+    };
+
+    useEffect(() => {
+        saveBGNum(num);
+    }, [num]);
+
+    return (
+        <>
+            <div
+                style={{
+                    position: 'absolute',
+                    top: 50,
+                    right: 0
+                }}
+            >
+                <Stack direction={'row'} spacing={1}>
+                    <Tooltip title={'Randomly select a background image'}>
+                        <IconButton
+                            onClick={() => {
+                                setBG(randBGNum());
+                            }}
+                        >
+                            <RefreshIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <Tooltip title={'Pause randomly selecting new backgrounds'}>
+                        <IconButton
+                            onClick={() => {
+                                togglePaused();
+                            }}
+                        >
+                            {paused ? <PlayArrowIcon /> : <PauseIcon />}
+                        </IconButton>
+                    </Tooltip>
+                </Stack>
+            </div>
+            <GlobalStyles
+                styles={{
+                    body: {
+                        backgroundColor: '#fff',
+                        backgroundImage: `url(${getImageUrl(num)})`,
+                        backgroundRepeat: 'repeat'
+                    }
+                }}
+            />
+        </>
+    );
+};

frontend/src/component/NewsList.tsx

@@ -23,7 +23,7 @@ export const NewsList = ({ setSelectedNewsEntry }: NewsListProps) => {
         }
     });
     return (
-        <Stack spacing={3} padding={3}>
+        <Stack spacing={2} padding={2}>
             <List dense={true}>
                 {isLoading ? (
                     <LoadingPlaceholder />

frontend/src/component/NewsView.tsx

@@ -23,7 +23,7 @@ export const NewsView = ({ itemsPerPage }: NewsViewProps) => {
     });
 
     return (
-        <Stack spacing={3}>
+        <Stack spacing={2}>
             {!isLoading &&
                 (articles || [])?.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage).map((article) => {
                     if (!article.created_on || !article.updated_on) {

frontend/src/component/QueueChat.tsx

@@ -1,8 +1,11 @@
 import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import PersonIcon from '@mui/icons-material/Person';
+import PersonOffIcon from '@mui/icons-material/PersonOff';
 import SendIcon from '@mui/icons-material/Send';
 import Avatar from '@mui/material/Avatar';
 import Collapse from '@mui/material/Collapse';
+import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
@@ -18,8 +21,9 @@ import { LoadingPlaceholder } from './LoadingPlaceholder.tsx';
 import { SubmitButton } from './modal/Buttons.tsx';
 
 export const QueueChat = () => {
-    const { messages, isReady, sendMessage, showChat } = useQueueCtx();
+    const { messages, isReady, sendMessage, showChat, users } = useQueueCtx();
     const { hasPermission } = useAuth();
+    const [showPeople, setShowPeople] = useState<boolean>(false);
     const [msg, setMsg] = useState<string>('');
     const [sending, setSending] = useState(false);
     const messagesEndRef = useRef<null | HTMLDivElement>(null);
@@ -31,8 +35,10 @@ export const QueueChat = () => {
     };
 
     useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
+        if (showChat) {
+            scrollToBottom();
+        }
+    }, [messages, showChat]);
 
     const onSubmit = useCallback(
         async (event: FormEvent<HTMLFormElement | HTMLDivElement>) => {
@@ -54,27 +60,27 @@ export const QueueChat = () => {
 
     return (
         <Collapse in={showChat}>
-            <Paper sx={{ marginBottom: 3 }}>
-                <Stack
-                    maxHeight={200}
-                    minHeight={200}
-                    overflow={'auto'}
-                    sx={{ overflowX: 'hidden' }}
-                    direction={'column'}
-                    padding={1}
-                >
-                    {!isReady ? (
-                        <LoadingPlaceholder></LoadingPlaceholder>
-                    ) : (
-                        messages.map((message, i) => {
-                            return <ChatRow message={message} key={`${message.id}-${i}`} />;
-                        })
-                    )}
-                    <span ref={messagesEndRef} key={'hi'} />
-                </Stack>
+            <Grid container spacing={1}>
+                <Grid xs={showPeople ? 10 : 12}>
+                    <Paper sx={{ marginBottom: 3 }}>
+                        <Stack
+                            maxHeight={200}
+                            minHeight={200}
+                            overflow={'auto'}
+                            sx={{ overflowX: 'hidden' }}
+                            direction={'column'}
+                            padding={1}
+                        >
+                            {!isReady ? (
+                                <LoadingPlaceholder></LoadingPlaceholder>
+                            ) : (
+                                messages.map((message, i) => {
+                                    return <ChatRow message={message} key={`${message.id}-${i}`} />;
+                                })
+                            )}
+                            {isReady && showChat && <div ref={messagesEndRef} key={'hi'} />}
+                        </Stack>
 
-                <Grid container padding={1}>
-                    <Grid xs={12}>
                         <form onSubmit={onSubmit}>
                             <Stack direction={'row'} spacing={1}>
                                 <TextField
@@ -88,16 +94,49 @@ export const QueueChat = () => {
                                         setMsg(event.target.value);
                                     }}
                                 />
+                                <IconButton
+                                    color={'warning'}
+                                    onClick={() => {
+                                        setShowPeople((prevState) => !prevState);
+                                    }}
+                                >
+                                    {showPeople ? <PersonIcon /> : <PersonOffIcon />}
+                                </IconButton>
                                 <SubmitButton
                                     label={'Send'}
                                     startIcon={sending ? <HourglassBottomIcon /> : <SendIcon />}
                                     size={'small'}
                                 />
                             </Stack>
                         </form>
-                    </Grid>
+                    </Paper>
                 </Grid>
-            </Paper>
+                {showPeople && (
+                    <Grid xs={2}>
+                        <Paper>
+                            <Stack
+                                maxHeight={237}
+                                minHeight={237}
+                                overflow={'auto'}
+                                sx={{ overflowX: 'hidden' }}
+                                direction={'column'}
+                                padding={1}
+                            >
+                                {users.map((u) => {
+                                    return (
+                                        <ChatName
+                                            key={`memberlist-${u.steam_id}`}
+                                            personaname={u.name}
+                                            steam_id={u.steam_id}
+                                            avatarhash={u.hash}
+                                        />
+                                    );
+                                })}
+                            </Stack>
+                        </Paper>
+                    </Grid>
+                )}
+            </Grid>
         </Collapse>
     );
 };

frontend/src/routes/__root.tsx

@@ -1,18 +1,18 @@
-import { Fragment, ReactNode, useCallback, useMemo, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import NiceModal from '@ebay/nice-modal-react';
 import { PaletteMode } from '@mui/material';
 import { AlertColor } from '@mui/material/Alert';
 import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import GlobalStyles from '@mui/system/GlobalStyles';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
 import { PermissionLevel } from '../api';
 import { AuthContextProps } from '../auth.tsx';
+import { BackgroundImageProvider } from '../component/BackgroundImageProvider.tsx';
 import { Flash, Flashes } from '../component/Flashes.tsx';
 import { Footer } from '../component/Footer.tsx';
 import { LogoutHandler } from '../component/LogoutHandler.tsx';
@@ -23,7 +23,6 @@ import { TopBar } from '../component/TopBar.tsx';
 import { ColourModeContext } from '../contexts/ColourModeContext.tsx';
 import { UserFlashCtx } from '../contexts/UserFlashCtx.tsx';
 import { useAuth } from '../hooks/useAuth.ts';
-import * as bg from '../images/bg.jpg';
 import { createThemeByMode } from '../theme.ts';
 import { checkFeatureEnabled } from '../util/features.ts';
 
@@ -89,33 +88,28 @@ function Root() {
                     <Fragment>
                         <ColourModeContext.Provider value={colorMode}>
                             <ThemeProvider theme={theme}>
-                                <BackgroundImageProvider>
-                                    <NotificationsProvider>
-                                        <NiceModal.Provider>
-                                            <LogoutHandler />
-                                            <CssBaseline />
-                                            <GlobalStyles
-                                                styles={{
-                                                    body: { backgroundImage: bg.default }
+                                <BackgroundImageProvider />
+                                <NotificationsProvider>
+                                    <NiceModal.Provider>
+                                        <LogoutHandler />
+                                        <CssBaseline />
+
+                                        <Container maxWidth={'lg'}>
+                                            <TopBar />
+                                            <div
+                                                style={{
+                                                    marginTop: 24
                                                 }}
-                                            />
-                                            <Container maxWidth={'lg'}>
-                                                <TopBar />
-                                                <div
-                                                    style={{
-                                                        marginTop: 24
-                                                    }}
-                                                >
-                                                    {checkFeatureEnabled('playerqueue_enabled') &&
-                                                        hasPermission(PermissionLevel.Moderator) && <QueueChat />}
-                                                    <Outlet />
-                                                </div>
-                                                <Footer />
-                                            </Container>
-                                            <Flashes />
-                                        </NiceModal.Provider>
-                                    </NotificationsProvider>
-                                </BackgroundImageProvider>
+                                            >
+                                                {checkFeatureEnabled('playerqueue_enabled') &&
+                                                    hasPermission(PermissionLevel.Moderator) && <QueueChat />}
+                                                <Outlet />
+                                            </div>
+                                            <Footer />
+                                        </Container>
+                                        <Flashes />
+                                    </NiceModal.Provider>
+                                </NotificationsProvider>
                             </ThemeProvider>
                         </ColourModeContext.Provider>
                     </Fragment>
@@ -124,19 +118,3 @@ function Root() {
         </UserFlashCtx.Provider>
     );
 }
-
-const BackgroundImageProvider = ({ children }: { children: ReactNode }) => {
-    return (
-        <div
-            style={{
-                backgroundColor: '#000',
-                backgroundSize: '100%',
-                backgroundImage: `url(${bg.default})`,
-                backgroundRepeat: 'repeat',
-                height: '100%'
-            }}
-        >
-            {children}
-        </div>
-    );
-};

frontend/src/routes/_auth.forums.index.tsx

@@ -207,12 +207,12 @@ function ForumOverview() {
     }, [overview?.categories, sendFlash]);
 
     return (
-        <Grid container spacing={3}>
+        <Grid container spacing={2}>
             <Grid xs={12}>
                 <Typography variant={'h2'}>{appInfo.site_name} community</Typography>
             </Grid>
             <Grid md={9} xs={12}>
-                <Stack spacing={3}>
+                <Stack spacing={2}>
                     {isLoading ? (
                         <LoadingPlaceholder />
                     ) : (
@@ -225,7 +225,7 @@ function ForumOverview() {
                 </Stack>
             </Grid>
             <Grid md={3} xs={12}>
-                <Stack spacing={3}>
+                <Stack spacing={2}>
                     <ForumRecentMessageActivity />
                     <ForumRecentUserActivity />
                     {hasPermission(PermissionLevel.Moderator) && (