fix: build errors and responsiveness

also some other changes

prisma/migrations/20250913120915_switch_sequel/migration.sql

@@ -0,0 +1,9 @@
+-- CreateEnum
+CREATE TYPE "public"."MiiPlatform" AS ENUM ('SWITCH', 'THREE_DS');
+
+-- AlterTable
+ALTER TABLE "public"."miis" ADD COLUMN     "platform" "public"."MiiPlatform" NOT NULL DEFAULT 'THREE_DS',
+ALTER COLUMN "firstName" DROP NOT NULL,
+ALTER COLUMN "lastName" DROP NOT NULL,
+ALTER COLUMN "islandName" DROP NOT NULL,
+ALTER COLUMN "allowedCopying" DROP NOT NULL;

prisma/migrations/20260224165250_nonbinary_gender/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "MiiGender" ADD VALUE 'NONBINARY';

prisma/migrations/20260224165818_instructions_json/migration.sql

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

prisma/schema.prisma

@@ -67,17 +67,20 @@ model Session {
 }
 
 model Mii {
-  id          Int      @id @default(autoincrement())
-  userId      Int
-  name        String   @db.VarChar(64)
-  imageCount  Int      @default(0)
-  tags        String[]
-  description String?  @db.VarChar(256)
+  id     Int @id @default(autoincrement())
+  userId Int
 
-  firstName      String
-  lastName       String
+  name        String      @db.VarChar(64)
+  imageCount  Int         @default(0)
+  tags        String[]
+  description String?     @db.VarChar(256)
+  platform    MiiPlatform @default(THREE_DS)
+
+  instructions   Json?
+  firstName      String?
+  lastName       String?
   gender         MiiGender?
-  islandName     String
+  islandName     String?
   allowedCopying Boolean?
 
   createdAt DateTime @default(now())
@@ -152,9 +155,15 @@ model Punishment {
   @@map("punishments")
 }
 
+enum MiiPlatform {
+  SWITCH
+  THREE_DS // can't start with a number
+}
+
 enum MiiGender {
   MALE
   FEMALE
+  NONBINARY
 }
 
 enum ReportType {

src/app/api/mii/[id]/edit/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import * as Sentry from "@sentry/nextjs";
 import { z } from "zod";
-import { Mii } from "@prisma/client";
+import { Mii, Prisma } from "@prisma/client";
 
 import fs from "fs/promises";
 import path from "path";
@@ -90,7 +90,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	}
 
 	// Edit Mii in database
-	const updateData: Partial<Mii> = {};
+	const updateData: Prisma.MiiUpdateInput = {};
 	if (name !== undefined) updateData.name = profanity.censor(name); // Censor potential inappropriate words
 	if (tags !== undefined) updateData.tags = tags.map((t) => profanity.censor(t)); // Same here
 	if (description !== undefined) updateData.description = profanity.censor(description);
@@ -139,7 +139,12 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 		}
 	} else if (description === undefined) {
 		// If images or description were not changed, regenerate the metadata image
-		await generateMetadataImage(updatedMii, updatedMii.user.name!);
+		try {
+			await generateMetadataImage(updatedMii, updatedMii.user.name!);
+		} catch (error) {
+			console.error(error);
+			return rateLimit.sendResponse({ error: `Failed to generate 'metadata' type image for mii ${miiId}` }, 500);
+		}
 	}
 
 	return rateLimit.sendResponse({ success: true });

src/app/api/submit/route.ts

@@ -8,46 +8,75 @@ import sharp from "sharp";
 
 import qrcode from "qrcode-generator";
 import { profanity } from "@2toad/profanity";
-import { MiiGender } from "@prisma/client";
+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");
 
-const submitSchema = z.object({
-	name: nameSchema,
-	tags: tagsSchema,
-	description: z.string().trim().max(256).optional(),
-	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",
-	}),
-	image1: z.union([z.instanceof(File), z.any()]).optional(),
-	image2: z.union([z.instanceof(File), z.any()]).optional(),
-	image3: z.union([z.instanceof(File), z.any()]).optional(),
-});
+const submitSchema = z
+	.object({
+		platform: z.enum(MiiPlatform).default("THREE_DS"),
+		name: nameSchema,
+		tags: tagsSchema,
+		description: z.string().trim().max(256).optional(),
+
+		// 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, {
+				error: "QR code size is not a valid Tomodachi Life QR code",
+			})
+			.nullish(),
+
+		// Custom images
+		image1: z.union([z.instanceof(File), z.any()]).optional(),
+		image2: z.union([z.instanceof(File), z.any()]).optional(),
+		image3: z.union([z.instanceof(File), z.any()]).optional(),
+	})
+	// This refine function is probably useless
+	.refine(
+		(data) => {
+			// If platform is Switch, gender and miiPortraitImage 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",
+			path: ["gender", "miiPortraitImage", "instructions"],
+		},
+	);
 
 export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
