Add game name to review page (#305)

Deduped all the game name usage to a single lib. Closes !281

<img width="785" alt="image.png" src="attachments/0f226438-fed1-40b2-81a9-2988dd2d4a33">

Reviewed-on: #305
Reviewed-by: Rhys Lloyd <quaternions@noreply@itzana.me>
Co-authored-by: itzaname <me@sliving.io>
Co-committed-by: itzaname <me@sliving.io>

web/src/app/_components/mapCard.tsx

@@ -4,6 +4,7 @@ import {StatusChip} from "@/app/_components/statusChip";
 import {Link} from "react-router-dom";
 import {useAssetThumbnail, useUserThumbnail} from "@/app/hooks/useThumbnails";
 import {useUsername} from "@/app/hooks/useUsername";
+import { getGameName } from "@/app/utils/games";
 
 interface MapCardProps {
 	displayName: string;
@@ -120,7 +121,7 @@ export function MapCard(props: MapCardProps) {
 									<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
 										<Explore sx={{ fontSize: '1rem', color: '#6366f1' }} />
 										<Typography variant="body2" color="text.secondary" fontSize="0.875rem">
-											{props.gameID === 1 ? 'Bhop' : props.gameID === 2 ? 'Surf' : props.gameID === 5 ? 'Fly Trials' : props.gameID === 4 ? 'Deathrun' : 'Unknown'}
+											{getGameName(props.gameID)}
 										</Typography>
 									</Box>
 									<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>

web/src/app/_components/review/ReviewItem.tsx

@@ -4,6 +4,7 @@ import { CopyableField } from "@/app/_components/review/CopyableField";
 import WorkflowStepper from "./WorkflowStepper";
 import { SubmissionInfo } from "@/app/ts/Submission";
 import { MapfixInfo } from "@/app/ts/Mapfix";
+import { getGameName } from "@/app/utils/games";
 
 // Define a field configuration for specific types
 interface FieldConfig {
@@ -76,6 +77,14 @@ export function ReviewItem({
                         </Grid>
                     );
                 })}
+                <Grid size={{ xs: 12, sm: 6}}>
+                    <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+                        Game
+                    </Typography>
+                    <Typography variant="body1">
+                        {getGameName(item.GameID)}
+                    </Typography>
+                </Grid>
             </Grid>
 
                 {/* Description Section */}

web/src/app/maps/[mapId]/fix/page.tsx

@@ -17,6 +17,7 @@ import Webpage from "@/app/_components/webpage";
 import { useParams, Link, useNavigate } from "react-router-dom";
 import {MapInfo} from "@/app/ts/Map";
 import {useTitle} from "@/app/hooks/useTitle";
+import { getGameName } from "@/app/utils/games";
 
 interface MapfixPayload {
 	AssetID: number;
@@ -24,13 +25,6 @@ interface MapfixPayload {
 	Description: string;
 }
 
-// Game ID mapping
-const gameTypes: Record<number, string> = {
-	1: "Bhop",
-	2: "Surf",
-	5: "Flytrials"
-};
-
 export default function MapfixInfoPage() {
 	const { mapId } = useParams<{ mapId: string }>();
 	const navigate = useNavigate();
@@ -67,12 +61,6 @@ export default function MapfixInfoPage() {
 		}
 	}, [mapId]);
 
-	// Get game type from game ID
-	const getGameType = (gameId: number | undefined): string => {
-		if (!gameId) return "Unknown";
-		return gameTypes[gameId] || "Unknown";
-	};
-
 	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
 		setIsSubmitting(true);
@@ -199,7 +187,7 @@ export default function MapfixInfoPage() {
 										label="Game Type"
 										variant="outlined"
 										fullWidth
-										value={getGameType(mapDetails?.GameID)}
+										value={mapDetails?.GameID ? getGameName(mapDetails.GameID) : "Unknown"}
 										disabled
 									/>
 								</Grid>

web/src/app/maps/[mapId]/page.tsx

@@ -7,6 +7,7 @@ import { Snackbar, Alert } from "@mui/material";
 import { MapfixStatus, type MapfixInfo, getMapfixStatusInfo } from "@/app/ts/Mapfix";
 import LaunchIcon from '@mui/icons-material/Launch';
 import { useAssetThumbnail } from "@/app/hooks/useThumbnails";
+import { getGameInfo } from "@/app/utils/games";
 
 // MUI Components
 import {
@@ -138,31 +139,6 @@ export default function MapDetails() {
     });
   };
 
-  const getGameInfo = (gameId: number) => {
-    switch (gameId) {
-      case 1:
-        return {
-          name: "Bhop",
-          color: "#2196f3" // blue
-        };
-      case 2:
-        return {
-          name: "Surf",
-          color: "#4caf50" // green
-        };
-      case 5:
-        return {
-          name: "Fly Trials",
-          color: "#ff9800" // orange
-        };
-      default:
-        return {
-          name: "Unknown",
-          color: "#9e9e9e" // gray
-        };
-    }
-  };
-
   const getStatusIcon = (iconName: string) => {
     switch (iconName) {
       case "Build": return BuildIcon;

web/src/app/maps/page.tsx

@@ -25,6 +25,7 @@ import { Link } from "react-router-dom";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import {useTitle} from "@/app/hooks/useTitle";
 import {usePrefetchThumbnails, useAssetThumbnail} from "@/app/hooks/useThumbnails";
+import { getGameName, getGameLabelStyles } from "@/app/utils/games";
 
 interface Map {
     ID: number;
@@ -37,14 +38,9 @@ interface Map {
 interface MapCardProps {
     map: Map;
     formatDate: (timestamp: number) => string;
-    getGameName: (gameId: number) => string;
-    getGameLabelStyles: (gameId: number) => {
-        bgcolor: string;
-        color: string;
-    };
 }
 
-function MapCard({ map, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
+function MapCard({ map, formatDate }: MapCardProps) {
     const { thumbnailUrl, isLoading } = useAssetThumbnail(map.ID, '420x420');
 
     return (
@@ -205,44 +201,6 @@ export default function MapsPage() {
         });
     };
 
-    const getGameName = (gameId: number) => {
-        switch (gameId) {
-            case 1:
-                return "Bhop";
-            case 2:
-                return "Surf";
-            case 5:
-                return "Fly Trials";
-            default:
-                return "Unknown";
-        }
-    };
-
-    const getGameLabelStyles = (gameId: number) => {
-        switch (gameId) {
-            case 1: // Bhop
-                return {
-                    bgcolor: "info.main",
-                    color: "white",
-                };
-            case 2: // Surf
-                return {
-                    bgcolor: "success.main",
-                    color: "white",
-                };
-            case 5: // Fly Trials
-                return {
-                    bgcolor: "warning.main",
-                    color: "white",
-                };
-            default: // Unknown
-                return {
-                    bgcolor: "grey.500",
-                    color: "white",
-                };
-        }
-    };
-
     return (
         <Webpage>
             <Container maxWidth="lg" sx={{py: 6}}>
@@ -334,8 +292,6 @@ export default function MapsPage() {
                                         <MapCard
                                             map={map}
                                             formatDate={formatDate}
-                                            getGameName={getGameName}
-                                            getGameLabelStyles={getGameLabelStyles}
                                         />
                                     </Grid>
                                 ))}

web/src/app/utils/games.ts

@@ -0,0 +1,62 @@
+export function getGameName(gameId: number): string {
+    switch (gameId) {
+        case 1:
+            return "Bhop";
+        case 2:
+            return "Surf";
+        case 5:
+            return "Fly Trials";
+        default:
+            return "Unknown";
+    }
+}
+
+export function getGameInfo(gameId: number) {
+    switch (gameId) {
+        case 1:
+            return {
+                name: "Bhop",
+                color: "#2196f3" // blue
+            };
+        case 2:
+            return {
+                name: "Surf",
+                color: "#4caf50" // green
+            };
+        case 5:
+            return {
+                name: "Fly Trials",
+                color: "#ff9800" // orange
+            };
+        default:
+            return {
+                name: "Unknown",
+                color: "#9e9e9e" // gray
+            };
+    }
+}
+
+export function getGameLabelStyles(gameId: number) {
+    switch (gameId) {
+        case 1: // Bhop
+            return {
+                bgcolor: "info.main",
+                color: "white",
+            };
+        case 2: // Surf
+            return {
+                bgcolor: "success.main",
+                color: "white",
+            };
+        case 5: // Fly Trials
+            return {
+                bgcolor: "warning.main",
+                color: "white",
+            };
+        default: // Unknown
+            return {
+                bgcolor: "grey.500",
+                color: "white",
+            };
+    }
+}