feat: crop portrait and split portrait+features image

package.json

@@ -30,6 +30,7 @@
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-dropzone": "^15.0.0",
+		"react-image-crop": "^11.0.10",
 		"redis": "^5.11.0",
 		"satori": "^0.25.0",
 		"seedrandom": "^3.0.5",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       react-dropzone:
         specifier: ^15.0.0
         version: 15.0.0(react@19.2.4)
+      react-image-crop:
+        specifier: ^11.0.10
+        version: 11.0.10(react@19.2.4)
       redis:
         specifier: ^5.11.0
         version: 5.11.0
@@ -2934,6 +2937,11 @@ packages:
     peerDependencies:
       react: '>= 16.8 || 18.0.0'
 
+  react-image-crop@11.0.10:
+    resolution: {integrity: sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==}
+    peerDependencies:
+      react: '>=16.13.1'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -5294,8 +5302,8 @@ snapshots:
       '@next/eslint-plugin-next': 16.2.0
       eslint: 10.0.3(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@10.0.3(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@10.0.3(jiti@2.6.1))
       eslint-plugin-react-hooks: 7.0.1(eslint@10.0.3(jiti@2.6.1))
@@ -5317,7 +5325,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
@@ -5328,22 +5336,22 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3)
       eslint: 10.0.3(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -5354,7 +5362,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 10.0.3(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -6289,6 +6297,10 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.4
 
+  react-image-crop@11.0.10(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}

src/app/api/submit/route.ts

@@ -33,6 +33,7 @@ const submitSchema = z
 		// Switch
 		gender: z.enum(MiiGender).default("MALE"),
 		miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
+		miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
 		instructions: switchMiiInstructionsSchema,
 
 		// QR code
@@ -51,15 +52,15 @@ const submitSchema = z
 	// This refine function is probably useless
 	.refine(
 		(data) => {
-			// If platform is Switch, gender and miiPortraitImage must be present
+			// If platform is Switch, gender, miiPortraitImage, and miiFeaturesImage must be present
 			if (data.platform === "SWITCH") {
 				return data.gender !== undefined && data.miiPortraitImage !== undefined;
 			}
 			return true;
 		},
 		{
-			message: "Gender, Mii portrait image, and instructions are required for Switch platform",
+			message: "Gender, Mii portrait & features image, and instructions are required for Switch platform",
-			path: ["gender", "miiPortraitImage", "instructions"],
+			path: ["gender", "miiPortraitImage", "miiFeaturesImage", "instructions"],
 		},
 	);
 
@@ -129,6 +130,7 @@ export async function POST(request: NextRequest) {
 
 		gender: formData.get("gender") ?? undefined, // ZOD MOMENT
 		miiPortraitImage: formData.get("miiPortraitImage"),
+		miiFeaturesImage: formData.get("miiFeaturesImage"),
 		instructions: minifiedInstructions,
 
 		qrBytesRaw: rawQrBytesRaw,
@@ -159,6 +161,7 @@ export async function POST(request: NextRequest) {
 		qrBytesRaw,
 		gender,
 		miiPortraitImage,
+		miiFeaturesImage,
 		image1,
 		image2,
 		image3,
@@ -183,10 +186,12 @@ export async function POST(request: NextRequest) {
 		}
 	}
 
-	// Check Mii portrait image as well (Switch)
+	// Check Mii portrait & features image (Switch)
 	if (platform === "SWITCH") {
-		const imageValidation = await validateImage(miiPortraitImage);
+		const portraitValidation = await validateImage(miiPortraitImage);
-		if (!imageValidation.valid) return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
+		const featuresValidation = await validateImage(miiFeaturesImage);
+		if (!portraitValidation.valid) return rateLimit.sendResponse({ error: portraitValidation.error }, portraitValidation.status ?? 400);
+		if (!featuresValidation.valid) return rateLimit.sendResponse({ error: featuresValidation.error }, featuresValidation.status ?? 400);
 	}
 
 	const qrBytes = new Uint8Array(qrBytesRaw ?? []);
@@ -246,8 +251,15 @@ export async function POST(request: NextRequest) {
 			portraitBuffer = Buffer.from(await studioResponse.arrayBuffer());
 		} else if (platform === "SWITCH") {
 			portraitBuffer = Buffer.from(await miiPortraitImage.arrayBuffer());
+
+			// Save features image
+			const featuresBuffer = Buffer.from(await miiFeaturesImage.arrayBuffer());
+			const pngBuffer = await sharp(featuresBuffer).png({ quality: 85 }).toBuffer();
+			const fileLocation = path.join(miiUploadsDirectory, "features.png");
+			await fs.writeFile(fileLocation, pngBuffer);
 		}
 
+		// Save portrait image
 		if (!portraitBuffer) throw Error("Mii portrait buffer not initialised");
 		const pngBuffer = await sharp(portraitBuffer).png({ quality: 85 }).toBuffer();
 		const fileLocation = path.join(miiUploadsDirectory, "mii.png");
@@ -258,9 +270,9 @@ export async function POST(request: NextRequest) {
 		// Clean up if something went wrong
 		await prisma.mii.delete({ where: { id: miiRecord.id } });
 
-		console.error("Failed to download/store Mii portrait:", error);
+		console.error("Failed to download/store Mii portrait/features:", error);
 		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "studio-image-download" } });
-		return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait" }, 500);
+		return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait/features" }, 500);
 	}
 
 	if (platform === "THREE_DS") {

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Lexend } from "next/font/google";
 import { WebSite, WithContext } from "schema-dts";
 
 import "./globals.css";