-	const rateLimit = new RateLimit(request, 2);
+	const rateLimit = new RateLimit(request, 3);
 	const check = await rateLimit.handle();
 	if (check) return check;
 
 	const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/admin/can-submit`);
 	const { value } = await response.json();
-	if (!value) return rateLimit.sendResponse({ error: "Submissions are disabled" }, 409);
+	if (!value) return rateLimit.sendResponse({ error: "Submissions are temporarily disabled" }, 503);
 
-	// Parse data
+	// Parse tags and QR code as JSON
 	const formData = await request.formData();
 
 	let rawTags: string[];
@@ -62,18 +91,78 @@ export async function POST(request: NextRequest) {
 		return rateLimit.sendResponse({ error: "Invalid JSON in tags or QR code data" }, 400);
 	}
 
+	// Minify instructions to save space and improve user experience
+	let minifiedInstructions: Partial<SwitchMiiInstructions> | undefined;
+	if (formData.get("platform") === "SWITCH") {
+		const DEFAULT_ZERO_FIELDS = new Set(["height", "distance", "rotation", "size", "stretch"]);
+
+		function minify(object: Partial<SwitchMiiInstructions>): Partial<SwitchMiiInstructions> {
+			for (const key in object) {
+				const value = object[key as keyof SwitchMiiInstructions];
+
+				if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
+					delete object[key as keyof SwitchMiiInstructions];
+					continue;
+				}
+
+				if (typeof value === "object" && !Array.isArray(value)) {
+					minify(value as Partial<SwitchMiiInstructions>);
+
+					if (Object.keys(value).length === 0) {
+						delete object[key as keyof SwitchMiiInstructions];
+					}
+				}
+			}
+
+			return object;
+		}
+
+		minifiedInstructions = minify(JSON.parse((formData.get("instructions") as string) ?? "{}") as SwitchMiiInstructions);
+	}
+
+	// Parse and check all submission info
 	const parsed = submitSchema.safeParse({
+		platform: formData.get("platform"),
 		name: formData.get("name"),
 		tags: rawTags,
 		description: formData.get("description"),
+
+		gender: formData.get("gender") ?? undefined, // ZOD MOMENT
+		miiPortraitImage: formData.get("miiPortraitImage"),
+		instructions: minifiedInstructions,
+
 		qrBytesRaw: rawQrBytesRaw,
+
 		image1: formData.get("image1"),
 		image2: formData.get("image2"),
 		image3: formData.get("image3"),
 	});
 
-	if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
-	const { name: uncensoredName, tags: uncensoredTags, description: uncensoredDescription, qrBytesRaw, image1, image2, image3 } = parsed.data;
+	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,
+		tags: uncensoredTags,
+		description: uncensoredDescription,
+		qrBytesRaw,
+		gender,
+		miiPortraitImage,
+		image1,
+		image2,
+		image3,
+	} = parsed.data;
 
 	// Censor potential inappropriate words
 	const name = profanity.censor(uncensoredName);
@@ -81,43 +170,60 @@ export async function POST(request: NextRequest) {
 	const description = uncensoredDescription && profanity.censor(uncensoredDescription);
 
 	// Validate image files
-	const images: File[] = [];
+	const customImages: File[] = [];
 
 	for (const img of [image1, image2, image3]) {
 		if (!img) continue;
 
 		const imageValidation = await validateImage(img);
 		if (imageValidation.valid) {
-			images.push(img);
+			customImages.push(img);
 		} else {
 			return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
 		}
 	}
 
-	const qrBytes = new Uint8Array(qrBytesRaw);
+	// Check Mii portrait image as well (Switch)
+	if (platform === "SWITCH") {
+		const imageValidation = await validateImage(miiPortraitImage);
+		if (!imageValidation.valid) return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
+	}
 
-	// Convert QR code to JS
-	let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
-	try {
-		conversion = convertQrCode(qrBytes);
-	} catch (error) {
-		Sentry.captureException(error, { extra: { stage: "qr-conversion" } });
-		return rateLimit.sendResponse({ error: error instanceof Error ? error.message : String(error) }, 400);
+	const qrBytes = new Uint8Array(qrBytesRaw ?? []);
+
+	// Convert QR code to JS (3DS)
+	let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii } | undefined;
+	if (platform === "THREE_DS") {
+		try {
+			conversion = convertQrCode(qrBytes);
+		} catch (error) {
+			Sentry.captureException(error, { extra: { stage: "qr-conversion" } });
+			return rateLimit.sendResponse({ error: error instanceof Error ? error.message : String(error) }, 400);
+		}
 	}
 
 	// Create Mii in database
 	const miiRecord = await prisma.mii.create({
 		data: {
 			userId: Number(session.user?.id),
+			platform,
 			name,
 			tags,
 			description,
+			gender: gender ?? "MALE",
 
-			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,
+			// Automatically detect certain information if on 3DS
+			...(platform === "THREE_DS"
+				? 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: minifiedInstructions,
+					}),
 		},
 	});
 
@@ -125,64 +231,70 @@ export async function POST(request: NextRequest) {
 	const miiUploadsDirectory = path.join(uploadsDirectory, miiRecord.id.toString());
 	await fs.mkdir(miiUploadsDirectory, { recursive: true });
 
-	// Download the image of the Mii
-	let studioBuffer: Buffer;
 	try {
-		const studioUrl = conversion.mii.studioUrl({ width: 512 });
-		const studioResponse = await fetch(studioUrl);
+		let portraitBuffer: Buffer | undefined;
 
-		if (!studioResponse.ok) {
-			throw new Error(`Failed to fetch Mii image ${studioResponse.status}`);
+		// Download the image of the Mii (3DS)
+		if (platform === "THREE_DS") {
+			const studioUrl = conversion?.mii.studioUrl({ width: 512 });
+			const studioResponse = await fetch(studioUrl!);
+
+			if (!studioResponse.ok) {
+				throw new Error(`Failed to fetch Mii image ${studioResponse.status}`);
+			}
+
+			portraitBuffer = Buffer.from(await studioResponse.arrayBuffer());
+		} else if (platform === "SWITCH") {
+			portraitBuffer = Buffer.from(await miiPortraitImage.arrayBuffer());
 		}
 
-		const studioArrayBuffer = await studioResponse.arrayBuffer();
-		studioBuffer = Buffer.from(studioArrayBuffer);
-	} catch (error) {
-		// Clean up if something went wrong
-		await prisma.mii.delete({ where: { id: miiRecord.id } });
+		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");
 
-		console.error("Failed to download Mii image:", error);
-		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "studio-image-download" } });
-		return rateLimit.sendResponse({ error: "Failed to download Mii image" }, 500);
-	}
-
-	try {
-		// Compress and store
-		const studioPngBuffer = await sharp(studioBuffer).png({ quality: 85 }).toBuffer();
-		const studioFileLocation = path.join(miiUploadsDirectory, "mii.png");
-
-		await fs.writeFile(studioFileLocation, studioPngBuffer);
-
-		// Generate a new QR code for aesthetic reasons
-		const byteString = String.fromCharCode(...qrBytes);
-		const generatedCode = qrcode(0, "L");
-		generatedCode.addData(byteString, "Byte");
-		generatedCode.make();
-
-		// Store QR code
-		const codeDataUrl = generatedCode.createDataURL();
-		const codeBase64 = codeDataUrl.replace(/^data:image\/gif;base64,/, "");
-		const codeBuffer = Buffer.from(codeBase64, "base64");
-
-		// Compress and store
-		const codePngBuffer = await sharp(codeBuffer).png({ quality: 85 }).toBuffer();
-		const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.png");
-
-		await fs.writeFile(codeFileLocation, codePngBuffer);
+		await fs.writeFile(fileLocation, pngBuffer);
 		await generateMetadataImage(miiRecord, session.user?.name!);
 	} catch (error) {
 		// Clean up if something went wrong
 		await prisma.mii.delete({ where: { id: miiRecord.id } });
 
-		console.error("Error processing Mii files:", error);
-		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "file-processing" } });
-		return rateLimit.sendResponse({ error: "Failed to process and store Mii files" }, 500);
+		console.error("Failed to download/store Mii portrait:", error);
+		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "studio-image-download" } });
+		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);
+			const generatedCode = qrcode(0, "L");
+			generatedCode.addData(byteString, "Byte");
+			generatedCode.make();
+
+			// Store QR code
+			const codeDataUrl = generatedCode.createDataURL();
+			const codeBase64 = codeDataUrl.replace(/^data:image\/gif;base64,/, "");
+			const codeBuffer = Buffer.from(codeBase64, "base64");
+
+			// Compress and store
+			const codePngBuffer = await sharp(codeBuffer).png({ quality: 85 }).toBuffer();
+			const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.png");
+
+			await fs.writeFile(codeFileLocation, codePngBuffer);
+		} catch (error) {
+			// Clean up if something went wrong
+			await prisma.mii.delete({ where: { id: miiRecord.id } });
+
+			console.error("Error processing Mii files:", error);
+			Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "file-processing" } });
+			return rateLimit.sendResponse({ error: "Failed to process and store Mii files" }, 500);
+		}
 	}
 
 	// Compress and store user images
 	try {
 		await Promise.all(
-			images.map(async (image, index) => {
+			customImages.map(async (image, index) => {
 				const buffer = Buffer.from(await image.arrayBuffer());
 				const pngBuffer = await sharp(buffer).png({ quality: 85 }).toBuffer();
 				const fileLocation = path.join(miiUploadsDirectory, `image${index}.png`);
@@ -197,7 +309,7 @@ export async function POST(request: NextRequest) {
 				id: miiRecord.id,
 			},
 			data: {
-				imageCount: images.length,
+				imageCount: customImages.length,
 			},
 		});
 	} catch (error) {

src/app/globals.css

@@ -91,6 +91,23 @@ body {
 	@apply opacity-100 scale-100;
 }
 
+/* Fallback Tooltips */
+[data-tooltip-span] {
+	@apply relative;
+}
+
+[data-tooltip-span] > .tooltip {
+	@apply absolute left-1/2 top-full mt-2 px-2 py-1 bg-orange-400 border border-orange-400 rounded-md text-sm text-white whitespace-nowrap select-none pointer-events-none shadow-md opacity-0 scale-75 transition-all duration-200 ease-out origin-top -translate-x-1/2 z-999999;
+}
+
+[data-tooltip-span] > .tooltip::before {
+	@apply content-[''] absolute left-1/2 -translate-x-1/2 -top-2 border-4 border-transparent border-b-orange-400;
+}
+
+[data-tooltip-span]:hover > .tooltip {
+	@apply opacity-100 scale-100;
+}
+
 /* Scrollbar */
 /* Firefox */
 * {
@@ -101,3 +118,35 @@ body {
 *::-webkit-scrollbar-track {
 	background: #ff8903;
 }
+
+/* Range input */
+input[type="range"] {
+	@apply appearance-none bg-transparent not-disabled: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 -mt-1.5;
+}
+
+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 not-disabled:bg-orange-500;
+}
+
+input[type="range"]:hover::-moz-range-thumb {
+	@apply not-disabled:bg-orange-500;
+}

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

@@ -7,14 +7,18 @@ import { Icon } from "@iconify/react";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
+import { MiiPlatform } from "@prisma/client";
 
 import LikeButton from "@/components/like-button";
 import ImageViewer from "@/components/image-viewer";
-import DeleteMiiButton from "@/components/delete-mii";
-import ShareMiiButton from "@/components/share-mii-button";
-import ScanTutorialButton from "@/components/tutorial/scan";
-import ProfilePicture from "@/components/profile-picture";
+import DeleteMiiButton from "@/components/mii/delete-mii-button";
+import ShareMiiButton from "@/components/mii/share-mii-button";
+import ThreeDsScanTutorialButton from "@/components/tutorial/3ds-scan";
+import SwitchScanTutorialButton from "@/components/tutorial/switch-add-mii";
 import Description from "@/components/description";
+import MiiInstructions from "@/components/mii/instructions";
+
+import { SwitchMiiInstructions } from "@/types";
 
 interface Props {
 	params: Promise<{ id: string }>;
@@ -49,23 +53,33 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 	return {
 		metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
 		title: `${mii.name} - TomodachiShare`,
-		description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island with ${mii._count.likedBy} likes.`,
+		description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
 		keywords: ["mii", "tomodachi life", "nintendo", "tomodachishare", "tomodachi-share", "mii creator", "mii collection", ...mii.tags],
 		creator: name,
 		openGraph: {
 			type: "article",
 			title: `${mii.name} - TomodachiShare`,
-			description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island with ${mii._count.likedBy} likes.`,
-			images: [{ url: metadataImageUrl, alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character` }],
+			description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			images: [
+				{
+					url: metadataImageUrl,
+					alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character`,
+				},
+			],
 			publishedTime: mii.createdAt.toISOString(),
 			authors: name,
 		},
 		twitter: {
 			card: "summary_large_image",
 			title: `${mii.name} - TomodachiShare`,
-			description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island with ${mii._count.likedBy} likes.`,
-			images: [{ url: metadataImageUrl, alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character` }],
-			creator: name,
+			description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			images: [
+				{
+					url: metadataImageUrl,
+					alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character`,
+				},
+			],
+			creator: mii.user.name!,
 		},
 		alternates: {
 			canonical: `/mii/${mii.id}`,
@@ -109,51 +123,104 @@ export default async function MiiPage({ params }: Props) {
 		<div className="flex flex-col items-center">
 			<div className="max-w-5xl w-full flex flex-col gap-4">
 				<div className="relative grid grid-cols-3 gap-4 max-md:grid-cols-1">
-					<div className="bg-amber-50 rounded-3xl border-2 border-amber-500 shadow-lg p-4 flex flex-col items-center max-w-md w-full max-md:place-self-center max-md:row-start-2">
+					<div className="bg-amber-50 rounded-3xl border-2 border-amber-500 shadow-lg p-4 h-min flex flex-col items-center max-w-md w-full max-md:place-self-center max-md:row-start-2">
 						{/* Mii Image */}
 						<div className="bg-linear-to-b from-amber-100 to-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center">
 							<ImageViewer
 								src={`/mii/${mii.id}/image?type=mii`}
 								alt="mii headshot"
-								width={200}
-								height={200}
-								className="drop-shadow-lg hover:scale-105 transition-transform"
+								width={250}
+								height={250}
+								className="drop-shadow-lg hover:scale-105 transition-transform w-full max-h-96 object-contain"
 							/>
 						</div>
 						{/* QR Code */}
-						<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`}
-								alt="mii qr code"
-								width={128}
-								height={128}
-								className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
-							/>
-						</div>
+						{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`}
+									alt="mii qr code"
+									width={128}
+									height={128}
+									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 */}
-						<ul className="text-sm w-full p-2 *:flex *:justify-between *:items-center *:my-1">
-							<li>
-								Name:{" "}
-								<span className="text-right font-medium">
-									{mii.firstName} {mii.lastName}
-								</span>
-							</li>
-							<li>
-								From: <span className="text-right font-medium">{mii.islandName} Island</span>
-							</li>
-							{mii.allowedCopying !== null && (
+						{mii.platform === "THREE_DS" && (
+							<ul className="text-sm w-full p-2 *:flex *:justify-between *:items-center *:my-1">
 								<li>
-									Allowed Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox cursor-auto!" />
+									Name:{" "}
+									<span className="text-right font-medium">
+										{mii.firstName} {mii.lastName}
+									</span>
 								</li>
-							)}
-						</ul>
+								<li>
+									From: <span className="text-right font-medium">{mii.islandName} Island</span>
+								</li>
+								<li>
+									Allowed Copying: <input type="checkbox" checked={mii.allowedCopying ?? false} disabled className="checkbox cursor-auto!" />
+								</li>
+							</ul>
+						)}
+
+						{/* Mii Platform */}
+						<div className={`flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 w-full ${mii.platform !== "THREE_DS" && "mt-2"}`}>
+							<hr className="grow border-zinc-300" />
+							<span>Platform</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div data-tooltip-span title={mii.platform} className="grid grid-cols-2 gap-2 mb-2">
+							<div
+								className={`tooltip mt-1! ${
+									mii.platform === "THREE_DS" ? "bg-sky-400! border-sky-400! before:border-b-sky-400!" : "bg-red-400! border-red-400! before:border-b-red-400!"
+								}`}
+							>
+								{mii.platform === "THREE_DS" ? "3DS" : "Switch"}
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-3xl border-2 shadow-sm ${
+									mii.platform === "THREE_DS" ? "bg-sky-100 border-sky-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="cib:nintendo-3ds" className="text-sky-500" />
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-3xl border-2 shadow-sm ${
+									mii.platform === "SWITCH" ? "bg-red-100 border-red-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="cib:nintendo-switch" className="text-red-400" />
+							</div>
+						</div>
 
 						{/* Mii Gender */}
-						<div className="grid grid-cols-2 gap-2">
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 w-full">
+							<hr className="grow border-zinc-300" />
+							<span>Gender</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div data-tooltip-span title={mii.gender ?? "NULL"} className="flex gap-1">
 							<div
-								className={`rounded-xl flex justify-center items-center size-16 text-5xl border-2 shadow-sm ${
+								className={`tooltip mt-1! ${
+									mii.gender === "MALE"
+										? "bg-blue-400! border-blue-400! before:border-b-blue-400!"
+										: mii.gender === "FEMALE"
+											? "bg-pink-400! border-pink-400! before:border-b-pink-400!"
+											: "bg-purple-400! border-purple-400! before:border-b-purple-400!"
+								}`}
+							>
+								{mii.gender === "MALE" ? "Male" : mii.gender === "FEMALE" ? "Female" : "Nonbinary"}
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
 									mii.gender === "MALE" ? "bg-blue-100 border-blue-400" : "bg-white border-gray-300"
 								}`}
 							>
@@ -161,12 +228,22 @@ export default async function MiiPage({ params }: Props) {
 							</div>
 
 							<div
-								className={`rounded-xl flex justify-center items-center size-16 text-5xl border-2 shadow-sm ${
+								className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
 									mii.gender === "FEMALE" ? "bg-pink-100 border-pink-400" : "bg-white border-gray-300"
 								}`}
 							>
 								<Icon icon="foundation:female" className="text-pink-400" />
 							</div>
+
+							{mii.platform !== "THREE_DS" && (
+								<div
+									className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+										mii.gender === "NONBINARY" ? "bg-purple-100 border-purple-400" : "bg-white border-gray-300"
+									}`}
+								>
+									<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+								</div>
+							)}
 						</div>
 					</div>
 
@@ -229,8 +306,11 @@ export default async function MiiPage({ params }: Props) {
 								<Icon icon="material-symbols:flag-rounded" />
 								<span>Report</span>
 							</Link>
-							<ScanTutorialButton />
+							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchScanTutorialButton />}
 						</div>
+
+						{/* Instructions */}
+						{mii.platform === "SWITCH" && <MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />}
 					</div>
 				</div>
 
@@ -268,7 +348,7 @@ export default async function MiiPage({ params }: Props) {
 							))}
 						</div>
 					) : (
-						<p className="indent-8 text-black/50">There is nothing here...</p>
+						<p className="indent-7.5 text-black/50">There is nothing here...</p>
 					)}
 				</div>
 			</div>

src/app/off-the-island/page.tsx

@@ -95,9 +95,7 @@ export default async function ExiledPage() {
 						<div key={mii.miiId} className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
 							<Image src={`/mii/${mii.miiId}/image?type=mii`} alt="mii image" width={96} height={96} />
 							<div className="p-4">
-								<p className="text-xl font-bold line-clamp-1" title={"hello"}>
-									{mii.mii.name}
-								</p>
+								<p className="text-xl font-bold line-clamp-1">{mii.mii.name}</p>
 								<p className="text-sm">
 									<span className="font-bold">Reason:</span> {mii.reason}
 								</p>

src/app/page.tsx

@@ -7,8 +7,8 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
 import Countdown from "@/components/countdown";
-import MiiList from "@/components/mii-list";
-import Skeleton from "@/components/mii-list/skeleton";
+import MiiList from "@/components/mii/list";
+import Skeleton from "@/components/mii/list/skeleton";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

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

@@ -5,8 +5,8 @@ import { Suspense } from "react";
 import { prisma } from "@/lib/prisma";
 
 import ProfileInformation from "@/components/profile-information";
-import MiiList from "@/components/mii-list";
-import Skeleton from "@/components/mii-list/skeleton";
+import MiiList from "@/components/mii/list";
+import Skeleton from "@/components/mii/list/skeleton";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

src/app/profile/likes/page.tsx

@@ -5,8 +5,8 @@ import { Suspense } from "react";
 import { auth } from "@/lib/auth";
 
 import ProfileInformation from "@/components/profile-information";
-import Skeleton from "@/components/mii-list/skeleton";
-import MiiList from "@/components/mii-list";
+import Skeleton from "@/components/mii/list/skeleton";
+import MiiList from "@/components/mii/list";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

src/app/submit/page.tsx

@@ -38,6 +38,12 @@ export default async function SubmitPage() {
 	} catch (error) {
 		return <p>An error occurred!</p>;
 	}
+	try {
+		const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/admin/can-submit`);
+		value = await response.json();
+	} catch (error) {
+		return <p>An error occurred!</p>;
+	}
 
 	if (!value)
 		return (

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

@@ -12,14 +12,16 @@ interface Props {
 }
 
 export default function Carousel({ images, className }: Props) {
-	const [emblaRef, emblaApi] = useEmblaCarousel();
+	const [emblaRef, emblaApi] = useEmblaCarousel({ duration: 15 });
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
 	const [isFocused, setIsFocused] = useState(false);
 
 	useEffect(() => {
 		if (!emblaApi) return;
+		emblaApi.reInit();
 		setScrollSnaps(emblaApi.scrollSnapList());
+		setSelectedIndex(0);
 		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
 	}, [images, emblaApi]);
 
@@ -74,20 +76,20 @@ 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) => (
-							<button
-								key={index}
-								type="button"
-								aria-label={`Go to ${index} in Carousel`}
-								onClick={() => emblaApi?.scrollTo(index)}
-								className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
-							/>
-						))}
-					</div>
 				</>
 			)}
