mirror of
https://github.com/Hackdex-App/hackdex-website.git
synced 2026-04-26 16:27:05 -05:00
627836b448
* Start version manager implementation * Allow changing the name of patch `version` * Update some links to version manager * Hide rollback button for unpublished newer versions * Move "publish" to be first action * Fix `publishPatchVersion` not updating `published` state * Reorder HackOptionsMenu and add some icons * Add "Version Status Guide" info card to versions page * Add most recent changelog to hack page
296 lines
14 KiB
TypeScript
296 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { createClient } from "@/utils/supabase/client";
|
|
import { useBaseRoms } from "@/contexts/BaseRomContext";
|
|
import { baseRoms } from "@/data/baseRoms";
|
|
import { platformAccept } from "@/utils/idb";
|
|
import { sha1Hex } from "@/utils/hash";
|
|
import BinFile from "rom-patcher-js/rom-patcher-js/modules/BinFile.js";
|
|
import BPS from "rom-patcher-js/rom-patcher-js/modules/RomPatcher.format.bps.js";
|
|
import { presignNewPatchVersion } from "@/app/hack/actions";
|
|
import { confirmPatchUpload } from "@/app/submit/actions";
|
|
import { FaInfoCircle } from "react-icons/fa";
|
|
|
|
export interface HackPatchFormProps {
|
|
slug: string;
|
|
baseRomId: string;
|
|
existingVersions: string[];
|
|
currentVersion?: string;
|
|
}
|
|
|
|
export default function HackPatchForm(props: HackPatchFormProps) {
|
|
const { slug, baseRomId, existingVersions, currentVersion } = props;
|
|
const [version, setVersion] = React.useState("");
|
|
const [patchMode, setPatchMode] = React.useState<"bps" | "rom">("bps");
|
|
const [patchFile, setPatchFile] = React.useState<File | null>(null);
|
|
const [genStatus, setGenStatus] = React.useState<"idle" | "generating" | "ready" | "error">("idle");
|
|
const [genError, setGenError] = React.useState<string>("");
|
|
const [submitting, setSubmitting] = React.useState(false);
|
|
const [error, setError] = React.useState<string>("");
|
|
const [publishAutomatically, setPublishAutomatically] = React.useState(false);
|
|
|
|
const versionInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const patchInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const modifiedRomInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
|
|
const supabase = createClient();
|
|
const baseRomEntry = React.useMemo(() => baseRoms.find(r => r.id === baseRomId) || null, [baseRomId]);
|
|
const baseRomPlatform = baseRomEntry?.platform;
|
|
const baseRomName = baseRomEntry?.name;
|
|
|
|
const { isLinked, hasPermission, hasCached, importUploadedBlob, ensurePermission, getFileBlob, supported } = useBaseRoms();
|
|
const baseRomReady = !!baseRomId && (hasPermission(baseRomId) || hasCached(baseRomId));
|
|
const baseRomNeedsPermission = !!baseRomId && isLinked(baseRomId) && !baseRomReady;
|
|
const baseRomMissing = !!baseRomId && !isLinked(baseRomId) && !hasCached(baseRomId);
|
|
|
|
const isVersionTaken = version.trim() && existingVersions.includes(version.trim());
|
|
const canSubmit = React.useMemo(() => {
|
|
return !!version.trim() && ((!!patchFile && patchMode === "bps") || (patchMode === "rom" && genStatus === "ready")) && !isVersionTaken && !submitting;
|
|
}, [version, patchFile, patchMode, genStatus, isVersionTaken, submitting]);
|
|
|
|
React.useEffect(() => {
|
|
versionInputRef.current?.focus();
|
|
}, []);
|
|
|
|
// Suggest next version based on currentVersion (supports: 1, 1.0, 1.0.0, v1, v1.0, v1.0.1)
|
|
React.useEffect(() => {
|
|
if (version.trim()) return;
|
|
if (!currentVersion) return;
|
|
const raw = String(currentVersion).trim();
|
|
// Capture prefix (non-digit), numeric core, and any trailing suffix
|
|
const m = raw.match(/^([^0-9]*\s*)([0-9]+)(?:\.([0-9]+))?(?:\.([0-9]+))?([\s\S]*)$/);
|
|
if (!m) return;
|
|
const preservedPrefix = m[1] || "";
|
|
const major = parseInt(m[2] || "0", 10);
|
|
const minor = parseInt(m[3] || "0", 10);
|
|
const patch = parseInt(m[4] || "0", 10);
|
|
const suffix = m[5] || "";
|
|
const next = `${major}.${minor}.${patch + 1}${suffix}`;
|
|
setVersion(preservedPrefix + next);
|
|
}, [currentVersion]);
|
|
|
|
React.useEffect(() => {
|
|
setPatchFile(null);
|
|
setGenStatus("idle");
|
|
setGenError("");
|
|
patchInputRef.current && (patchInputRef.current.value = "");
|
|
modifiedRomInputRef.current && (modifiedRomInputRef.current.value = "");
|
|
}, [patchMode]);
|
|
|
|
async function onGrantPermission() {
|
|
if (!baseRomId) return;
|
|
await ensurePermission(baseRomId, true);
|
|
}
|
|
|
|
async function onUploadBaseRom(e: React.ChangeEvent<HTMLInputElement>) {
|
|
try {
|
|
setGenError("");
|
|
const f = e.target.files?.[0];
|
|
if (!f) return;
|
|
const matched = await importUploadedBlob(f);
|
|
if (!matched) {
|
|
setGenError("That ROM doesn't match any supported base ROM.");
|
|
return;
|
|
}
|
|
if (matched !== baseRomId) {
|
|
setGenError(`This ROM matches "${matched}", but this hack 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 || !baseRomId) {
|
|
setGenStatus("idle");
|
|
return;
|
|
}
|
|
let baseFile = await getFileBlob(baseRomId);
|
|
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 fname = `${slug}-${(version || "patch").replace(/[^a-zA-Z0-9._-]+/g, "-")}`;
|
|
const patchBin = patch.export(fname);
|
|
const out = new File([patchBin._u8array], `${fname}.bps`, { type: 'application/octet-stream' });
|
|
setPatchFile(out);
|
|
setGenStatus("ready");
|
|
} catch (err: any) {
|
|
setGenStatus("error");
|
|
setGenError(err?.message || "Failed to generate patch.");
|
|
}
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
if (!canSubmit) return;
|
|
setSubmitting(true);
|
|
setError("");
|
|
try {
|
|
const presigned = await presignNewPatchVersion({ slug, version: version.trim() });
|
|
if (!presigned.ok) throw new Error(presigned.error || 'Failed to presign');
|
|
await fetch(presigned.presignedUrl!, { method: 'PUT', body: patchFile!, headers: { 'Content-Type': 'application/octet-stream' } });
|
|
const finalized = await confirmPatchUpload({ slug, objectKey: presigned.objectKey!, version: version.trim(), publishAutomatically });
|
|
if (!finalized.ok) throw new Error(finalized.error || 'Failed to finalize');
|
|
window.location.href = finalized.redirectTo!;
|
|
} catch (e: any) {
|
|
setError(e.message || 'Upload failed');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-5">
|
|
{currentVersion !== undefined && (
|
|
<div className="flex items-center rounded-md border border-[var(--border)]/70 bg-[var(--surface-2)]/20 px-3 py-2">
|
|
<FaInfoCircle size={12} className="mr-1 text-foreground/80" />
|
|
<p className="text-xs text-foreground/60">Current version: <span className="text-foreground/90 font-medium">{currentVersion || 'Not set'}</span></p>
|
|
</div>
|
|
)}
|
|
<div className="grid gap-2">
|
|
<label className="text-sm text-foreground/80">New Version <span className="text-red-500">*</span></label>
|
|
<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 ${isVersionTaken ? 'ring-red-600/40 bg-red-500/10 dark:ring-red-400/40 dark:bg-red-950/20' : 'ring-[var(--border)]'} focus:outline-none focus:ring-2 focus:ring-[var(--ring)]`}
|
|
/>
|
|
<div className="text-xs text-foreground/60">
|
|
{isVersionTaken ? 'Already used by this hack.' : 'Use semantic versions like v1.2.0.'}
|
|
</div>
|
|
{existingVersions.length > 0 && (
|
|
<div className="text-[11px] text-foreground/60">Existing versions: {existingVersions.join(', ')}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
<label className="text-sm text-foreground/80">Provide patch <span className="text-red-500">*</span></label>
|
|
<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={(e) => setPatchFile(e.target.files?.[0] || null)}
|
|
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>
|
|
</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 base ROM in main Edit page"}</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>
|
|
|
|
{!!error && <div className="text-sm text-red-400">{error}</div>}
|
|
|
|
<div className="flex items-start gap-3 border-t border-[var(--border)] pt-4 mt-2">
|
|
<label className="flex items-start gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={publishAutomatically}
|
|
onChange={(e) => setPublishAutomatically(e.target.checked)}
|
|
className="mt-0.5 rounded border-[var(--border)] text-emerald-600 focus:ring-emerald-600"
|
|
/>
|
|
<div className="text-sm">
|
|
<div className="font-medium text-foreground/90">Publish Automatically</div>
|
|
<div className="text-foreground/60 mt-0.5">
|
|
If checked, this version will be published and set as the current patch immediately after upload.
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onSubmit}
|
|
disabled={!canSubmit}
|
|
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 ? 'Uploading…' : 'Upload version'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|