feat: crop portrait and split portrait+features image

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" />
-					<QrFinder />
+					<video ref={videoRef} className={`size-full rounded-2xl border-2 border-amber-500 max-h-96 ${setQrBytesRaw ? "object-cover" : ""}`} />
+					{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) {
-				setError("Failed to check Mii portrait. Did you upload one?");
+			if (!portraitResponse.ok || !featuresResponse.ok) {
+				setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
 				return;
 			}
 
-			const blob = await response.blob();
-			if (!blob.type.startsWith("image/")) {
-				setError("Invalid image file returned");
+			const portraitBlob = await portraitResponse.blob();
+			const featuresBlob = await featuresResponse.blob();
+			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>
+	);
+}