+import "react-image-crop/dist/ReactCrop.css";
 
 import Providers from "./provider";
 import Header from "@/components/header";

src/app/mii/[id]/image/route.ts

@@ -12,8 +12,8 @@ import { prisma } from "@/lib/prisma";
 
 const searchParamsSchema = z.object({
 	type: z
-		.enum(["mii", "qr-code", "image0", "image1", "image2", "metadata"], {
+		.enum(["mii", "qr-code", "features", "image0", "image1", "image2", "metadata"], {
-			message: "Image type must be either 'mii', 'qr-code', 'image[number from 0 to 2]' or 'metadata'",
+			message: "Image type must be either 'mii', 'qr-code', 'features', 'image[number from 0 to 2]' or 'metadata'",
 		})
 		.default("mii"),
 });

src/app/mii/[id]/page.tsx

@@ -135,7 +135,7 @@ export default async function MiiPage({ params }: Props) {
 							/>
 						</div>
 						{/* QR Code */}
-						{mii.platform === "THREE_DS" && (
+						{mii.platform === "THREE_DS" ? (
 							<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
 								<ImageViewer
 									src={`/mii/${mii.id}/image?type=qr-code`}
@@ -145,6 +145,14 @@ export default async function MiiPage({ params }: Props) {
 									className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
 								/>
 							</div>
+						) : (
+							<ImageViewer
+								src={`/mii/${mii.id}/image?type=features`}
+								alt="mii features"
+								width={300}
+								height={300}
+								className="rounded-lg hover:brightness-90 mb-4 transition-all"
+							/>
 						)}
 						<hr className="w-full border-t-2 border-t-amber-400" />
 

src/components/mii/list/index.tsx

@@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 						<Carousel
 							images={[
 								`/mii/${mii.id}/image?type=mii`,
-								...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
+								...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [`/mii/${mii.id}/image?type=features`]),
 								...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
 							]}
 						/>

src/components/submit-form/camera.tsx

@@ -10,10 +10,11 @@ import { useSelect } from "downshift";
 interface Props {
 	isOpen: boolean;
 	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
+	setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
+	setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
-export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
+export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: Props) {
 	const [isVisible, setIsVisible] = useState(false);
 
 	const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
@@ -45,11 +46,11 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 		},
 	});
 
-	const scanQRCode = useCallback(() => {
+	const takePicture = useCallback(() => {
 		if (!isOpen) return;
 
 		// Continue scanning in a loop
-		requestRef.current = requestAnimationFrame(scanQRCode);
+		if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
 
 		const video = videoRef.current;
 		const canvas = canvasRef.current;
@@ -62,6 +63,13 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 		canvas.height = video.videoHeight;
 		ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
 
+		if (setImage) {
+			setImage(canvas.toDataURL());
+			close();
+			return;
+		}
+		if (!setQrBytesRaw) return;
+
 		const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
 		const code = jsQR(imageData.data, imageData.width, imageData.height);
 		if (!code || !code.binaryData) return;
@@ -73,7 +81,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 		}
 
 		setQrBytesRaw(code.binaryData);
-		setIsOpen(false);
+		close();
 	}, [isOpen, setIsOpen, setQrBytesRaw]);
 
 	const requestPermission = () => {
@@ -129,7 +137,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 			})
 			.catch((err) => console.error("Camera error", err));
 
-		requestRef.current = requestAnimationFrame(scanQRCode);
+		if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
 
 		// cleanup
 		return () => {
@@ -142,7 +150,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 				videoRef.current.srcObject = null;
 			}
 		};
-	}, [isOpen, permissionGranted, selectedDeviceId, scanQRCode]);
+	}, [isOpen, permissionGranted, selectedDeviceId, takePicture]);
 
 	return (
 		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
@@ -157,7 +165,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 				}`}
 			>
 				<div className="flex justify-between items-center mb-2">
-					<h2 className="text-xl font-bold">Scan QR Code</h2>
+					<h2 className="text-xl font-bold">{setQrBytesRaw ? "Scan QR Code" : "Take Picture"}</h2>
 					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
 						<Icon icon="material-symbols:close-rounded" />
 					</button>
@@ -199,26 +207,31 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 					</div>
 				</div>
 
-				<div className="relative w-full aspect-square">
+				<div className={`relative w-full ${setQrBytesRaw ? "aspect-square" : ""}`}>
 					{!permissionGranted && (
 						<div className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-amber-50 border-2 border-amber-500 text-center p-8">
 							<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
-							<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
+							<p className="text-gray-600">Please allow camera access in your browser settings to {setQrBytesRaw ? "scan QR codes" : "take pictures"}</p>
 							<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 py-0.5! px-2!">
 								Request Permission
 							</button>
 						</div>
 					)}
 
-					<video ref={videoRef} className="size-full object-cover rounded-2xl border-2 border-amber-500" />
+					<video ref={videoRef} className={`size-full rounded-2xl border-2 border-amber-500 max-h-96 ${setQrBytesRaw ? "object-cover" : ""}`} />
-					<QrFinder />
+					{setQrBytesRaw && <QrFinder />}
 					<canvas ref={canvasRef} className="hidden" />
 				</div>
 
-				<div className="mt-4 flex justify-center">
+				<div className="mt-4 flex justify-center gap-2">
 					<button type="button" onClick={close} className="pill button">
 						Cancel
 					</button>
+					{setImage && (
+						<button type="button" onClick={takePicture} className="pill button">
+							Take Picture
+						</button>
+					)}
 				</div>
 			</div>
 		</div>

src/components/submit-form/crop-portrait.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactCrop, { Crop } from "react-image-crop";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	image: string | undefined;
+	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export default function CropPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [crop, setCrop] = useState<Crop>();
+
+	const imageRef = useRef<HTMLImageElement>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const applyCrop = useCallback(() => {
+		if (!imageRef.current || !canvasRef.current || !crop) return;
+
+		const image = imageRef.current;
+		const canvas = canvasRef.current;
+
+		if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const scaleX = image.naturalWidth / image.width;
+		const scaleY = image.naturalHeight / image.height;
+
+		canvas.width = crop.width;
+		canvas.height = crop.height;
+
+		ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height);
+
+		setImage(canvas.toDataURL());
+		close();
+	}, [crop, setImage]);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
+			<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 p-6 w-full max-w-md transition-discrete duration-300 ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2">
+					<h2 className="text-xl font-bold">Crop Portrait</h2>
+					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				<div className="relative w-full flex justify-center">
+					<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
+						<img ref={imageRef} src={image} />
+					</ReactCrop>
+					<canvas ref={canvasRef} className="hidden" />
+				</div>
+
+				<div className="mt-4 flex justify-center gap-2">
+					<button type="button" onClick={close} className="pill button">
+						Cancel
+					</button>
+					<button type="button" onClick={applyCrop} className="pill button">
+						Crop
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/index.tsx

@@ -17,9 +17,9 @@ import { SwitchMiiInstructions } from "@/types";
 
 import TagSelector from "../tag-selector";
 import ImageList from "./image-list";
-import PortraitUpload from "./portrait-upload";
+import SwitchFileUpload from "./switch-file-upload";
 import QrUpload from "./qr-upload";
-import QrScanner from "./qr-scanner";
+import Camera from "./camera";
 import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
 import MiiEditor from "./mii-editor";
 import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
@@ -41,6 +41,7 @@ export default function SubmitForm() {
 
 	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
 	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
+	const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>();
 	const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
 
 	const [name, setName] = useState("");
@@ -119,21 +120,24 @@ export default function SubmitForm() {
 		if (platform === "THREE_DS") {
 			formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
 		} else if (platform === "SWITCH") {
-			const response = await fetch(miiPortraitUri!);
+			const portraitResponse = await fetch(miiPortraitUri!);
+			const featuresResponse = await fetch(miiFeaturesUri!);
 
-			if (!response.ok) {
+			if (!portraitResponse.ok || !featuresResponse.ok) {
-				setError("Failed to check Mii portrait. Did you upload one?");
+				setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
 				return;
 			}
 
-			const blob = await response.blob();
+			const portraitBlob = await portraitResponse.blob();
-			if (!blob.type.startsWith("image/")) {
+			const featuresBlob = await featuresResponse.blob();
-				setError("Invalid image file returned");
+			if (!portraitBlob.type.startsWith("image/") || !featuresBlob.type.startsWith("image/")) {
+				setError("Invalid image file found");
 				return;
 			}
 
 			formData.append("gender", gender);
-			formData.append("miiPortraitImage", blob);
+			formData.append("miiPortraitImage", portraitBlob);
+			formData.append("miiFeaturesImage", featuresBlob);
 			formData.append("instructions", JSON.stringify(instructions.current));
 		}
 
@@ -197,7 +201,7 @@ export default function SubmitForm() {
 					<Carousel
 						images={[
 							miiPortraitUri ?? "/loading.svg",
-							...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : []),
+							...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : [miiFeaturesUri ?? "/loading.svg"]),
 							...files.map((file) => URL.createObjectURL(file)),
 						]}
 					/>
@@ -369,7 +373,8 @@ export default function SubmitForm() {
 					</div>
 
 					<div className="flex flex-col items-center gap-2">
-						<PortraitUpload setImage={setMiiPortraitUri} />
+						<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} hasCrop />
+						<SwitchFileUpload text="a screenshot of your Mii's features here" setImage={setMiiFeaturesUri} />
 						<SwitchSubmitTutorialButton />
 					</div>
 
@@ -393,7 +398,7 @@ export default function SubmitForm() {
 							Use your camera
 						</button>
 
-						<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+						<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
 						<ThreeDsSubmitTutorialButton />
 
 						<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>

src/components/submit-form/portrait-upload.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { FileWithPath } from "react-dropzone";
-import Dropzone from "../dropzone";
-
-interface Props {
-	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
-}
-
-export default function PortraitUpload({ setImage }: Props) {
-	const [hasImage, setHasImage] = useState(false);
-
-	const handleDrop = useCallback(
-		(acceptedFiles: FileWithPath[]) => {
-			const file = acceptedFiles[0];
-			// Convert to Data URI
-			const reader = new FileReader();
-			reader.onload = async (event) => {
-				setImage(event.target!.result as string);
-				setHasImage(true);
-			};
-			reader.readAsDataURL(file);
-		},
-		[setImage],
-	);
-
-	return (
-		<div className="max-w-md w-full">
-			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
-				<p className="text-center text-sm">
-					{!hasImage ? (
-						<>
-							Drag and drop a screenshot of your Mii&apos;s features here
-							<br />
-							or click to open
-						</>
-					) : (
-						"Uploaded!"
-					)}
-				</p>
-			</Dropzone>
-		</div>
-	);
-}

src/components/submit-form/switch-file-upload.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { FileWithPath } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import Dropzone from "../dropzone";
+import Camera from "./camera";
+import CropPortrait from "./crop-portrait";
+
+interface Props {
+	text: string;
+	hasCrop?: boolean;
+	image?: string | undefined;
+	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export default function SwitchFileUpload({ text, hasCrop = false, image, setImage }: Props) {
+	const [isCameraOpen, setIsCameraOpen] = useState(false);
+	const [isCropOpen, setIsCropOpen] = useState(false);
+	const [hasImage, setHasImage] = useState(false);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			const file = acceptedFiles[0];
+			// Convert to Data URI
+			const reader = new FileReader();
+			reader.onload = async (event) => {
+				setImage(event.target!.result as string);
+				setHasImage(true);
+				if (hasCrop) setIsCropOpen(true);
+			};
+			reader.readAsDataURL(file);
+		},
+		[setImage],
+	);
+
+	useEffect(() => {
+		if (!isCameraOpen) return;
+		if (hasCrop) setIsCropOpen(true);
+	}, [isCameraOpen]);
+
+	return (
+		<div className="max-w-md w-full flex flex-col items-center gap-2">
+			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+				<p className="text-center text-sm">
+					{!hasImage ? (
+						<>
+							Drag and drop {text}
+							<br />
+							or click to open
+						</>
+					) : (
+						"Uploaded!"
+					)}
+				</p>
+			</Dropzone>
+
+			<span>or</span>
+
+			<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
+				<Icon icon="mdi:camera" fontSize={20} />
+				Use your camera
+			</button>
+			{hasCrop && (
+				<>
+					<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
+						<Icon icon="material-symbols:crop" fontSize={20} />
+						Crop Image
+					</button>
+					<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
+				</>
+			)}
+
+			<Camera isOpen={isCameraOpen} setIsOpen={setIsCameraOpen} setImage={setImage} />
+		</div>
+	);
+}