From 22aad64844f2a09fa0e0ca33ae02edf036275339 Mon Sep 17 00:00:00 2001
From: Quaternions <krakow20@gmail.com>
Date: Fri, 4 Apr 2025 16:01:02 -0700
Subject: [PATCH] web: replace maps page with ai
---
web/src/app/maps/[mapId]/page.tsx | 77 ++++++++++++++++++-------------
1 file changed, 44 insertions(+), 33 deletions(-)
diff --git a/web/src/app/maps/[mapId]/page.tsx b/web/src/app/maps/[mapId]/page.tsx
index 46e127b..b27349c 100644
--- a/web/src/app/maps/[mapId]/page.tsx
+++ b/web/src/app/maps/[mapId]/page.tsx
@@ -7,51 +7,62 @@ import { useParams } from "next/navigation";
import Link from "next/link";
import { useState, useEffect } from "react";
-interface Button {
- name: string,
- href: string,
+interface ButtonProps {
+ name: string;
+ href: string;
}
-function Button(button: Button) {
+
+function Button({ name, href }: ButtonProps) {
return (
- <Link href={button.href}>
- <button>{button.name}</button>
+ <Link href={href}>
+ <button className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md transition">
+ {name}
+ </button>
</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(() => { // 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)
+ useEffect(() => {
async function getMap() {
- const res = await fetch(`/api/maps/${mapId}`)
+ const res = await fetch(`/api/maps/${mapId}`);
if (res.ok) {
- setMap(await res.json())
+ setMap(await res.json());
}
}
- getMap()
- }, [mapId])
+ getMap();
+ }, [mapId]);
if (!map) {
- return <Webpage>
- {/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
- </Webpage>
+ return (
+ <Webpage>
+ <div className="p-8 text-center text-gray-500">Loading map data...</div>
+ </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: { map.Date }</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>
- )
+
+ return (
+ <Webpage>
+ <div className="max-w-4xl mx-auto p-4">
+ <div className="mb-6">
+ <h1 className="text-3xl font-bold mb-2">{map.DisplayName}</h1>
+ <div className="text-gray-700">
+ <p><strong>MapID:</strong> {mapId}</p>
+ <p><strong>Creator:</strong> {map.Creator}</p>
+ <p><strong>GameID:</strong> {map.GameID}</p>
+ <p><strong>Release Date:</strong> {map.Date}</p>
+ </div>
+ </div>
+
+ <div className="rounded-xl overflow-hidden shadow-lg border mb-6">
+ <MapImage id={map.ID} />
+ </div>
+
+ <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
+ </div>
+ </Webpage>
+ );
}