diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index d524fd0..9cd2cd4 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -1,5 +1,8 @@ import "./globals.scss"; +interface Component { + +} export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) { return ( diff --git a/web/src/app/map/[map_name]/layout.tsx b/web/src/app/map/[map_name]/layout.tsx index e4b91b3..b08281d 100644 --- a/web/src/app/map/[map_name]/layout.tsx +++ b/web/src/app/map/[map_name]/layout.tsx @@ -5,29 +5,29 @@ import Header from "@/app/_components/header"; import "./styles/layout.scss"; export default function MapPage() { - const placeholder_Comment = [ - { - comment: "This map has been accepted and is in the game.", - date: "on Dec 8 '24 at 18:46", - name: "BhopMaptest" - }, - { - comment: "This map is so mid...", - date: "on Dec 8 '24 at 18:46", - name: "vmsize" - }, - { - comment: "I prefer strafe client", - date: "on Dec 8 '24 at 18:46", - name: "Quaternions" - } - ] + // const placeholder_Comments = [ + // { + // comment: "This map has been accepted and is in the game.", + // date: "on Dec 8 '24 at 18:46", + // name: "BhopMaptest" + // }, + // { + // comment: "This map is so mid...", + // date: "on Dec 8 '24 at 18:46", + // name: "vmsize" + // }, + // { + // comment: "I prefer strafe client", + // date: "on Dec 8 '24 at 18:46", + // name: "Quaternions" + // } + // ] return ( <>
- +
) diff --git a/web/src/app/map/[map_name]/map.tsx b/web/src/app/map/[map_name]/map.tsx new file mode 100644 index 0000000..9393d9a --- /dev/null +++ b/web/src/app/map/[map_name]/map.tsx @@ -0,0 +1,26 @@ +"use client" + +import { useState, useEffect } from "react" +import { SubmissionInfo } from "@/app/ts/Submission" +import { AssetImage } from "@/app/ts/Roblox" +import Image from "next/image" + +interface AssetID { + id: SubmissionInfo["AssetID"] +} +function MapImage(asset: AssetID) { + const [assetImage, setAssetImage] = useState(""); + + useEffect(() => { + AssetImage(asset.id, "420x420").then(image => setAssetImage(image)) + }, []); + if (!assetImage) { + return

Fetching map image...

; + } + return Map Image +} + +export { + type AssetID, + MapImage +} \ No newline at end of file diff --git a/web/src/app/map/[map_name]/page.tsx b/web/src/app/map/[map_name]/page.tsx index 6aa58ac..f2799aa 100644 --- a/web/src/app/map/[map_name]/page.tsx +++ b/web/src/app/map/[map_name]/page.tsx @@ -1,8 +1,11 @@ -import { SubmissionStatus, type SubmissionInfo } from "@/app/ts/Submission"; -import { useState, type ReactNode } from "react"; +"use client" + +import { SubmissionStatus, SubmissionStatusToString, type SubmissionInfo } from "@/app/ts/Submission"; +import { MapImage, type AssetID } from "./map"; import { Rating, Button } from "@mui/material"; -import { AssetImage } from "@/app/ts/Roblox"; +import type {ReactNode} from "react"; import SendIcon from '@mui/icons-material/Send'; +import Link from "next/link"; import "./styles/page.scss"; @@ -11,6 +14,23 @@ interface Window { title: string, children: ReactNode } +interface Comment { + picture?: string, //TEMP + comment: string, + date: string, + name: string +} +interface CreatorAndReviewStatus { + creator: SubmissionInfo["DisplayName"], + review: SubmissionInfo["StatusID"], + comments: Comment[] +} +interface MapInfo { + assetid: SubmissionInfo["AssetID"], + status: SubmissionStatus, + comments: Comment[] +} + function Window(window: Window) { return (
@@ -22,17 +42,11 @@ function Window(window: Window) { ) } -interface AssetID { - id: SubmissionInfo["AssetID"] -} -async function ImageAndRatings(asset: AssetID) { - const [assetImage, setAssetImage] = useState(null); - const asset_image = await AssetImage(asset.id, "420x420") - +function ImageAndRatings(asset: AssetID) { return (