diff --git a/src/components/Hack/HackEditForm.tsx b/src/components/Hack/HackEditForm.tsx index 66116a0..c499c6b 100644 --- a/src/components/Hack/HackEditForm.tsx +++ b/src/components/Hack/HackEditForm.tsx @@ -4,12 +4,14 @@ import React from "react"; import Markdown from "@/components/Markdown/Markdown"; import TagSelector from "@/components/Submit/TagSelector"; import { baseRoms } from "@/data/baseRoms"; +import { getScreenshotTutorial } from "@/data/screenshotTutorials"; import Image from "next/image"; import { createClient } from "@/utils/supabase/client"; import { updateHack, saveHackCovers, presignCoverUpload } from "@/app/hack/actions"; import SortableCovers from "@/components/Hack/SortableCovers"; import Select from "@/components/Primitives/Select"; import type { Database } from "@/types/db"; +import { FiExternalLink } from "react-icons/fi"; interface HackEditFormProps { slug: string; @@ -109,6 +111,7 @@ export default function HackEditForm({ slug, initial }: HackEditFormProps) { const platformEntry = React.useMemo(() => baseRoms.find(r => r.id === baseRom), [baseRom]); const allowedSizes = platformEntry ? getAllowedSizesForPlatform(platformEntry.platform) : []; + const tutorialInfo = React.useMemo(() => getScreenshotTutorial(platformEntry?.platform), [platformEntry]); const overLimit = coverItems.length > MAX_COVERS; // Change detection helpers @@ -384,6 +387,20 @@ export default function HackEditForm({ slug, initial }: HackEditFormProps) { {allowedSizes.length > 0 && (

Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}

)} + {tutorialInfo && ( +

+ Need help taking screenshots? Watch our{" "} + + {tutorialInfo.emulatorName} tutorial + + +

+ )} 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)); @@ -922,7 +925,21 @@ export default function HackSubmitForm({
{allowedSizes.length > 0 && ( -

Upload screenshots of your game. Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}.

+

Upload screenshots of your game. Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}.

+ )} + {tutorialInfo && ( +

+ Need help taking screenshots? Watch our{" "} + + {tutorialInfo.emulatorName} tutorial + + +

)}
{!isDummy ? ( diff --git a/src/data/screenshotTutorials.ts b/src/data/screenshotTutorials.ts new file mode 100644 index 0000000..91ca77f --- /dev/null +++ b/src/data/screenshotTutorials.ts @@ -0,0 +1,18 @@ +import type { Platform } from "./baseRoms"; + +export type ScreenshotTutorial = { + url: string; + emulatorName: string; +}; + +export const screenshotTutorials: Partial> = { + NDS: { + url: "https://youtu.be/3lP7Cdk7Gpo", + emulatorName: "DeSmuMe", + }, +}; + +export function getScreenshotTutorial(platform: Platform | undefined): ScreenshotTutorial | null { + if (!platform) return null; + return screenshotTutorials[platform] || null; +}