feat: fake mii editor

prisma/migrations/20260224165818_instructions_json/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "miis" ADD COLUMN     "instructions" JSONB;

prisma/schema.prisma

@@ -78,6 +78,7 @@ model Mii {
   description String?     @db.VarChar(256)
   platform    MiiPlatform @default(THREE_DS)
 
+  instructions   Json?
   firstName      String?
   lastName       String?
   gender         MiiGender?

src/app/api/submit/route.ts

@@ -12,13 +12,14 @@ import { MiiGender, MiiPlatform } from "@prisma/client";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { nameSchema, tagsSchema } from "@/lib/schemas";
+import { nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@/lib/schemas";
 import { RateLimit } from "@/lib/rate-limit";
-
 import { generateMetadataImage, validateImage } from "@/lib/images";
 import { convertQrCode } from "@/lib/qr-codes";
 import Mii from "@/lib/mii.js/mii";
-import { TomodachiLifeMii } from "@/lib/tomodachi-life-mii";
+import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
+
+import { SwitchMiiInstructions } from "@/types";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 
@@ -32,11 +33,15 @@ const submitSchema = z
 		// Switch
 		gender: z.enum(MiiGender).default("MALE"),
 		miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
+		instructions: switchMiiInstructionsSchema,
 
 		// QR code
-		qrBytesRaw: z.array(z.number(), { error: "A QR code is required" }).length(372, {
+		qrBytesRaw: z
+			.array(z.number(), { error: "A QR code is required" })
+			.length(372, {
 				error: "QR code size is not a valid Tomodachi Life QR code",
-		}),
+			})
+			.nullish(),
 
 		// Custom images
 		image1: z.union([z.instanceof(File), z.any()]).optional(),
@@ -53,8 +58,8 @@ const submitSchema = z
 			return true;
 		},
 		{
-			message: "Gender and Mii portrait image are required for Switch platform",
+			message: "Gender, Mii portrait image, and instructions are required for Switch platform",
-			path: ["gender", "miiPortraitImage"],
+			path: ["gender", "miiPortraitImage", "instructions"],
 		},
 	);
 
@@ -95,6 +100,7 @@ export async function POST(request: NextRequest) {
 
 		gender: formData.get("gender") ?? undefined, // ZOD MOMENT
 		miiPortraitImage: formData.get("miiPortraitImage"),
+		instructions: JSON.parse((formData.get("instructions") as string) ?? {}),
 
 		qrBytesRaw: rawQrBytesRaw,
 
@@ -103,7 +109,19 @@ export async function POST(request: NextRequest) {
 		image3: formData.get("image3"),
 	});
 
