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

Compare commits

...

2 Commits
master ... ai

Author SHA1 Message Date
Quaternions
3909efda81
web: ai maps page again 2025-04-04 16:14:46 -07:00
Quaternions
22aad64844
web: replace maps page with ai 2025-04-04 16:14:46 -07:00
1 changed files with 59 additions and 33 deletions

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

@ -7,51 +7,77 @@ 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 { interface ButtonProps {
name: string, name: string;
href: string, href: string;
} }
function Button(button: Button) {
function Button({ name, href }: ButtonProps) {
return ( return (
<Link href={button.href}> <Link href={href}>
<button>{button.name}</button> <button className="mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl shadow transition">
{name}
</button>
</Link> </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(() => {
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() { async function getMap() {
const res = await fetch(`/api/maps/${mapId}`) const res = await fetch(`/api/maps/${mapId}`);
if (res.ok) { if (res.ok) {
setMap(await res.json()) setMap(await res.json());
} }
} }
getMap() getMap();
}, [mapId]) }, [mapId]);
if (!map) { if (!map) {
return <Webpage> return (
{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */} <Webpage>
</Webpage> <div className="p-12 text-center text-gray-500">Loading map data...</div>
</Webpage>
);
} }
return (
<Webpage> return (
<p>MapID: { mapId }</p> <Webpage>
<p>Display Name: { map.DisplayName }</p> <div className="max-w-4xl mx-auto p-6">
<p>Creator: { map.Creator }</p> <div className="bg-white dark:bg-zinc-900 shadow-xl rounded-2xl p-8 space-y-8">
<p>GameID: { map.GameID }</p> {/* Title */}
<p>Release Date: { map.Date }</p> <h1 className="text-3xl font-bold text-center">{map.DisplayName}</h1>
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
<aside className="review-area"> {/* Image */}
<section className="map-image-area"> <div className="w-full overflow-hidden rounded-xl border border-zinc-300 dark:border-zinc-700 shadow-md">
<MapImage id={map.ID}/> <MapImage id={map.ID} />
</section> </div>
</aside>
</Webpage> {/* Info grid */}
) <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-zinc-700 dark:text-zinc-300">
<div>
<p className="text-sm font-medium text-zinc-500">Creator</p>
<p className="text-lg">{map.Creator}</p>
</div>
<div>
<p className="text-sm font-medium text-zinc-500">Game ID</p>
<p className="text-lg">{map.GameID}</p>
</div>
<div>
<p className="text-sm font-medium text-zinc-500">Release Date</p>
<p className="text-lg">{map.Date}</p>
</div>
</div>
{/* Button */}
<div className="text-center">
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
</div>
</div>
</div>
</Webpage>
);
} }