Web: Add Mapfixes Pages #60
web/src/app
mapfixes
(styles)
[mapfixId]
_card.tsx_window.tsxpage.tsxmaps/[mapId]/fix
submit
ts
75
web/src/app/mapfixes/(styles)/page.scss
Normal file
75
web/src/app/mapfixes/(styles)/page.scss
Normal file
@ -0,0 +1,75 @@
|
||||
@forward "./page/card.scss";
|
||||
|
||||
@use "../../globals.scss";
|
||||
|
||||
a {
|
||||
color:rgb(255, 255, 255);
|
||||
|
||||
&:visited, &:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
&:active {
|
||||
color: rgb(192, 192, 192)
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 1.15rem;
|
||||
border: none;
|
||||
border-radius: 0.35rem;
|
||||
background-color: #33333350;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
background-color: #5555559a;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-dots {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #333;
|
||||
}
|
||||
87
web/src/app/mapfixes/(styles)/page/card.scss
Normal file
87
web/src/app/mapfixes/(styles)/page/card.scss
Normal file
@ -0,0 +1,87 @@
|
||||
@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;
|
||||
}
|
||||
19
web/src/app/mapfixes/[mapfixId]/(styles)/page.scss
Normal file
19
web/src/app/mapfixes/[mapfixId]/(styles)/page.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@forward "./page/commentWindow.scss";
|
||||
@forward "./page/reviewStatus.scss";
|
||||
@forward "./page/ratingWindow.scss";
|
||||
@forward "./page/reviewButtons.scss";
|
||||
@forward "./page/comments.scss";
|
||||
@forward "./page/review.scss";
|
||||
@forward "./page/map.scss";
|
||||
|
||||
@use "../../../globals.scss";
|
||||
|
||||
.map-page-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.by-creator {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
#comment-text-field {
|
||||
@include globals.border-with-radius;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: var(--comment-area)
|
||||
}
|
||||
|
||||
.leave-comment-window {
|
||||
@include globals.border-with-radius;
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
margin-top: 35px;
|
||||
|
||||
.rating-type {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 35%;
|
||||
|
||||
.rating-right {
|
||||
display: grid;
|
||||
|
||||
> span {
|
||||
margin: 6px 0 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--window-header);
|
||||
border-bottom: globals.$review-border;
|
||||
height: 45px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
main {
|
||||
padding: 20px;
|
||||
|
||||
button {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
web/src/app/mapfixes/[mapfixId]/(styles)/page/comments.scss
Normal file
49
web/src/app/mapfixes/[mapfixId]/(styles)/page/comments.scss
Normal file
@ -0,0 +1,49 @@
|
||||
$comments-size: 60px;
|
||||
|
||||
.comments {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
margin-top: 20px;
|
||||
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.commenter {
|
||||
display: flex;
|
||||
height: $comments-size;
|
||||
|
||||
//BhopMaptest comment
|
||||
&[data-highlighted="true"] {
|
||||
background-color: var(--comment-highlighted);
|
||||
}
|
||||
> img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font: {
|
||||
weight: 500;
|
||||
size: 1.3em;
|
||||
};
|
||||
}
|
||||
.date {
|
||||
font-size: .8em;
|
||||
margin: 0 0 0 5px;
|
||||
color: #646464
|
||||
}
|
||||
.details {
|
||||
display: grid;
|
||||
margin-left: 10px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
p:not(.date) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
web/src/app/mapfixes/[mapfixId]/(styles)/page/map.scss
Normal file
15
web/src/app/mapfixes/[mapfixId]/(styles)/page/map.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.map-image-area {
|
||||
@include globals.border-with-radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
|
||||
> p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.rating-window {
|
||||
@include globals.border-with-radius;
|
||||
width: 100%;
|
||||
|
||||
.rating-type {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 35%;
|
||||
|
||||
.rating-right {
|
||||
display: grid;
|
||||
|
||||
> span {
|
||||
margin: 6px 0 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--window-header);
|
||||
border-bottom: globals.$review-border;
|
||||
height: 45px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
47
web/src/app/mapfixes/[mapfixId]/(styles)/page/review.scss
Normal file
47
web/src/app/mapfixes/[mapfixId]/(styles)/page/review.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.review-info {
|
||||
width: 650px;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
p, h1 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
h1 {
|
||||
font: {
|
||||
weight: 500;
|
||||
size: 1.8rem
|
||||
};
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--anchor-link-review);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-section {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.review-area {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 25px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: contain
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
.review-set {
|
||||
@include globals.border-with-radius;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,80 @@
|
||||
$UnderConstruction: "0";
|
||||
$Submitted: "1";
|
||||
$ChangesRequested: "2";
|
||||
$Accepted: "3";
|
||||
$Validating: "4";
|
||||
$Validated: "5";
|
||||
$Uploading: "6";
|
||||
$Uploaded: "7";
|
||||
$Rejected: "8";
|
||||
$Released: "9";
|
||||
|
||||
.review-status {
|
||||
border-radius: 5px;
|
||||
|
||||
p {
|
||||
margin: 3px 25px 3px 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&[data-review-status="#{$Released}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Rejected}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Uploading}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Uploaded}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Validated}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Validating}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Accepted}"] {
|
||||
background-color: rgb(2, 162, 2);
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$ChangesRequested}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$Submitted}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&[data-review-status="#{$UnderConstruction}"] {
|
||||
background-color: orange;
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
web/src/app/mapfixes/[mapfixId]/_comments.tsx
Normal file
68
web/src/app/mapfixes/[mapfixId]/_comments.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import type { MapfixInfo } from "@/app/ts/Mapfix";
|
||||
import { Button } from "@mui/material"
|
||||
import Window from "./_window";
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import Image from "next/image";
|
||||
|
||||
interface CommentersProps {
|
||||
comments_data: CreatorAndReviewStatus
|
||||
}
|
||||
|
||||
interface CreatorAndReviewStatus {
|
||||
asset_id: MapfixInfo["AssetID"],
|
||||
creator: MapfixInfo["DisplayName"],
|
||||
review: MapfixInfo["StatusID"],
|
||||
status_message: MapfixInfo["StatusMessage"],
|
||||
comments: Comment[],
|
||||
name: string
|
||||
}
|
||||
|
||||
interface Comment {
|
||||
picture?: string, //TEMP
|
||||
comment: string,
|
||||
date: string,
|
||||
name: string
|
||||
}
|
||||
|
||||
function AddComment(comment: Comment) {
|
||||
const IsBhopMaptest = comment.name == "BhopMaptest" //Highlighted commenter
|
||||
|
||||
return (
|
||||
<div className="commenter" data-highlighted={IsBhopMaptest}>
|
||||
<Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
|
||||
<div className="details">
|
||||
<header>
|
||||
<p className="name">{comment.name}</p>
|
||||
<p className="date">{comment.date}</p>
|
||||
</header>
|
||||
<p className="comment">{comment.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LeaveAComment() {
|
||||
return (
|
||||
<Window title="Leave a Comment:" className="leave-comment-window">
|
||||
<textarea name="comment-box" id="comment-text-field"></textarea>
|
||||
<Button variant="outlined" endIcon={<SendIcon/>}>Submit</Button>
|
||||
</Window>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Comments(stats: CommentersProps) {
|
||||
return (<>
|
||||
<section className="comments">
|
||||
{stats.comments_data.comments.length===0
|
||||
&& <p className="no-comments">There are no comments.</p>
|
||||
|| stats.comments_data.comments.map(comment => (
|
||||
<AddComment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
|
||||
))}
|
||||
</section>
|
||||
<LeaveAComment/>
|
||||
</>)
|
||||
}
|
||||
|
||||
export {
|
||||
type CreatorAndReviewStatus
|
||||
}
|
||||
14
web/src/app/mapfixes/[mapfixId]/_map.tsx
Normal file
14
web/src/app/mapfixes/[mapfixId]/_map.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { MapfixInfo } from "@/app/ts/Mapfix"
|
||||
|
||||
interface AssetID {
|
||||
id: MapfixInfo["AssetID"]
|
||||
}
|
||||
|
||||
function MapImage() {
|
||||
return <p>Fetching map image...</p>
|
||||
}
|
||||
|
||||
export {
|
||||
type AssetID,
|
||||
MapImage
|
||||
}
|
||||
74
web/src/app/mapfixes/[mapfixId]/_reviewButtons.tsx
Normal file
74
web/src/app/mapfixes/[mapfixId]/_reviewButtons.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { Button, ButtonOwnProps } from "@mui/material";
|
||||
|
||||
type Actions = "Completed" | "Submit" | "Reject" | "Revoke"
|
||||
type ApiActions = Lowercase<Actions> | "trigger-validate" | "retry-validate" | "trigger-upload" | "reset-uploading" | "reset-validating"
|
||||
type Review = Actions | "Accept" | "Validate" | "Upload" | "Reset Uploading (fix softlocked status)" | "Reset Validating (fix softlocked status)" | "Request Changes"
|
||||
|
||||
interface ReviewButton {
|
||||
name: Review,
|
||||
action: ApiActions,
|
||||
mapfixId: string,
|
||||
color: ButtonOwnProps["color"]
|
||||
}
|
||||
|
||||
interface ReviewId {
|
||||
mapfixId: string
|
||||
}
|
||||
|
||||
async function ReviewButtonClicked(action: ApiActions, mapfixId: string) {
|
||||
try {
|
||||
const response = await fetch(`/api/mapfixes/${mapfixId}/status/${action}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
}
|
||||
});
|
||||
// Check if the HTTP request was successful
|
||||
if (!response.ok) {
|
||||
const errorDetails = await response.text();
|
||||
|
||||
// Throw an error with detailed information
|
||||
throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
|
||||
}
|
||||
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Error updating mapfix status:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function ReviewButton(props: ReviewButton) {
|
||||
return <Button
|
||||
color={props.color}
|
||||
variant="contained"
|
||||
onClick={() => { ReviewButtonClicked(props.action, props.mapfixId) }}>{props.name}</Button>
|
||||
}
|
||||
|
||||
export default function ReviewButtons(props: ReviewId) {
|
||||
const mapfixId = props.mapfixId
|
||||
// When is each button visible?
|
||||
// Multiple buttons can be visible at once.
|
||||
// Action | Role | When Current Status is One of:
|
||||
// ---------------|-----------|-----------------------
|
||||
// Submit | Submitter | UnderConstruction, ChangesRequested
|
||||
// Revoke | Submitter | Submitted, ChangesRequested
|
||||
// Accept | Reviewer | Submitted
|
||||
// Validate | Reviewer | Accepted
|
||||
// ResetValidating| Reviewer | Validating
|
||||
// Reject | Reviewer | Submitted
|
||||
// RequestChanges | Reviewer | Validated, Accepted, Submitted
|
||||
// Upload | MapAdmin | Validated
|
||||
// ResetUploading | MapAdmin | Uploading
|
||||
return (
|
||||
<section className="review-set">
|
||||
<ReviewButton color="info" name="Submit" action="submit" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="info" name="Revoke" action="revoke" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="info" name="Accept" action="trigger-validate" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="info" name="Validate" action="retry-validate" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="error" name="Reject" action="reject" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="info" name="Upload" action="trigger-upload" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="error" name="Reset Uploading (fix softlocked status)" action="reset-uploading" mapfixId={mapfixId}/>
|
||||
<ReviewButton color="error" name="Reset Validating (fix softlocked status)" action="reset-validating" mapfixId={mapfixId}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
20
web/src/app/mapfixes/[mapfixId]/_window.tsx
Normal file
20
web/src/app/mapfixes/[mapfixId]/_window.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
interface WindowStruct {
|
||||
className: string,
|
||||
title: string,
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function Window(window: WindowStruct) {
|
||||
return (
|
||||
<section className={window.className}>
|
||||
<header>
|
||||
<p>{window.title}</p>
|
||||
</header>
|
||||
<main>{window.children}</main>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
type WindowStruct
|
||||
}
|
||||
105
web/src/app/mapfixes/[mapfixId]/page.tsx
Normal file
105
web/src/app/mapfixes/[mapfixId]/page.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { MapfixInfo, MapfixStatusToString } from "@/app/ts/Mapfix";
|
||||
import type { CreatorAndReviewStatus } from "./_comments";
|
||||
import { MapImage } from "./_map";
|
||||
import { useParams } from "next/navigation";
|
||||
import ReviewButtons from "./_reviewButtons";
|
||||
import { Rating } from "@mui/material";
|
||||
import Comments from "./_comments";
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
import Window from "./_window";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import "./(styles)/page.scss";
|
||||
|
||||
interface ReviewId {
|
||||
mapfixId: string
|
||||
}
|
||||
|
||||
function Ratings() {
|
||||
return (
|
||||
<Window className="rating-window" title="Rating">
|
||||
<section className="rating-type">
|
||||
<aside className="rating-left">
|
||||
<p>Quality</p>
|
||||
<p>Difficulty</p>
|
||||
<p>Fun</p>
|
||||
<p>Length</p>
|
||||
</aside>
|
||||
<aside className="rating-right">
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
<Rating defaultValue={2.5} precision={0.5}/>
|
||||
</aside>
|
||||
</section>
|
||||
</Window>
|
||||
)
|
||||
}
|
||||
|
||||
function RatingArea(mapfix: ReviewId) {
|
||||
return (
|
||||
<aside className="review-area">
|
||||
<section className="map-image-area">
|
||||
<MapImage/>
|
||||
</section>
|
||||
<Ratings/>
|
||||
<ReviewButtons mapfixId={mapfix.mapfixId}/>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
function TitleAndComments(stats: CreatorAndReviewStatus) {
|
||||
const Review = MapfixStatusToString(stats.review)
|
||||
|
||||
// TODO: hide status message when status is not "Accepted"
|
||||
return (
|
||||
<main className="review-info">
|
||||
<div>
|
||||
<h1>{stats.name}</h1>
|
||||
<aside data-review-status={stats.review} className="review-status">
|
||||
<p>{Review}</p>
|
||||
</aside>
|
||||
</div>
|
||||
<p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p>
|
||||
<p className="asset-id">Model Asset ID {stats.asset_id}</p>
|
||||
<p className="status-message">Validation Error: {stats.status_message}</p>
|
||||
<span className="spacer"></span>
|
||||
<Comments comments_data={stats}/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default function MapfixInfoPage() {
|
||||
const dynamicId = useParams<{mapfixId: string}>()
|
||||
|
||||
const [mapfix, setMapfix] = useState<MapfixInfo | 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 getMapfix() {
|
||||
const res = await fetch(`/api/mapfixes/${dynamicId.mapfixId}`)
|
||||
if (res.ok) {
|
||||
setMapfix(await res.json())
|
||||
}
|
||||
}
|
||||
getMapfix()
|
||||
}, [dynamicId.mapfixId])
|
||||
|
||||
if (!mapfix) {
|
||||
return <Webpage>
|
||||
{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
|
||||
</Webpage>
|
||||
}
|
||||
return (
|
||||
<Webpage>
|
||||
<main className="map-page-main">
|
||||
<section className="review-section">
|
||||
<RatingArea mapfixId={dynamicId.mapfixId}/>
|
||||
<TitleAndComments name={mapfix.DisplayName} creator={mapfix.Creator} review={mapfix.StatusID} status_message={mapfix.StatusMessage} asset_id={mapfix.AssetID} comments={[]}/>
|
||||
</section>
|
||||
</main>
|
||||
</Webpage>
|
||||
)
|
||||
}
|
||||
41
web/src/app/mapfixes/_card.tsx
Normal file
41
web/src/app/mapfixes/_card.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Rating } from "@mui/material";
|
||||
|
||||
interface SubmissionCardProps {
|
||||
displayName: string;
|
||||
assetId: number;
|
||||
rating: number;
|
||||
author: string;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export default function SubmissionCard(props: SubmissionCardProps) {
|
||||
return (
|
||||
<Link href={`/submissions/${props.id}`}>
|
||||
<div className="submissionCard">
|
||||
<div className="content">
|
||||
<div className="map-image">
|
||||
{/* TODO: Grab image of model */}
|
||||
<Image height={200} width={200} priority={true} src="https://api.ic3.space/strafe/map-images/11222350808" style={{ width: `100%` }} alt={props.displayName} />
|
||||
</div>
|
||||
<div className="details">
|
||||
<div className="header">
|
||||
<span className="displayName">{props.displayName}</span>
|
||||
<div className="rating">
|
||||
<Rating value={props.rating} readOnly size="small" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
<div className="author">
|
||||
<Image className="avatar" width={28} height={28} priority={true} src="https://api.ic3.space/strafe/map-images/11222350808" alt={props.author}/>
|
||||
<span>{props.author}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
18
web/src/app/mapfixes/_window.tsx
Normal file
18
web/src/app/mapfixes/_window.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
interface WindowStruct {
|
||||
children: React.ReactNode,
|
||||
className: string,
|
||||
title: string,
|
||||
}
|
||||
|
||||
export default function Window(window: WindowStruct) {
|
||||
return <section className={window.className}>
|
||||
<header>
|
||||
<p>{window.title}</p>
|
||||
</header>
|
||||
<main>{window.children}</main>
|
||||
</section>
|
||||
}
|
||||
|
||||
export {
|
||||
type WindowStruct
|
||||
}
|
||||
110
web/src/app/mapfixes/page.tsx
Normal file
110
web/src/app/mapfixes/page.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { MapfixInfo } from "../ts/Mapfix";
|
||||
import MapfixCard from "./_card";
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
|
||||
import "./(styles)/page.scss";
|
||||
|
||||
export default function MapfixInfoPage() {
|
||||
const [mapfixes, setMapfixes] = useState<MapfixInfo[]>([])
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const cardsPerPage = 24; // built to fit on a 1920x1080 monitor
|
||||
|
||||
const totalPages = Math.ceil(mapfixes.length / cardsPerPage);
|
||||
|
||||
const currentCards = mapfixes.slice(
|
||||
currentPage * cardsPerPage,
|
||||
(currentPage + 1) * cardsPerPage
|
||||
);
|
||||
|
||||
const nextPage = () => {
|
||||
if (currentPage < totalPages - 1) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const prevPage = () => {
|
||||
if (currentPage > 0) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchMapfixes() {
|
||||
const res = await fetch('/api/mapfixes?Page=1&Limit=100')
|
||||
if (res.ok) {
|
||||
setMapfixes(await res.json())
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fetchMapfixes()
|
||||
}, 50);
|
||||
}, [])
|
||||
|
||||
if (!mapfixes) {
|
||||
return <Webpage>
|
||||
<main>
|
||||
Loading...
|
||||
</main>
|
||||
</Webpage>
|
||||
}
|
||||
|
||||
if (mapfixes && mapfixes.length == 0) {
|
||||
return <Webpage>
|
||||
<main>
|
||||
Mapfixes list is empty.
|
||||
</main>
|
||||
</Webpage>
|
||||
}
|
||||
|
||||
return (
|
||||
// TODO: Add filter settings & searchbar & page selector
|
||||
<Webpage>
|
||||
<main
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '1rem',
|
||||
width: '100%',
|
||||
maxWidth: '100vw',
|
||||
boxSizing: 'border-box',
|
||||
overflowX: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div className="pagination-dots">
|
||||
{Array.from({ length: totalPages }).map((_, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`dot ${index === currentPage ? 'active' : ''}`}
|
||||
onClick={() => setCurrentPage(index)}
|
||||
></span>
|
||||
))}
|
||||
</div>
|
||||
<div className="pagination">
|
||||
<button onClick={prevPage} disabled={currentPage === 0}><</button>
|
||||
<span>
|
||||
Page {currentPage + 1} of {totalPages}
|
||||
</span>
|
||||
<button onClick={nextPage} disabled={currentPage === totalPages - 1}>></button>
|
||||
</div>
|
||||
<div className="grid">
|
||||
{currentCards.map((mapfix) => (
|
||||
<MapfixCard
|
||||
key={mapfix.ID}
|
||||
id={mapfix.ID}
|
||||
assetId={mapfix.AssetID}
|
||||
displayName={mapfix.DisplayName}
|
||||
author={mapfix.Creator}
|
||||
rating={mapfix.StatusID}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</Webpage>
|
||||
)
|
||||
}
|
||||
54
web/src/app/maps/[mapId]/fix/(styles)/page.scss
Normal file
54
web/src/app/maps/[mapId]/fix/(styles)/page.scss
Normal file
@ -0,0 +1,54 @@
|
||||
@use "../../../../globals.scss";
|
||||
|
||||
::placeholder {
|
||||
color: var(--placeholder-text)
|
||||
}
|
||||
|
||||
.form-spacer {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#target-asset-radio {
|
||||
color: var(--text-color);
|
||||
font-size: globals.$form-label-fontsize;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
width: 850px;
|
||||
|
||||
& label, & input {
|
||||
color: var(--text-color);
|
||||
}
|
||||
& fieldset {
|
||||
border-color: rgb(100,100,100);
|
||||
}
|
||||
& span {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-inline: auto;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
|
||||
fieldset {
|
||||
border: blue
|
||||
}
|
||||
}
|
||||
65
web/src/app/maps/[mapId]/fix/_game.tsx
Normal file
65
web/src/app/maps/[mapId]/fix/_game.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { FormControl, Select, InputLabel, MenuItem } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import InputBase from '@mui/material/InputBase';
|
||||
import React from "react";
|
||||
import { SelectChangeEvent } from "@mui/material";
|
||||
|
||||
// TODO: Properly style everything instead of pasting 🤚
|
||||
|
||||
type GameSelectionProps = {
|
||||
game: number;
|
||||
setGame: React.Dispatch<React.SetStateAction<number>>;
|
||||
};
|
||||
|
||||
const BootstrapInput = styled(InputBase)(({ theme }) => ({
|
||||
'label + &': {
|
||||
marginTop: theme.spacing(3),
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
backgroundColor: '#0000',
|
||||
color: '#FFF',
|
||||
border: '1px solid rgba(175, 175, 175, 0.66)',
|
||||
fontSize: 16,
|
||||
padding: '10px 26px 10px 12px',
|
||||
transition: theme.transitions.create(['border-color', 'box-shadow']),
|
||||
fontFamily: [
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
].join(','),
|
||||
'&:focus': {
|
||||
borderRadius: 4,
|
||||
borderColor: '#80bdff',
|
||||
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export default function GameSelection({ game, setGame }: GameSelectionProps) {
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setGame(Number(event.target.value)); // TODO: Change later!! there's 100% a proper way of doing this
|
||||
};
|
||||
|
||||
return (
|
||||
<FormControl>
|
||||
<InputLabel sx={{ color: "#646464" }}>Game</InputLabel>
|
||||
<Select
|
||||
value={String(game)}
|
||||
label="Game"
|
||||
onChange={handleChange}
|
||||
input={<BootstrapInput />}
|
||||
>
|
||||
<MenuItem value={1}>Bhop</MenuItem>
|
||||
<MenuItem value={2}>Surf</MenuItem>
|
||||
<MenuItem value={3}>Fly Trials</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
98
web/src/app/maps/[mapId]/fix/page.tsx
Normal file
98
web/src/app/maps/[mapId]/fix/page.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
"use client"
|
||||
|
||||
import { Button, TextField } from "@mui/material"
|
||||
|
||||
import GameSelection from "./_game";
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import Webpage from "@/app/_components/webpage";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import "./(styles)/page.scss"
|
||||
|
||||
interface MapfixPayload {
|
||||
DisplayName: string;
|
||||
Creator: string;
|
||||
GameID: number;
|
||||
AssetID: number;
|
||||
AssetVersion: number;
|
||||
TargetAssetID: number;
|
||||
}
|
||||
interface IdResponse {
|
||||
ID: number;
|
||||
}
|
||||
|
||||
export default function MapfixInfoPage() {
|
||||
const [game, setGame] = useState(1);
|
||||
const dynamicId = useParams<{ mapId: string }>();
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const payload: MapfixPayload = {
|
||||
DisplayName: (formData.get("display-name") as string) ?? "unknown", // TEMPORARY! TODO: Change
|
||||
Creator: (formData.get("creator") as string) ?? "unknown", // TEMPORARY! TODO: Change
|
||||
GameID: game,
|
||||
AssetID: Number((formData.get("asset-id") as string) ?? "0"),
|
||||
AssetVersion: 0,
|
||||
TargetAssetID: Number(dynamicId.mapId),
|
||||
};
|
||||
|
||||
console.log(payload)
|
||||
console.log(JSON.stringify(payload))
|
||||
|
||||
try {
|
||||
// Send the POST request
|
||||
const response = await fetch("/api/mapfixes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
// Check if the HTTP request was successful
|
||||
if (!response.ok) {
|
||||
const errorDetails = await response.text();
|
||||
|
||||
// Throw an error with detailed information
|
||||
throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
|
||||
}
|
||||
|
||||
// Allow any HTTP status
|
||||
const id_response:IdResponse = await response.json();
|
||||
|
||||
// navigate to newly created mapfix
|
||||
window.location.assign(`/mapfixes/${id_response.ID}`)
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error submitting data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Webpage>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Submit Mapfix</h1>
|
||||
<span className="spacer form-spacer"></span>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* TODO: Add form data for mapfixes, such as changes they did, and any times that need to be deleted & what styles */}
|
||||
<TextField className="form-field" id="display-name" name="display-name" label="Display Name" variant="outlined"/>
|
||||
<TextField className="form-field" id="creator" name="creator" label="Creator" variant="outlined"/>
|
||||
<TextField className="form-field" id="asset-id" name="asset-id" label="Asset ID" variant="outlined"/>
|
||||
{/* I think this is Quat's job to figure this one out (to be set when someone clicks review(?)) */} {/* <TextField className="form-field" id="asset-version" label="Asset Version" variant="outlined"/> */}
|
||||
<GameSelection game={game} setGame={setGame} />
|
||||
<span className="spacer form-spacer"></span>
|
||||
<Button type="submit" variant="contained" startIcon={<SendIcon/>} sx={{
|
||||
width: "400px",
|
||||
height: "50px",
|
||||
marginInline: "auto"
|
||||
}}>Submit</Button>
|
||||
</form>
|
||||
</main>
|
||||
</Webpage>
|
||||
)
|
||||
}
|
||||
@ -71,7 +71,7 @@ export default function SubmissionInfoPage() {
|
||||
<Webpage>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Submit Asset</h1>
|
||||
<h1>Submit New Map</h1>
|
||||
<span className="spacer form-spacer"></span>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
59
web/src/app/ts/Mapfix.ts
Normal file
59
web/src/app/ts/Mapfix.ts
Normal file
@ -0,0 +1,59 @@
|
||||
const enum MapfixStatus {
|
||||
UnderConstruction = 0,
|
||||
Submitted = 1,
|
||||
ChangesRequested = 2,
|
||||
Accepted = 3,
|
||||
Validating = 4,
|
||||
Validated = 5,
|
||||
Uploading = 6,
|
||||
Uploaded = 7,
|
||||
Rejected = 8,
|
||||
}
|
||||
|
||||
interface MapfixInfo {
|
||||
readonly ID: number,
|
||||
readonly DisplayName: string,
|
||||
readonly Creator: string,
|
||||
readonly GameID: number,
|
||||
readonly Date: number,
|
||||
readonly Submitter: number,
|
||||
readonly AssetID: number,
|
||||
readonly AssetVersion: number,
|
||||
readonly ValidatedAssetID: number,
|
||||
readonly ValidatedAssetVersion: number,
|
||||
readonly Completed: boolean,
|
||||
readonly TargetAssetID: number,
|
||||
readonly StatusID: MapfixStatus
|
||||
readonly StatusMessage: string,
|
||||
}
|
||||
|
||||
function MapfixStatusToString(mapfix_status: MapfixStatus): string {
|
||||
switch (mapfix_status) {
|
||||
case MapfixStatus.Rejected:
|
||||
return "REJECTED"
|
||||
case MapfixStatus.Uploading:
|
||||
return "UPLOADING"
|
||||
case MapfixStatus.Uploaded:
|
||||
return "UPLOADED"
|
||||
case MapfixStatus.Validated:
|
||||
return "VALIDATED"
|
||||
case MapfixStatus.Validating:
|
||||
return "VALIDATING"
|
||||
case MapfixStatus.Accepted:
|
||||
return "ACCEPTED"
|
||||
case MapfixStatus.ChangesRequested:
|
||||
return "CHANGES REQUESTED"
|
||||
case MapfixStatus.Submitted:
|
||||
return "SUBMITTED"
|
||||
case MapfixStatus.UnderConstruction:
|
||||
return "UNDER CONSTRUCTION"
|
||||
default:
|
||||
return "UNKNOWN"
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
MapfixStatus,
|
||||
MapfixStatusToString,
|
||||
type MapfixInfo
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user