feat: tutorials for submit page

package.json

@@ -18,6 +18,7 @@
 		"@prisma/client": "^6.6.0",
 		"@trafficlunar/asmcrypto.js": "^1.0.2",
 		"bit-buffer": "^0.2.5",
+		"canvas-confetti": "^1.9.3",
 		"dayjs": "^1.11.13",
 		"downshift": "^9.0.9",
 		"embla-carousel-react": "^8.6.0",
@@ -38,6 +39,7 @@
 		"@eslint/eslintrc": "^3.3.1",
 		"@iconify/react": "^5.2.1",
 		"@tailwindcss/postcss": "^4.1.3",
+		"@types/canvas-confetti": "^1.9.0",
 		"@types/node": "^20.17.30",
 		"@types/react": "^19.1.0",
 		"@types/react-dom": "^19.1.2",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       bit-buffer:
         specifier: ^0.2.5
         version: 0.2.5
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -84,6 +87,9 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4.1.3
         version: 4.1.3
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
       '@types/node':
         specifier: ^20.17.30
         version: 20.17.30
@@ -815,6 +821,9 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -1081,6 +1090,9 @@ packages:
   caniuse-lite@1.0.30001712:
     resolution: {integrity: sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -2850,6 +2862,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/canvas-confetti@1.9.0': {}
+
   '@types/cookie@0.6.0': {}
 
   '@types/estree@1.0.7': {}
@@ -3138,6 +3152,8 @@ snapshots:
 
   caniuse-lite@1.0.30001712: {}
 
+  canvas-confetti@1.9.3: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0

pnpm-workspace.yaml

@@ -1,6 +0,0 @@
-onlyBuiltDependencies:
-  - '@prisma/client'
-  - '@prisma/engines'
-  - esbuild
-  - prisma
-  - sharp

src/components/submit-form/index.tsx

@@ -17,6 +17,7 @@ import TagSelector from "../tag-selector";
 import ImageList from "./image-list";
 import QrUpload from "./qr-upload";
 import QrScanner from "./qr-scanner";
+import SubmitTutorialButton from "../tutorial/submit";
 import LikeButton from "../like-button";
 import Carousel from "../carousel";
 import SubmitButton from "../submit-button";
@@ -131,13 +132,7 @@ export default function SubmitForm() {
 		<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
 			<div className="flex justify-center">
 				<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
-					<Carousel
-						images={[
-							studioUrl ?? "/tomodachi-question-face-icon-alt.svg",
-							generatedQrCodeUrl ?? "/loading.svg",
-							...files.map((file) => URL.createObjectURL(file)),
-						]}
-					/>
+					<Carousel images={[studioUrl ?? "/loading.svg", generatedQrCodeUrl ?? "/loading.svg", ...files.map((file) => URL.createObjectURL(file))]} />
 
 					<div className="p-4 flex flex-col gap-1 h-full">
 						<h1 className="font-bold text-2xl line-clamp-1" title={name}>
@@ -204,7 +199,6 @@ export default function SubmitForm() {
 
 				<div className="flex flex-col items-center gap-2">
 					<QrUpload setQrBytesRaw={setQrBytesRaw} />
-
 					<span>or</span>
 
 					<button type="button" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
@@ -213,10 +207,11 @@ export default function SubmitForm() {
 					</button>
 
 					<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+					<SubmitTutorialButton />
 				</div>
 
 				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
 					<hr className="flex-grow border-zinc-300" />
 					<span>Custom images</span>
 					<hr className="flex-grow border-zinc-300" />

src/components/tutorial/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Image from "next/image";
+import { Icon } from "@iconify/react";
+import { useEffect } from "react";
+
+import confetti from "canvas-confetti";
+
+interface Props {
+	text?: string;
+	imageSrc?: string;
+	carouselIndex?: number;
+	finishIndex?: number;
+}
+
+export default function TutorialPage({ text, imageSrc, carouselIndex, finishIndex }: Props) {
+	useEffect(() => {
+		if (carouselIndex !== finishIndex || !carouselIndex || !finishIndex) return;
+
+		const defaults = { startVelocity: 30, spread: 360, ticks: 120, zIndex: 50 };
+		const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+		setTimeout(() => {
+			confetti({
+				...defaults,
+				particleCount: 500,
+				origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+			});
+			confetti({
+				...defaults,
+				particleCount: 500,
+				origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+			});
+		}, 300);
+	}, [carouselIndex, finishIndex]);
+
+	return (
+		<div className="flex-shrink-0 flex flex-col w-full px-6">
+			{!finishIndex ? (
+				<>
+					<p className="text-sm text-zinc-500 mb-2 text-center">{text}</p>
+
+					<Image
+						src={imageSrc ?? "/missing.svg"}
+						alt="step 1 image"
+						width={256}
+						height={256}
+						className="rounded-lg w-full h-full object-contain bg-black"
+					/>
+				</>
+			) : (
+				<div className="h-full flex flex-col justify-center items-center">
+					<Icon icon="fxemoji:partypopper" className="text-9xl" />
+					<h1 className="font-medium text-xl mt-6 animate-bounce">Yatta! You did it!</h1>
+				</div>
+			)}
+		</div>
+	);
+}

src/components/tutorial/starting-page.tsx

@@ -0,0 +1,59 @@
+import Image from "next/image";
+import { UseEmblaCarouselType } from "embla-carousel-react";
+
+interface Props {
+	emblaApi: UseEmblaCarouselType[1] | undefined;
+}
+
+export default function StartingPage({ emblaApi }: Props) {
+	const goToTutorial = (index: number) => {
+		if (!emblaApi) return;
+
+		emblaApi.scrollTo(index - 1, true);
+		emblaApi.scrollTo(index);
+	};
+
+	return (
+		<div className="flex-shrink-0 flex flex-col w-full px-6 py-6">
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2">
+				<hr className="flex-grow border-zinc-300" />
+				<span>Pick a tutorial</span>
+				<hr className="flex-grow border-zinc-300" />
+			</div>
+
+			<div className="grid grid-cols-2 gap-4 h-full">
+				<button
+					onClick={() => goToTutorial(1)}
+					className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
+				>
+					<Image
+						src={"/tutorial/allow-copying/thumbnail.png"}
+						alt="Allow Copying thumbnail"
+						width={128}
+						height={128}
+						className="rounded-lg border-2 border-zinc-300"
+					/>
+					<p className="mt-2">Allow Copying</p>
+					<p className="text-[0.65rem] text-zinc-400">Suggested!</p>
+				</button>
+
+				<button
+					onClick={() => goToTutorial(10)}
+					className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
+				>
+					<Image
+						src={"/tutorial/create-qr-code/thumbnail.png"}
+						alt="Creating QR code thumbnail"
+						width={128}
+						height={128}
+						className="rounded-lg border-2 border-zinc-300"
+					/>
+					<p className="mt-2">Create QR Code</p>
+					{/* Add placeholder to keep height the same */}
+					<p className="text-[0.65rem] opacity-0">placeholder</p>
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/tutorial/submit.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+import TutorialPage from "./page";
+import StartingPage from "./starting-page";
+
+export default function SubmitTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+			setSelectedIndex(0);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
+	const isStartingPage = selectedIndex === 0 || selectedIndex === 9;
+	const inTutorialAllowCopying = selectedIndex && selectedIndex >= 1 && selectedIndex <= 9;
+
+	return (
+		<>
+			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
+				How to?
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-md h-[30rem] transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2 p-6 pb-0">
+								<h2 className="text-xl font-bold">Tutorial</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<div className="flex flex-col min-h-0 h-full">
+								<div className="overflow-hidden h-full" ref={emblaRef}>
+									<div className="flex h-full">
+										<StartingPage emblaApi={emblaApi} />
+
+										{/* Allow Copying */}
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
+										<TutorialPage text="2. Go into 'Mii List'" imageSrc="/tutorial/allow-copying/step2.png" />
+										<TutorialPage text="3. Select and edit the Mii you wish to submit" imageSrc="/tutorial/allow-copying/step3.png" />
+										<TutorialPage text="4. Click 'Other Settings' in the information screen" imageSrc="/tutorial/allow-copying/step4.png" />
+										<TutorialPage text="5. Click on 'Don't Allow' under the 'Copying' text" imageSrc="/tutorial/allow-copying/step5.png" />
+										<TutorialPage text="6. Press 'Allow'" imageSrc="/tutorial/allow-copying/step6.png" />
+										<TutorialPage text="7. Confirm the edits to the Mii" imageSrc="/tutorial/allow-copying/step7.png" />
+										<TutorialPage carouselIndex={selectedIndex} finishIndex={8} />
+
+										<StartingPage emblaApi={emblaApi} />
+
+										{/* Create QR Code */}
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
+										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/create-qr-code/step2.png" />
+										<TutorialPage text="3. Press 'Create QR Code'" imageSrc="/tutorial/create-qr-code/step3.png" />
+										<TutorialPage text="4. Select and press 'OK' on the Mii you wish to submit" imageSrc="/tutorial/create-qr-code/step4.png" />
+										<TutorialPage
+											text="5. Pick any option; it doesn't matter since the QR code regenerates upon submission."
+											imageSrc="/tutorial/create-qr-code/step5.png"
+										/>
+										<TutorialPage
+											text="6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card)."
+											imageSrc="/tutorial/create-qr-code/step6.png"
+										/>
+										<TutorialPage carouselIndex={selectedIndex} finishIndex={16} />
+									</div>
+								</div>
+
+								<div className={`flex justify-between items-center mt-2 px-6 pb-6 transition-opacity duration-300 ${isStartingPage && "opacity-0"}`}>
+									<button
+										onClick={() => emblaApi?.scrollPrev()}
+										disabled={isStartingPage}
+										className={`pill button !p-1 aspect-square text-2xl ${isStartingPage && "!cursor-auto"}`}
+									>
+										<Icon icon="tabler:chevron-left" />
+									</button>
+
+									<span className="text-sm">{inTutorialAllowCopying ? "Allow Copying" : "Create QR Code"}</span>
+
+									<button
+										onClick={() => emblaApi?.scrollNext()}
+										disabled={isStartingPage}
+										className={`pill button !p-1 aspect-square text-2xl ${isStartingPage && "!cursor-auto"}`}
+									>
+										<Icon icon="tabler:chevron-right" />
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}