StrafesNET/maps-service
5
Fork 0
Code Issues15 Pull Requests1 Packages Projects Releases Wiki Activity

web: ai the maps page

Browse Source
This commit is contained in:
Quaternions 2025-04-04 19:31:30 -07:00
parent 4e7ee9dc5a
commit e376e02dc1
Signed by: Quaternions
GPG Key ID: D0DF5964F79AC131
1 changed files with 74 additions and 40 deletions

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

@ -7,51 +7,85 @@ import { useParams } from "next/navigation";
import Link from "next/link";
import { useState, useEffect } from "react";
interface Button {
name: string,
href: string,
// MUI Components
import {
Typography,
Box,
Button as MuiButton,
Card,
CardContent,
Skeleton
} from "@mui/material";
interface ButtonProps {
name: string;
href: string;
}
function Button(button: Button) {
return (
<Link href={button.href}>
<button>{button.name}</button>
</Link>
)
function Button({ name, href }: ButtonProps) {
return (
<Link href={href} passHref>
<MuiButton variant="contained" color="primary" sx={{ mt: 2 }}>
{name}
</MuiButton>
</Link>
);
}
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 (
<Webpage>
<p>MapID: { mapId }</p>
<p>Display Name: { map.DisplayName }</p>
<p>Creator: { map.Creator }</p>
<p>GameID: { map.GameID }</p>
<p>Release Date: { new Date(map.Date * 1000).toLocaleString() }</p>
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
<aside className="review-area">
<section className="map-image-area">
<MapImage id={map.ID}/>
</section>
</aside>
</Webpage>
)
<Webpage>
{!map ? (
<Card>
<CardContent>
<Skeleton variant="text" width={200} height={40} />
<Skeleton variant="text" width={300} />
<Skeleton variant="rectangular" height={200} />
</CardContent>
</Card>
) : (
<Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
<Box flex={1}>
<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>
);
}