web: add bare bones map info

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

@@ -1,8 +1,10 @@
 "use client"
 
+import { MapInfo } from "@/app/ts/Map";
 import Webpage from "@/app/_components/webpage";
 import { useParams } from "next/navigation";
 import Link from "next/link";
+import { useState, useEffect } from "react";
 
 interface Button {
 	name: string,
@@ -17,12 +19,33 @@ function Button(button: Button) {
 }
 
 export default function Map() {
-    const { mapId } = useParams()
+	const {mapId} = useParams()
 
-    return (
-        <Webpage>
-            <p>map { mapId }</p>
-            <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
-        </Webpage>
-    );
+  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)
+		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: { map.Date }</p>
+	      <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
+      </Webpage>
+	)
 }

web/src/app/ts/Map.ts

@@ -0,0 +1,11 @@
+interface MapInfo {
+    readonly ID:            number,
+    readonly DisplayName:   string,
+    readonly Creator:       string,
+    readonly GameID:        number,
+    readonly Date:          number,
+}
+
+export {
+	type MapInfo
+}