feat: Add notification sound when goals are marked

web/src/app/(main)/legal/credits/page.tsx

@@ -0,0 +1,73 @@
+import { GitHub } from '@mui/icons-material';
+import { Box, Container, Typography } from '@mui/material';
+import Link from 'next/link';
+
+const contributors = [
+    {
+        name: 'cjs07',
+        github: 'https://github.com/cjs8487',
+    },
+    {
+        name: 'Floha258',
+        github: 'https://github.com/floha258',
+    },
+    {
+        name: 'lepelog',
+        github: 'https://github.com/lepelog',
+    },
+    {
+        name: 'tricksnl',
+        github: 'https://github.com/devbeoservice',
+    },
+];
+
+export default function Credits() {
+    return (
+        <Container sx={{ pt: 5 }}>
+            <Typography variant="h4" align="center" sx={{ mb: 2 }}>
+                Credits
+            </Typography>
+            <Typography sx={{ pb: 1 }}>
+                PlayBingo would not be possible without the contributions our
+                community.
+            </Typography>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {contributors.map((contributor) => (
+                    <Box key={contributor.name} sx={{ pb: 2 }}>
+                        <Box sx={{ pb: 1 }}>{contributor.name}</Box>
+                        <Box>
+                            <Link href={contributor.github}>
+                                <GitHub />
+                            </Link>
+                        </Box>
+                    </Box>
+                ))}
+            </Box>
+            <Box sx={{ pb: 4 }}>
+                <Typography>
+                    An additional, special rhanks to all the community members
+                    who have helped make PlayBingo better by providing feedback,
+                    finding bugs, and working with us to make PlayBingo the best
+                    it can be.
+                </Typography>
+            </Box>
+            <Box>
+                <Typography sx={{ pb: 1 }}>
+                    PlayBingo makes use of parts of the following works made
+                    available under the Creative Commons license.
+                </Typography>
+                <Typography variant="h5" sx={{ pb: 1 }}>
+                    Sound Effects
+                </Typography>
+                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    <Link
+                        href="https://lolurio.itch.io/lolurios-free-cozy-ui-sfx"
+                        style={{ color: 'inherit' }}
+                    >
+                        UI Sound Effects by lolurio (CC BY 4.0)
+                    </Link>
+                </Box>
+            </Box>
+        </Container>
+    );
+}

web/src/components/board/Cell.tsx

@@ -57,6 +57,7 @@ radial-gradient(circle at 40% 30%, rgba(147, 137, 137, 0.13) 0%, rgba(0,0,0,0) 9
         pointerEvents: 'none',
     },
 };
+
 interface BoardCellProps {
     goal?: Goal;
     completedPlayers: string[];

web/src/components/footer/Footer.tsx

@@ -85,6 +85,10 @@ function LargeFooter() {
                         | All Rights Reserved |{' '}
                         <Link href="/legal/privacy" component={NextLink}>
                             Privacy Policy
+                        </Link>{' '}
+                        |{' '}
+                        <Link href="/legal/credits" component={NextLink}>
+                            Credits
                         </Link>
                     </Typography>
                 </Box>

web/src/context/RoomContext.tsx

@@ -42,6 +42,8 @@ export enum ConnectionStatus {
     CLOSED, // connection was manually closed, and the user is completely disconnected
 }
 
+const notificationSound = new Audio('/goal_ping.ogg');
+
 interface CardRegenerateOptions {
     seed?: number;
     generationMode?: string;
@@ -264,7 +266,28 @@ export function RoomContextProvider({
                             !payload.cell
                         )
                             return;
-                        onCellUpdate(payload.row, payload.col, payload.cell);
+                        if (!board.hidden) {
+                            const newMarks =
+                                payload.cell.completedPlayers.filter(
+                                    (player) =>
+                                        !board.board[payload.row][
+                                            payload.col
+                                        ].completedPlayers.includes(player),
+                                );
+                            if (
+                                newMarks.length > 0 &&
+                                (newMarks.length > 1 ||
+                                    newMarks[0] !== connectedPlayer?.id)
+                            ) {
+                                notificationSound.play();
+                            }
+
+                            onCellUpdate(
+                                payload.row,
+                                payload.col,
+                                payload.cell,
+                            );
+                        }
                         break;
                     case 'syncBoard':
                         if (!payload.board) return;