+
+			<div className="flex justify-center p-2 gap-2 absolute right-0">
+				{scrollSnaps.map((_, index) => (
+					<button
+						key={index}
+						type="button"
+						aria-label={`Go to ${index} in Carousel`}
+						onClick={() => emblaApi?.scrollTo(index)}
+						className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
+					/>
+				))}
+			</div>
 		</div>
 	);
 }

src/components/mii/dating-preferences.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ChangeEvent } from "react";
+import { MiiGender } from "@prisma/client";
+import { SwitchMiiInstructions } from "@/types";
+
+interface Props {
+	data: SwitchMiiInstructions["datingPreferences"];
+	onChecked?: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>, gender: MiiGender) => void;
+}
+
+const DATING_PREFERENCES = ["Male", "Female", "Nonbinary"];
+
+export default function DatingPreferencesViewer({ data, onChecked }: Props) {
+	return (
+		<div className="flex flex-col gap-1.5">
+			{DATING_PREFERENCES.map((gender) => {
+				const genderEnum = gender.toUpperCase() as MiiGender;
+
+				return (
+					<div key={gender} className="flex gap-1.5">
+						<input
+							type="checkbox"
+							id={gender}
+							className="checkbox"
+							checked={data.includes(genderEnum)}
+							{...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })}
+						/>
+						<label htmlFor={gender} className="text-sm select-none">
+							{gender}
+						</label>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

src/components/mii/delete-mii-button.tsx

@@ -6,8 +6,8 @@ import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "@iconify/react";
 
-import LikeButton from "./like-button";
-import SubmitButton from "./submit-button";
+import LikeButton from "../like-button";
+import SubmitButton from "../submit-button";
 
 interface Props {
 	miiId: number;

src/components/mii/instructions.tsx

@@ -0,0 +1,238 @@
+import React from "react";
+
+import DatingPreferencesViewer from "./dating-preferences";
+import VoiceViewer from "./voice-viewer";
+import PersonalityViewer from "./personality-viewer";
+
+import { SwitchMiiInstructions } from "@/types";
+import { Icon } from "@iconify/react";
+import { COLORS } from "@/lib/switch";
+
+interface Props {
+	instructions: Partial<SwitchMiiInstructions>;
+}
+
+interface SectionProps {
+	name: string;
+	instructions: Partial<SwitchMiiInstructions[keyof SwitchMiiInstructions]>;
+	children?: React.ReactNode;
+	isSubSection?: boolean;
+}
+
+const ORDINAL_SUFFIXES: Record<string, string> = {
+	one: "st",
+	two: "nd",
+	few: "rd",
+	other: "th",
+};
+const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
+
+function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
+	const row = Math.floor(index / cols) + 1;
+	const col = (index % cols) + 1;
+	const rowSuffix = ORDINAL_SUFFIXES[ordinalRules.select(row)];
+	const colSuffix = ORDINAL_SUFFIXES[ordinalRules.select(col)];
+
+	return `${row}${rowSuffix} row, ${col}${colSuffix} column`;
+}
+
+function ColorPosition({ color }: { color: number }) {
+	if (!color) return null;
+	if (color <= 7) {
+		return (
+			<span className="flex items-center">
+				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				Color menu on left, <GridPosition index={color} cols={1} />
+			</span>
+		);
+	}
+	if (color >= 108) {
+		return (
+			<span className="flex items-center">
+				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				Outside color menu, <GridPosition index={color - 108} cols={2} />
+			</span>
+		);
+	}
+
+	return (
+		<span className="flex items-center">
+			<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+			Color menu on right, <GridPosition index={color - 8} cols={10} />
+		</span>
+	);
+}
+
+interface TableCellProps {
+	label: string;
+	children: React.ReactNode;
+}
+
+function TableCell({ label, children }: TableCellProps) {
+	return (
+		<tr className={"border-b border-orange-300/50 last:border-0"}>
+			<td className={"py-0.5 pr-6 text-amber-700 font-semibold w-30 text-sm"}>{label}</td>
+			<td className={"py-0.5 text-amber-950"}>{children}</td>
+		</tr>
+	);
+}
+
+function Section({ name, instructions, children, isSubSection }: SectionProps) {
+	if (typeof instructions !== "object" || !instructions) return null;
+
+	const color = "color" in instructions ? instructions.color : undefined;
+	const height = "height" in instructions ? instructions.height : undefined;
+	const distance = "distance" in instructions ? instructions.distance : undefined;
+	const rotation = "rotation" in instructions ? instructions.rotation : undefined;
+	const size = "size" in instructions ? instructions.size : undefined;
+	const stretch = "stretch" in instructions ? instructions.stretch : undefined;
+
+	return (
+		<div className={`p-3 ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
+			<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
+
+			<table className="w-full">
+				<tbody>
+					{color && (
+						<TableCell label="Color">
+							<ColorPosition color={color} />
+						</TableCell>
+					)}
+					{height && <TableCell label="Height">{height}</TableCell>}
+					{distance && <TableCell label="Distance">{distance}</TableCell>}
+					{rotation && <TableCell label="Rotation">{rotation}</TableCell>}
+					{size && <TableCell label="Size">{size}</TableCell>}
+					{stretch && <TableCell label="Stretch">{stretch}</TableCell>}
+
+					{children}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default function MiiInstructions({ instructions }: Props) {
+	if (Object.keys(instructions).length === 0) return null;
+	const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, datingPreferences, voice, personality } = instructions;
+
+	return (
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
+			<h2 className="text-xl font-semibold text-amber-700 flex items-center gap-2">
+				<Icon icon="fa7-solid:list" />
+				Instructions
+			</h2>
+
+			{head && <Section name="Head" instructions={head}></Section>}
+			{hair && (
+				<Section name="Hair" instructions={hair}>
+					{hair.subColor && (
+						<TableCell label="Sub Color">
+							<ColorPosition color={hair.subColor} />
+						</TableCell>
+					)}
+					{hair.subColor2 && (
+						<TableCell label="Sub Color (Back)">
+							<ColorPosition color={hair.subColor2} />
+						</TableCell>
+					)}
+					{hair.style && <TableCell label="Tying Style">{hair.style}</TableCell>}
+					{hair.isFlipped && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
+				</Section>
+			)}
+			{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
+			{eyes && (
+				<Section name="Eyes" instructions={eyes}>
+					<Section isSubSection name="Main" instructions={eyes.main} />
+					<Section isSubSection name="Eyelashes Top" instructions={eyes.eyelashesTop} />
+					<Section isSubSection name="Eyelashes Bottom" instructions={eyes.eyelashesBottom} />
+					<Section isSubSection name="Eyelid Top" instructions={eyes.eyelidTop} />
+					<Section isSubSection name="Eyelid Bottom" instructions={eyes.eyelidBottom} />
+					<Section isSubSection name="Eyeliner" instructions={eyes.eyeliner} />
+					<Section isSubSection name="Pupil" instructions={eyes.pupil} />
+				</Section>
+			)}
+			{nose && <Section name="Nose" instructions={nose}></Section>}
+			{lips && (
+				<Section name="Lips" instructions={lips}>
+					{lips.hasLipstick && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
+				</Section>
+			)}
+			{ears && <Section name="Ears" instructions={ears}></Section>}
+			{glasses && (
+				<Section name="Glasses" instructions={glasses}>
+					{glasses.ringColor && (
+						<TableCell label="Ring Color">
+							<ColorPosition color={glasses.ringColor} />
+						</TableCell>
+					)}
+					{glasses.shadesColor && (
+						<TableCell label="Shades Color">
+							<ColorPosition color={glasses.shadesColor} />
+						</TableCell>
+					)}
+				</Section>
+			)}
+			{other && (
+				<Section name="Other" instructions={other}>
+					<Section isSubSection name="Wrinkles 1" instructions={other.wrinkles1} />
+					<Section isSubSection name="Wrinkles 2" instructions={other.wrinkles2} />
+					<Section isSubSection name="Beard" instructions={other.beard} />
+					<Section isSubSection name="Moustache" instructions={other.moustache}>
+						{other.moustache && other.moustache.isFlipped && <TableCell label="Flipped">{other.moustache.isFlipped ? "Yes" : "No"}</TableCell>}
+					</Section>
+					<Section isSubSection name="Goatee" instructions={other.goatee} />
+					<Section isSubSection name="Mole" instructions={other.mole} />
+					<Section isSubSection name="Eye Shadow" instructions={other.eyeShadow} />
+					<Section isSubSection name="Blush" instructions={other.blush} />
+				</Section>
+			)}
+
+			{(height || weight || datingPreferences || voice || personality) && (
+				<div className="pl-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950">
+					<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
+
+					{height && (
+						<div className="flex mb-1">
+							<label htmlFor="height" className="w-16">
+								Height
+							</label>
+							<input id="height" type="range" min={0} max={100} step={1} disabled value={height} />
+						</div>
+					)}
+					{weight && (
+						<div className="flex">
+							<label htmlFor="weight" className="w-16">
+								Weight
+							</label>
+							<input id="weight" type="range" min={0} max={100} step={1} disabled value={weight} />
+						</div>
+					)}
+					{datingPreferences && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Dating Preferences</h4>
+							<div className="w-min">
+								<DatingPreferencesViewer data={datingPreferences} />
+							</div>
+						</div>
+					)}
+					{voice && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Voice</h4>
+							<div className="w-min">
+								<VoiceViewer data={voice} />
+							</div>
+						</div>
+					)}
+					{personality && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Personality</h4>
+							<div className="w-min">
+								<PersonalityViewer data={personality} />
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

src/components/mii/list/filter-menu.tsx

@@ -4,8 +4,9 @@ import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { Icon } from "@iconify/react";
 
-import { MiiGender } from "@prisma/client";
+import { MiiGender, MiiPlatform } from "@prisma/client";
 
+import PlatformSelect from "./platform-select";
 import TagFilter from "./tag-filter";
 import GenderSelect from "./gender-select";
 import OtherFilters from "./other-filters";
@@ -16,9 +17,10 @@ export default function FilterMenu() {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 
+	const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+	const gender = (searchParams.get("gender") as MiiGender) || undefined;
 	const rawTags = searchParams.get("tags") || "";
 	const rawExclude = searchParams.get("exclude") || "";
-	const gender = (searchParams.get("gender") as MiiGender) || undefined;
 	const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
 
 	const tags = useMemo(
@@ -61,11 +63,12 @@ export default function FilterMenu() {
 	// Count all active filters
 	useEffect(() => {
 		let count = tags.length + exclude.length;
+		if (platform) count++;
 		if (gender) count++;
 		if (allowCopying) count++;
 
 		setFilterCount(count);
-	}, [tags, exclude, gender, allowCopying]);
+	}, [tags, exclude, platform, gender, allowCopying]);
 
 	return (
 		<div className="relative">
@@ -84,6 +87,20 @@ export default function FilterMenu() {
 					<div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div>
 
 					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Platform</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<PlatformSelect />
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
+						<hr className="grow border-zinc-300" />
+						<span>Gender</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<GenderSelect />
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
 						<hr className="grow border-zinc-300" />
 						<span>Tags Include</span>
 						<hr className="grow border-zinc-300" />
@@ -97,19 +114,16 @@ export default function FilterMenu() {
 					</div>
 					<TagFilter isExclude />
 
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
-						<hr className="grow border-zinc-300" />
-						<span>Gender</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-					<GenderSelect />
-
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
-						<hr className="grow border-zinc-300" />
-						<span>Other</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-					<OtherFilters />
+					{platform !== "SWITCH" && (
+						<>
+							<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
+								<hr className="grow border-zinc-300" />
+								<span>Other</span>
+								<hr className="grow border-zinc-300" />
+							</div>
+							<OtherFilters />
+						</>
+					)}
 				</div>
 			)}
 		</div>

src/components/mii/list/gender-select.tsx

@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { useState, useTransition } from "react";
 import { Icon } from "@iconify/react";
-import { MiiGender } from "@prisma/client";
+import { MiiGender, MiiPlatform } from "@prisma/client";
 
 export default function GenderSelect() {
 	const router = useRouter();
@@ -11,6 +11,7 @@ export default function GenderSelect() {
 	const [, startTransition] = useTransition();
 
 	const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
+	const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
 
 	const handleClick = (gender: MiiGender) => {
 		const filter = selected === gender ? null : gender;
@@ -31,26 +32,44 @@ export default function GenderSelect() {
 	};
 
 	return (
-		<div className="grid grid-cols-2 gap-0.5">
+		<div className="flex gap-0.5 w-fit">
 			<button
 				onClick={() => handleClick("MALE")}
 				aria-label="Filter for Male Miis"
-				className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all ${
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
 					selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
 				}`}
 			>
+				<div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div>
 				<Icon icon="foundation:male" className="text-blue-400" />
 			</button>
 
 			<button
 				onClick={() => handleClick("FEMALE")}
 				aria-label="Filter for Female Miis"
-				className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all ${
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
 					selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
 				}`}
 			>
+				<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div>
 				<Icon icon="foundation:female" className="text-pink-400" />
 			</button>
+
+			{platform !== "THREE_DS" && (
+				<button
+					onClick={() => handleClick("NONBINARY")}
+					aria-label="Filter for Nonbinary Miis"
+					data-tooltip-span
+					className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+						selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+					}`}
+				>
+					<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div>
+					<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+				</button>
+			)}
 		</div>
 	);
 }

src/components/mii/list/index.tsx

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import Link from "next/link";
 
-import { Prisma } from "@prisma/client";
+import { MiiGender, MiiPlatform, Prisma } from "@prisma/client";
 import { Icon } from "@iconify/react";
 
 import crypto from "crypto";
@@ -12,9 +12,9 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
 import SortSelect from "./sort-select";
-import Carousel from "../carousel";
-import LikeButton from "../like-button";
-import DeleteMiiButton from "../delete-mii";
+import Carousel from "../../carousel";
+import LikeButton from "../../like-button";
+import DeleteMiiButton from "../delete-mii-button";
 import Pagination from "./pagination";
 import FilterMenu from "./filter-menu";
 
@@ -29,7 +29,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 	const parsed = searchSchema.safeParse(searchParams);
 	if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
 
-	const { q: query, sort, tags, exclude, gender, allowCopying, page = 1, limit = 24, seed } = parsed.data;
+	const { q: query, sort, tags, exclude, platform, gender, allowCopying, page = 1, limit = 24, seed } = parsed.data;
 
 	// My Likes page
 	let miiIdsLiked: number[] | undefined = undefined;
@@ -52,6 +52,8 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 		// Tag filtering
 		...(tags && tags.length > 0 && { tags: { hasEvery: tags } }),
 		...(exclude && exclude.length > 0 && { NOT: { tags: { hasSome: exclude } } }),
+		// Platform
+		...(platform && { platform: { equals: platform } }),
 		// Gender
 		...(gender && { gender: { equals: gender } }),
 		// Allow Copying
@@ -71,6 +73,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 				},
 			},
 		}),
