mirror of
https://github.com/Hackdex-App/hackdex-website.git
synced 2026-04-05 00:54:50 -05:00
1333 lines
69 KiB
TypeScript
1333 lines
69 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { baseRoms } from "@/data/baseRoms";
|
|
import { getScreenshotTutorial } from "@/data/screenshotTutorials";
|
|
import HackCard from "@/components/HackCard";
|
|
import { createClient } from "@/utils/supabase/client";
|
|
import { prepareSubmission, presignPatchAndSaveCovers, confirmPatchUpload, saveHackCovers } from "@/app/submit/actions";
|
|
import { presignCoverUpload } from "@/app/hack/actions";
|
|
import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
|
|
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import Markdown from "@/components/Markdown/Markdown";
|
|
import { RxDragHandleDots2 } from "react-icons/rx";
|
|
import { FaDiscord, FaTwitter, FaGithub } from "react-icons/fa6";
|
|
import { FiExternalLink } from "react-icons/fi";
|
|
import PokeCommunityIcon from "@/components/Icons/PokeCommunityIcon";
|
|
import { useAuthContext } from "@/contexts/AuthContext";
|
|
import { useBaseRoms } from "@/contexts/BaseRomContext";
|
|
import TagSelector from "@/components/Submit/TagSelector";
|
|
import BinFile from "rom-patcher-js/rom-patcher-js/modules/BinFile.js";
|
|
import Select, { SelectOption, SelectDivider } from "@/components/Primitives/Select";
|
|
import BPS from "rom-patcher-js/rom-patcher-js/modules/RomPatcher.format.bps.js";
|
|
import { sha1Hex } from "@/utils/hash";
|
|
import { platformAccept, setDraftCovers, getDraftCovers, deleteDraftCovers } from "@/utils/idb";
|
|
import { slugify, sortOrderedTags } from "@/utils/format";
|
|
|
|
function SortableCoverItem({ id, index, url, filename, onRemove }: { id: string; index: number; url: string; filename: string; onRemove: () => void }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
|
const style: React.CSSProperties = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
};
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="rounded-md">
|
|
<div className={`h-16 flex items-center justify-between gap-3 p-2 bg-[var(--surface-2)] ring-1 ring-inset ring-[var(--border)] ${isDragging ? "opacity-60" : ""}`}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="cursor-grab select-none pr-1 text-foreground/60" title="Drag to reorder" {...attributes} {...listeners}>
|
|
<RxDragHandleDots2 size={24} />
|
|
</div>
|
|
<div className="relative h-12 w-20 overflow-hidden rounded">
|
|
<Image src={url} alt={`Cover ${index + 1}`} fill className="object-cover" unoptimized />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate max-w-[260px] text-xs text-foreground/80">{filename}</div>
|
|
{index === 0 && <div className="text-[10px] text-emerald-400/90">Primary</div>}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={onRemove}
|
|
className="inline-flex h-8 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2 text-xs text-red-600 transition-colors hover:bg-black/5 dark:text-red-300 dark:hover:bg-white/10"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface HackSubmitFormProps {
|
|
dummy?: boolean;
|
|
isArchive?: boolean;
|
|
permissionFrom?: string;
|
|
customCreator?: string;
|
|
}
|
|
|
|
export default function HackSubmitForm({
|
|
dummy = false,
|
|
isArchive = false,
|
|
permissionFrom = undefined,
|
|
customCreator = undefined,
|
|
}: HackSubmitFormProps) {
|
|
const MAX_COVERS = 10;
|
|
const { profile, user } = useAuthContext();
|
|
const [isHydrating, setIsHydrating] = React.useState(true);
|
|
const [restoredDraft, setRestoredDraft] = React.useState(false);
|
|
const hydratedFromDraftRef = React.useRef(false);
|
|
const draftKey = React.useMemo(() => (user?.id ? `hack-submit/v1/${user.id}` : null), [user?.id]);
|
|
const initialDraftRef = React.useRef<any>(undefined);
|
|
if (initialDraftRef.current === undefined && typeof window !== "undefined") {
|
|
try {
|
|
if (draftKey) {
|
|
const raw = localStorage.getItem(draftKey);
|
|
initialDraftRef.current = raw ? JSON.parse(raw) : {};
|
|
} else {
|
|
initialDraftRef.current = null; // will hydrate later when user is known
|
|
}
|
|
} catch {
|
|
initialDraftRef.current = {};
|
|
}
|
|
}
|
|
const [title, setTitle] = React.useState(() => initialDraftRef.current?.title || "");
|
|
const [summary, setSummary] = React.useState(() => initialDraftRef.current?.summary || "");
|
|
const [description, setDescription] = React.useState(() => initialDraftRef.current?.description || "");
|
|
const [newCoverFiles, setNewCoverFiles] = React.useState<File[]>([]);
|
|
const [coverErrors, setCoverErrors] = React.useState<string[]>([]);
|
|
const [baseRom, setBaseRom] = React.useState(() => initialDraftRef.current?.baseRom || "");
|
|
const [platform, setPlatform] = React.useState<"GB" | "GBC" | "GBA" | "NDS" | "">(() => (initialDraftRef.current?.platform as any) || "");
|
|
const [version, setVersion] = React.useState(() => initialDraftRef.current?.version || "");
|
|
const [language, setLanguage] = React.useState(() => initialDraftRef.current?.language || "");
|
|
const [completionStatus, setCompletionStatus] = React.useState<"Complete" | "Demo" | "Alpha" | "Beta" | "">(() => (initialDraftRef.current?.completionStatus as any) || "");
|
|
const [boxArt, setBoxArt] = React.useState(() => initialDraftRef.current?.boxArt || "");
|
|
const [discord, setDiscord] = React.useState(() => initialDraftRef.current?.discord || "");
|
|
const [twitter, setTwitter] = React.useState(() => initialDraftRef.current?.twitter || "");
|
|
const [pokecommunity, setPokecommunity] = React.useState(() => initialDraftRef.current?.pokecommunity || "");
|
|
const [github, setGithub] = React.useState(() => initialDraftRef.current?.github || "");
|
|
const [verificationContactInfo, setVerificationContactInfo] = React.useState(() => initialDraftRef.current?.verificationContactInfo || "");
|
|
const [tags, setTags] = React.useState<string[]>(() => (Array.isArray(initialDraftRef.current?.tags) ? initialDraftRef.current.tags : []));
|
|
const [showMdPreview, setShowMdPreview] = React.useState<boolean>(() => !!initialDraftRef.current?.showMdPreview);
|
|
const [originalAuthor, setOriginalAuthor] = React.useState<string>(() => {
|
|
// If customCreator is provided, use it; otherwise use draft or empty string
|
|
if (customCreator) return customCreator;
|
|
return initialDraftRef.current?.originalAuthor || "";
|
|
});
|
|
const [patchFile, setPatchFile] = React.useState<File | null>(null);
|
|
const [patchMode, setPatchMode] = React.useState<"bps" | "rom">(() => (initialDraftRef.current?.patchMode === "rom" ? "rom" : "bps"));
|
|
const [genStatus, setGenStatus] = React.useState<"idle" | "generating" | "ready" | "error">("idle");
|
|
const [checksumStatus, setChecksumStatus] = React.useState<"idle" | "validating" | "valid" | "invalid" | "unknown">("idle");
|
|
const [checksumError, setChecksumError] = React.useState<string>("");
|
|
const [genError, setGenError] = React.useState<string>("");
|
|
const [submitting, setSubmitting] = React.useState(false);
|
|
const maxSteps = isArchive ? 3 : 4;
|
|
const [step, setStep] = React.useState<number>(() => {
|
|
const s = initialDraftRef.current?.step;
|
|
return Number.isInteger(s) ? Math.min(maxSteps, Math.max(1, s)) : 1;
|
|
});
|
|
const supabase = createClient();
|
|
const isDummy = !!dummy;
|
|
|
|
const titleInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const versionInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const screenshotsInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const patchInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const modifiedRomInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
|
|
const baseRomEntry = React.useMemo(() => baseRoms.find((r) => r.id === baseRom) || null, [baseRom]);
|
|
const baseRomName = baseRomEntry?.name || "";
|
|
const baseRomPlatform = baseRomEntry?.platform;
|
|
const tutorialInfo = React.useMemo(() => getScreenshotTutorial(baseRomPlatform), [baseRomPlatform]);
|
|
const { isLinked, hasPermission, hasCached, importUploadedBlob, ensurePermission, getFileBlob, supported } = useBaseRoms();
|
|
|
|
const baseRomReady = baseRom && (hasPermission(baseRom) || hasCached(baseRom));
|
|
const baseRomNeedsPermission = baseRom && isLinked(baseRom) && !baseRomReady;
|
|
const baseRomMissing = baseRom && !isLinked(baseRom) && !hasCached(baseRom);
|
|
|
|
const coverPreviews = React.useMemo(() => {
|
|
return newCoverFiles.map((f) => URL.createObjectURL(f));
|
|
}, [newCoverFiles]);
|
|
|
|
React.useEffect(() => {
|
|
return () => {
|
|
coverPreviews.forEach((u) => URL.revokeObjectURL(u));
|
|
};
|
|
}, [coverPreviews]);
|
|
|
|
// Load persisted screenshot blobs after user/draftKey known
|
|
React.useEffect(() => {
|
|
if (dummy || !draftKey) return;
|
|
(async () => {
|
|
try {
|
|
const files = await getDraftCovers(draftKey);
|
|
if (files && files.length) {
|
|
setNewCoverFiles(files);
|
|
hydratedFromDraftRef.current = true; setRestoredDraft(true);
|
|
}
|
|
} catch {}
|
|
})();
|
|
}, [dummy, draftKey]);
|
|
|
|
React.useEffect(() => {
|
|
setPatchFile(null);
|
|
setGenStatus("idle");
|
|
setGenError("");
|
|
patchInputRef.current && (patchInputRef.current.value = "");
|
|
modifiedRomInputRef.current && (modifiedRomInputRef.current.value = "");
|
|
}, [patchMode]);
|
|
|
|
// Sync originalAuthor with customCreator if provided
|
|
React.useEffect(() => {
|
|
if (customCreator) {
|
|
setOriginalAuthor(customCreator);
|
|
}
|
|
}, [customCreator]);
|
|
|
|
const uploadCovers = async (slug: string) => {
|
|
if (!newCoverFiles || newCoverFiles.length === 0) return [] as string[];
|
|
const urls: string[] = [];
|
|
for (let i = 0; i < newCoverFiles.length; i++) {
|
|
const file = newCoverFiles[i];
|
|
const fileExt = file.name.split('.').pop();
|
|
const path = `${slug}/${Date.now()}-${i}.${fileExt}`;
|
|
const presigned = await presignCoverUpload({ slug, objectKey: path });
|
|
if (!presigned.ok) throw new Error(presigned.error || 'Failed to presign cover upload');
|
|
await fetch(presigned.presignedUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type || 'image/jpeg' } });
|
|
urls.push(path);
|
|
}
|
|
return urls;
|
|
};
|
|
|
|
function getAllowedSizesForPlatform(platform: "GB" | "GBC" | "GBA" | "NDS") {
|
|
if (platform === "GB" || platform === "GBC") return [{ w: 160, h: 144 }];
|
|
if (platform === "GBA") return [{ w: 240, h: 160 }];
|
|
return [{ w: 256, h: 192 }, { w: 256, h: 384 }];
|
|
}
|
|
|
|
async function validateImageDimensions(file: File, allowed: { w: number; h: number }[]) {
|
|
return new Promise<boolean>((resolve) => {
|
|
const img = document.createElement("img");
|
|
const url = URL.createObjectURL(file);
|
|
img.onload = () => {
|
|
const ok = allowed.some((s) => img.naturalWidth === s.w && img.naturalHeight === s.h);
|
|
URL.revokeObjectURL(url);
|
|
resolve(ok);
|
|
};
|
|
img.onerror = () => {
|
|
URL.revokeObjectURL(url);
|
|
resolve(false);
|
|
};
|
|
img.src = url;
|
|
});
|
|
}
|
|
const overLimit = newCoverFiles.length > MAX_COVERS;
|
|
|
|
const removeAt = (index: number) => {
|
|
setNewCoverFiles((prev) => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
|
|
);
|
|
|
|
const onDragEnd = (event: any) => {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id) return;
|
|
const ids = newCoverFiles.map((f, i) => `${f.name}-${i}`);
|
|
const oldIndex = ids.indexOf(active.id as string);
|
|
const newIndex = ids.indexOf(over.id as string);
|
|
if (oldIndex === -1 || newIndex === -1) return;
|
|
setNewCoverFiles((prev) => arrayMove(prev, oldIndex, newIndex));
|
|
};
|
|
|
|
// Persist draft covers whenever they change
|
|
React.useEffect(() => {
|
|
if (dummy || !draftKey) return;
|
|
(async () => {
|
|
try { await setDraftCovers(draftKey, newCoverFiles); } catch {}
|
|
})();
|
|
}, [dummy, draftKey, newCoverFiles]);
|
|
|
|
React.useEffect(() => {
|
|
if (isDummy || isHydrating) return;
|
|
let target: HTMLInputElement | null = null;
|
|
if (step === 1) {
|
|
target = titleInputRef.current;
|
|
} else if (step === 2 && !isArchive) {
|
|
target = versionInputRef.current;
|
|
} else if ((step === 2 && isArchive) || (step === 3 && !isArchive)) {
|
|
target = screenshotsInputRef.current;
|
|
} else if (step === 4 && !isArchive) {
|
|
target = patchInputRef.current;
|
|
}
|
|
if (!target) return;
|
|
const raf1 = requestAnimationFrame(() => {
|
|
const raf2 = requestAnimationFrame(() => {
|
|
if (!target?.disabled) target?.focus();
|
|
});
|
|
// Cleanup nested rAF on effect re-run
|
|
return () => cancelAnimationFrame(raf2);
|
|
});
|
|
return () => cancelAnimationFrame(raf1);
|
|
}, [step, isDummy, isHydrating]);
|
|
|
|
const slug = slugify(title || "");
|
|
|
|
// Draft load after user is known (covers case where user id wasn't ready at first render)
|
|
React.useEffect(() => {
|
|
if (dummy) { setIsHydrating(false); return; }
|
|
if (!draftKey) return; // wait for user
|
|
try {
|
|
// If we didn't have the draft synchronously, hydrate now
|
|
if (!initialDraftRef.current || Object.keys(initialDraftRef.current || {}).length === 0) {
|
|
const raw = localStorage.getItem(draftKey);
|
|
if (raw) {
|
|
const data = JSON.parse(raw);
|
|
if (data && typeof data === "object") {
|
|
const isEmpty =
|
|
!title && !summary && !description && !baseRom && !platform && !version && !language && !completionStatus && !boxArt && !discord && !twitter && !pokecommunity && !github && !verificationContactInfo && (!tags || tags.length === 0) && !originalAuthor;
|
|
if (isEmpty) {
|
|
let applied = false;
|
|
if (typeof data.title === "string") setTitle(data.title);
|
|
if (typeof data.title === "string") applied = applied || !!data.title;
|
|
if (typeof data.summary === "string") setSummary(data.summary);
|
|
if (typeof data.summary === "string") applied = applied || !!data.summary;
|
|
if (typeof data.description === "string") setDescription(data.description);
|
|
if (typeof data.description === "string") applied = applied || !!data.description;
|
|
if (typeof data.baseRom === "string") setBaseRom(data.baseRom);
|
|
if (typeof data.baseRom === "string") applied = applied || !!data.baseRom;
|
|
if (["GB","GBC","GBA","NDS",""].includes(data.platform)) setPlatform(data.platform);
|
|
if (["GB","GBC","GBA","NDS",""].includes(data.platform)) applied = applied || !!data.platform;
|
|
if (typeof data.version === "string") setVersion(data.version);
|
|
if (typeof data.version === "string") applied = applied || !!data.version;
|
|
if (typeof data.language === "string") setLanguage(data.language);
|
|
if (typeof data.language === "string") applied = applied || !!data.language;
|
|
if (["Complete","Demo","Alpha","Beta",""].includes(data.completionStatus)) setCompletionStatus(data.completionStatus);
|
|
if (["Complete","Demo","Alpha","Beta",""].includes(data.completionStatus)) applied = applied || !!data.completionStatus;
|
|
if (typeof data.boxArt === "string") setBoxArt(data.boxArt);
|
|
if (typeof data.boxArt === "string") applied = applied || !!data.boxArt;
|
|
if (typeof data.discord === "string") setDiscord(data.discord);
|
|
if (typeof data.discord === "string") applied = applied || !!data.discord;
|
|
if (typeof data.twitter === "string") setTwitter(data.twitter);
|
|
if (typeof data.twitter === "string") applied = applied || !!data.twitter;
|
|
if (typeof data.pokecommunity === "string") setPokecommunity(data.pokecommunity);
|
|
if (typeof data.pokecommunity === "string") applied = applied || !!data.pokecommunity;
|
|
if (typeof data.github === "string") setGithub(data.github);
|
|
if (typeof data.github === "string") applied = applied || !!data.github;
|
|
if (typeof data.verificationContactInfo === "string") setVerificationContactInfo(data.verificationContactInfo);
|
|
if (typeof data.verificationContactInfo === "string") applied = applied || !!data.verificationContactInfo;
|
|
if (Array.isArray(data.tags)) setTags(data.tags.filter((t: any) => typeof t === "string"));
|
|
if (Array.isArray(data.tags)) applied = applied || data.tags.length > 0;
|
|
// Only load originalAuthor from draft if customCreator is not provided
|
|
if (!customCreator && typeof data.originalAuthor === "string") {
|
|
setOriginalAuthor(data.originalAuthor);
|
|
applied = applied || !!data.originalAuthor;
|
|
}
|
|
if (data.step && Number.isInteger(data.step)) setStep(Math.min(maxSteps, Math.max(1, data.step)));
|
|
if (typeof data.showMdPreview === "boolean") setShowMdPreview(data.showMdPreview);
|
|
if (data.patchMode === "bps" || data.patchMode === "rom") setPatchMode(data.patchMode);
|
|
if (applied) { hydratedFromDraftRef.current = true; setRestoredDraft(true); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch {
|
|
// ignore
|
|
} finally {
|
|
setIsHydrating(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [draftKey]);
|
|
|
|
// If we synchronously seeded from initialDraftRef, mark as restored
|
|
React.useEffect(() => {
|
|
if (dummy || !draftKey || hydratedFromDraftRef.current) return;
|
|
const d = initialDraftRef.current;
|
|
if (!d || typeof d !== "object") return;
|
|
// Don't count originalAuthor if customCreator is provided
|
|
const hasAny = Boolean(
|
|
d.title || d.summary || d.description || d.baseRom || d.platform || d.version || d.language || d.completionStatus || d.boxArt || d.discord || d.twitter || d.pokecommunity || d.github || d.verificationContactInfo || (Array.isArray(d.tags) && d.tags.length > 0) || (!customCreator && d.originalAuthor)
|
|
);
|
|
if (hasAny) { hydratedFromDraftRef.current = true; setRestoredDraft(true); }
|
|
}, [dummy, draftKey, customCreator]);
|
|
|
|
React.useEffect(() => {
|
|
if (dummy || !draftKey || isHydrating) return;
|
|
const handle = setTimeout(() => {
|
|
try {
|
|
const data: any = {
|
|
title,
|
|
summary,
|
|
description,
|
|
baseRom,
|
|
platform,
|
|
version,
|
|
language,
|
|
completionStatus,
|
|
boxArt,
|
|
discord,
|
|
twitter,
|
|
pokecommunity,
|
|
github,
|
|
verificationContactInfo,
|
|
tags,
|
|
step,
|
|
showMdPreview,
|
|
patchMode,
|
|
};
|
|
// Only save originalAuthor if customCreator is not provided
|
|
if (!customCreator) {
|
|
data.originalAuthor = originalAuthor;
|
|
}
|
|
localStorage.setItem(draftKey, JSON.stringify(data));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, 400);
|
|
return () => clearTimeout(handle);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
dummy,
|
|
draftKey,
|
|
isHydrating,
|
|
title,
|
|
summary,
|
|
description,
|
|
baseRom,
|
|
platform,
|
|
version,
|
|
language,
|
|
completionStatus,
|
|
boxArt,
|
|
discord,
|
|
twitter,
|
|
pokecommunity,
|
|
github,
|
|
verificationContactInfo,
|
|
tags,
|
|
originalAuthor,
|
|
customCreator,
|
|
step,
|
|
showMdPreview,
|
|
patchMode,
|
|
]);
|
|
|
|
const summaryLimit = 120;
|
|
const summaryTooLong = summary.length > summaryLimit;
|
|
|
|
const allowedSizes = platform ? getAllowedSizesForPlatform(platform) : [];
|
|
|
|
const urlLike = (s: string) => !s || /^https?:\/\//i.test(s);
|
|
|
|
const allSocialValid = [discord, twitter, pokecommunity, github].every((s) => !s || urlLike(s));
|
|
|
|
const step1Valid = !!title.trim() && !!platform && !!baseRom.trim() && !!language.trim() && !!completionStatus.trim() && (isArchive ? !!originalAuthor.trim() : true);
|
|
const step2Valid = (isArchive ? true : !!version.trim()) && !!summary.trim() && !summaryTooLong && !!description.trim() && tags.length > 0;
|
|
const step3Valid = (newCoverFiles.length > 0) && !overLimit && coverErrors.length === 0 && (!boxArt.trim() || urlLike(boxArt)) && allSocialValid;
|
|
const isValid = step1Valid && step2Valid && step3Valid && (isArchive ? true : !!patchFile);
|
|
|
|
const onSubmit = async () => {
|
|
if (!isValid || submitting) return;
|
|
setSubmitting(true);
|
|
try {
|
|
const fd = new FormData();
|
|
fd.set('title', title);
|
|
fd.set('summary', summary);
|
|
fd.set('description', description);
|
|
fd.set('base_rom', baseRom);
|
|
fd.set('language', language);
|
|
fd.set('completion_status', completionStatus);
|
|
fd.set('version', version);
|
|
if (boxArt) fd.set('box_art', boxArt);
|
|
if (discord) fd.set('discord', discord);
|
|
if (twitter) fd.set('twitter', twitter);
|
|
if (pokecommunity) fd.set('pokecommunity', pokecommunity);
|
|
if (github) fd.set('github', github);
|
|
if (verificationContactInfo) fd.set('verification_contact_info', verificationContactInfo);
|
|
if (tags.length) fd.set('tags', tags.join(','));
|
|
if (isArchive) {
|
|
fd.set('is_archive', 'true');
|
|
}
|
|
if (originalAuthor) {
|
|
fd.set('original_author', originalAuthor);
|
|
}
|
|
if (permissionFrom) {
|
|
fd.set('permission_from', permissionFrom);
|
|
}
|
|
|
|
console.log('[HackSubmitForm] Preparing submission...');
|
|
|
|
const prepared = await prepareSubmission(fd);
|
|
if (!prepared.ok) throw new Error(prepared.error || 'Failed to prepare');
|
|
|
|
console.log('[HackSubmitForm] Uploading covers...');
|
|
|
|
const uploadedCoverUrls = await uploadCovers(prepared.slug);
|
|
|
|
if (isArchive) {
|
|
// For archives, we don't need patch upload
|
|
const coversSaved = await saveHackCovers({ slug: prepared.slug, coverUrls: uploadedCoverUrls });
|
|
if (!coversSaved.ok) throw new Error(coversSaved.error || 'Failed to save covers');
|
|
try {
|
|
if (draftKey) {
|
|
localStorage.removeItem(draftKey);
|
|
await deleteDraftCovers(draftKey);
|
|
}
|
|
} catch {}
|
|
window.location.href = `/hack/${prepared.slug}`;
|
|
} else {
|
|
console.log('[HackSubmitForm] Getting patch upload URL...');
|
|
const presigned = await presignPatchAndSaveCovers({ slug: prepared.slug, version, coverUrls: uploadedCoverUrls });
|
|
if (!presigned.ok) throw new Error(presigned.error || 'Failed to presign');
|
|
|
|
if (patchFile) {
|
|
console.log('[HackSubmitForm] Uploading patch...');
|
|
await fetch(presigned.presignedUrl, { method: 'PUT', body: patchFile, headers: { 'Content-Type': 'application/octet-stream' } });
|
|
const finalized = await confirmPatchUpload({ slug: prepared.slug, objectKey: presigned.objectKey!, version, firstUpload: true, publishAutomatically: true });
|
|
if (!finalized.ok) throw new Error(finalized.error || 'Failed to finalize');
|
|
try {
|
|
if (draftKey) {
|
|
localStorage.removeItem(draftKey);
|
|
await deleteDraftCovers(draftKey);
|
|
}
|
|
} catch {}
|
|
window.location.href = finalized.redirectTo!;
|
|
} else {
|
|
console.log('[HackSubmitForm] No patch file, redirecting to hack page...');
|
|
try {
|
|
if (draftKey) {
|
|
localStorage.removeItem(draftKey);
|
|
await deleteDraftCovers(draftKey);
|
|
}
|
|
} catch {}
|
|
window.location.href = `/hack/${prepared.slug}`;
|
|
}
|
|
}
|
|
console.log('[HackSubmitForm] Submission successful');
|
|
} catch (e: any) {
|
|
console.log('[HackSubmitForm] Submission failed', e);
|
|
alert(e.message ? `There was an error during submission:\n\n===\n${e.message}\n===\n\nYour hack might have only been partially submitted. Try going to your dashboard and see if your hack is listed there. If not, please contact support.` : 'Submission failed');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
async function onGrantPermission() {
|
|
if (!baseRom) return;
|
|
await ensurePermission(baseRom, true);
|
|
}
|
|
|
|
async function onUploadBaseRom(e: React.ChangeEvent<HTMLInputElement>) {
|
|
try {
|
|
setGenError("");
|
|
const f = e.target.files?.[0];
|
|
if (!f) return;
|
|
const matchedId = await importUploadedBlob(f);
|
|
if (!matchedId) {
|
|
setGenError("That ROM doesn't match any supported base ROM.");
|
|
return;
|
|
}
|
|
if (matchedId !== baseRom) {
|
|
const matchedName = baseRoms.find(r => r.id === matchedId)?.name;
|
|
setGenError(`This ROM matches "${matchedName ?? matchedId}", but the form requires "${baseRomName}".`);
|
|
return;
|
|
}
|
|
} catch {
|
|
setGenError("Failed to import base ROM.");
|
|
}
|
|
}
|
|
|
|
async function onUploadModifiedRom(e: React.ChangeEvent<HTMLInputElement>) {
|
|
try {
|
|
setGenStatus("generating");
|
|
setGenError("");
|
|
const mod = e.target.files?.[0] || null;
|
|
if (!mod || !baseRom) {
|
|
setGenStatus("idle");
|
|
return;
|
|
}
|
|
let baseFile = await getFileBlob(baseRom);
|
|
if (!baseFile) {
|
|
setGenStatus("idle");
|
|
setGenError("Base ROM not available.");
|
|
return;
|
|
}
|
|
if (baseRomEntry?.sha1) {
|
|
const hash = await sha1Hex(baseFile);
|
|
if (hash.toLowerCase() !== baseRomEntry.sha1.toLowerCase()) {
|
|
setGenStatus("error");
|
|
setGenError("Selected base ROM hash does not match the chosen base ROM.");
|
|
return;
|
|
}
|
|
}
|
|
const [origBuf, modBuf] = await Promise.all([baseFile.arrayBuffer(), mod.arrayBuffer()]);
|
|
const origBin = new BinFile(origBuf);
|
|
const modBin = new BinFile(modBuf);
|
|
const deltaMode = origBin.fileSize <= 4194304;
|
|
const patch = BPS.buildFromRoms(origBin, modBin, deltaMode);
|
|
const fileName = slug || title || "patch";
|
|
const patchBin = patch.export(fileName);
|
|
const out = new File([patchBin._u8array], `${fileName}.bps`, { type: 'application/octet-stream' });
|
|
setPatchFile(out);
|
|
setGenStatus("ready");
|
|
} catch (err: any) {
|
|
setGenStatus("error");
|
|
setGenError(err?.message || "Failed to generate patch.");
|
|
}
|
|
}
|
|
|
|
async function onUploadPatch(e: React.ChangeEvent<HTMLInputElement>) {
|
|
try {
|
|
setChecksumStatus("validating");
|
|
setChecksumError("");
|
|
|
|
const patch = e.target.files?.[0] || null;
|
|
if (!patch) {
|
|
setChecksumStatus("idle");
|
|
setChecksumError("");
|
|
setPatchFile(null);
|
|
return;
|
|
}
|
|
|
|
if (!baseRomEntry) {
|
|
setChecksumStatus("unknown");
|
|
setChecksumError("A checksum is not available to validate this patch file. Proceed at your own risk, or upload your modified ROM instead.");
|
|
return;
|
|
}
|
|
|
|
// Verify that the patch is a valid BPS file for the selected base ROM
|
|
const bps = BPS.fromFile(new BinFile(await patch.arrayBuffer()));
|
|
if (bps.sourceChecksum === 0 || bps.sourceChecksum === undefined) {
|
|
setChecksumStatus("unknown");
|
|
setChecksumError("A checksum is not available to validate this patch file. Proceed at your own risk, or upload your modified ROM instead.");
|
|
return;
|
|
}
|
|
|
|
const baseRomChecksum = parseInt(baseRomEntry.crc32, 16);
|
|
if (bps.sourceChecksum !== baseRomChecksum) {
|
|
setChecksumStatus("invalid");
|
|
setChecksumError("Checksum validation failed. The patch file is not compatible with the selected base ROM.");
|
|
return;
|
|
}
|
|
|
|
// All checks passed, set the checksum status to valid
|
|
setChecksumStatus("valid");
|
|
setChecksumError("");
|
|
|
|
setPatchFile(patch);
|
|
}
|
|
catch (err: any) {
|
|
setChecksumStatus("unknown");
|
|
setChecksumError(err?.message || "Failed to validate patch file.");
|
|
}
|
|
}
|
|
|
|
const preview = {
|
|
slug: slug || "preview",
|
|
title: title || "Your hack title",
|
|
author: (isArchive || customCreator) ?
|
|
(originalAuthor || "Unknown") :
|
|
(profile?.username ? `@${profile.username}` : "You"),
|
|
summary: (summary || "Short description, max 100 characters.") as string,
|
|
description: (description || "Write a longer markdown description here.") as string,
|
|
covers: coverPreviews,
|
|
baseRomId: baseRom,
|
|
downloads: 0,
|
|
version: isArchive ? "Archive" : (version || "v0.0.0"),
|
|
tags: sortOrderedTags(tags.map((name, index) => ({ name, order: index + 1 }))),
|
|
...(boxArt ? { boxArt } : {}),
|
|
socialLinks:
|
|
discord || twitter || pokecommunity || github
|
|
? { discord: discord || undefined, twitter: twitter || undefined, pokecommunity: pokecommunity || undefined, github: github || undefined }
|
|
: undefined,
|
|
createdAt: new Date().toISOString(),
|
|
patchUrl: "",
|
|
is_archive: isArchive,
|
|
};
|
|
|
|
const hasBaseRom = !!baseRom.trim();
|
|
|
|
// Before each group of base ROMs of the same category, add a divider with the category name
|
|
const baseRomOptions = React.useMemo<(SelectOption | SelectDivider)[]>(() => {
|
|
let currentCategory = "";
|
|
const options: (SelectOption | SelectDivider)[] = [];
|
|
for (const rom of baseRoms) {
|
|
if (!platform || rom.platform !== platform) continue;
|
|
if (rom.category && rom.category !== currentCategory) {
|
|
currentCategory = rom.category;
|
|
options.push({ type: "divider", label: currentCategory });
|
|
}
|
|
options.push({
|
|
value: rom.id,
|
|
label: `${rom.name.replace('Pokémon ', '')} (${rom.region})`,
|
|
description: rom.sha1,
|
|
});
|
|
}
|
|
return options;
|
|
}, [platform]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8 lg:flex-row w-full">
|
|
<div className="flex-1">
|
|
<form className="grid gap-5">
|
|
<div className="text-xs italic text-foreground/60">* Required</div>
|
|
{isHydrating && (
|
|
<div className="flex items-center gap-2 text-[13px] text-foreground/70 animate-pulse">
|
|
<span className="inline-block h-2 w-2 rounded-full bg-foreground/50"></span>
|
|
Checking for existing draft…
|
|
</div>
|
|
)}
|
|
{customCreator && permissionFrom && (
|
|
<div className="flex items-center gap-3 rounded-md border border-blue-500/30 bg-blue-500/10 p-3 text-sm text-blue-900 dark:text-blue-100">
|
|
<div className="flex items-center justify-center w-2 h-full">
|
|
<div className="inline-block h-2 w-2 rounded-full bg-blue-400" />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-semibold">
|
|
{customCreator === permissionFrom
|
|
? `Submitting on behalf of ${customCreator} with their permission.`
|
|
: `Submitting on behalf of ${customCreator}`}
|
|
</p>
|
|
{customCreator !== permissionFrom && (
|
|
<p className="text-xs text-blue-800 dark:text-blue-200">
|
|
You are submitting this hack with permission from {permissionFrom}.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isHydrating && restoredDraft && (
|
|
<div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-900 dark:text-amber-100 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-block h-2 w-2 rounded-full bg-amber-400"></span>
|
|
Restored a previously saved draft.
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
const ok = window.confirm("Clear saved draft? This will remove all saved fields and screenshots.");
|
|
if (!ok) return;
|
|
try {
|
|
if (draftKey) {
|
|
localStorage.removeItem(draftKey);
|
|
await deleteDraftCovers(draftKey);
|
|
}
|
|
} catch {}
|
|
// Reset form state
|
|
setTitle("");
|
|
setSummary("");
|
|
setDescription("");
|
|
setBaseRom("");
|
|
setPlatform("");
|
|
setVersion("");
|
|
setLanguage("");
|
|
setCompletionStatus("");
|
|
setBoxArt("");
|
|
setDiscord("");
|
|
setTwitter("");
|
|
setPokecommunity("");
|
|
setGithub("");
|
|
setVerificationContactInfo("");
|
|
setTags([]);
|
|
setNewCoverFiles([]);
|
|
setCoverErrors([]);
|
|
setPatchFile(null);
|
|
setOriginalAuthor(customCreator || "");
|
|
setShowMdPreview(false);
|
|
setStep(1);
|
|
// Clear file inputs if present
|
|
if (screenshotsInputRef.current) screenshotsInputRef.current.value = "";
|
|
if (patchInputRef.current) patchInputRef.current.value = "";
|
|
if (modifiedRomInputRef.current) modifiedRomInputRef.current.value = "";
|
|
setRestoredDraft(false);
|
|
}}
|
|
className="inline-flex h-8 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 text-xs font-medium text-foreground/80 transition-colors hover:bg-black/5 dark:hover:bg-white/10"
|
|
>
|
|
Clear saved draft
|
|
</button>
|
|
</div>
|
|
)}
|
|
<fieldset disabled={isHydrating} aria-busy={isHydrating} className="grid gap-5">
|
|
|
|
{step === 1 && (
|
|
<>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Title <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<input
|
|
ref={titleInputRef}
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
|
|
/>
|
|
) : (
|
|
<div
|
|
role="textbox"
|
|
aria-disabled
|
|
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none"
|
|
>
|
|
Your hack title
|
|
</div>
|
|
)}
|
|
<div className="mt-1 text-xs text-foreground/60">URL preview: <span className="text-foreground/80">/hack/{slug || "your-title"}</span></div>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Platform <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<Select
|
|
value={platform}
|
|
onChange={(value) => { if ((newCoverFiles.length) > 0) return; setPlatform(value as any); setBaseRom(""); }}
|
|
disabled={newCoverFiles.length > 0}
|
|
placeholder="Select platform"
|
|
options={(["GB","GBC","GBA","NDS"] as const).map(p => ({
|
|
value: p,
|
|
label: p,
|
|
}))}
|
|
/>
|
|
) : (
|
|
<div className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">{platform || ""}</div>
|
|
)}
|
|
{newCoverFiles.length > 0 && (
|
|
<div className="text-xs text-red-500">Please remove all screenshots before changing the platform.</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Base ROM <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<Select
|
|
enableFilter
|
|
value={baseRom}
|
|
onChange={setBaseRom}
|
|
disabled={!platform}
|
|
placeholder={platform ? "Select base rom" : "Select platform first"}
|
|
options={baseRomOptions}
|
|
/>
|
|
) : (
|
|
<div className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">{baseRoms.find(r=>r.id===baseRom)?.name || baseRom}</div>
|
|
)}
|
|
<p className="text-xs text-foreground/60">
|
|
Missing a base ROM?{" "}
|
|
<a
|
|
href="https://github.com/Hackdex-App/hackdex-website/issues/new?template=add-base-rom.yml"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline underline-offset-2 hover:text-foreground/80 transition-colors"
|
|
>
|
|
Request it on GitHub
|
|
<FiExternalLink className="inline-block h-3 w-3 ml-1" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Language <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<Select
|
|
value={language}
|
|
onChange={setLanguage}
|
|
placeholder="Select language"
|
|
options={['English','Spanish','French','German','Italian','Portuguese','Japanese','Chinese','Korean','Other'].map(l => ({
|
|
value: l,
|
|
label: l,
|
|
}))}
|
|
/>
|
|
) : (
|
|
<div role="textbox" aria-disabled className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">{language}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Completion Status <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<Select
|
|
value={completionStatus}
|
|
onChange={(value) => setCompletionStatus(value as any)}
|
|
placeholder="Select completion status"
|
|
options={['Complete','Demo','Alpha','Beta'].map(s => ({
|
|
value: s,
|
|
label: s,
|
|
}))}
|
|
/>
|
|
) : (
|
|
<div role="textbox" aria-disabled className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">{completionStatus || "Select completion status"}</div>
|
|
)}
|
|
</div>
|
|
|
|
{isArchive && (
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Original Author <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<input
|
|
value={originalAuthor}
|
|
onChange={(e) => setOriginalAuthor(e.target.value)}
|
|
disabled={!!customCreator}
|
|
placeholder="Name of the original hack creator"
|
|
className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed"
|
|
/>
|
|
) : (
|
|
<div role="textbox" aria-disabled className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">Original author name</div>
|
|
)}
|
|
<div className="text-xs text-foreground/60">The name of the person or team who originally created this hack</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<>
|
|
{!isArchive && (
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Version <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<input
|
|
ref={versionInputRef}
|
|
value={version}
|
|
onChange={(e) => setVersion(e.target.value)}
|
|
placeholder="e.g. v1.2.0"
|
|
className={`h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]`}
|
|
/>
|
|
) : (
|
|
<div role="textbox" aria-disabled className="h-11 rounded-md bg-[var(--surface-2)] px-3 text-sm ring-1 ring-inset ring-[var(--border)] flex items-center text-foreground/60 select-none">v0.1.0</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Tags <span className="text-red-500">*</span></label>
|
|
<TagSelector value={tags} onChange={setTags} />
|
|
</div>
|
|
|
|
<div className="grid gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-foreground/80">Summary <span className="text-red-500">*</span></label>
|
|
<span className={`text-[11px] ${summaryTooLong ? "text-red-300" : "text-foreground/60"}`}>{summary.length}/{summaryLimit}</span>
|
|
</div>
|
|
{!isDummy ? (
|
|
<input
|
|
value={summary}
|
|
onChange={(e) => setSummary(e.target.value)}
|
|
placeholder="<= 100 characters"
|
|
className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${summaryTooLong ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
) : (
|
|
<div
|
|
role="textbox"
|
|
aria-disabled
|
|
className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center text-foreground/60 select-none ${summaryTooLong ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
>
|
|
Short description, max 100 characters.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-foreground/80">Description <span className="text-red-500">*</span></label>
|
|
{!isDummy && (
|
|
<div className="flex items-center gap-1 text-xs">
|
|
<button type="button" onClick={() => setShowMdPreview(false)} className={`px-2 py-1 rounded ${!showMdPreview ? "bg-[var(--surface-2)] ring-1 ring-[var(--border)]" : "text-foreground/70"}`}>Write</button>
|
|
<button type="button" onClick={() => setShowMdPreview(true)} className={`px-2 py-1 rounded ${showMdPreview ? "bg-[var(--surface-2)] ring-1 ring-[var(--border)]" : "text-foreground/70"}`}>Preview</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isDummy ? (
|
|
<div className="prose max-w-none h-36 rounded-md bg-[var(--surface-2)] px-3 py-2 ring-1 ring-inset ring-[var(--border)] text-foreground/60 select-none">
|
|
<Markdown headingLevelOffset={1}>{description || "Write a longer markdown description here."}</Markdown>
|
|
</div>
|
|
) : !showMdPreview ? (
|
|
<textarea
|
|
rows={14}
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Supports Markdown"
|
|
className={`rounded-md bg-[var(--surface-2)] px-3 py-2 min-h-[14rem] text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]`}
|
|
/>
|
|
) : (
|
|
<div className={`prose max-w-none rounded-md bg-[var(--surface-2)] min-h-[14rem] px-3 py-2 ring-1 ring-inset ring-[var(--border)] ${description ? "" : "text-foreground/60 text-sm"}`}>
|
|
<Markdown headingLevelOffset={1}>{description || "Nothing to preview yet."}</Markdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Screenshots <span className="text-red-500">*</span></label>
|
|
{allowedSizes.length > 0 && (
|
|
<p className="text-xs text-foreground/60">Upload screenshots of your game. Allowed sizes: <span className="font-bold">{allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}</span>.</p>
|
|
)}
|
|
{tutorialInfo && (
|
|
<p className="text-xs text-foreground/60">
|
|
Need help taking screenshots? Watch our{" "}
|
|
<a
|
|
href={tutorialInfo.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 underline underline-offset-2 hover:text-foreground/80 transition-colors"
|
|
>
|
|
{tutorialInfo.emulatorName} tutorial
|
|
<FiExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</p>
|
|
)}
|
|
<div className="space-y-3">
|
|
{!isDummy ? (
|
|
<input
|
|
ref={screenshotsInputRef}
|
|
type="file"
|
|
multiple
|
|
accept="image/*"
|
|
onChange={async (e) => {
|
|
const list = Array.from(e.target.files || []);
|
|
const allowed = baseRoms.find(r => r.id === baseRom)?.platform;
|
|
const sizes = allowed ? getAllowedSizesForPlatform(allowed) : [];
|
|
const accepted: File[] = [];
|
|
const errors: string[] = [];
|
|
for (const f of list) {
|
|
if (sizes.length === 0) { accepted.push(f); continue; }
|
|
const ok = await validateImageDimensions(f, sizes);
|
|
if (ok) accepted.push(f); else errors.push(f.name);
|
|
}
|
|
setCoverErrors(errors);
|
|
// Compute next files list and update once
|
|
const nextFiles = [...newCoverFiles, ...accepted];
|
|
setNewCoverFiles(nextFiles);
|
|
}}
|
|
className={`w-full rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none ${!hasBaseRom ? 'pointer-events-none opacity-50 blur-[1px]' : ''}`}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm ring-1 ring-inset ring-[var(--border)] text-foreground/60 select-none">
|
|
Choose images to upload
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
{!isDummy ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setNewCoverFiles([]); try { if (draftKey) deleteDraftCovers(draftKey); } catch {} }}
|
|
className="inline-flex h-9 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 text-xs font-medium text-foreground/80 transition-colors hover:bg-black/5 dark:hover:bg-white/10"
|
|
>
|
|
Clear
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button type="button" disabled className="inline-flex h-9 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 text-xs font-medium text-foreground/70 disabled:opacity-40">
|
|
Add
|
|
</button>
|
|
<button type="button" disabled className="inline-flex h-9 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 text-xs font-medium text-foreground/60 disabled:opacity-40">
|
|
Clear
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-foreground/60 flex justify-between">
|
|
<p>Images: <span className={overLimit ? "text-red-300 font-bold" : "text-foreground/60"}>{newCoverFiles.length}</span>/{MAX_COVERS}</p>
|
|
{overLimit && <p className="text-red-300/80 italic">Remove some to submit.</p>}
|
|
</div>
|
|
{coverErrors.length > 0 && (
|
|
<div className="text-xs text-red-400">
|
|
Rejected (wrong size): {coverErrors.join(", ")}
|
|
</div>
|
|
)}
|
|
<div className="grid gap-2">
|
|
{newCoverFiles.length === 0 ? (
|
|
<p className="text-xs text-foreground/60">No images added yet. Add at least one to preview.</p>
|
|
) : (
|
|
!isDummy ? (
|
|
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
|
<SortableContext
|
|
items={newCoverFiles.map((f, i) => `${f.name}-${i}`)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{newCoverFiles.map((f, i) => (
|
|
<SortableCoverItem
|
|
key={`${f.name}-${i}`}
|
|
id={`${f.name}-${i}`}
|
|
index={i}
|
|
filename={f.name}
|
|
url={URL.createObjectURL(f)}
|
|
onRemove={() => removeAt(i)}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Box art URL</label>
|
|
{!isDummy ? (
|
|
<input
|
|
value={boxArt}
|
|
onChange={(e) => setBoxArt(e.target.value)}
|
|
placeholder="https://..."
|
|
className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${boxArt && !urlLike(boxArt) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
) : (
|
|
<div className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center text-foreground/60 select-none ${boxArt && !urlLike(boxArt) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}>https://...</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Social links</label>
|
|
<p className="text-xs text-foreground/60">Use full URLs starting with http:// or https://</p>
|
|
<div className="grid gap-2">
|
|
{!isDummy ? (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-10 h-11 shrink-0">
|
|
<FaDiscord size={20} className="text-foreground/70" />
|
|
</div>
|
|
<input
|
|
value={discord}
|
|
onChange={(e) => setDiscord(e.target.value)}
|
|
placeholder="Discord invite URL"
|
|
className={`flex-1 h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${discord && !urlLike(discord) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-10 h-11 shrink-0">
|
|
<FaTwitter size={20} className="text-foreground/70" />
|
|
</div>
|
|
<input
|
|
value={twitter}
|
|
onChange={(e) => setTwitter(e.target.value)}
|
|
placeholder="Twitter/X profile URL"
|
|
className={`flex-1 h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${twitter && !urlLike(twitter) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-10 h-11 shrink-0">
|
|
<PokeCommunityIcon width={20} height={20} color="currentColor" className="text-foreground/70" />
|
|
</div>
|
|
<input
|
|
value={pokecommunity}
|
|
onChange={(e) => setPokecommunity(e.target.value)}
|
|
placeholder="PokeCommunity thread URL"
|
|
className={`flex-1 h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${pokecommunity && !urlLike(pokecommunity) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center justify-center w-10 h-11 shrink-0">
|
|
<FaGithub size={20} className="text-foreground/70" />
|
|
</div>
|
|
<input
|
|
value={github}
|
|
onChange={(e) => setGithub(e.target.value)}
|
|
placeholder="GitHub repository URL"
|
|
className={`flex-1 h-11 rounded-md px-3 text-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-[var(--ring)] ${github && !urlLike(github) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center gap-2 text-foreground/60 select-none ${discord && !urlLike(discord) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}>
|
|
<FaDiscord size={20} className="text-foreground/50" />
|
|
<span>Discord invite URL</span>
|
|
</div>
|
|
<div className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center gap-2 text-foreground/60 select-none ${twitter && !urlLike(twitter) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}>
|
|
<FaTwitter size={20} className="text-foreground/50" />
|
|
<span>Twitter/X profile URL</span>
|
|
</div>
|
|
<div className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center gap-2 text-foreground/60 select-none ${pokecommunity && !urlLike(pokecommunity) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}>
|
|
<PokeCommunityIcon width={20} height={20} color="currentColor" className="text-foreground/50" />
|
|
<span>PokeCommunity thread URL</span>
|
|
</div>
|
|
<div className={`h-11 rounded-md px-3 text-sm ring-1 ring-inset flex items-center gap-2 text-foreground/60 select-none ${github && !urlLike(github) ? "ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20" : "bg-[var(--surface-2)] ring-[var(--border)]"}`}>
|
|
<FaGithub size={20} className="text-foreground/50" />
|
|
<span>GitHub repository URL</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{!profile?.verified && (
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Verification Contact Information <span className="text-foreground/60">(Recommended)</span></label>
|
|
<p className="text-xs text-foreground/60">
|
|
Help us verify your account by providing contact information from a platform where your message/post history can be verified (e.g., Discord, PokéCommunity). This information will only be visible to admins during the approval process.
|
|
</p>
|
|
{!isDummy ? (
|
|
<textarea
|
|
value={verificationContactInfo}
|
|
onChange={(e) => setVerificationContactInfo(e.target.value)}
|
|
placeholder={`Discord username: @example
|
|
I am active in the following servers:
|
|
Team Aqua's Hideout, RH Hideout, pret
|
|
|
|
Here is an invite to my development server:
|
|
https://discord.gg/example`}
|
|
rows={6}
|
|
className="rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] resize-y"
|
|
/>
|
|
) : (
|
|
<div className="rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm ring-1 ring-inset ring-[var(--border)] text-foreground/60 select-none min-h-[6rem]">
|
|
Discord: @example<br />
|
|
I am active in the following servers: Team Aqua's Hideout, pret, and PokéDev School<br />
|
|
Here is an invite to my development server: https://discord.gg/example_server_invite
|
|
</div>
|
|
)}
|
|
<p className="text-xs text-foreground/60">Optional but recommended for faster account verification. Please be detailed.</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{step === 4 && !isArchive && (
|
|
<div className="grid gap-3">
|
|
<label className="text-sm text-foreground/80">Provide patch <span className="text-red-500">*</span></label>
|
|
{!isDummy ? (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="inline-flex items-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setPatchMode("bps")}
|
|
className={`rounded-md rounded-r-none px-3 py-1.5 text-xs border-l-1 border-y-1 ${patchMode === "bps" ? "bg-[var(--surface-2)] border-[var(--border)]" : "text-foreground/70 border-[var(--border)]"}`}
|
|
>
|
|
Upload .bps
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPatchMode("rom")}
|
|
className={`rounded-md rounded-l-none px-3 py-1.5 text-xs border-1 ${patchMode === "rom" ? "bg-[var(--surface-2)] border-[var(--border)]" : "text-foreground/70 border-[var(--border)]"}`}
|
|
>
|
|
Upload modified ROM (auto-generate .bps)
|
|
</button>
|
|
</div>
|
|
|
|
{patchMode === "bps" && (
|
|
<div className="grid gap-2">
|
|
<input
|
|
ref={patchInputRef}
|
|
onChange={onUploadPatch}
|
|
type="file"
|
|
accept=".bps"
|
|
className="rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm italic text-foreground/50 ring-1 ring-inset ring-[var(--border)] file:bg-black/10 dark:file:bg-[var(--surface-2)] file:text-foreground/80 file:text-sm file:font-medium file:not-italic file:rounded-md file:border-0 file:px-3 file:py-2 file:mr-2 file:cursor-pointer"
|
|
/>
|
|
<p className="text-xs text-foreground/60">Upload a BPS patch file.</p>
|
|
{checksumStatus === "validating" && <div className="text-xs text-foreground/70">Validating checksum…</div>}
|
|
{checksumStatus === "valid" && <div className="text-xs text-emerald-400/90">Checksum valid.</div>}
|
|
{checksumStatus === "invalid" && !!checksumError && <div className="text-xs text-red-400">{checksumError}</div>}
|
|
{checksumStatus === "unknown" && !!checksumError && <div className="text-xs text-amber-400/90">{checksumError}</div>}
|
|
</div>
|
|
)}
|
|
|
|
{patchMode === "rom" && (
|
|
<div className="grid gap-3">
|
|
<div className="rounded-md border border-[var(--border)] p-3 bg-[var(--surface-2)]/50">
|
|
<div className="text-xs text-foreground/75">Required base ROM</div>
|
|
<div className="mt-1 text-sm font-medium">{baseRomEntry ? `${baseRomEntry.name} (${baseRomEntry.platform})` : "Select a base ROM in Step 1"}</div>
|
|
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
|
|
<span className={`rounded-full px-2 py-0.5 ring-1 ${baseRomReady ? "bg-emerald-600/60 text-white ring-emerald-700/80 dark:bg-emerald-500/25 dark:text-emerald-100 dark:ring-emerald-400/90" : baseRomNeedsPermission ? "bg-amber-600/60 text-white ring-amber-700/80 dark:bg-amber-500/50 dark:text-amber-100 dark:ring-amber-400/90" : "bg-red-600/60 text-white ring-red-700/80 dark:bg-red-500/50 dark:text-red-100 dark:ring-red-400/90"}`}>
|
|
{baseRomReady ? "Ready" : baseRomNeedsPermission ? "Permission needed" : "Base ROM needed"}
|
|
</span>
|
|
{baseRomNeedsPermission && (
|
|
<button type="button" onClick={onGrantPermission} disabled={!supported} className="rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1 disabled:opacity-60 disabled:cursor-not-allowed">Grant permission</button>
|
|
)}
|
|
{baseRomMissing && (
|
|
<label className="inline-flex items-center gap-2 text-xs text-foreground/80">
|
|
<input type="file" onChange={onUploadBaseRom} className="rounded-md bg-[var(--surface-2)] px-2 py-1 text-xs ring-1 ring-inset ring-[var(--border)]" />
|
|
<span>Upload base ROM</span>
|
|
</label>
|
|
)}
|
|
</div>
|
|
{!!genError && <div className="mt-2 text-xs text-red-400">{genError}</div>}
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">Modified ROM</label>
|
|
<input
|
|
ref={modifiedRomInputRef}
|
|
type="file"
|
|
accept={baseRomPlatform ? platformAccept(baseRomPlatform) : "*/*"}
|
|
disabled={!baseRomEntry || !baseRomReady || !baseRomPlatform}
|
|
onChange={onUploadModifiedRom}
|
|
className="rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm ring-1 ring-inset ring-[var(--border)] disabled:opacity-50 disabled:cursor-not-allowed"
|
|
/>
|
|
<p className="text-xs text-foreground/60">We'll generate a .bps patch on-device. No ROMs are uploaded.</p>
|
|
{genStatus === "generating" && <div className="text-xs text-foreground/70">Generating patch…</div>}
|
|
{genStatus === "ready" && patchFile && <div className="text-xs text-emerald-400/90">Patch ready: {patchFile.name}</div>}
|
|
{genStatus === "error" && !!genError && <div className="text-xs text-red-400">{genError}</div>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-md bg-[var(--surface-2)] px-3 py-2 text-sm italic text-foreground/50 ring-1 ring-inset ring-[var(--border)] select-none">Choose file</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!isDummy && (
|
|
<div className="flex items-center justify-between gap-3 border-t border-[var(--border)] pt-4 mt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setStep((s) => Math.max(1, s - 1))}
|
|
disabled={step === 1 || submitting}
|
|
className="inline-flex h-11 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-4 text-sm font-semibold text-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Back
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm text-foreground/60">Step {step} of {maxSteps}</span>
|
|
</div>
|
|
{step < maxSteps ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setStep((s) => Math.min(maxSteps, s + 1))}
|
|
disabled={
|
|
submitting ||
|
|
(step === 1 && !step1Valid) ||
|
|
(step === 2 && !step2Valid) ||
|
|
(step === 3 && !step3Valid)
|
|
}
|
|
className="inline-flex h-11 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-4 text-sm font-semibold text-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Next
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={onSubmit}
|
|
disabled={!isValid || submitting}
|
|
className="shine-wrap btn-premium h-11 min-w-[7.5rem] text-sm font-semibold dark:disabled:opacity-70 disabled:cursor-not-allowed disabled:[box-shadow:0_0_0_1px_var(--border)]"
|
|
>
|
|
<span>{submitting ? 'Submitting…' : 'Submit'}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<aside className="flex flex-col gap-5 lg:sticky lg:top-20 self-start basis-[360px]">
|
|
<HackCard hack={preview} clickable={false} />
|
|
<div className="card h-max p-5">
|
|
<div className="text-[15px] font-semibold tracking-tight">Submission tips</div>
|
|
<ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-foreground/75">
|
|
<li>Use a reliable image URL (e.g. `imgur`).</li>
|
|
<li>Include the exact expected base ROM name.</li>
|
|
<li>Describe notable features, difficulty, and target players.</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|