-	if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
+	if (!parsed.success) {
+		const error = parsed.error.issues[0].message;
+		const issues = parsed.error.issues;
+		const hasInstructionsErrors = issues.some((issue) => issue.path[0] === "instructions");
+
+		if (hasInstructionsErrors) {
+			Sentry.captureException(error, {
+				extra: { issues, rawInstructions: formData.get("instructions"), stage: "submit-instructions" },
+			});
+		}
+
+		return rateLimit.sendResponse({ error }, 400);
+	}
 	const {
 		platform,
 		name: uncensoredName,
@@ -112,6 +130,7 @@ export async function POST(request: NextRequest) {
 		qrBytesRaw,
 		gender,
 		miiPortraitImage,
+		instructions,
 		image1,
 		image2,
 		image3,
@@ -137,15 +156,41 @@ export async function POST(request: NextRequest) {
 	}
 
 	// Check Mii portrait image as well (Switch)
+	let minifiedInstructions: Partial<SwitchMiiInstructions>;
 	if (platform === "SWITCH") {
 		const imageValidation = await validateImage(miiPortraitImage);
 		if (!imageValidation.valid) return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
+
+		// Minimize instructions to save space and improve user experience
+		function minimize(object: Partial<SwitchMiiInstructions>): Partial<SwitchMiiInstructions> {
+			for (const key in object) {
+				const value = object[key as keyof SwitchMiiInstructions];
+
+				if (!value) {
+					delete object[key as keyof SwitchMiiInstructions];
+					continue;
 				}
 
-	const qrBytes = new Uint8Array(qrBytesRaw);
+				// Recurse into nested objects
+				if (typeof value === "object") {
+					minimize(value as Partial<SwitchMiiInstructions>);
+
+					if (Object.keys(value).length === 0) {
+						delete object[key as keyof SwitchMiiInstructions];
+					}
+				}
+			}
+
+			return object;
+		}
+
+		minifiedInstructions = minimize(instructions as SwitchMiiInstructions);
+	}
+
+	const qrBytes = new Uint8Array(qrBytesRaw ?? []);
 
 	// Convert QR code to JS (3DS)
-	let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii } | undefined;
+	let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii } | undefined;
 	if (platform === "THREE_DS") {
 		try {
 			conversion = convertQrCode(qrBytes);
@@ -166,13 +211,16 @@ export async function POST(request: NextRequest) {
 			gender: gender ?? "MALE",
 
 			// Automatically detect certain information if on 3DS
-			...(platform === "THREE_DS" &&
+			...(platform === "THREE_DS"
-				conversion && {
+				? conversion && {
 						firstName: conversion.tomodachiLifeMii.firstName,
 						lastName: conversion.tomodachiLifeMii.lastName,
 						gender: conversion.mii.gender == 0 ? MiiGender.MALE : MiiGender.FEMALE,
 						islandName: conversion.tomodachiLifeMii.islandName,
 						allowedCopying: conversion.mii.allowCopying,
+					}
+				: {
+						instructions,
 					}),
 		},
 	});
@@ -212,6 +260,7 @@ export async function POST(request: NextRequest) {
 		return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait" }, 500);
 	}
 
+	if (platform === "THREE_DS") {
 		try {
 			// Generate a new QR code for aesthetic reasons
 			const byteString = String.fromCharCode(...qrBytes);
@@ -237,6 +286,7 @@ export async function POST(request: NextRequest) {
 			Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "file-processing" } });
 			return rateLimit.sendResponse({ error: "Failed to process and store Mii files" }, 500);
 		}
+	}
 
 	try {
 		await generateMetadataImage(miiRecord, session.user.name!);

src/app/globals.css

@@ -118,3 +118,36 @@ body {
 *::-webkit-scrollbar-track {
 	background: #ff8903;
 }
+
+/* Range input */
+input[type="range"] {
+	@apply appearance-none bg-transparent cursor-pointer;
+}
+
+/* Track */
+input[type="range"]::-webkit-slider-runnable-track {
+	@apply h-2 bg-orange-200 border-2 border-orange-400 rounded-full;
+}
+
+input[type="range"]::-moz-range-track {
+	@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
+}
+
+/* Thumb */
+input[type="range"]::-webkit-slider-thumb {
+	@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
+	margin-top: -6px; /* center thumb vertically */
+}
+
+input[type="range"]::-moz-range-thumb {
+	@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
+}
+
+/* Hover */
+input[type="range"]:hover::-webkit-slider-thumb {
+	@apply bg-orange-500;
+}
+
+input[type="range"]:hover::-moz-range-thumb {
+	@apply bg-orange-500;
+}

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

@@ -132,6 +132,7 @@ export default async function MiiPage({ params }: Props) {
 							/>
 						</div>
 						{/* QR Code */}
+						{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`}
@@ -141,6 +142,7 @@ export default async function MiiPage({ params }: Props) {
 									className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
 								/>
 							</div>
+						)}
 						<hr className="w-full border-t-2 border-t-amber-400" />
 
 						{/* Mii Info */}

src/components/admin/control-center.tsx

@@ -24,7 +24,7 @@ export default function ControlCenter() {
 		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
 			<div className="flex items-center gap-2">
 				<input
-					name="submit"
+					id="submit"
 					type="checkbox"
 					className="checkbox size-6!"
 					placeholder="Enter banner text"

src/components/admin/return-to-island.tsx

@@ -30,7 +30,7 @@ export default function ReturnToIsland({ hasExpired }: Props) {
 			<div className="flex justify-center items-center gap-2">
 				<input
 					type="checkbox"
-					name="agreement"
+					id="agreement"
 					disabled={hasExpired}
 					checked={isChecked}
 					onChange={(e) => setIsChecked(e.target.checked)}

src/components/carousel.tsx

@@ -19,7 +19,9 @@ export default function Carousel({ images, className }: Props) {
 
 	useEffect(() => {
 		if (!emblaApi) return;
+		emblaApi.reInit();
 		setScrollSnaps(emblaApi.scrollSnapList());
+		setSelectedIndex(0);
 		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
 	}, [images, emblaApi]);
 
@@ -74,6 +76,8 @@ export default function Carousel({ images, className }: Props) {
 					>
 						<Icon icon="ic:round-chevron-right" />
 					</button>
+				</>
+			)}
 
 			<div className="flex justify-center p-2 gap-2 absolute right-0">
 				{scrollSnaps.map((_, index) => (
@@ -86,8 +90,6 @@ export default function Carousel({ images, className }: Props) {
 					/>
 				))}
 			</div>
-				</>
-			)}
 		</div>
 	);
 }

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/${mii.id}/image?type=qr-code`,
+								...(platform === "THREE_DS" ? `/mii/${mii.id}/image?type=qr-code` : ""),
 								...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
 							]}
 						/>

src/components/mii-list/other-filters.tsx

@@ -32,7 +32,7 @@ export default function OtherFilters() {
 			<label htmlFor="allowCopying" className="text-sm">
 				Allow Copying
 			</label>
-			<input type="checkbox" name="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
+			<input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
 		</div>
 	);
 }

src/components/profile-settings/delete-account.tsx

@@ -39,7 +39,7 @@ export default function DeleteAccount() {
 
 	return (
 		<>
-			<button name="deletion" onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
+			<button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
 				Delete Account
 			</button>
 

src/components/submit-form/edit-form.tsx

@@ -147,7 +147,7 @@ export default function EditForm({ mii, likes }: Props) {
 						Name
 					</label>
 					<input
-						name="name"
+						id="name"
 						type="text"
 						className="pill input w-full col-span-2"
 						minLength={2}

src/components/submit-form/index.tsx

@@ -2,7 +2,7 @@
 
 import { redirect } from "next/navigation";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { FileWithPath } from "react-dropzone";
 import { Icon } from "@iconify/react";
 
@@ -12,15 +12,17 @@ import { MiiGender, MiiPlatform } from "@prisma/client";
 import { nameSchema, tagsSchema } from "@/lib/schemas";
 import { convertQrCode } from "@/lib/qr-codes";
 import Mii from "@/lib/mii.js/mii";
-import { TomodachiLifeMii } from "@/lib/tomodachi-life-mii";
+import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
+import { SwitchMiiInstructions } from "@/types";
 
 import TagSelector from "../tag-selector";
 import ImageList from "./image-list";
 import PortraitUpload from "./portrait-upload";
 import QrUpload from "./qr-upload";
 import QrScanner from "./qr-scanner";
-import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
 import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
+import MiiEditor from "./mii-editor";
+import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
 import LikeButton from "../like-button";
 import Carousel from "../carousel";
 import SubmitButton from "../submit-button";
@@ -48,6 +50,53 @@ export default function SubmitForm() {
 
 	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
 	const [gender, setGender] = useState<MiiGender>("MALE");
+	const instructions = useRef<SwitchMiiInstructions>({
+		head: { type: 0, skinColor: 0 },
+		hair: {
+			setType: 0,
+			bangsType: 0,
+			backType: 0,
+			color: 0,
+			subColor: 0,
+			style: 0,
+			isFlipped: false,
+		},
+		eyebrows: { type: 0, color: 0, height: 0, distance: 0, rotation: 0, size: 0, stretch: 0 },
+		eyes: {
+			eyesType: 0,
+			eyelashesTop: 0,
+			eyelashesBottom: 0,
+			eyelidTop: 0,
+			eyelidBottom: 0,
+			eyeliner: 0,
+			pupil: 0,
+			color: 0,
+			height: 0,
+			distance: 0,
+			rotation: 0,
+			size: 0,
+			stretch: 0,
+		},
+		nose: { type: 0, height: 0, size: 0 },
+		lips: { type: 0, color: 0, height: 0, rotation: 0, size: 0, stretch: 0, hasLipstick: false },
+		ears: { type: 0, height: 0, size: 0 },
+		glasses: { type: 0, ringColor: 0, shadesColor: 0, height: 0, size: 0, stretch: 0 },
+		other: {
+			wrinkles1: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			wrinkles2: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			beard: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			moustache: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			goatee: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			mole: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			eyeShadow: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			blush: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+		},
+		height: 0,
+		weight: 0,
+		datingPreferences: [],
+		voice: { speed: 0, pitch: 0, depth: 0, delivery: 0, tone: 0 },
+		personality: { movement: 0, speech: 0, energy: 0, thinking: 0, overall: 0 },
+	});
 
 	const [error, setError] = useState<string | undefined>(undefined);
 
@@ -70,13 +119,14 @@ export default function SubmitForm() {
 		formData.append("name", name);
 		formData.append("tags", JSON.stringify(tags));
 		formData.append("description", description);
-		formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
 		files.forEach((file, index) => {
 			// image1, image2, etc.
 			formData.append(`image${index + 1}`, file);
 		});
 
-		if (platform === "SWITCH") {
+		if (platform === "THREE_DS") {
+			formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
+		} else if (platform === "SWITCH") {
 			const response = await fetch(miiPortraitUri!);
 
 			if (!response.ok) {
@@ -92,6 +142,7 @@ export default function SubmitForm() {
 
 			formData.append("gender", gender);
 			formData.append("miiPortraitImage", blob);
+			formData.append("instructions", JSON.stringify(instructions.current));
 		}
 
 		const response = await fetch("/api/submit", {
@@ -109,7 +160,7 @@ export default function SubmitForm() {
 	};
 
 	useEffect(() => {
-		if (qrBytesRaw.length == 0) return;
+		if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
 		const qrBytes = new Uint8Array(qrBytesRaw);
 
 		const preview = async () => {
@@ -123,7 +174,7 @@ export default function SubmitForm() {
 
 			// Convert QR code to JS (3DS)
 			if (platform === "THREE_DS") {
-				let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
+				let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
 				try {
 					conversion = convertQrCode(qrBytes);
 					setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
@@ -153,7 +204,13 @@ 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-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
-					<Carousel images={[miiPortraitUri ?? "/loading.svg", generatedQrCodeUri ?? "/loading.svg", ...files.map((file) => URL.createObjectURL(file))]} />
+					<Carousel
+						images={[
+							miiPortraitUri ?? "/loading.svg",
+							...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/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}>
@@ -234,7 +291,7 @@ export default function SubmitForm() {
 						Name
 					</label>
 					<input
-						name="name"
+						id="name"
 						type="text"
 						className="pill input w-full col-span-2"
 						minLength={2}
@@ -258,7 +315,7 @@ export default function SubmitForm() {
 						Description
 					</label>
 					<textarea
-						name="description"
+						id="description"
 						rows={5}
 						maxLength={256}
 						placeholder="(optional) Type a description..."
@@ -269,8 +326,7 @@ export default function SubmitForm() {
 				</div>
 
 				{/* Gender (switch only) */}
-				{platform === "SWITCH" && (
+				<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
-					<div className="w-full grid grid-cols-3 items-start">
 					<label htmlFor="gender" className="font-semibold py-2">
 						Gender
 					</label>
@@ -312,10 +368,9 @@ export default function SubmitForm() {
 						</button>
 					</div>
 				</div>
-				)}
 
-				{platform === "SWITCH" && (
+				{/* (Switch Only) Mii Portrait */}
-					<>
+				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
 					{/* Separator */}
 					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
 						<hr className="grow border-zinc-300" />
@@ -326,10 +381,10 @@ export default function SubmitForm() {
 					<div className="flex flex-col items-center gap-2">
 						<PortraitUpload setImage={setMiiPortraitUri} />
 					</div>
-					</>
+				</div>
-				)}
 
-				{/* QR code selector */}
+				{/* (3DS only) QR code scanning */}
+				<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
 					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
 						<hr className="grow border-zinc-300" />
 						<span>QR Code</span>
@@ -346,15 +401,25 @@ export default function SubmitForm() {
 						</button>
 
 						<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-					{platform === "THREE_DS" ? (
-						<>
 						<ThreeDsSubmitTutorialButton />
 
 						<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
-						</>
+					</div>
-					) : (
+				</div>
+
+				{/* (Switch only) Mii instructions */}
+				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Mii Instructions</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+
+					<div className="flex flex-col items-center gap-2">
+						<MiiEditor instructions={instructions} />
 						<SwitchSubmitTutorialButton />
-					)}
+						<span className="text-xs text-zinc-400">Instructions are recommended, but not required.</span>
+					</div>
 				</div>
 
 				{/* Custom images selector */}

src/components/submit-form/mii-editor/color-picker.tsx

@@ -0,0 +1,247 @@
+import { Icon } from "@iconify/react";
+import { useEffect, useState } from "react";
+
+interface Props {
+	disabled?: boolean;
+	color: number;
+	setColor: (color: number) => void;
+}
+
+export default function ColorPicker({ disabled, color, setColor }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					if (isOpen) {
+						close();
+					} else {
+						setIsOpen(true);
+					}
+				}}
+				disabled={disabled}
+				className={`w-full flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`}
+			>
+				<Icon icon={"material-symbols:palette"} className="text-xl" />
+				<div className="grow rounded" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+			</button>
+
+			{isOpen && (
+				<div
+					className={`absolute inset-0 w-122 p-4 bg-orange-100 rounded-lg transition-transform duration-500
+						flex items-center ${isVisible ? "opacity-100" : "opacity-0"}`}
+					style={{
+						transition: isVisible
+							? "transform 500ms cubic-bezier(0.34, 1.28, 0.64, 1), opacity 300ms"
+							: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
+					}}
+				>
+					<div className="mr-8 flex flex-col gap-0.5">
+						{COLORS.slice(0, 8).map((c, i) => (
+							<button
+								type="button"
+								key={i}
+								onClick={() => {
+									setColor(i);
+									close();
+								}}
+								className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i ? "ring-2 z-10" : ""}`}
+								style={{
+									backgroundColor: `#${c}`,
+									opacity: isVisible ? 1 : 0,
+									transform: isVisible ? "scale(1)" : "scale(0.7)",
+									transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
+									// stagger by column then row for a wave effect
+									transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
+								}}
+							></button>
+						))}
+					</div>
+
+					<div className="grid grid-cols-10 gap-0.5">
+						{COLORS.slice(8, 108).map((c, i) => (
+							<button
+								type="button"
+								key={i + 8}
+								onClick={() => {
+									setColor(i + 8);
+									close();
+								}}
+								className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`}
+								style={{
+									backgroundColor: `#${c}`,
+									opacity: isVisible ? 1 : 0,
+									transform: isVisible ? "scale(1)" : "scale(0.7)",
+									transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
+									transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
+								}}
+							></button>
+						))}
+					</div>
+
+					<button
+						type="button"
+						onClick={close}
+						className="absolute h-full w-16 top-0 right-0 cursor-pointer transition-transform hover:scale-115 active:scale-90"
+					>
+						<Icon icon={"tabler:chevron-right"} className="text-4xl" />
+					</button>
+				</div>
+			)}
+		</>
+	);
+}
+
+const COLORS: string[] = [
+	// Outside
+	"000000",
+	"8E8E93",
+	"6B4F0F",
+	"5A2A0A",
+	"7A1E0E",
+	"A0522D",
+	"A56B2A",
+	"D4A15A",
+	// Row 1
+	"F2F2F2",
+	"E6D5C3",
+	"F3E6A2",
+	"CDE6A1",
+	"A9DFA3",
+	"8ED8B0",
+	"8FD3E8",
+	"C9C2E6",
+	"F3C1CF",
+	"F0A8A8",
+	// Row 2
+	"D8D8D8",
+	"E8C07D",
+	"F0D97A",
+	"CDE07A",
+	"7BC96F",
+	"6BC4B2",
+	"5BBAD6",
+	"D9A7E0",
+	"F7B6C2",
+	"F47C6C",
+	// Row 3
+	"C0C0C0",
+	"D9A441",
+	"F4C542",
+	"D4C86A",
+	"8FD14F",
+	"58B88A",
+	"6FA8DC",
+	"B4A7D6",
+	"F06277",
+	"FF6F61",
+	// Row 4
+	"A8A8A8",
+	"D29B62",
+	"F2CF75",
+	"D8C47A",
+	"8DB600",
+	"66C2A5",
+	"4DA3D9",
+	"C27BA0",
+	"D35D6E",
+	"FF4C3B",
+	// Row 5
+	"9A9A9A",
+	"C77800",
+	"F4B183",
+	"D6BF3A",
+	"3FA34D",
+	"4CA3A3",
+	"7EA6E0",
+	"B56576",
+	"FF1744",
+	"FF2A00",
+	// Row 6
+	"8A817C",
+	"B85C1E",
+	"FF8C00",
+	"D2B48C",
+	"2E8B57",
+	"2F7E8C",
+	"2E86C1",
+	"7D5BA6",
+	"C2185B",
+	"E0193A",
+	// Row 7
+	"6E6E6E",
+	"95543A",
+	"F4A460",
+	"B7A369",
+	"3B7A0A",
+	"1F6F78",
+	"3F51B5",
+	"673AB7",
+	"B71C1C",
+	"C91F3A",
+	// Row 8
+	"3E3E3E",
+	"8B5A2B",
+	"F0986C",
+	"9E8F2A",
+	"0B5D3B",
+	"0E3A44",
+	"1F2A44",
+	"4B2E2E",
+	"9C1B1B",
+	"7A3B2E",
+	// Row 9
+	"2E2E2E",
+	"7A4A2A",
+	"A86A1D",
+	"6E6B2A",
+	"2F6F55",
+	"004E52",
+	"1C2F6E",
+	"3A1F4D",
+	"A52A2A",
+	"8B4513",
+	// Row 10
+	"000000",
+	"5A2E0C",
+	"7B3F00",
+	"5C4A00",
+	"004225",
+	"003B44",
+	"0A1F44",
+	"2B1B3F",
+	"7B2D2D",
+	"8B3A0E",
+	// Head tab extra colors
+	"FFD8BA",
+	"FFD5AC",
+	"FEC1A4",
+	"FEC68F",
+	"FEB089",
+	"FEBA6B",
+	"F39866",
+	"E89854",
+	"E37E3F",
+	"B45627",
+	"914220",
+	"59371F",
+	"662D16",
+	"392D1E",
+];

src/components/submit-form/mii-editor/index.tsx

@@ -0,0 +1,82 @@
+import { SwitchMiiInstructions } from "@/types";
+import React, { useState } from "react";
+
+import HeadTab from "./tabs/head";
+import HairTab from "./tabs/hair";
+import EyebrowsTab from "./tabs/eyebrows";
+import EyesTab from "./tabs/eyes";
+import NoseTab from "./tabs/nose";
+import LipsTab from "./tabs/lips";
+import EarsTab from "./tabs/ears";
+import GlassesTab from "./tabs/glasses";
+import OtherTab from "./tabs/other";
+import MiscTab from "./tabs/misc";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc";
+
+export const TAB_ICONS: Record<Tab, string> = {
+	head: "mingcute:head-fill",
+	hair: "mingcute:hair-fill",
+	eyebrows: "material-symbols:eyebrow",
+	eyes: "mdi:eye",
+	nose: "mingcute:nose-fill",
+	lips: "material-symbols-light:lips",
+	ears: "ion:ear",
+	glasses: "solar:glasses-bold",
+	other: "mingcute:head-ai-fill",
+	misc: "material-symbols:settings",
+};
+
+export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
+	head: HeadTab,
+	hair: HairTab,
+	eyebrows: EyebrowsTab,
+	eyes: EyesTab,
+	nose: NoseTab,
+	lips: LipsTab,
+	ears: EarsTab,
+	glasses: GlassesTab,
+	other: OtherTab,
+	misc: MiscTab,
+};
+
+export default function MiiEditor({ instructions }: Props) {
+	const [tab, setTab] = useState<Tab>("head");
+
+	const ActiveTab = TAB_COMPONENTS[tab];
+
+	return (
+		<>
+			<div className="w-full aspect-video flex bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
+				<div className="w-9 h-full flex flex-col">
+					{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
+						<button
+							key={t}
+							type="button"
+							onClick={() => setTab(t)}
+							className={`size-9 flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
+						>
+							{/* ml because of border on left causing icons to look miscentered */}
+							<Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
+						</button>
+					))}
+				</div>
+
+				{/* Keep all tabs loaded to avoid flickering */}
+				{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
+					const TabComponent = TAB_COMPONENTS[t];
+					return (
+						<div key={t} className={t === tab ? "grow flex" : "hidden"}>
+							<TabComponent instructions={instructions} />
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
+}

src/components/submit-form/mii-editor/number-inputs.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+interface Props {
+	target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number };
+}
+
+export default function NumberInputs({ target }: Props) {
+	const [height, setHeight] = useState(0);
+	const [distance, setDistance] = useState(0);
+	const [rotation, setRotation] = useState(0);
+	const [size, setSize] = useState(0);
+	const [stretch, setStretch] = useState(0);
+
+	return (
+		<div className="grid grid-rows-5 h-full">
+			{target.height != undefined && (
+				<div className="w-full">
+					<label htmlFor="height" className="text-xs">
+						Height
+					</label>
+					<input
+						type="number"
+						id="height"
+						min={-5}
+						max={5}
+						value={height}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							setHeight(value);
+							target.height = value;
+						}}
+						className="pill input text-sm py-1! px-3! w-full"
+					/>
+				</div>
+			)}
+
+			{target.distance != undefined && (
+				<div className="w-full">
+					<label htmlFor="distance" className="text-xs">
+						Distance
+					</label>
+					<input
+						type="number"
+						id="distance"
+						min={-5}
+						max={5}
+						value={distance}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							setDistance(value);
+							target.distance = value;
+						}}
+						className="pill input text-sm py-1! px-3! w-full"
+					/>
+				</div>
+			)}
+
+			{target.rotation != undefined && (
+				<div className="w-full">
+					<label htmlFor="rotation" className="text-xs">
+						Rotation
+					</label>
+					<input
+						type="number"
+						id="rotation"
+						min={-5}
+						max={5}
+						value={rotation}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							setRotation(value);
+							target.rotation = value;
+						}}
+						className="pill input text-sm py-1! px-3! w-full"
+					/>
+				</div>
+			)}
+
+			{target.size != undefined && (
+				<div className="w-full">
+					<label htmlFor="size" className="text-xs">
+						Size
+					</label>
+					<input
+						type="number"
+						id="size"
+						min={-5}
+						max={5}
+						value={size}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							setSize(value);
+							target.size = value;
+						}}
+						className="pill input text-sm py-1! px-3! w-full"
+					/>
+				</div>
+			)}
+
+			{target.stretch != undefined && (
+				<div className="w-full">
+					<label htmlFor="stretch" className="text-xs">
+						Stretch
+					</label>
+					<input
+						type="number"
+						id="stretch"
+						min={-5}
+						max={5}
+						value={stretch}
+						onChange={(e) => {
+							const value = Number(e.target.value);
+							setStretch(value);
+							target.stretch = value;
+						}}
+						className="pill input text-sm py-1! px-3! w-full"
+					/>
+				</div>
+			)}
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/ears.tsx

@@ -0,0 +1,39 @@
+import { SwitchMiiInstructions } from "@/types";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EarsTab({ instructions }: Props) {
+	const [type, setType] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Ears</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={5}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.ears.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<NumberInputs target={instructions.current.ears} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/eyebrows.tsx

@@ -0,0 +1,49 @@
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EyebrowsTab({ instructions }: Props) {
+	const [type, setType] = useState(0);
+	const [color, setColor] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Eyebrows</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							hasNoneOption
+							length={35}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.eyebrows.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker
+						color={color}
+						setColor={(i) => {
+							setColor(i);
+							instructions.current.eyebrows.color = i;
+						}}
+					/>
+					<NumberInputs target={instructions.current.eyebrows} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/eyes.tsx

@@ -0,0 +1,88 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsDisabled?: number[] }[] = [
+	{ name: "eyesType", length: 50 },
+	{ name: "eyelashesTop", length: 40 },
+	{ name: "eyelashesBottom", length: 20 },
+	{ name: "eyelidTop", length: 10 },
+	{ name: "eyelidBottom", length: 5 },
+	{ name: "eyeliner", length: 15 },
+	{ name: "pupil", length: 3 },
+];
+
+export default function OtherTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+
+	// One type/color state per tab
+	const [types, setTypes] = useState<number[]>(Array(TABS.length).fill(0));
+	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+
+	const currentTab = TABS[tab];
+
+	const setType = (value: number) => {
+		setTypes((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		instructions.current.eyes[currentTab.name] = value;
+	};
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		// TODO: check in actual game, temp
+		instructions.current.eyes.color = value;
+	};
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="absolute font-bold text-xl">Other</h1>
+
+						<div className="flex justify-center grow">
+							<div className="rounded-2xl bg-orange-200">
+								{TABS.map((_, i) => (
+									<button
+										key={i}
+										type="button"
+										onClick={() => setTab(i)}
+										className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
+									>
+										{i}
+									</button>
+								))}
+							</div>
+						</div>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector hasNoneOption length={currentTab.length} type={types[tab]} setType={setType} />
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<div className={`${tab !== 0 ? "hidden" : "w-full"}`}>
+						<ColorPicker color={colors[tab]} setColor={setColor} />
+					</div>
+					<NumberInputs target={instructions.current.eyes} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/glasses.tsx

@@ -0,0 +1,56 @@
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function GlassesTab({ instructions }: Props) {
+	const [type, setType] = useState(0);
+	const [ringColor, setRingColor] = useState(0);
+	const [shadesColor, setShadesColor] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Glasses</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={50}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.glasses.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker
+						color={ringColor}
+						setColor={(i) => {
+							setRingColor(i);
+							instructions.current.glasses.ringColor = i;
+						}}
+					/>
+					<ColorPicker
+						color={shadesColor}
+						setColor={(i) => {
+							setShadesColor(i);
+							instructions.current.glasses.shadesColor = i;
+						}}
+					/>
+					<NumberInputs target={instructions.current.glasses} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/hair.tsx

@@ -0,0 +1,125 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+type Tab = "sets" | "bangs" | "back";
+
+export default function HairTab({ instructions }: Props) {
+	const [tab, setTab] = useState<Tab>("sets");
+	const [setsType, setSetsType] = useState(0);
+	const [bangsType, setBangsType] = useState(0);
+	const [backType, setBackType] = useState(0);
+	const [color, setColor] = useState(0);
+	const [subColor, setSubColor] = useState<number | null>(null);
+	const [isFlipped, setIsFlipped] = useState(false);
+
+	const type = tab === "sets" ? setsType : tab === "bangs" ? bangsType : backType;
+	const setType = (value: number) => {
+		if (tab === "sets") {
+			setSetsType(value);
+			instructions.current.hair.setType = value;
+		} else if (tab === "bangs") {
+			setBangsType(value);
+			instructions.current.hair.bangsType = value;
+		} else {
+			setBackType(value);
+			instructions.current.hair.backType = value;
+		}
+	};
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="absolute font-bold text-xl">Hair</h1>
+
+						<div className="flex justify-center grow">
+							<button
+								type="button"
+								onClick={() => setTab("sets")}
+								className={`px-3 py-1 rounded-2xl bg-orange-200 mr-1 cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "sets" ? "bg-orange-300!" : "orange-200"}`}
+							>
+								Sets
+							</button>
+
+							<div className="rounded-2xl bg-orange-200 flex">
+								<button
+									type="button"
+									onClick={() => setTab("bangs")}
+									className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "bangs" ? "bg-orange-300!" : "orange-200"}`}
+								>
+									Bangs
+								</button>
+								<button
+									type="button"
+									onClick={() => setTab("back")}
+									className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "back" ? "bg-orange-300!" : "orange-200"}`}
+								>
+									Back
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={50}
+							type={type}
+							setType={(i) => {
+								setType(i);
+
+								// Update ref
+								if (tab === "sets") {
+									instructions.current.hair.setType = i;
+								} else if (tab === "bangs") {
+									instructions.current.hair.bangsType = i;
+								} else if (tab === "back") {
+									instructions.current.hair.backType = i;
+								}
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker
+						color={color}
+						setColor={(i) => {
+							setColor(i);
+							instructions.current.hair.color = i;
+						}}
+					/>
+
+					<div className="flex gap-1.5 items-center mb-2 w-full">
+						<input type="checkbox" id="subcolor" className="checkbox" checked={subColor !== null} onChange={(e) => setSubColor(e.target.checked ? 0 : null)} />
+						<label htmlFor="subcolor" className="text-xs">
+							Sub color
+						</label>
+					</div>
+
+					<ColorPicker
+						disabled={subColor === null}
+						color={subColor ? subColor : 0}
+						setColor={(i) => {
+							setSubColor(i);
+							instructions.current.hair.subColor = i;
+						}}
+					/>
+
+					<div className="flex gap-1.5 items-center w-full mt-auto">
+						<input type="checkbox" id="subcolor" className="checkbox" checked={isFlipped} onChange={(e) => setIsFlipped(e.target.checked)} />
+						<label htmlFor="subcolor" className="text-xs">
+							Flip
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/head.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import { SwitchMiiInstructions } from "@/types";
+import TypeSelector from "../type-selector";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
+
+export default function HeadTab({ instructions }: Props) {
+	const [color, setColor] = useState(108);
+	const [type, setType] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Head</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={16}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.head.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker
+						color={color}
+						setColor={(i) => {
+							setColor(i);
+							instructions.current.head.skinColor = i;
+						}}
+					/>
+
+					<div className="grid grid-cols-2 gap-1 w-fit mt-auto">
+						{COLORS.map((hex, i) => (
+							<button
+								type="button"
+								key={i + 108}
+								onClick={() => setColor(i + 108)}
+								className={`size-9 rounded-lg cursor-pointer ring-offset-2 ring-orange-500 ${color === i + 108 ? "ring-2" : ""}`}
+								style={{ backgroundColor: `#${hex}` }}
+							></button>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/lips.tsx

@@ -0,0 +1,48 @@
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function LipsTab({ instructions }: Props) {
+	const [type, setType] = useState(0);
+	const [color, setColor] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Lips</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={35}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.lips.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker
+						color={color}
+						setColor={(i) => {
+							setColor(i);
+							instructions.current.lips.color = i;
+						}}
+					/>
+					<NumberInputs target={instructions.current.lips} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/misc.tsx

@@ -0,0 +1,246 @@
+import { useState } from "react";
+import { SwitchMiiInstructions } from "@/types";
+import { MiiGender } from "@prisma/client";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const VOICE_SETTINGS: string[] = ["Speed", "Pitch", "Depth", "Delivery"];
+const PERSONALITY_SETTINGS: { label: string; left: string; right: string }[] = [
+	{ label: "Movement", left: "Slow", right: "Quick" },
+	{ label: "Speech", left: "Polite", right: "Honest" },
+	{ label: "Energy", left: "Flat", right: "Varied" },
+	{ label: "Thinking", left: "Serious", right: "Chill" },
+	{ label: "Overall", left: "Normal", right: "Quirky" },
+];
+
+export default function HeadTab({ instructions }: Props) {
+	const [height, setHeight] = useState(50);
+	const [weight, setWeight] = useState(50);
+	const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>([]);
+	const [voice, setVoice] = useState({
+		speed: 50,
+		pitch: 50,
+		depth: 50,
+		delivery: 50,
+		tone: 0,
+	});
+	const [personality, setPersonality] = useState({
+		movement: -1,
+		speech: -1,
+		energy: -1,
+		thinking: -1,
+		overall: -1,
+	});
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Misc</h1>
+					</div>
+
+					<div className="grow overflow-y-auto">
+						<div className="grid grid-cols-2 gap-4">
+							<div>
+								<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
+									<hr className="grow border-zinc-300" />
+									<span>Body</span>
+									<hr className="grow border-zinc-300" />
+								</div>
+
+								<div className="flex flex-col">
+									<label htmlFor="height" className="text-sm">
+										Height
+									</label>
+									<input
+										type="range"
+										id="height"
+										min={0}
+										max={100}
+										step={1}
+										value={height}
+										onChange={(e) => {
+											setHeight(e.target.valueAsNumber);
+											instructions.current.height = e.target.valueAsNumber;
+										}}
+									/>
+								</div>
+
+								<div className="flex flex-col">
+									<label htmlFor="weight" className="text-sm">
+										Weight
+									</label>
+									<input
+										type="range"
+										id="weight"
+										min={0}
+										max={100}
+										step={1}
+										value={weight}
+										onChange={(e) => {
+											setWeight(e.target.valueAsNumber);
+											instructions.current.weight = e.target.valueAsNumber;
+										}}
+									/>
+								</div>
+
+								<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
+									<hr className="grow border-zinc-300" />
+									<span>Dating Preferences</span>
+									<hr className="grow border-zinc-300" />
+								</div>
+
+								<div className="flex flex-col gap-1.5">
+									<div className="flex gap-1.5">
+										<input
+											type="checkbox"
+											id="male"
+											className="checkbox"
+											checked={datingPreferences.includes("MALE")}
+											onChange={(e) => {
+												setDatingPreferences((prev) =>
+													e.target.checked ? (prev.includes("MALE") ? prev : [...prev, "MALE"]) : prev.filter((p) => p !== "MALE"),
+												);
+												instructions.current.datingPreferences = datingPreferences;
+											}}
+										/>
+										<label htmlFor="male" className="text-sm">
+											Male
+										</label>
+									</div>
+
+									<div className="flex gap-1.5">
+										<input
+											type="checkbox"
+											id="female"
+											className="checkbox"
+											checked={datingPreferences.includes("FEMALE")}
+											onChange={(e) => {
+												setDatingPreferences((prev) =>
+													e.target.checked ? (prev.includes("FEMALE") ? prev : [...prev, "FEMALE"]) : prev.filter((p) => p !== "FEMALE"),
+												);
+												instructions.current.datingPreferences = datingPreferences;
+											}}
+										/>
+										<label htmlFor="female" className="text-sm">
+											Female
+										</label>
+									</div>
+
+									<div className="flex gap-1.5">
+										<input
+											type="checkbox"
+											id="nonbinary"
+											className="checkbox"
+											checked={datingPreferences.includes("NONBINARY")}
+											onChange={(e) => {
+												setDatingPreferences((prev) =>
+													e.target.checked ? (prev.includes("NONBINARY") ? prev : [...prev, "NONBINARY"]) : prev.filter((p) => p !== "NONBINARY"),
+												);
+												instructions.current.datingPreferences = datingPreferences;
+											}}
+										/>
+										<label htmlFor="nonbinary" className="text-sm">
+											Nonbinary
+										</label>
+									</div>
+								</div>
+							</div>
+
+							<div>
+								<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
+									<hr className="grow border-zinc-300" />
+									<span>Voice</span>
+									<hr className="grow border-zinc-300" />
+								</div>
+
+								<div className="flex flex-col gap-1">
+									{VOICE_SETTINGS.map((label) => (
+										<div key={label} className="flex gap-3">
+											<label htmlFor={label} className="text-sm w-14">
+												{label}
+											</label>
+											<input
+												type="range"
+												name={label}
+												className="grow"
+												min={0}
+												max={100}
+												step={1}
+												value={voice[label as keyof typeof voice]}
+												onChange={(e) => {
+													setVoice((p) => ({ ...p, [label]: e.target.valueAsNumber }));
+													instructions.current.voice[label as keyof typeof voice] = e.target.valueAsNumber;
+												}}
+											/>
+										</div>
+									))}
+
+									<div className="flex gap-3">
+										<label htmlFor="delivery" className="text-sm w-14">
+											Tone
+										</label>
+										<div className="grid grid-cols-6 gap-1 grow">
+											{Array.from({ length: 6 }).map((_, i) => (
+												<button
+													type="button"
+													key={i}
+													onClick={() => {
+														setVoice((p) => ({ ...p, tone: i }));
+														instructions.current.voice.tone = i;
+													}}
+													className={`cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-xl ${voice.tone === i ? "bg-orange-400!" : ""}`}
+												>
+													{i + 1}
+												</button>
+											))}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Personality</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col gap-1.5 mb-3">
+							{PERSONALITY_SETTINGS.map(({ label, left, right }) => {
+								const key = label.toLowerCase() as keyof typeof personality;
+								return (
+									<div key={label} className="flex justify-center items-center gap-2">
+										<span className="text-sm font-bold w-24 shrink-0">{label}</span>
+										<span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
+										<div className="flex gap-0.5">
+											{Array.from({ length: 6 }).map((_, i) => {
+												const colors = ["bg-green-400", "bg-green-300", "bg-teal-200", "bg-orange-200", "bg-orange-300", "bg-orange-400"];
+												return (
+													<button
+														key={i}
+														type="button"
+														onClick={() => {
+															setPersonality((p) => ({ ...p, [key]: i }));
+															instructions.current.personality = personality;
+														}}
+														className={`size-7 cursor-pointer rounded-lg transition-opacity duration-100 border-orange-500
+                  ${colors[i]} ${personality[key] === i ? "border-2 opacity-100" : "opacity-70"}`}
+													></button>
+												);
+											})}
+										</div>
+										<span className="text-sm text-zinc-500 w-12 shrink-0">{right}</span>
+									</div>
+								);
+							})}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/nose.tsx

@@ -0,0 +1,39 @@
+import { SwitchMiiInstructions } from "@/types";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function NoseTab({ instructions }: Props) {
+	const [type, setType] = useState(0);
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="font-bold text-xl">Nose</h1>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector
+							length={35}
+							type={type}
+							setType={(i) => {
+								setType(i);
+								instructions.current.nose.type = i;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<NumberInputs target={instructions.current.nose} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/tabs/other.tsx

@@ -0,0 +1,87 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import TypeSelector from "../type-selector";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number; colorsDisabled?: number[] }[] = [
+	{ name: "wrinkles1", length: 50 },
+	{ name: "wrinkles2", length: 40 },
+	{ name: "beard", length: 20 },
+	{ name: "moustache", length: 10 },
+	{ name: "goatee", length: 5 },
+	{ name: "mole", length: 15 },
+	{ name: "eyeShadow", length: 3 },
+	{ name: "blush", length: 8, colorsDisabled: [6] },
+];
+
+export default function OtherTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+
+	// One type/color state per tab
+	const [types, setTypes] = useState<number[]>(Array(TABS.length).fill(0));
+	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+
+	const currentTab = TABS[tab];
+	const isColorPickerDisabled = currentTab.colorsDisabled ? currentTab.colorsDisabled.includes(types[tab]) : false;
+
+	const setType = (value: number) => {
+		setTypes((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		instructions.current.other[currentTab.name].type = value;
+	};
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		instructions.current.other[currentTab.name].color = value;
+	};
+
+	return (
+		<div className="relative grow p-3 pb-0!">
+			<div className="flex h-full">
+				<div className="grow flex flex-col">
+					<div className="flex items-center h-8">
+						<h1 className="absolute font-bold text-xl">Other</h1>
+
+						<div className="flex justify-center grow">
+							<div className="rounded-2xl bg-orange-200">
+								{TABS.map((_, i) => (
+									<button
+										key={i}
+										type="button"
+										onClick={() => setTab(i)}
+										className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
+									>
+										{i}
+									</button>
+								))}
+							</div>
+						</div>
+					</div>
+
+					<div className="flex justify-center h-74 mt-auto">
+						<TypeSelector hasNoneOption length={currentTab.length} type={types[tab]} setType={setType} />
+					</div>
+				</div>
+
+				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
+					<ColorPicker disabled={isColorPickerDisabled} color={colors[tab]} setColor={setColor} />
+					<NumberInputs target={instructions.current.other[currentTab.name]} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/submit-form/mii-editor/type-selector.tsx

@@ -0,0 +1,23 @@
+interface Props {
+	hasNoneOption?: boolean;
+	length: number;
+	type: number;
+	setType: (type: number) => void;
+}
+
+export default function TypeSelector({ hasNoneOption, length, type, setType }: Props) {
+	return (
+		<div className="grid grid-cols-5 gap-1 w-fit overflow-y-auto h-fit max-h-full">
+			{Array.from({ length }).map((_, i) => (
+				<button
+					type="button"
+					key={i}
+					onClick={() => setType(i)}
+					className={`size-12 cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-xl ${type === i ? "bg-orange-400!" : ""} ${hasNoneOption && i === 0 ? "text-md" : "text-2xl"}`}
+				>
+					{hasNoneOption ? (i === 0 ? "None" : i) : i + 1}
+				</button>
+			))}
+		</div>
+	);
+}

src/components/tutorial/switch-submit.tsx

@@ -9,11 +9,7 @@ export default function SubmitTutorialButton() {
 
 	return (
 		<>
-			<button
+			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
-				type="button"
-				onClick={() => setIsOpen(true)}
-				className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline"
-			>
 				How to?
 			</button>
 
@@ -21,48 +17,10 @@ export default function SubmitTutorialButton() {
 				createPortal(
 					<Tutorial
 						tutorials={[
-							{
-								title: "Allow Copying",
-								thumbnail: "/tutorial/switch/allow-copying/thumbnail.png",
-								hint: "Suggested!",
-								steps: [
-									{ type: "start" },
-									{
-										text: "1. Enter the town hall",
-										imageSrc: "/tutorial/switch/step1.png",
-									},
-									{
-										text: "2. Go into 'Mii List'",
-										imageSrc: "/tutorial/switch/allow-copying/step2.png",
-									},
-									{
-										text: "3. Select and edit the Mii you wish to submit",
-										imageSrc: "/tutorial/switch/allow-copying/step3.png",
-									},
-									{
-										text: "4. Click 'Other Settings' in the information screen",
-										imageSrc: "/tutorial/switch/allow-copying/step4.png",
-									},
-									{
-										text: "5. Click on 'Don't Allow' under the 'Copying' text",
-										imageSrc: "/tutorial/switch/allow-copying/step5.png",
-									},
-									{
-										text: "6. Press 'Allow'",
-										imageSrc: "/tutorial/switch/allow-copying/step6.png",
-									},
-									{
-										text: "7. Confirm the edits to the Mii",
-										imageSrc: "/tutorial/switch/allow-copying/step7.png",
-									},
-									{ type: "finish" },
-								],
-							},
 							{
 								title: "Create QR Code",
 								thumbnail: "/tutorial/switch/create-qr-code/thumbnail.png",
 								steps: [
-									{ type: "start" },
 									{
 										text: "1. Enter the town hall",
 										imageSrc: "/tutorial/switch/step1.png",
@@ -94,7 +52,7 @@ export default function SubmitTutorialButton() {
 						isOpen={isOpen}
 						setIsOpen={setIsOpen}
 					/>,
-					document.body
+					document.body,
 				)}
 		</>
 	);

src/lib/images.tsx

@@ -16,7 +16,7 @@ import satori, { Font } from "satori";
 import { Mii } from "@prisma/client";
 
 const MIN_IMAGE_DIMENSIONS = [128, 128];
-const MAX_IMAGE_DIMENSIONS = [1920, 1080];
+const MAX_IMAGE_DIMENSIONS = [2000, 2000];
 const MAX_IMAGE_SIZE = 4 * 1024 * 1024; // 4 MB
 const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
 
@@ -49,7 +49,7 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
 			metadata.height < MIN_IMAGE_DIMENSIONS[1] ||
 			metadata.height > MAX_IMAGE_DIMENSIONS[1]
 		) {
-			return { valid: false, error: "Image dimensions are invalid. Resolution must be between 128x128 and 1920x1080" };
+			return { valid: false, error: "Image dimensions are invalid. Resolution must be between 128x128 and 2000x2000" };
 		}
 
 		// Check for inappropriate content

src/lib/qr-codes.ts

@@ -4,7 +4,7 @@ import sjcl from "sjcl-with-all";
 
 import { MII_DECRYPTION_KEY, MII_QR_ENCRYPTED_LENGTH } from "./constants";
 import Mii from "./mii.js/mii";
-import { TomodachiLifeMii, HairDyeMode } from "./tomodachi-life-mii";
+import { ThreeDsTomodachiLifeMii, HairDyeMode } from "./three-ds-tomodachi-life-mii";
 
 // AES-CCM encrypted Mii QR codes have some errata (https://www.3dbrew.org/wiki/AES_Registers#CCM_mode_pitfall)
 // causing them to not be easily decryptable by asmcrypto
@@ -23,7 +23,7 @@ const sjclCcmCtrMode:
 	// @ts-expect-error -- Referencing a private function that is not in the types.
 	sjcl.mode.ccm.u; // NOTE: This may need to be changed with a different sjcl build. Read above
 
-export function convertQrCode(bytes: Uint8Array): { mii: Mii; tomodachiLifeMii: TomodachiLifeMii } | never {
+export function convertQrCode(bytes: Uint8Array): { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii } | never {
 	// Decrypt 96 byte 3DS/Wii U format Mii data from the QR code.
 	// References (Credits: jaames, kazuki-4ys):
 	// - https://gist.github.com/jaames/96ce8daa11b61b758b6b0227b55f9f78
@@ -89,7 +89,7 @@ export function convertQrCode(bytes: Uint8Array): { mii: Mii; tomodachiLifeMii:
 		const buffer = Buffer.from(result); // Convert to node Buffer.
 		const mii = new Mii(buffer); // Will verify the Mii data further.
 		// Decrypt Tomodachi Life Mii data from encrypted QR code bytes.
-		const tomodachiLifeMii = TomodachiLifeMii.fromBytes(bytes);
+		const tomodachiLifeMii = ThreeDsTomodachiLifeMii.fromBytes(bytes);
 
 		// Apply hair dye fields.
 		switch (tomodachiLifeMii.hairDyeMode) {

src/lib/schemas.ts

@@ -90,3 +90,191 @@ export const displayNameSchema = z
 	.regex(/^[a-zA-Z0-9-_. ']+$/, {
 		error: "Display name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
 	});
+
+const colorSchema = z.number().int().min(0).max(107).optional();
+const geometrySchema = z.number().int().min(-5).max(5).optional();
+
+export const switchMiiInstructionsSchema = z
+	.object({
+		head: z.object({ type: z.number().int().min(1).max(16).optional(), skinColor: z.number().int().min(0).max(121).optional() }).optional(),
+		hair: z
+			.object({
+				setType: z.number().int().min(0).max(25).optional(),
+				bangsType: z.number().int().min(0).max(25).optional(),
+				backType: z.number().int().min(0).max(25).optional(),
+				color: colorSchema,
+				subColor: colorSchema,
+				style: z.number().int().min(0).max(3).optional(),
+				isFlipped: z.boolean().optional(),
+			})
+			.optional(),
+		eyebrows: z
+			.object({
+				type: z.number().int().min(0).max(25).optional(),
+				color: colorSchema,
+				height: geometrySchema,
+				distance: geometrySchema,
+				rotation: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+			})
+			.optional(),
+		eyes: z
+			.object({
+				eyesType: z.number().int().min(0).max(25).optional(),
+				eyelashesTop: z.number().int().min(0).max(6).optional(),
+				eyelashesBottom: z.number().int().min(0).max(25).optional(),
+				eyelidTop: z.number().int().min(0).max(2).optional(),
+				eyelidBottom: z.number().int().min(0).max(25).optional(),
+				eyeliner: z.number().int().min(0).max(25).optional(),
+				pupil: z.number().int().min(0).max(9).optional(),
+				color: colorSchema,
+				height: geometrySchema,
+				distance: geometrySchema,
+				rotation: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+			})
+			.optional(),
+		nose: z
+			.object({
+				type: z.number().int().min(0).max(25).optional(),
+				height: geometrySchema,
+				size: geometrySchema,
+			})
+			.optional(),
+		lips: z
+			.object({
+				type: z.number().int().min(0).max(25).optional(),
+				color: colorSchema,
+				height: geometrySchema,
+				rotation: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+				hasLipstick: z.boolean().optional(),
+			})
+			.optional(),
+		ears: z
+			.object({
+				type: z.number().int().min(0).max(4).optional(),
+				height: geometrySchema,
+				size: geometrySchema,
+			})
+			.optional(),
+		glasses: z
+			.object({
+				type: z.number().int().min(0).max(25).optional(),
+				ringColor: colorSchema,
+				shadesColor: colorSchema,
+				height: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+			})
+			.optional(),
+		other: z
+			.object({
+				wrinkles1: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				wrinkles2: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				beard: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				moustache: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				goatee: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				mole: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyeShadow: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				blush: z
+					.object({
+						type: z.number().int().min(0).max(25).optional(),
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+			})
+			.optional(),
+		height: z.number().int().min(0).max(100).optional(),
+		weight: z.number().int().min(0).max(100).optional(),
+		datingPreferences: z.array(z.enum(MiiGender)).optional(),
+		voice: z
+			.object({
+				speed: z.number().int().min(0).max(100).optional(),
+				pitch: z.number().int().min(0).max(100).optional(),
+				depth: z.number().int().min(0).max(100).optional(),
+				delivery: z.number().int().min(0).max(100).optional(),
+				tone: z.number().int().min(1).max(6).optional(),
+			})
+			.optional(),
+		personality: z
+			.object({
+				movement: z.number().int().min(1).max(8).optional(),
+				speech: z.number().int().min(1).max(8).optional(),
+				energy: z.number().int().min(1).max(8).optional(),
+				thinking: z.number().int().min(1).max(8).optional(),
+				overall: z.number().int().min(1).max(8).optional(),
+			})
+			.optional(),
+	})
+	.optional();

src/lib/three-ds-tomodachi-life-mii.ts

@@ -1,4 +1,4 @@
-import { TOMODACHI_LIFE_DECRYPTION_KEY } from "../lib/constants";
+import { TOMODACHI_LIFE_DECRYPTION_KEY } from "./constants";
 import sjcl from "sjcl-with-all";
 
 // @ts-expect-error - This is not in the types, but it's a function needed to enable CTR mode.
@@ -19,7 +19,7 @@ export enum HairDyeMode {
 
 // Reference: https://github.com/ariankordi/nwf-mii-cemu-toy/blob/ffl-renderer-proto-integrate/assets/kaitai-structs/tomodachi_life_qr_code.ksy
 // (Credits to ariankordi for the byte locations)
-export class TomodachiLifeMii {
+export class ThreeDsTomodachiLifeMii {
 	firstName: string;
 	lastName: string;
 	islandName: string;
@@ -73,7 +73,7 @@ export class TomodachiLifeMii {
 		this.studioHairColor = hairDyeConverter[this.hairDye];
 	}
 
-	static fromBytes(bytes: Uint8Array): TomodachiLifeMii {
+	static fromBytes(bytes: Uint8Array): ThreeDsTomodachiLifeMii {
 		const iv = bytes.subarray(0x70, 128);
 		const encryptedExtraData = bytes.subarray(128, -4);
 
@@ -88,7 +88,7 @@ export class TomodachiLifeMii {
 		const decryptedExtraData = sjcl.codec.bytes.fromBits(decryptedBits);
 		const data = new Uint8Array(decryptedExtraData);
 
-		return new TomodachiLifeMii(data.buffer);
+		return new ThreeDsTomodachiLifeMii(data.buffer);
 	}
 
 	private readUtf16String(buffer: ArrayBuffer, offset: number, byteLength: number): string {

src/types.d.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { MiiGender, Prisma } from "@prisma/client";
 import { DefaultSession } from "next-auth";
 
 declare module "next-auth" {
@@ -12,3 +12,156 @@ declare module "next-auth" {
 		username?: string;
 	}
 }
+
+// All color properties are assumed to be the same 108 colors
+interface SwitchMiiInstructions {
+	head: {
+		type: number; // 16 types
+		skinColor: number; // additional 14 are not in color menu
+	};
+	hair: {
+		setType: number; // at least 25
+		bangsType: number; // at least 25
+		backType: number; // at least 25
+		color: number;
+		subColor: number;
+		style: number; // is this different for each hair?
+		isFlipped: boolean; // is this different for bangs/back?
+	};
+	eyebrows: {
+		type: number; // 0 is None, at least 25 (including None)
+		color: number;
+		height: number;
+		distance: number;
+		rotation: number;
+		size: number;
+		stretch: number;
+	};
+	eyes: {
+		eyesType: number; // At least 25
+		eyelashesTop: number; // 6 types
+		eyelashesBottom: number; // unknown
+		eyelidTop: number; // 0 is None, 2 additional types
+		eyelidBottom: number; // unknown
+		eyeliner: number; // unknown
+		pupil: number; // 0 is default, 9 additional types
+		color: number; // is this same as hair?
+		height: number;
+		distance: number;
+		rotation: number;
+		size: number;
+		stretch: number;
+	};
+	nose: {
+		type: number; // 0 is None, at least 24 additional
+		height: number;
+		size: number;
+	};
+	lips: {
+		type: number; // 0 is None, at least 24 additional
+		color: number; // is this same as hair?
+		height: number;
+		rotation: number;
+		size: number;
+		stretch: number;
+		hasLipstick: boolean; // is this what it's called?
+	};
+	ears: {
+		type: number; // 0 is Default, 4 additional
+		height: number;
+		size: number;
+	};
+	glasses: {
+		type: number; // NOTE: THERE IS A GAP!!! 0 is None, at least 29 additional
+		ringColor: number; // i'm assuming based off icon
+		shadesColor: number; // i'm assuming based off icon
+		height: number;
+		size: number;
+		stretch: number;
+	};
+	other: {
+		// names were assumed
+		wrinkles1: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		wrinkles2: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		beard: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		moustache: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		goatee: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		mole: {
+			type: number; // 0 is None, at least BLANK additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		eyeShadow: {
+			type: number; // 0 is None, at least 3 additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+		blush: {
+			type: number; // 0 is None, at least 7 additional
+			color: number; // is this same as hair?
+			height: number;
+			distance: number;
+			size: number;
+			stretch: number;
+		};
+	};
+	// makeup, use video?
+	height: number;
+	weight: number;
+	datingPreferences: MiiGender[];
+	voice: {
+		speed: number;
+		pitch: number;
+		depth: number;
+		delivery: number;
+		tone: number; // 1 to 6
+	};
+	personality: {
+		movement: number; // 8 levels, slow to quick
+		speech: number; // 8 levels, polite to honest
+		energy: number; // 8 levels, flat to varied
+		thinking: number; // 8 levels, serious to chill
+		overall: number; // 8 levels, normal to quirky
+	};
+}