+		platform: true,
 		name: true,
 		imageCount: true,
 		tags: true,
@@ -143,7 +146,13 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 		[totalCount, filteredCount, list] = await Promise.all([
 			prisma.mii.count({ where: { ...where, userId } }),
 			prisma.mii.count({ where, skip, take: limit }),
-			prisma.mii.findMany({ where, orderBy, select, skip: (page - 1) * limit, take: limit }),
+			prisma.mii.findMany({
+				where,
+				orderBy,
+				select,
+				skip: (page - 1) * limit,
+				take: limit,
+			}),
 		]);
 	}
 
@@ -156,7 +165,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 
 	return (
 		<div className="w-full">
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-[56rem]:flex-col">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-md:flex-col">
 				<div className="flex items-center gap-2">
 					{totalCount == filteredCount ? (
 						<>
@@ -183,19 +192,26 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 				{miis.map((mii) => (
 					<div
 						key={mii.id}
-						className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
+						className="flex flex-col relative bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
 					>
 						<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}`),
 							]}
 						/>
 
 						<div className="p-4 flex flex-col gap-1 h-full">
-							<Link href={`/mii/${mii.id}`} className="font-bold text-2xl line-clamp-1" title={mii.name}>
+							<Link href={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1" title={mii.name}>
 								{mii.name}
+								<div className="absolute right-0 top-1/2 -translate-y-1/2 text-[1.25rem] opacity-25">
+									{mii.platform === "SWITCH" ? (
+										<Icon icon="cib:nintendo-switch" className="text-red-400" />
+									) : (
+										<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+									)}
+								</div>
 							</Link>
 							<div id="tags" className="flex flex-wrap gap-1">
 								{mii.tags.map((tag) => (

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/mii/list/platform-select.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import { MiiPlatform } from "@prisma/client";
+
+export default function PlatformSelect() {
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const [, startTransition] = useTransition();
+
+	const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
+
+	const handleClick = (platform: MiiPlatform) => {
+		const filter = selected === platform ? null : platform;
+		setSelected(filter);
+
+		const params = new URLSearchParams(searchParams);
+		if (filter) {
+			params.set("platform", filter);
+		} else {
+			params.delete("platform");
+		}
+
+		startTransition(() => {
+			router.push(`?${params.toString()}`);
+		});
+	};
+
+	return (
+		<div className="grid grid-cols-2 gap-0.5 w-fit">
+			<button
+				onClick={() => handleClick("THREE_DS")}
+				aria-label="Filter for 3DS Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
+					selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div>
+				<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+			</button>
+
+			<button
+				onClick={() => handleClick("SWITCH")}
+				aria-label="Filter for Switch Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
+					selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div>
+				<Icon icon="cib:nintendo-switch" className="text-red-400" />
+			</button>
+		</div>
+	);
+}

src/components/mii/list/tag-filter.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState, useTransition } from "react";
-import TagSelector from "../tag-selector";
+import TagSelector from "../../tag-selector";
 
 interface Props {
 	isExclude?: boolean;

src/components/mii/personality-viewer.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { SwitchMiiInstructions } from "@/types";
+
+interface Props {
+	data: SwitchMiiInstructions["personality"];
+	onClick?: (key: string, i: number) => void;
+}
+
+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 PersonalityViewer({ data, onClick }: Props) {
+	return (
+		<div className="flex flex-col gap-1.5 mb-3">
+			{PERSONALITY_SETTINGS.map(({ label, left, right }) => {
+				const key = label.toLowerCase() as keyof typeof data;
+				return (
+					<div key={label} className="flex justify-center items-center gap-2">
+						<span className="text-sm font-semibold 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: 8 }).map((_, i) => {
+								const colors = [
+									"bg-green-400",
+									"bg-green-300",
+									"bg-emerald-200",
+									"bg-teal-200",
+									"bg-orange-200",
+									"bg-orange-300",
+									"bg-orange-400",
+									"bg-orange-500",
+								];
+								return (
+									<button
+										key={i}
+										type="button"
+										onClick={() => {
+											if (onClick) onClick(key, i);
+										}}
+										className={`size-7 rounded-lg transition-opacity duration-100 border-orange-500
+                  ${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
+									></button>
+								);
+							})}
+						</div>
+						<span className="text-sm text-zinc-500 w-12 shrink-0">{right}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

src/components/mii/voice-viewer.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { SwitchMiiInstructions } from "@/types";
+import { ChangeEvent } from "react";
+
+interface Props {
+	data: SwitchMiiInstructions["voice"];
+	onClick?: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>, label: string) => void;
+	onClickTone?: (i: number) => void;
+}
+
+const VOICE_SETTINGS: string[] = ["Speed", "Pitch", "Depth", "Delivery"];
+
+export default function VoiceViewer({ data, onClick, onClickTone }: Props) {
+	return (
+		<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={data[label as keyof typeof data] ?? 50}
+						disabled={!onClick}
+						onChange={(e) => {
+							if (onClick) onClick(e, label);
+						}}
+					/>
+				</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={() => {
+								if (onClickTone) onClickTone(i);
+							}}
+							className={`transition-colors duration-100 rounded-xl ${data.tone === i ? "bg-orange-400!" : ""} ${onClick ? "hover:bg-orange-300 cursor-pointer" : ""}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+			</div>
+		</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,22 +2,27 @@
 
 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";
 
 import qrcode from "qrcode-generator";
+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 SubmitTutorialButton from "../tutorial/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";
@@ -35,16 +40,58 @@ export default function SubmitForm() {
 	);
 
 	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
-	const [studioUrl, setStudioUrl] = useState<string | undefined>();
-	const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
-
-	const [error, setError] = useState<string | undefined>(undefined);
+	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
+	const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
 
 	const [name, setName] = useState("");
 	const [tags, setTags] = useState<string[]>([]);
 	const [description, setDescription] = useState("");
 	const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
 
+	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
+	const [gender, setGender] = useState<MiiGender>("MALE");
+	const instructions = useRef<SwitchMiiInstructions>({
+		head: { skinColor: null },
+		hair: {
+			color: null,
+			subColor: null,
+			subColor2: null,
+			style: null,
+			isFlipped: false,
+		},
+		eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+		eyes: {
+			main: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelashesTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelashesBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelidTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelidBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyeliner: { color: null },
+			pupil: { height: null, distance: null, rotation: null, size: null, stretch: null },
+		},
+		nose: { height: null, size: null },
+		lips: { color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
+		ears: { height: null, size: null },
+		glasses: { ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
+		other: {
+			wrinkles1: { height: null, distance: null, size: null, stretch: null },
+			wrinkles2: { height: null, distance: null, size: null, stretch: null },
+			beard: { color: null },
+			moustache: { color: null, height: null, isFlipped: false, size: null, stretch: null },
+			goatee: { color: null },
+			mole: { color: null, height: null, distance: null, size: null },
+			eyeShadow: { color: null, height: null, distance: null, size: null, stretch: null },
+			blush: { color: null, height: null, distance: null, size: null, stretch: null },
+		},
+		height: null,
+		weight: null,
+		datingPreferences: [],
+		voice: { speed: null, pitch: null, depth: null, delivery: null, tone: null },
+		personality: { movement: null, speech: null, energy: null, thinking: null, overall: null },
+	});
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
 	const handleSubmit = async () => {
 		// Validate before sending request
 		const nameValidation = nameSchema.safeParse(name);
@@ -60,15 +107,36 @@ export default function SubmitForm() {
 
 		// Send request to server
 		const formData = new FormData();
+		formData.append("platform", platform);
 		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 === "THREE_DS") {
+			formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
+		} else if (platform === "SWITCH") {
+			const response = await fetch(miiPortraitUri!);
+
+			if (!response.ok) {
+				setError("Failed to check Mii portrait. Did you upload one?");
+				return;
+			}
+
+			const blob = await response.blob();
+			if (!blob.type.startsWith("image/")) {
+				setError("Invalid image file returned");
+				return;
+			}
+
+			formData.append("gender", gender);
+			formData.append("miiPortraitImage", blob);
+			formData.append("instructions", JSON.stringify(instructions.current));
+		}
+
 		const response = await fetch("/api/submit", {
 			method: "POST",
 			body: formData,
@@ -84,7 +152,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 () => {
@@ -96,38 +164,43 @@ export default function SubmitForm() {
 				return;
 			}
 
-			// Convert QR code to JS
-			let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
+			// Convert QR code to JS (3DS)
+			let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
 			try {
 				conversion = convertQrCode(qrBytes);
+				setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
 			} catch (error) {
 				setError(error instanceof Error ? error.message : String(error));
 				return;
 			}
 
+			// Generate a new QR code for aesthetic reasons
 			try {
-				setStudioUrl(conversion.mii.studioUrl({ width: 512 }));
-
-				// Generate a new QR code for aesthetic reasons
 				const byteString = String.fromCharCode(...qrBytes);
 				const generatedCode = qrcode(0, "L");
 				generatedCode.addData(byteString, "Byte");
 				generatedCode.make();
 
-				setGeneratedQrCodeUrl(generatedCode.createDataURL());
+				setGeneratedQrCodeUri(generatedCode.createDataURL());
 			} catch {
-				setError("Failed to get and/or generate Mii images");
+				setError("Failed to regenerate QR code");
 			}
 		};
 
 		preview();
-	}, [qrBytesRaw]);
+	}, [qrBytesRaw, platform]);
 
 	return (
 		<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={[studioUrl ?? "/loading.svg", generatedQrCodeUrl ?? "/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}>
@@ -162,12 +235,53 @@ export default function SubmitForm() {
 					<hr className="grow border-zinc-300" />
 				</div>
 
+				{/* Platform select */}
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="name" className="font-semibold">
+						Platform
+					</label>
+					<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
+						{/* Animated indicator */}
+						{/* TODO: maybe change width as part of animation? */}
+						<div
+							className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
+								platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
+							}`}
+						></div>
+
+						{/* Switch button */}
+						<button
+							type="button"
+							onClick={() => setPlatform("SWITCH")}
+							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+								platform === "SWITCH" && "text-slate-800!"
+							}`}
+						>
+							<Icon icon="cib:nintendo-switch" className="text-2xl" />
+							Switch
+						</button>
+
+						{/* 3DS button */}
+						<button
+							type="button"
+							onClick={() => setPlatform("THREE_DS")}
+							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+								platform === "THREE_DS" && "text-slate-800!"
+							}`}
+						>
+							<Icon icon="cib:nintendo-3ds" className="text-2xl" />
+							3DS
+						</button>
+					</div>
+				</div>
+
+				{/* Name */}
 				<div className="w-full grid grid-cols-3 items-center">
 					<label htmlFor="name" className="font-semibold">
 						Name
 					</label>
 					<input
-						name="name"
+						id="name"
 						type="text"
 						className="pill input w-full col-span-2"
 						minLength={2}
@@ -185,11 +299,13 @@ export default function SubmitForm() {
 					<TagSelector tags={tags} setTags={setTags} showTagLimit />
 				</div>
 
+				{/* Description */}
 				<div className="w-full grid grid-cols-3 items-start">
-					<label htmlFor="reason-note" className="font-semibold py-2">
+					<label htmlFor="description" className="font-semibold py-2">
 						Description
 					</label>
 					<textarea
+						id="description"
 						rows={5}
 						maxLength={256}
 						placeholder="(optional) Type a description..."
@@ -199,29 +315,109 @@ export default function SubmitForm() {
 					/>
 				</div>
 
-				{/* 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" />
-					<span>QR Code</span>
-					<hr className="grow border-zinc-300" />
+				{/* Gender (switch only) */}
+				<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
+					<label htmlFor="gender" className="font-semibold py-2">
+						Gender
+					</label>
+					<div className="col-span-2 flex gap-1">
+						<button
+							type="button"
+							onClick={() => setGender("MALE")}
+							aria-label="Filter for Male Miis"
+							data-tooltip="Male"
+							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
+								gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+							}`}
+						>
+							<Icon icon="foundation:male" className="text-blue-400" />
+						</button>
+
+						<button
+							type="button"
+							onClick={() => setGender("FEMALE")}
+							aria-label="Filter for Female Miis"
+							data-tooltip="Female"
+							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
+								gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+							}`}
+						>
+							<Icon icon="foundation:female" className="text-pink-400" />
+						</button>
+
+						<button
+							type="button"
+							onClick={() => setGender("NONBINARY")}
+							aria-label="Filter for Nonbinary Miis"
+							data-tooltip="Nonbinary"
+							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
+								gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+							}`}
+						>
+							<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+						</button>
+					</div>
 				</div>
 
-				<div className="flex flex-col items-center gap-2">
-					<QrUpload setQrBytesRaw={setQrBytesRaw} />
-					<span>or</span>
+				{/* (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" />
+						<span>Mii Portrait</span>
+						<hr className="grow border-zinc-300" />
+					</div>
 
-					<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
-						<Icon icon="mdi:camera" fontSize={20} />
-						Use your camera
-					</button>
+					<div className="flex flex-col items-center gap-2">
+						<PortraitUpload setImage={setMiiPortraitUri} />
+						<SwitchSubmitTutorialButton />
+					</div>
 
-					<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-					<SubmitTutorialButton />
-
-					<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
+					<p className="text-xs text-zinc-400 text-center mt-2">You must upload a screenshot of the features, check tutorial on how.</p>
 				</div>
 
-				{/* Separator */}
+				{/* (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>
+						<hr className="grow border-zinc-300" />
+					</div>
+
+					<div className="flex flex-col items-center gap-2">
+						<QrUpload setQrBytesRaw={setQrBytesRaw} />
+						<span>or</span>
+
+						<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
+							<Icon icon="mdi:camera" fontSize={20} />
+							Use your camera
+						</button>
+
+						<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+						<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 text-center px-32">
+							Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
+						</span>
+					</div>
+				</div>
+
+				{/* Custom images selector */}
 				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
 					<hr className="grow border-zinc-300" />
 					<span>Custom images</span>

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

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import { Icon } from "@iconify/react";
+import { COLORS } from "@/lib/switch";
+
+interface Props {
+	disabled?: boolean;
+	color: number;
+	setColor: (color: number) => void;
+	tab?: "hair" | "eyes" | "lips" | "glasses" | "eyeliner";
+}
+
+export default function ColorPicker({ disabled, color, setColor, tab = "hair" }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const getExtraSlice = () => {
+		switch (tab) {
+			case "hair":
+				return { start: 0, end: 8 };
+			case "eyes":
+				return { start: 122, end: 128 };
+			case "lips":
+				return { start: 128, end: 133 };
+			case "glasses":
+				return { start: 133, end: 139 };
+			case "eyeliner":
+				return { start: 139, end: 152 };
+			default:
+				return { start: 108, end: 122 };
+		}
+	};
+
+	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-20 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 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto
+						 ${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="w-max flex items-center">
+						<div className="mr-8 flex flex-col gap-0.5">
+							{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
+								const actualIndex = i + getExtraSlice().start;
+								return (
+									<button
+										type="button"
+										key={actualIndex}
+										onClick={() => setColor(actualIndex)}
+										className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "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 overflow-x-auto">
+							{COLORS.slice(8, 108).map((c, i) => (
+								<button
+									type="button"
+									key={i + 8}
+									onClick={() => setColor(i + 8)}
+									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="h-full w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
+							<Icon icon={"tabler:chevron-right"} className="text-4xl" />
+						</button>
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,80 @@
+import { SwitchMiiInstructions } from "@/types";
+import React, { useState } from "react";
+import { Icon } from "@iconify/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";
+
+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: "mdi:sparkles",
+	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");
+
+	return (
+		<>
+			<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
+				<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
+					{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
+						<button
+							key={t}
+							type="button"
+							onClick={() => setTab(t)}
+							className={`size-full aspect-square 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 relative p-3" : "hidden"}>
+							<TabComponent instructions={instructions} />
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,124 @@
+import { useState } from "react";
+
+interface Props {
+	target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number } | any;
+}
+
+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);
+
+	if (!target) return null;
+
+	return (
+		<div className="grid grid-cols-2 gap-x-4 h-min w-fit">
+			{target.height !== undefined && (
+				<div>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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,18 @@
+import { SwitchMiiInstructions } from "@/types";
+import NumberInputs from "../number-inputs";
+
+interface EarsProps {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EarsTab({ instructions }: EarsProps) {
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Ears</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<NumberInputs target={instructions.current.ears} />
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EyebrowsTab({ instructions }: Props) {
+	const [color, setColor] = useState(0);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Eyebrows</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.eyebrows.color = i;
+					}}
+				/>
+				<NumberInputs target={instructions.current.eyebrows} />
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,63 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsDisabled?: boolean }[] = [
+	{ name: "main", length: 76 },
+	{ name: "eyelashesTop", length: 6, colorsDisabled: true },
+	{ name: "eyelashesBottom", length: 2, colorsDisabled: true },
+	{ name: "eyelidTop", length: 3, colorsDisabled: true },
+	{ name: "eyelidBottom", length: 3, colorsDisabled: true },
+	{ name: "eyeliner", length: 2 },
+	{ name: "pupil", length: 10, colorsDisabled: true },
+];
+
+export default function EyesTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+
+	// One type/color state per tab
+	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+
+	const currentTab = TABS[tab];
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		if (!currentTab.colorsDisabled) (instructions.current.eyes[currentTab.name] as { color: number }).color = value;
+	};
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Eyes</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<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 + 1}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker disabled={currentTab.colorsDisabled} color={colors[tab]} setColor={setColor} tab={tab === 5 ? "eyeliner" : "eyes"} />
+				<NumberInputs target={instructions.current.eyes[currentTab.name]} />
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function GlassesTab({ instructions }: Props) {
+	const [ringColor, setRingColor] = useState(0);
+	const [shadesColor, setShadesColor] = useState(0);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Glasses</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={ringColor}
+					setColor={(i) => {
+						setRingColor(i);
+						instructions.current.glasses.ringColor = i;
+					}}
+					tab="glasses"
+				/>
+				<ColorPicker
+					color={shadesColor}
+					setColor={(i) => {
+						setShadesColor(i);
+						instructions.current.glasses.shadesColor = i;
+					}}
+					tab="glasses"
+				/>
+				<NumberInputs target={instructions.current.glasses} />
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,129 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+type Tab = "sets" | "bangs" | "back";
+
+export default function HairTab({ instructions }: Props) {
+	const [tab, setTab] = useState<Tab>("sets");
+	const [color, setColor] = useState(0);
+	const [subColor, setSubColor] = useState<number | null>(null);
+	const [subColor2, setSubColor2] = useState<number | null>(null);
+	const [style, setStyle] = useState<number | null>(null);
+	const [isFlipped, setIsFlipped] = useState(false);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Hair</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<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 className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.hair.color = i;
+					}}
+				/>
+
+				<div className="flex gap-1.5 items-center mb-2">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={tab === "back" ? subColor2 !== null : subColor !== null}
+						onChange={(e) => {
+							if (tab === "back") {
+								setSubColor2(e.target.checked ? 0 : null);
+								instructions.current.hair.subColor2 = e.target.checked ? 0 : null;
+							} else {
+								setSubColor(e.target.checked ? 0 : null);
+								instructions.current.hair.subColor = e.target.checked ? 0 : null;
+							}
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Sub color
+					</label>
+				</div>
+
+				<ColorPicker
+					disabled={tab === "back" ? subColor2 === null : subColor === null}
+					color={tab === "back" ? (subColor2 ?? 0) : (subColor ?? 0)}
+					setColor={(i) => {
+						if (tab === "back") {
+							setSubColor2(i);
+							instructions.current.hair.subColor2 = i;
+						} else {
+							setSubColor(i);
+							instructions.current.hair.subColor = i;
+						}
+					}}
+				/>
+
+				<p className="text-sm mb-1">Tying style</p>
+				<div className="grid grid-cols-3 gap-0.5">
+					{Array.from({ length: 3 }).map((_, i) => (
+						<button
+							type="button"
+							key={i}
+							onClick={() => {
+								setStyle(i);
+								instructions.current.hair.style = i;
+							}}
+							className={`size-full aspect-square cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-lg ${style === i ? "bg-orange-400!" : ""}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+
+				<div className="flex gap-1.5 items-center mt-4">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={isFlipped}
+						onChange={(e) => {
+							setIsFlipped(e.target.checked);
+							instructions.current.hair.isFlipped = e.target.checked;
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Flip
+					</label>
+				</div>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import { SwitchMiiInstructions } from "@/types";
+
+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(109);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Head</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.head.skinColor = i;
+					}}
+				/>
+
+				<div className="grid grid-cols-7 gap-1">
+					{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>
+		</>
+	);
+}

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

@@ -0,0 +1,47 @@
+import { SwitchMiiInstructions } from "@/types";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function LipsTab({ instructions }: Props) {
+	const [color, setColor] = useState(0);
+	const [hasLipstick, setHasLipstick] = useState(false);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Lips</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.lips.color = i;
+					}}
+					tab="lips"
+				/>
+				<NumberInputs target={instructions.current.lips} />
+
+				<div className="flex gap-1.5 items-center mt-4">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={hasLipstick}
+						onChange={(e) => {
+							setHasLipstick(e.target.checked);
+							instructions.current.lips.hasLipstick = e.target.checked;
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Lipstick
+					</label>
+				</div>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { MiiGender } from "@prisma/client";
+
+import DatingPreferencesViewer from "@/components/mii/dating-preferences";
+import VoiceViewer from "@/components/mii/voice-viewer";
+import PersonalityViewer from "@/components/mii/personality-viewer";
+
+import { SwitchMiiInstructions } from "@/types";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+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 (
+		<>
+			<h1 className="font-bold text-xl">Misc</h1>
+
+			<div className="grow h-full overflow-y-auto pb-3">
+				<div className="grid grid-cols-1 sm: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">
+							<DatingPreferencesViewer
+								data={datingPreferences}
+								onChecked={(e, gender) => {
+									setDatingPreferences((prev) => {
+										const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender);
+										instructions.current.datingPreferences = updated;
+										return updated;
+									});
+								}}
+							/>
+						</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>
+
+						<VoiceViewer
+							data={voice}
+							onClick={(e, label) => {
+								setVoice((p) => ({ ...p, [label]: e.target.valueAsNumber }));
+								instructions.current.voice[label as keyof typeof voice] = e.target.valueAsNumber;
+							}}
+							onClickTone={(i) => {
+								setVoice((p) => ({ ...p, tone: i }));
+								instructions.current.voice.tone = i;
+							}}
+						/>
+					</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>
+
+				<PersonalityViewer
+					data={personality}
+					onClick={(key, i) => {
+						setPersonality((p) => {
+							const updated = { ...p, [key]: i };
+							instructions.current.personality = updated;
+							return updated;
+						});
+						instructions.current.personality = personality;
+					}}
+				/>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,18 @@
+import { SwitchMiiInstructions } from "@/types";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function NoseTab({ instructions }: Props) {
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Nose</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<NumberInputs target={instructions.current.nose} />
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,86 @@
+import { SwitchMiiInstructions } from "@/types";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number }[] = [
+	{ name: "wrinkles1", length: 9 },
+	{ name: "wrinkles2", length: 15 },
+	{ name: "beard", length: 15 },
+	{ name: "moustache", length: 16 },
+	{ name: "goatee", length: 14 },
+	{ name: "mole", length: 2 },
+	{ name: "eyeShadow", length: 4 },
+	{ name: "blush", length: 8 },
+];
+
+export default function OtherTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+	const [isFlipped, setIsFlipped] = useState(false);
+
+	// One type/color state per tab
+	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+
+	const currentTab = TABS[tab];
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		const target = instructions.current.other[currentTab.name];
+		if ("color" in target) {
+			target.color = value;
+		}
+	};
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Other</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<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 + 1}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} />
+				<NumberInputs target={instructions.current.other[currentTab.name]} />
+
+				{tab === 3 && (
+					<div className="flex gap-1.5 items-center mt-4">
+						<input
+							type="checkbox"
+							id="subcolor"
+							className="checkbox"
+							checked={isFlipped}
+							onChange={(e) => {
+								setIsFlipped(e.target.checked);
+								instructions.current.other.moustache.isFlipped = e.target.checked;
+							}}
+						/>
+						<label htmlFor="subcolor" className="text-xs">
+							Flip
+						</label>
+					</div>
+				)}
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,45 @@
+"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/qr-upload.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { FileWithPath } from "react-dropzone";
 import jsQR from "jsqr";
 import Dropzone from "../dropzone";
@@ -10,36 +10,38 @@ interface Props {
 }
 
 export default function QrUpload({ setQrBytesRaw }: Props) {
+	const [hasImage, setHasImage] = useState(false);
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 
 	const handleDrop = useCallback(
 		(acceptedFiles: FileWithPath[]) => {
-			acceptedFiles.forEach((file) => {
-				// Scan QR code
-				const reader = new FileReader();
-				reader.onload = async (event) => {
-					const image = new Image();
-					image.onload = () => {
-						const canvas = canvasRef.current;
-						if (!canvas) return;
+			const file = acceptedFiles[0];
 
-						const ctx = canvas.getContext("2d");
-						if (!ctx) return;
+			// Scan QR code
+			const reader = new FileReader();
+			reader.onload = async (event) => {
+				const image = new Image();
+				image.onload = () => {
+					const canvas = canvasRef.current;
+					if (!canvas) return;
 
-						canvas.width = image.width;
-						canvas.height = image.height;
-						ctx.drawImage(image, 0, 0, image.width, image.height);
+					const ctx = canvas.getContext("2d");
+					if (!ctx) return;
 
-						const imageData = ctx.getImageData(0, 0, image.width, image.height);
-						const code = jsQR(imageData.data, image.width, image.height);
-						if (!code) return;
+					canvas.width = image.width;
+					canvas.height = image.height;
+					ctx.drawImage(image, 0, 0, image.width, image.height);
 
-						setQrBytesRaw(code.binaryData!);
-					};
-					image.src = event.target!.result as string;
+					const imageData = ctx.getImageData(0, 0, image.width, image.height);
+					const code = jsQR(imageData.data, image.width, image.height);
+					if (!code) return;
+
+					setQrBytesRaw(code.binaryData!);
+					setHasImage(true);
 				};
-				reader.readAsDataURL(file);
-			});
+				image.src = event.target!.result as string;
+			};
+			reader.readAsDataURL(file);
 		},
 		[setQrBytesRaw],
 	);
@@ -48,9 +50,15 @@ export default function QrUpload({ setQrBytesRaw }: Props) {
 		<div className="max-w-md w-full">
 			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
 				<p className="text-center text-sm">
-					Drag and drop your QR code image here
-					<br />
-					or click to open
+					{!hasImage ? (
+						<>
+							Drag and drop your QR code image here
+							<br />
+							or click to open
+						</>
+					) : (
+						"Uploaded!"
+					)}
 				</p>
 			</Dropzone>
 

src/components/tag-selector.tsx

@@ -97,7 +97,7 @@ export default function TagSelector({ tags, setTags, showTagLimit, isExclude }:
 							<button
 								type="button"
 								aria-label="Delete Tag"
-								className="text-black cursor-pointer"
+								className="text-slate-800 cursor-pointer"
 								onClick={(e) => {
 									e.stopPropagation();
 									removeTag(tag);

src/components/tutorial/3ds-scan.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function ThreeDsScanTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button
+				aria-label="Tutorial"
+				type="button"
+				onClick={() => setIsOpen(true)}
+				className="text-3xl cursor-pointer"
+			>
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step2.png",
+									},
+									{
+										text: "3. Press 'Scan QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step3.png",
+									},
+									{
+										text: "4. Click on the QR code below the Mii's image",
+										imageSrc: "/tutorial/3ds/adding-mii/step4.png",
+									},
+									{
+										text: "5. Scan with your 3DS",
+										imageSrc: "/tutorial/3ds/adding-mii/step5.png",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body
+				)}
+		</>
+	);
+}

src/components/tutorial/3ds-submit.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Tutorial from ".";
+
+export default function SubmitTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => setIsOpen(true)}
+				className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline"
+			>
+				How to?
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Allow Copying",
+								thumbnail: "/tutorial/3ds/allow-copying/thumbnail.png",
+								hint: "Suggested!",
+								steps: [
+									{ type: "start" },
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'Mii List'",
+										imageSrc: "/tutorial/3ds/allow-copying/step2.png",
+									},
+									{
+										text: "3. Select and edit the Mii you wish to submit",
+										imageSrc: "/tutorial/3ds/allow-copying/step3.png",
+									},
+									{
+										text: "4. Click 'Other Settings' in the information screen",
+										imageSrc: "/tutorial/3ds/allow-copying/step4.png",
+									},
+									{
+										text: "5. Click on 'Don't Allow' under the 'Copying' text",
+										imageSrc: "/tutorial/3ds/allow-copying/step5.png",
+									},
+									{
+										text: "6. Press 'Allow'",
+										imageSrc: "/tutorial/3ds/allow-copying/step6.png",
+									},
+									{
+										text: "7. Confirm the edits to the Mii",
+										imageSrc: "/tutorial/3ds/allow-copying/step7.png",
+									},
+									{ type: "finish" },
+								],
+							},
+							{
+								title: "Create QR Code",
+								thumbnail: "/tutorial/3ds/create-qr-code/thumbnail.png",
+								steps: [
+									{ type: "start" },
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'QR Code'",
+										imageSrc: "/tutorial/3ds/create-qr-code/step2.png",
+									},
+									{
+										text: "3. Press 'Create QR Code'",
+										imageSrc: "/tutorial/3ds/create-qr-code/step3.png",
+									},
+									{
+										text: "4. Select and press 'OK' on the Mii you wish to submit",
+										imageSrc: "/tutorial/3ds/create-qr-code/step4.png",
+									},
+									{
+										text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
+										imageSrc: "/tutorial/3ds/create-qr-code/step5.png",
+									},
+									{
+										text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
+										imageSrc: "/tutorial/3ds/create-qr-code/step6.png",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body
+				)}
+		</>
+	);
+}

src/components/tutorial/index.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { Icon } from "@iconify/react";
 import confetti from "canvas-confetti";
-import ReturnToIsland from "../admin/return-to-island";
 
 interface Slide {
 	// step is never used, undefined is assumed as a step
@@ -30,7 +29,7 @@ interface Props {
 export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 	const [isVisible, setIsVisible] = useState(false);
 
-	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
 	const [selectedIndex, setSelectedIndex] = useState(0);
 
 	// Build index map
@@ -106,7 +105,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 			/>
 
 			<div
-				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-md h-120 transition-discrete duration-300 flex flex-col ${
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-xl h-120 transition-discrete duration-300 flex flex-col ${
 					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
 				}`}
 			>
@@ -144,7 +143,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 															alt="tutorial thumbnail"
 															width={128}
 															height={128}
-															className="rounded-lg border-2 border-zinc-300"
+															className="rounded-lg border-2 border-zinc-300 object-cover"
 														/>
 														<p className="mt-2">{tutorial.title}</p>
 														{/* Set opacity to 0 to keep height the same with other tutorials */}

src/components/tutorial/scan.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { Icon } from "@iconify/react";
-
-import Tutorial from ".";
-
-export default function ScanTutorialButton() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<>
-			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
-				<Icon icon="fa:question-circle" />
-				<span>Tutorial</span>
-			</button>
-
-			{isOpen &&
-				createPortal(
-					<Tutorial
-						tutorials={[
-							{
-								title: "Adding Mii",
-								steps: [
-									{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
-									{ text: "2. Go into 'QR Code'", imageSrc: "/tutorial/adding-mii/step2.png" },
-									{ text: "3. Press 'Scan QR Code'", imageSrc: "/tutorial/adding-mii/step3.png" },
-									{ text: "4. Click on the QR code below the Mii's image", imageSrc: "/tutorial/adding-mii/step4.png" },
-									{ text: "5. Scan with your 3DS", imageSrc: "/tutorial/adding-mii/step5.png" },
-									{ type: "finish" },
-								],
-							},
-						]}
-						isOpen={isOpen}
-						setIsOpen={setIsOpen}
-					/>,
-					document.body,
-				)}
-		</>
-	);
-}

src/components/tutorial/submit.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import Tutorial from ".";
-
-export default function SubmitTutorialButton() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<>
-			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
-				How to?
-			</button>
-
-			{isOpen &&
-				createPortal(
-					<Tutorial
-						tutorials={[
-							{
-								title: "Allow Copying",
-								thumbnail: "/tutorial/allow-copying/thumbnail.png",
-								hint: "Suggested!",
-								steps: [
-									{ type: "start" },
-									{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
-									{ text: "2. Go into 'Mii List'", imageSrc: "/tutorial/allow-copying/step2.png" },
-									{ text: "3. Select and edit the Mii you wish to submit", imageSrc: "/tutorial/allow-copying/step3.png" },
-									{ text: "4. Click 'Other Settings' in the information screen", imageSrc: "/tutorial/allow-copying/step4.png" },
-									{ text: "5. Click on 'Don't Allow' under the 'Copying' text", imageSrc: "/tutorial/allow-copying/step5.png" },
-									{ text: "6. Press 'Allow'", imageSrc: "/tutorial/allow-copying/step6.png" },
-									{ text: "7. Confirm the edits to the Mii", imageSrc: "/tutorial/allow-copying/step7.png" },
-									{ type: "finish" },
-								],
-							},
-							{
-								title: "Create QR Code",
-								thumbnail: "/tutorial/create-qr-code/thumbnail.png",
-								steps: [
-									{ type: "start" },
-									{ text: "1. Enter the town hall", imageSrc: "/tutorial/step1.png" },
-									{ text: "2. Go into 'QR Code'", imageSrc: "/tutorial/create-qr-code/step2.png" },
-									{ text: "3. Press 'Create QR Code'", imageSrc: "/tutorial/create-qr-code/step3.png" },
-									{ text: "4. Select and press 'OK' on the Mii you wish to submit", imageSrc: "/tutorial/create-qr-code/step4.png" },
-									{
-										text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
-										imageSrc: "/tutorial/create-qr-code/step5.png",
-									},
-									{
-										text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
-										imageSrc: "/tutorial/create-qr-code/step6.png",
-									},
-									{ type: "finish" },
-								],
-							},
-						]}
-						isOpen={isOpen}
-						setIsOpen={setIsOpen}
-					/>,
-					document.body,
-				)}
-		</>
-	);
-}

src/components/tutorial/switch-add-mii.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function SwitchAddMiiTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Press X to open the menu, then select 'Add a Mii'",
+										imageSrc: "/tutorial/switch/adding-mii/step1.jpg",
+									},
+									{
+										text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female)",
+										imageSrc: "/tutorial/switch/adding-mii/step2.jpg",
+									},
+									{
+										text: "3. Follow all instructions (not all instructions will be there, check next slide for more)",
+										imageSrc: "/tutorial/switch/adding-mii/step3.jpg",
+									},
+									{
+										text: "4. If the instructions have height, distance, etc. the value will be relative to how many times to click the button - positive for up/left, negative for down/right",
+										imageSrc: "/tutorial/switch/step4.jpg",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

src/components/tutorial/switch-submit.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Tutorial from ".";
+
+export default function SubmitTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
+				How to?
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Submitting",
+								steps: [
+									{
+										text: "1. Press X to open the menu, then select 'Residents'",
+										imageSrc: "/tutorial/switch/submitting/step1.jpg",
+									},
+									{
+										text: "2. Find the Mii you want to submit and edit it",
+										imageSrc: "/tutorial/switch/submitting/step2.jpg",
+									},
+									{
+										text: "3. Press Y to open the features list, then take a screenshot and upload to this submit form",
+										imageSrc: "/tutorial/switch/submitting/step3.jpg",
+									},
+									{
+										text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
+										imageSrc: "/tutorial/switch/step4.jpg",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					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
@@ -133,29 +133,60 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 		// Read and convert the images to data URI
 		fs.readFile(path.join(miiUploadsDirectory, "mii.png")).then((buffer) =>
 			sharp(buffer)
+				// extend to fix shadow bug on landscape pictures
+				.extend({
+					left: 16,
+					right: 16,
+					background: { r: 0, g: 0, b: 0, alpha: 0 },
+				})
 				.toBuffer()
 				.then((pngBuffer) => `data:image/png;base64,${pngBuffer.toString("base64")}`),
 		),
-		fs.readFile(path.join(miiUploadsDirectory, "qr-code.png")).then((buffer) =>
-			sharp(buffer)
-				.toBuffer()
-				.then((pngBuffer) => `data:image/png;base64,${pngBuffer.toString("base64")}`),
-		),
+		mii.platform === "THREE_DS"
+			? fs.readFile(path.join(miiUploadsDirectory, "qr-code.png")).then((buffer) =>
+					sharp(buffer)
+						.toBuffer()
+						.then((pngBuffer) => `data:image/png;base64,${pngBuffer.toString("base64")}`),
+				)
+			: Promise.resolve(null),
 		loadFonts(),
 	]);
 
 	const jsx: ReactNode = (
 		<div tw="w-full h-full bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col">
 			<div tw="flex w-full">
-				{/* Mii image */}
-				<div tw="w-80 rounded-xl flex justify-center mr-2" style={{ backgroundImage: "linear-gradient(to bottom, #fef3c7, #fde68a);" }}>
-					<img src={miiImage} width={248} height={248} style={{ filter: "drop-shadow(0 10px 8px #00000024) drop-shadow(0 4px 3px #00000024)" }} />
+				{/* Mii portrait */}
+				<div
+					tw={`h-62 rounded-xl flex justify-center items-center mr-2 ${mii.platform === "THREE_DS" ? "w-80" : "w-100"}`}
+					style={{
+						backgroundImage: "linear-gradient(to bottom, #fef3c7, #fde68a);",
+					}}
+				>
+					<img
+						src={miiImage}
+						height={248}
+						tw="w-full h-full"
+						style={{
+							objectFit: "contain",
+							filter: "drop-shadow(0 10px 8px #00000024) drop-shadow(0 4px 3px #00000024)",
+						}}
+					/>
 				</div>
 
 				{/* QR code */}
-				<div tw="w-60 bg-amber-200 rounded-xl flex justify-center items-center">
-					<img src={qrCodeImage} width={190} height={190} tw="border-2 border-amber-300 rounded-lg" />
-				</div>
+				{mii.platform === "THREE_DS" ? (
+					<div tw="w-60 bg-amber-200 rounded-xl flex justify-center items-center">
+						<img src={qrCodeImage!} width={190} height={190} tw="border-2 border-amber-300 rounded-lg" />
+					</div>
+				) : (
+					<div tw="w-40 bg-amber-200 rounded-xl flex flex-col justify-center items-center p-6">
+						<span tw="text-amber-900 font-extrabold text-xl text-center leading-tight">Switch Guide</span>
+						<p tw="text-amber-800 text-sm text-center mt-1.5">To fully create the Mii, visit the site for instructions.</p>
+						<div tw="mt-auto bg-amber-600 rounded-lg w-full py-2 flex justify-center">
+							<span tw="text-white font-semibold">View Steps</span>
+						</div>
+					</div>
+				)}
 			</div>
 
 			<div tw="flex flex-col w-full h-30 relative">

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

@@ -1,4 +1,4 @@
-import { MiiGender } from "@prisma/client";
+import { MiiGender, MiiPlatform } from "@prisma/client";
 import { z } from "zod";
 
 // profanity censoring bypasses the regex in some of these but I think it's funny
@@ -58,7 +58,8 @@ export const searchSchema = z.object({
 				.map((tag) => tag.trim())
 				.filter((tag) => tag.length > 0),
 		),
-	gender: z.enum(MiiGender, { error: "Gender must be either 'MALE', or 'FEMALE'" }).optional(),
+	platform: z.enum(MiiPlatform, { error: "Platform must be either 'THREE_DS', or 'SWITCH'" }).optional(),
+	gender: z.enum(MiiGender, { error: "Gender must be either 'MALE', 'FEMALE', or 'NONBINARY' if on Switch platform" }).optional(),
 	allowCopying: z.coerce.boolean({ error: "Allow Copying must be either true or false" }).optional(),
 	// todo: incorporate tagsSchema
 	// Pages
@@ -81,3 +82,223 @@ export const userNameSchema = z
 	.regex(/^[a-zA-Z0-9-_. ']+$/, {
 		error: "Name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
 	});
+
+const colorSchema = z.number().int().min(0).max(152).optional();
+const geometrySchema = z.number().int().min(-10).max(10).optional();
+
+export const switchMiiInstructionsSchema = z
+	.object({
+		head: z.object({ skinColor: colorSchema }).optional(),
+		hair: z
+			.object({
+				color: colorSchema,
+				subColor: colorSchema,
+				style: z.number().int().min(1).max(3).optional(),
+				isFlipped: z.boolean().optional(),
+			})
+			.optional(),
+		eyebrows: z
+			.object({
+				color: colorSchema,
+				height: geometrySchema,
+				distance: geometrySchema,
+				rotation: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+			})
+			.optional(),
+		eyes: z
+			.object({
+				main: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelashesTop: z
+					.object({
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelashesBottom: z
+					.object({
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelidTop: z
+					.object({
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelidBottom: z
+					.object({
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyeliner: z
+					.object({
+						color: colorSchema,
+					})
+					.optional(),
+				pupil: z
+					.object({
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+			})
+			.optional(),
+		nose: z
+			.object({
+				height: geometrySchema,
+				size: geometrySchema,
+			})
+			.optional(),
+		lips: z
+			.object({
+				color: colorSchema,
+				height: geometrySchema,
+				rotation: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+				hasLipstick: z.boolean().optional(),
+			})
+			.optional(),
+		ears: z
+			.object({
+				height: geometrySchema,
+				size: geometrySchema,
+			})
+			.optional(),
+		glasses: z
+			.object({
+				ringColor: colorSchema,
+				shadesColor: colorSchema,
+				height: geometrySchema,
+				size: geometrySchema,
+				stretch: geometrySchema,
+			})
+			.optional(),
+		other: z
+			.object({
+				wrinkles1: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				wrinkles2: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				beard: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				moustache: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+						isFlipped: z.boolean().optional(),
+					})
+					.optional(),
+				goatee: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				mole: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyeShadow: z
+					.object({
+						color: colorSchema,
+						height: geometrySchema,
+						distance: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				blush: z
+					.object({
+						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(0).max(7).optional(),
+				speech: z.number().int().min(0).max(7).optional(),
+				energy: z.number().int().min(0).max(7).optional(),
+				thinking: z.number().int().min(0).max(7).optional(),
+				overall: z.number().int().min(0).max(7).optional(),
+			})
+			.optional(),
+	})
+	.optional();

src/lib/switch.ts

@@ -0,0 +1,165 @@
+export 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",
+	// Hair tab extra colors
+	"FFD8BA",
+	"FFD5AC",
+	"FEC1A4",
+	"FEC68F",
+	"FEB089",
+	"FEBA6B",
+	"F39866",
+	"E89854",
+	"E37E3F",
+	"B45627",
+	"914220",
+	"59371F",
+	"662D16",
+	"392D1E",
+	// Eye tab extra colors
+	"000100",
+	"6B6F6E",
+	"663F2D",
+	"605F34",
+	"3B6F59",
+	"4856A6",
+	// Lips tab extra colors
+	"D65413",
+	"F21415",
+	"F54A4A",
+	"EE9670",
+	"8A4E40",
+	// Glasses tab extra colors
+	"000000",
+	"776F66",
+	"603915",
+	"A65F00",
+	"A61615",
+	"273465",
+	// Eye shade extra colors
+	"A54E21",
+	"653E2C",
+	"EC946F",
+	"FC9414",
+	"F97595",
+	"F54A4A",
+	"86E1B0",
+	"6E44B0",
+];

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

@@ -0,0 +1,160 @@
+import { MiiGender, Prisma } from "@prisma/client";
+import { DefaultSession } from "next-auth";
+
+interface SwitchMiiInstructions {
+	head: {
+		skinColor: number | null; // Additional 14 are not in color menu, default is 2
+	};
+	hair: {
+		color: number | null;
+		subColor: number | null; // Default is none
+		subColor2: number | null; // Only used when bangs/back is selected
+		style: number | null; // is this different for each hair?
+		isFlipped: boolean; // Only for sets and fringe
+	};
+	eyebrows: {
+		color: number | null;
+		height: number | null;
+		distance: number | null;
+		rotation: number | null;
+		size: number | null;
+		stretch: number | null;
+	};
+	eyes: {
+		main: {
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelashesTop: {
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelashesBottom: {
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelidTop: {
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelidBottom: {
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyeliner: {
+			color: number | null;
+		};
+		pupil: {
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+	};
+	nose: {
+		height: number | null;
+		size: number | null;
+	};
+	lips: {
+		color: number | null;
+		height: number | null;
+		rotation: number | null;
+		size: number | null;
+		stretch: number | null;
+		hasLipstick: boolean;
+	};
+	ears: {
+		height: number | null; // Does not work for default
+		size: number | null; // Does not work for default
+	};
+	glasses: {
+		ringColor: number | null;
+		shadesColor: number | null; // Only works after gap
+		height: number | null;
+		size: number | null;
+		stretch: number | null;
+	};
+	other: {
+		// names were assumed
+		wrinkles1: {
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		wrinkles2: {
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		beard: {
+			color: number | null;
+		};
+		moustache: {
+			color: number | null; // is this same as hair?
+			height: number | null;
+			isFlipped: boolean;
+			size: number | null;
+			stretch: number | null;
+		};
+		goatee: {
+			color: number | null;
+		};
+		mole: {
+			color: number | null; // is this same as hair?
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+		};
+		eyeShadow: {
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		blush: {
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+	};
+	// makeup, use video?
+	height: number | null;
+	weight: number | null;
+	datingPreferences: MiiGender[];
+	voice: {
+		speed: number | null;
+		pitch: number | null;
+		depth: number | null;
+		delivery: number | null;
+		tone: number | null; // 1 to 6
+	};
+	personality: {
+		movement: number | null; // 8 levels, slow to quick
+		speech: number | null; // 8 levels, polite to honest
+		energy: number | null; // 8 levels, flat to varied
+		thinking: number | null; // 8 levels, serious to chill
+		overall: number | null; // 8 levels, normal to quirky
+	};
+}