diff --git a/web/next.config.ts b/web/next.config.ts index 4d4174c..d68a004 100644 --- a/web/next.config.ts +++ b/web/next.config.ts @@ -6,11 +6,11 @@ const nextConfig: NextConfig = { images: { remotePatterns: [ { - protocol: 'https', - hostname: 'api.ic3.space', - pathname: '/strafe/map-images/**', - port: '', - search: '', + protocol: "https", + hostname: "tr.rbxcdn.com", + pathname: "/**", + port: "", + search: "", }, ], }, diff --git a/web/src/app/mapfixes/_card.tsx b/web/src/app/_components/mapCard.tsx similarity index 79% rename from web/src/app/mapfixes/_card.tsx rename to web/src/app/_components/mapCard.tsx index a1c594a..3e4269a 100644 --- a/web/src/app/mapfixes/_card.tsx +++ b/web/src/app/_components/mapCard.tsx @@ -6,8 +6,9 @@ import { Rating } from "@mui/material"; interface SubmissionCardProps { displayName: string; assetId: number; - rating: number; + authorId: number; author: string; + rating: number; id: number; } @@ -18,7 +19,7 @@ export default function SubmissionCard(props: SubmissionCardProps) {
{/* TODO: Grab image of model */} - {props.displayName} + {props.displayName}
@@ -29,7 +30,7 @@ export default function SubmissionCard(props: SubmissionCardProps) {
- {props.author}/ + {props.author}/ {props.author}
diff --git a/web/src/app/mapfixes/(styles)/page/card.scss b/web/src/app/_components/styles/mapCard.scss similarity index 93% rename from web/src/app/mapfixes/(styles)/page/card.scss rename to web/src/app/_components/styles/mapCard.scss index dce43eb..cfcb9d2 100644 --- a/web/src/app/mapfixes/(styles)/page/card.scss +++ b/web/src/app/_components/styles/mapCard.scss @@ -1,4 +1,4 @@ -@use "../../../globals.scss"; +@use "../../globals.scss"; .submissionCard { display: flex; @@ -9,7 +9,7 @@ flex-direction: column; justify-content: space-between; height: 100%; - min-width: 180px; + min-width: 230px; max-width: 340px; } @@ -43,8 +43,6 @@ overflow: hidden; > img { - width: 100%; - height: 100%; object-fit: cover; } } diff --git a/web/src/app/mapfixes/(styles)/page.scss b/web/src/app/mapfixes/(styles)/page.scss index bf98951..daf65f9 100644 --- a/web/src/app/mapfixes/(styles)/page.scss +++ b/web/src/app/mapfixes/(styles)/page.scss @@ -1,4 +1,4 @@ -@forward "./page/card.scss"; +@forward "../../_components/styles/mapCard.scss"; @use "../../globals.scss"; diff --git a/web/src/app/mapfixes/page.tsx b/web/src/app/mapfixes/page.tsx index cf6eccb..743062d 100644 --- a/web/src/app/mapfixes/page.tsx +++ b/web/src/app/mapfixes/page.tsx @@ -2,9 +2,11 @@ import React, { useState, useEffect } from "react"; import { MapfixInfo } from "../ts/Mapfix"; -import MapfixCard from "./_card"; +import MapfixCard from "../_components/mapCard"; import Webpage from "@/app/_components/webpage"; +// TODO: MAKE MAPFIX & SUBMISSIONS USE THE SAME COMPONENTS :angry: (currently too lazy) + import "./(styles)/page.scss"; export default function MapfixInfoPage() { @@ -100,6 +102,7 @@ export default function MapfixInfoPage() { assetId={mapfix.AssetID} displayName={mapfix.DisplayName} author={mapfix.Creator} + authorId={mapfix.Submitter} rating={mapfix.StatusID} /> ))} diff --git a/web/src/app/submissions/(styles)/page.scss b/web/src/app/submissions/(styles)/page.scss index bf98951..d54fd38 100644 --- a/web/src/app/submissions/(styles)/page.scss +++ b/web/src/app/submissions/(styles)/page.scss @@ -1,4 +1,4 @@ -@forward "./page/card.scss"; +@forward "../../_components/styles/mapCard.scss"; @use "../../globals.scss"; @@ -27,7 +27,7 @@ a { @media (max-width: 768px) { .grid { - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } diff --git a/web/src/app/submissions/(styles)/page/card.scss b/web/src/app/submissions/(styles)/page/card.scss deleted file mode 100644 index dce43eb..0000000 --- a/web/src/app/submissions/(styles)/page/card.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use "../../../globals.scss"; - -.submissionCard { - display: flex; - background-color: #2020207c; - border: 1px solid #97979783; - border-radius: 10px; - box-sizing: border-box; - flex-direction: column; - justify-content: space-between; - height: 100%; - min-width: 180px; - max-width: 340px; -} - -.content { - display: flex; - flex-grow: 1; - flex-direction: column; - justify-content: space-between; -} - -.details { - padding: 2px 4px; -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin: 3px 0px; -} - -.footer { - display: flex; - justify-content: space-between; - align-items: center; - margin: 3px 0px; -} - -.map-image { - border-radius: 10px 10px 0 0; - overflow: hidden; - - > img { - width: 100%; - height: 100%; - object-fit: cover; - } -} - -.displayName { - font-size: 1rem; - font-weight: bold; - overflow: hidden; - max-width: 70%; - text-overflow: ellipsis; - white-space: nowrap; -} - -.rating { - flex-shrink: 0; -} - -.author { - display: flex; - align-items: center; - gap: 0.5rem; - flex-grow: 1; - min-width: 0; -} - -.author span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.rating { - margin-left: auto; - flex-shrink: 0; -} - -.avatar { - border-radius: 50%; - object-fit: cover; -} \ No newline at end of file diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/map.scss b/web/src/app/submissions/[submissionId]/(styles)/page/map.scss index ede388e..12469f0 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/map.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/map.scss @@ -5,8 +5,12 @@ display: flex; justify-content: center; align-items: center; - width: 350px; - height: 350px; + width: 100%; + height: auto; + margin-left: auto; + margin-right: auto; + border-radius: 12px; + overflow: hidden; > p { text-align: center; diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/review.scss b/web/src/app/submissions/[submissionId]/(styles)/page/review.scss index 08fc5c0..2ca4539 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/review.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/review.scss @@ -40,8 +40,7 @@ gap: 25px; img { - width: 100%; - height: 350px; + height: 100%; object-fit: contain } } \ No newline at end of file diff --git a/web/src/app/submissions/[submissionId]/_map.tsx b/web/src/app/submissions/[submissionId]/_map.tsx deleted file mode 100644 index e364f70..0000000 --- a/web/src/app/submissions/[submissionId]/_map.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { SubmissionInfo } from "@/app/ts/Submission" - -interface AssetID { - id: SubmissionInfo["AssetID"] -} - -function MapImage() { - return

Fetching map image...

-} - -export { - type AssetID, - MapImage -} \ No newline at end of file diff --git a/web/src/app/submissions/[submissionId]/_mapImage.tsx b/web/src/app/submissions/[submissionId]/_mapImage.tsx new file mode 100644 index 0000000..96f9059 --- /dev/null +++ b/web/src/app/submissions/[submissionId]/_mapImage.tsx @@ -0,0 +1,28 @@ +import Image from "next/image"; +import { SubmissionInfo } from "@/app/ts/Submission"; + +interface AssetID { + id: SubmissionInfo["AssetID"]; +} + +function MapImage({ id }: AssetID) { + if (!id) { + return

Missing asset ID

; + } + + const imageUrl = `/thumbnails/asset/${id}`; + + return ( + Map Thumbnail + ); +} + +export { type AssetID, MapImage }; diff --git a/web/src/app/submissions/[submissionId]/page.tsx b/web/src/app/submissions/[submissionId]/page.tsx index 9dae81f..c78ba8b 100644 --- a/web/src/app/submissions/[submissionId]/page.tsx +++ b/web/src/app/submissions/[submissionId]/page.tsx @@ -2,7 +2,7 @@ import { SubmissionInfo, SubmissionStatusToString } from "@/app/ts/Submission"; import type { CreatorAndReviewStatus } from "./_comments"; -import { MapImage } from "./_map"; +import { MapImage } from "./_mapImage"; import { useParams } from "next/navigation"; import ReviewButtons from "./_reviewButtons"; import { Rating } from "@mui/material"; @@ -15,7 +15,8 @@ import { useState, useEffect } from "react"; import "./(styles)/page.scss"; interface ReviewId { - submissionId: string + submissionId: string; + assetId: number; } function Ratings() { @@ -43,7 +44,7 @@ function RatingArea(submission: ReviewId) { return (