successfully builds for production

This commit is contained in:
rhpidfyre 2024-12-10 23:01:22 -05:00
parent 6ce2cd799f
commit 2e379f7077
17 changed files with 94 additions and 71 deletions

View File

@ -1,5 +1,7 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = {}; const nextConfig: NextConfig = {
distDir: "build"
};
export default nextConfig; export default nextConfig;

View File

@ -0,0 +1,10 @@
import Header from "./header";
export default function Webpage({children}: Readonly<{children?: React.ReactNode}>) {
return (
<>
<Header/>
{children}
</>
)
}

View File

@ -1,8 +1,5 @@
import "./globals.scss"; import "./globals.scss";
interface Component {
}
export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) { export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
return ( return (
<html lang="en"> <html lang="en">

View File

@ -1,7 +1,7 @@
import Header from "./_components/header"; import Webpage from "./_components/webpage";
export default function Home() { export default function Home() {
return ( return (
<Header/> <Webpage></Webpage>
); );
} }

View File

@ -7,6 +7,12 @@
@use "../../../globals.scss"; @use "../../../globals.scss";
.map-page-main {
display: flex;
justify-content: center;
width: 100vw;
}
.spacer { .spacer {
display: block; display: block;
width: 100%; width: 100%;

View File

@ -13,7 +13,7 @@ function MapImage(asset: AssetID) {
useEffect(() => { useEffect(() => {
AssetImage(asset.id, "420x420").then(image => setAssetImage(image)) AssetImage(asset.id, "420x420").then(image => setAssetImage(image))
}, []); }, [asset.id]);
if (!assetImage) { if (!assetImage) {
return <p>Fetching map image...</p>; return <p>Fetching map image...</p>;
} }

View File

@ -1,18 +1,20 @@
"use client" 'use client'
import { SubmissionStatus, SubmissionStatusToString, type SubmissionInfo } from "@/app/ts/Submission"; import { SubmissionStatus, SubmissionStatusToString, type SubmissionInfo } from "@/app/ts/Submission";
import { MapImage, type AssetID } from "./map"; import { MapImage, type AssetID } from "./_map";
import { Rating, Button } from "@mui/material"; import { Rating, Button } from "@mui/material";
import type {ReactNode} from "react";
import SendIcon from '@mui/icons-material/Send'; import SendIcon from '@mui/icons-material/Send';
import Webpage from "@/app/_components/webpage";
import { useParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import "./styles/page.scss"; import "./(styles)/page.scss";
interface Window { interface Window {
className: string, className: string,
title: string, title: string,
children: ReactNode children: React.ReactNode
} }
interface Comment { interface Comment {
picture?: string, //TEMP picture?: string, //TEMP
@ -23,12 +25,8 @@ interface Comment {
interface CreatorAndReviewStatus { interface CreatorAndReviewStatus {
creator: SubmissionInfo["DisplayName"], creator: SubmissionInfo["DisplayName"],
review: SubmissionInfo["StatusID"], review: SubmissionInfo["StatusID"],
comments: Comment[] comments: Comment[],
} name: string
interface MapInfo {
assetid: SubmissionInfo["AssetID"],
status: SubmissionStatus,
comments: Comment[]
} }
function Window(window: Window) { function Window(window: Window) {
@ -73,7 +71,7 @@ function Comment(comment: Comment) {
return ( return (
<div className="commenter" data-highlighted={IsBhopMaptest}> <div className="commenter" data-highlighted={IsBhopMaptest}>
<img src={comment.picture} alt={`${comment.name}'s comment`}/> <Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
<div className="details"> <div className="details">
<header> <header>
<p className="name">{comment.name}</p> <p className="name">{comment.name}</p>
@ -91,7 +89,7 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
return ( return (
<main className="review-info"> <main className="review-info">
<div> <div>
<h1>bhop_quaternions</h1> <h1>{stats.name}</h1>
<aside data-review-status={stats.review} className="review-status"> <aside data-review-status={stats.review} className="review-status">
<p>{Review}</p> <p>{Review}</p>
</aside> </aside>
@ -99,7 +97,9 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
<p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p> <p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p>
<span className="spacer"></span> <span className="spacer"></span>
<section className="comments"> <section className="comments">
{stats.comments.length===0 && <p className="no-comments">There are no comments.</p> || stats.comments.map(comment => ( {stats.comments.length===0
&& <p className="no-comments">There are no comments.</p>
|| stats.comments.map(comment => (
<Comment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/> <Comment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
))} ))}
</section> </section>
@ -111,11 +111,35 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
) )
} }
export default function MapInfoPage(info: MapInfo) { // const placeholder_Comments = [
return ( // {
<section className="review-section"> // comment: "This map has been accepted and is in the game.",
<ImageAndRatings id={info.assetid}/> // date: "on Dec 8 '24 at 18:46",
<TitleAndComments creator="Quaternions" review={info.status} comments={info.comments}/> // name: "BhopMaptest"
</section> // },
// {
// 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"
// }
// ]
export default function SubmissionInfoPage() {
const params = useParams<{submissionId: string}>()
return (
<Webpage>
<main className="map-page-main">
<section className="review-section">
<ImageAndRatings id={432}/>
<TitleAndComments name={params.submissionId} creator="Quaternions" review={SubmissionStatus.Accepted} comments={[]}/>
</section>
</main>
</Webpage>
) )
} }

View File

@ -1,34 +0,0 @@
import { SubmissionStatus } from "@/app/ts/Submission";
import MapInfoPage from "./page";
import Header from "@/app/_components/header";
import "./styles/layout.scss";
export default function MapPage() {
// 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 (
<>
<Header/>
<main className="map-page-main">
<MapInfoPage assetid={14783300138} status={SubmissionStatus.Accepted} comments={[]}/>
</main>
</>
)
}

View File

@ -1,5 +0,0 @@
.map-page-main {
display: flex;
justify-content: center;
width: 100vw;
}

View File

@ -2,8 +2,17 @@ const FALLBACK_IMAGE = ""
type thumbsizes = "420" | "720" type thumbsizes = "420" | "720"
type thumbsize<S extends thumbsizes> = `${S}x${S}` type thumbsize<S extends thumbsizes> = `${S}x${S}`
type ParsedJson<A> = {
errors: A,
data: {
[0]: {
state: string,
imageUrl: string,
}
}
}
function Parse(json: any): string { function Parse<A>(json: ParsedJson<A>): string {
if (json.errors) { if (json.errors) {
console.warn(json.errors) console.warn(json.errors)
return FALLBACK_IMAGE return FALLBACK_IMAGE

View File

@ -1,7 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@ -20,9 +24,19 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": [
"./src/*"
]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "include": [
"exclude": ["node_modules"] "**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"next-env.d.ts",
"build/types/**/*.ts"
],
"exclude": [
"node_modules"
]
} }