+
Submit your ROM hack
Share your hack so others can discover and play it.
diff --git a/src/components/Discover/DiscoverBrowser.tsx b/src/components/Discover/DiscoverBrowser.tsx
index 212fa31..5b06daa 100644
--- a/src/components/Discover/DiscoverBrowser.tsx
+++ b/src/components/Discover/DiscoverBrowser.tsx
@@ -1,35 +1,103 @@
"use client";
import React from "react";
-import { hacks as allHacks } from "@/data/hacks";
import HackCard from "@/components/HackCard";
+import { createClient } from "@/utils/supabase/client";
export default function DiscoverBrowser() {
const [query, setQuery] = React.useState("");
const [tag, setTag] = React.useState
(null);
const [sort, setSort] = React.useState("popular");
+ const [hacks, setHacks] = React.useState([]);
+ const [tags, setTags] = React.useState([]);
- const tags = React.useMemo(() => {
- const set = new Set();
- allHacks.forEach((h) => h.tags.forEach((t) => set.add(t)));
- return Array.from(set).sort();
- }, []);
+ React.useEffect(() => {
+ const run = async () => {
+ const supabase = createClient();
+ const { data: rows } = await supabase
+ .from("hacks")
+ .select("slug,title,summary,description,base_rom,version,downloads,created_by,patch_url")
+ .order(sort === "popular" ? "downloads" : "created_at", { ascending: false });
+ const slugs = (rows || []).map((r) => r.slug);
+ const { data: coverRows } = await supabase
+ .from("hack_covers")
+ .select("hack_slug,url,position")
+ .in("hack_slug", slugs)
+ .order("position", { ascending: true });
+ const coversBySlug = new Map();
+ if (coverRows && coverRows.length > 0) {
+ const { data: imagesData } = await supabase.storage
+ .from('hack-covers')
+ .createSignedUrls(coverRows.map(c => c.url), 60 * 5);
+ if (imagesData) {
+ // Map: storage object url -> signedUrl
+ const urlToSignedUrl = new Map();
+ imagesData.forEach((d, idx) => {
+ // If creation fails, d.signedUrl might be undefined; filter those out
+ if (d.signedUrl) urlToSignedUrl.set(coverRows[idx].url, d.signedUrl);
+ });
- const hacks = React.useMemo(() => {
- let filtered = allHacks.filter((h) => {
- const q = query.toLowerCase();
- const matchesQ =
- !q ||
+ coverRows.forEach((c) => {
+ const arr = coversBySlug.get(c.hack_slug) || [];
+ const signed = urlToSignedUrl.get(c.url);
+ if (signed) {
+ arr.push(signed);
+ coversBySlug.set(c.hack_slug, arr);
+ }
+ });
+ }
+ }
+ const { data: tagRows } = await supabase
+ .from("hack_tags")
+ .select("hack_slug,tags(name)")
+ .in("hack_slug", slugs);
+ const tagsBySlug = new Map();
+ (tagRows || []).forEach((r: any) => {
+ if (!r.tags?.name) return;
+ const arr = tagsBySlug.get(r.hack_slug) || [];
+ arr.push(r.tags.name);
+ tagsBySlug.set(r.hack_slug, arr);
+ });
+ const { data: profiles } = await supabase
+ .from("profiles")
+ .select("id,username");
+ const usernameById = new Map();
+ (profiles || []).forEach((p) => usernameById.set(p.id, p.username ? `@${p.username}` : "Unknown"));
+
+ const mapped = (rows || []).map((r) => ({
+ slug: r.slug,
+ title: r.title,
+ author: usernameById.get(r.created_by as string) || "Unknown",
+ covers: coversBySlug.get(r.slug) || [],
+ tags: tagsBySlug.get(r.slug) || [],
+ downloads: r.downloads,
+ baseRomId: r.base_rom,
+ version: r.version,
+ summary: r.summary,
+ description: r.description,
+ }));
+
+ setHacks(mapped);
+ const tagSet = new Set();
+ mapped.forEach((h) => h.tags.forEach((t) => tagSet.add(t)));
+ setTags(Array.from(tagSet).sort());
+ };
+ run();
+ }, [sort]);
+
+ const filtered = React.useMemo(() => {
+ let out = hacks;
+ const q = query.toLowerCase();
+ if (q) {
+ out = out.filter((h) =>
h.title.toLowerCase().includes(q) ||
h.author.toLowerCase().includes(q) ||
- h.description.toLowerCase().includes(q);
- const matchesTag = !tag || h.tags.includes(tag);
- return matchesQ && matchesTag;
- });
- if (sort === "popular") filtered = filtered.sort((a, b) => b.downloads - a.downloads);
- if (sort === "new") filtered = filtered; // mock
- return filtered;
- }, [query, tag, sort]);
+ (h.description || "").toLowerCase().includes(q)
+ );
+ }
+ if (tag) out = out.filter((h) => h.tags.includes(tag));
+ return out;
+ }, [hacks, query, tag]);
return (
@@ -79,7 +147,7 @@ export default function DiscoverBrowser() {
- {hacks.map((hack) => (
+ {filtered.map((hack) => (
))}
diff --git a/src/components/HackCard.tsx b/src/components/HackCard.tsx
index 875e3fe..f2fe552 100644
--- a/src/components/HackCard.tsx
+++ b/src/components/HackCard.tsx
@@ -1,18 +1,33 @@
import Image from "next/image";
+import PixelImage from "./PixelImage";
import Link from "next/link";
import { formatCompactNumber } from "@/utils/format";
import { useBaseRoms } from "@/contexts/BaseRomContext";
-import type { Hack } from "@/data/hacks";
+import { baseRoms } from "@/data/baseRoms";
import { useEffect, useState } from "react";
import useEmblaCarousel from "embla-carousel-react";
import { usePathname } from "next/navigation";
+import { FaRegImages } from "react-icons/fa6";
-// Using shared Hack type from data
+type CardHack = {
+ slug: string;
+ title: string;
+ author: string;
+ covers: string[];
+ tags: string[];
+ downloads: number;
+ baseRomId?: string;
+ version: string;
+ summary?: string;
+ description?: string;
+};
-export default function HackCard({ hack, clickable = true, className = "" }: { hack: Hack; clickable?: boolean; className?: string }) {
+export default function HackCard({ hack, clickable = true, className = "" }: { hack: CardHack; clickable?: boolean; className?: string }) {
const { isLinked, hasPermission, hasCached } = useBaseRoms();
- const linked = isLinked(hack.baseRom);
- const ready = hasPermission(hack.baseRom) || hasCached(hack.baseRom);
+ const match = baseRoms.find((r) => r.id === hack.baseRomId);
+ const baseName = match?.name ?? undefined;
+ const linked = baseName ? isLinked(baseName) : false;
+ const ready = baseName ? hasPermission(baseName) || hasCached(baseName) : false;
const images = (hack.covers && hack.covers.length > 0 ? hack.covers : []).filter(Boolean);
const isCarousel = images.length > 1;
const pathname = usePathname();
@@ -30,7 +45,7 @@ export default function HackCard({ hack, clickable = true, className = "" }: { h
emblaApi.off("select", onSelect);
};
}, [emblaApi]);
- const cardClass = `rounded-[12px] overflow-hidden ${
+ const cardClass = `rounded-[12px] overflow-hidden min-w-[360px] ${
clickable ? "transition-transform duration-300 hover:-translate-y-0.5 hover:shadow-xl anim-float" : ""
} ring-1 ${ready ? "ring-emerald-400/50 bg-emerald-500/10" : "card ring-[var(--border)]"}`;
const gradientBgClass = `bg-gradient-to-b ${ready ? 'from-emerald-300/5 to-emerald-400/30 dark:from-emerald-950/10 dark:to-emerald-600/40' : 'from-black/30 to-black/10 dark:from-black/80 dark:to-black/40'}`;
@@ -75,7 +90,7 @@ export default function HackCard({ hack, clickable = true, className = "" }: { h
{hack.tags.slice(0, 2).map((t) => (
{t}
@@ -141,7 +156,7 @@ export default function HackCard({ hack, clickable = true, className = "" }: { h
return text.length > 120 ? text.slice(0, 120).trimEnd() + "…" : text;
})()}
- Base: {hack.baseRom}
+ Base: {baseName ?? "Unknown"}
);
diff --git a/src/components/Submit/SubmitForm.tsx b/src/components/Submit/SubmitForm.tsx
index 9d18f8d..0370fcf 100644
--- a/src/components/Submit/SubmitForm.tsx
+++ b/src/components/Submit/SubmitForm.tsx
@@ -4,15 +4,18 @@ import React from "react";
import Image from "next/image";
import { baseRoms } from "@/data/baseRoms";
import HackCard from "@/components/HackCard";
-import type { Hack } from "@/data/hacks";
-import { hacks as allHacks } from "@/data/hacks";
+import { createClient } from "@/utils/supabase/client";
+import { prepareSubmission, presignPatchAndSaveCovers, confirmPatchUpload } from "@/app/submit/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 ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
+import { RxDragHandleDots2, RxPlus } from "react-icons/rx";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { Database } from "@/types/db";
-function SortableCoverItem({ id, index, url, onRemove }: { id: string; index: number; url: string; onRemove: () => void }) {
+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),
@@ -22,12 +25,14 @@ function SortableCoverItem({ id, index, url, onRemove }: { id: string; index: nu
-
⋮⋮
+
+
+
-
{url}
+
{filename}
{index === 0 &&
Primary
}
@@ -49,16 +54,24 @@ interface SubmitFormProps {
dummy?: boolean;
}
+type TagSortable = Database["public"]["Tables"]["tags"]["Row"] & {
+ popularity: number;
+};
+
export default function SubmitForm({ dummy = false }: SubmitFormProps) {
const MAX_COVERS = 10;
+ const { profile } = useAuthContext();
const [title, setTitle] = React.useState("");
- const [author, setAuthor] = React.useState("");
+ // Author derived from profile later
const [summary, setSummary] = React.useState("");
const [description, setDescription] = React.useState("");
- const [coverUrls, setCoverUrls] = React.useState
([]);
- const [newCoversInput, setNewCoversInput] = React.useState("");
- const [baseRom, setBaseRom] = React.useState("Pokemon Emerald");
- const [version, setVersion] = React.useState("v0.1.0");
+ // Deprecated: coverUrls removed; using files array for screenshots
+ const [newCoverFiles, setNewCoverFiles] = React.useState([]);
+ const [coverErrors, setCoverErrors] = React.useState([]);
+ const [baseRom, setBaseRom] = React.useState("");
+ const [platform, setPlatform] = React.useState<"GB" | "GBC" | "GBA" | "NDS" | "">("");
+ const [version, setVersion] = React.useState("");
+ const [language, setLanguage] = React.useState("");
const [boxArt, setBoxArt] = React.useState("");
const [discord, setDiscord] = React.useState("");
const [twitter, setTwitter] = React.useState("");
@@ -66,25 +79,70 @@ export default function SubmitForm({ dummy = false }: SubmitFormProps) {
const [tags, setTags] = React.useState([]);
const [tagsInput, setTagsInput] = React.useState("");
const [showMdPreview, setShowMdPreview] = React.useState(false);
+ const [patchFile, setPatchFile] = React.useState(null);
+ const [submitting, setSubmitting] = React.useState(false);
+ const [step, setStep] = React.useState(1);
+ const supabase = createClient();
+ const isDummy = !!dummy;
- const parseUrls = (text: string) =>
- text
- .split(/[\n,]+/)
- .map((s) => s.trim())
- .filter(Boolean);
+ const titleInputRef = React.useRef(null);
+ const versionInputRef = React.useRef(null);
+ const screenshotsInputRef = React.useRef(null);
+ const patchInputRef = React.useRef(null);
- const addFromInput = () => {
- const urls = parseUrls(newCoversInput);
- if (urls.length === 0) return;
- setCoverUrls((prev) => [...prev, ...urls]);
- setNewCoversInput("");
+ // Build object URLs for local screenshot previews and clean them up when files change
+ const coverPreviews = React.useMemo(() => {
+ return newCoverFiles.map((f) => URL.createObjectURL(f));
+ }, [newCoverFiles]);
+
+ React.useEffect(() => {
+ return () => {
+ coverPreviews.forEach((u) => URL.revokeObjectURL(u));
+ };
+ }, [coverPreviews]);
+
+ 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 { error } = await supabase.storage.from('hack-covers').upload(path, file);
+ if (error) throw error;
+ urls.push(path);
+ }
+ return urls;
};
- const overLimit = coverUrls.length > MAX_COVERS;
- const overBy = Math.max(0, coverUrls.length - MAX_COVERS);
+
+ 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 }];
+ // NDS
+ return [{ w: 256, h: 192 }, { w: 256, h: 384 }];
+ }
+
+ async function validateImageDimensions(file: File, allowed: { w: number; h: number }[]) {
+ return new Promise((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) => {
- setCoverUrls((prev) => prev.filter((_, i) => i !== index));
+ setNewCoverFiles((prev) => prev.filter((_, i) => i !== index));
};
const sensors = useSensors(
@@ -94,28 +152,88 @@ export default function SubmitForm({ dummy = false }: SubmitFormProps) {
const onDragEnd = (event: any) => {
const { active, over } = event;
if (!over || active.id === over.id) return;
- const ids = coverUrls.map((url, i) => `${url}-${i}`);
+ 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;
- setCoverUrls((prev) => arrayMove(prev, oldIndex, newIndex));
+ setNewCoverFiles((prev) => arrayMove(prev, oldIndex, newIndex));
};
- const existingTags = React.useMemo(() => {
- const set = new Set();
- allHacks.forEach((h) => h.tags.forEach((t) => set.add(t)));
- return Array.from(set).sort();
+ // Existing tags (from DB)
+ const [allTags, setAllTags] = React.useState([]);
+ const [isTagDropdownOpen, setIsTagDropdownOpen] = React.useState(false);
+ const tagAreaRef = React.useRef(null);
+ const tagsInputRef = React.useRef(null);
+ const [activeTagIndex, setActiveTagIndex] = React.useState(0);
+
+ React.useEffect(() => {
+ // Fetch all tags once on mount
+ const fetchTags = async () => {
+ try {
+ const { data, error } = await supabase.from('tags').select('id, name, usage: hack_tags (count)');
+ if (error) return;
+ const fetchedTags: TagSortable[] = (data || []).map((t: any) => ({ id: t.id, name: t.name, popularity: t.usage[0].count || 0 }));
+ setAllTags(
+ fetchedTags.sort((a, b) => {
+ if (b.popularity !== a.popularity) {
+ return b.popularity - a.popularity;
+ }
+ // If popularity is equal, sort by id
+ if (a.id < b.id) return -1;
+ if (a.id > b.id) return 1;
+ return 0;
+ })
+ );
+ } catch {}
+ };
+ fetchTags();
+ }, [supabase]);
+
+ React.useEffect(() => {
+ const onDocClick = (e: MouseEvent) => {
+ if (!tagAreaRef.current) return;
+ if (!tagAreaRef.current.contains(e.target as Node)) {
+ setIsTagDropdownOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', onDocClick);
+ return () => document.removeEventListener('mousedown', onDocClick);
}, []);
- const suggestedTags = React.useMemo(() => {
+ const filteredTags = React.useMemo(() => {
const q = tagsInput.trim().toLowerCase();
- if (!q) return [] as string[];
- return existingTags.filter((t) => t.toLowerCase().startsWith(q) && !tags.includes(t)).slice(0, 6);
- }, [existingTags, tags, tagsInput]);
+ const pool = allTags.filter((t) => !tags.includes(t.name));
+ if (!q) return pool.slice(0, 15);
+ return pool.filter((t) => t.name.toLowerCase().includes(q)).slice(0, 8);
+ }, [allTags, tags, tagsInput]);
+
+ // Focus the first input on each step when step changes
+ React.useEffect(() => {
+ if (isDummy) return;
+ if (step === 1) {
+ titleInputRef.current?.focus();
+ } else if (step === 2) {
+ versionInputRef.current?.focus();
+ } else if (step === 3) {
+ screenshotsInputRef.current?.focus();
+ } else if (step === 4) {
+ patchInputRef.current?.focus();
+ }
+ }, [step, isDummy]);
+
+ React.useEffect(() => {
+ if (!isTagDropdownOpen) return;
+ if (filteredTags.length === 0) {
+ setActiveTagIndex(0);
+ } else {
+ setActiveTagIndex((i) => Math.min(Math.max(0, i), filteredTags.length - 1));
+ }
+ }, [filteredTags, isTagDropdownOpen]);
const addTag = (value: string) => {
const tag = value.trim();
if (!tag) return;
+ if (!allTags.some((t) => t.name === tag)) return; // only allow existing tags
if (tags.includes(tag)) return;
setTags((prev) => [...prev, tag]);
setTagsInput("");
@@ -126,11 +244,27 @@ export default function SubmitForm({ dummy = false }: SubmitFormProps) {
};
const onTagsKeyDown: React.KeyboardEventHandler = (e) => {
- if (e.key === "Enter" || e.key === ",") {
+ if (e.key === 'ArrowDown') {
e.preventDefault();
- addTag(tagsInput);
- } else if (e.key === "Backspace" && !tagsInput && tags.length > 0) {
- // Quick backspace to remove last
+ if (!isTagDropdownOpen) setIsTagDropdownOpen(true);
+ if (filteredTags.length > 0) setActiveTagIndex((i) => (i + 1) % filteredTags.length);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ if (!isTagDropdownOpen) setIsTagDropdownOpen(true);
+ if (filteredTags.length > 0) setActiveTagIndex((i) => (i - 1 + filteredTags.length) % filteredTags.length);
+ } else if (e.key === 'Enter' || e.key === ',') {
+ e.preventDefault();
+ const choice = filteredTags[activeTagIndex] || filteredTags[0];
+ if (choice) {
+ addTag(choice.name);
+ setIsTagDropdownOpen(true);
+ }
+ } else if (e.key === 'Tab') {
+ // Close dropdown and allow tabbing to next focusable element
+ setIsTagDropdownOpen(false);
+ } else if (e.key === 'Escape') {
+ setIsTagDropdownOpen(false);
+ } else if (e.key === 'Backspace' && !tagsInput && tags.length > 0) {
e.preventDefault();
setTags((prev) => prev.slice(0, prev.length - 1));
}
@@ -148,32 +282,71 @@ export default function SubmitForm({ dummy = false }: SubmitFormProps) {
const summaryLimit = 120;
const summaryTooLong = summary.length > summaryLimit;
+ const allowedSizes = platform ? getAllowedSizesForPlatform(platform) : [];
+
const urlLike = (s: string) => !s || /^https?:\/\//i.test(s);
- const isValid =
- !!title.trim() &&
- !!author.trim() &&
- !!baseRom.trim() &&
- !!version.trim() &&
- coverUrls.length > 0 &&
- !!summary.trim() &&
- !summaryTooLong &&
- urlLike(boxArt) &&
- urlLike(discord) &&
- urlLike(twitter) &&
- urlLike(pokecommunity) &&
- !overLimit;
+ const hasOneSocial = [discord, twitter, pokecommunity].some((s) => !!s.trim());
+ const allSocialValid = [discord, twitter, pokecommunity].every((s) => !s || urlLike(s));
- const preview: Hack = {
+
+ const step1Valid = !!title.trim() && !!platform && !!baseRom.trim() && !!language.trim();
+ const step2Valid = !!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 && !!patchFile;
+
+ const onSubmit = async () => {
+ if (!isValid || submitting) return;
+ setSubmitting(true);
+ try {
+ // Step 1: create hack & tags
+ 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('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 (tags.length) fd.set('tags', tags.join(','));
+
+ const prepared = await prepareSubmission(fd);
+ if (!prepared.ok) throw new Error(prepared.error || 'Failed to prepare');
+
+ // Step 2: upload covers to storage and save rows
+ const uploadedCoverUrls = await uploadCovers(prepared.slug);
+ const presigned = await presignPatchAndSaveCovers({ slug: prepared.slug, version, coverUrls: uploadedCoverUrls });
+ if (!presigned.ok) throw new Error(presigned.error || 'Failed to presign');
+
+ // Step 3: upload patch via signed URL
+ if (patchFile) {
+ 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 });
+ if (!finalized.ok) throw new Error(finalized.error || 'Failed to finalize');
+ window.location.href = finalized.redirectTo!;
+ } else {
+ window.location.href = `/hack/${prepared.slug}`;
+ }
+ } catch (e: any) {
+ alert(e.message || 'Submission failed');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const preview = {
slug: slug || "preview",
title: title || "Your hack title",
- author: author || "Your name",
+ author: 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: coverUrls,
- baseRom: baseRom || "Pokemon Emerald",
+ covers: coverPreviews,
+ baseRomId: baseRom,
downloads: 0,
- version: version || "v0.1.0",
+ version: version || "v0.0.0",
tags,
...(boxArt ? { boxArt } : {}),
socialLinks:
@@ -184,343 +357,436 @@ export default function SubmitForm({ dummy = false }: SubmitFormProps) {
patchUrl: "",
};
- const isDummy = !!dummy;
+ const hasBaseRom = !!baseRom.trim();
return (
-