web: ai the maps page

This commit is contained in:
2025-04-04 19:31:30 -07:00
parent 4e7ee9dc5a
commit e376e02dc1

@ -7,51 +7,85 @@ import { useParams } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
interface Button { // MUI Components
name: string, import {
href: string, Typography,
Box,
Button as MuiButton,
Card,
CardContent,
Skeleton
} from "@mui/material";
interface ButtonProps {
name: string;
href: string;
} }
function Button(button: Button) {
return ( function Button({ name, href }: ButtonProps) {
<Link href={button.href}> return (
<button>{button.name}</button> <Link href={href} passHref>
</Link> <MuiButton variant="contained" color="primary" sx={{ mt: 2 }}>
) {name}
</MuiButton>
</Link>
);
} }
export default function Map() { export default function Map() {
const {mapId} = useParams() const { mapId } = useParams();
const [map, setMap] = useState<MapInfo | null>(null);
const [map, setMap] = useState<MapInfo | null>(null) useEffect(() => {
async function getMap() {
const res = await fetch(`/api/maps/${mapId}`);
if (res.ok) {
setMap(await res.json());
}
}
getMap();
}, [mapId]);
useEffect(() => { // needs to be client sided since server doesn't have a session, nextjs got mad at me for exporting an async function: (https://nextjs.org/docs/messages/no-async-client-component)
async function getMap() {
const res = await fetch(`/api/maps/${mapId}`)
if (res.ok) {
setMap(await res.json())
}
}
getMap()
}, [mapId])
if (!map) {
return <Webpage>
{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
</Webpage>
}
return ( return (
<Webpage> <Webpage>
<p>MapID: { mapId }</p> {!map ? (
<p>Display Name: { map.DisplayName }</p> <Card>
<p>Creator: { map.Creator }</p> <CardContent>
<p>GameID: { map.GameID }</p> <Skeleton variant="text" width={200} height={40} />
<p>Release Date: { new Date(map.Date * 1000).toLocaleString() }</p> <Skeleton variant="text" width={300} />
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/> <Skeleton variant="rectangular" height={200} />
<aside className="review-area"> </CardContent>
<section className="map-image-area"> </Card>
<MapImage id={map.ID}/> ) : (
</section> <Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
</aside> <Box flex={1}>
</Webpage> <Card>
) <CardContent>
<Typography variant="h5" gutterBottom>
Map Info
</Typography>
<Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
<Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
<Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
<Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
<Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
</CardContent>
</Card>
</Box>
<Box flex={1}>
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Map Preview
</Typography>
<MapImage id={map.ID} />
</CardContent>
</Card>
</Box>
</Box>
)}
</Webpage>
);
} }