prisma/migrations/20250913120915_switch_sequel/migration.sql

@@ -1,9 +0,0 @@
--- 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

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

prisma/migrations/20260224165818_instructions_json/migration.sql

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

prisma/schema.prisma

@@ -69,18 +69,15 @@ 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)
-  platform    MiiPlatform @default(THREE_DS)
 
-  instructions   Json?
+  firstName      String
-  firstName      String?
+  lastName       String
-  lastName       String?
   gender         MiiGender?
-  islandName     String?
+  islandName     String
   allowedCopying Boolean?
 
   createdAt DateTime @default(now())
@@ -155,15 +152,9 @@ 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, Prisma } from "@prisma/client";
+import { Mii } 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: Prisma.MiiUpdateInput = {};
+	const updateData: Partial<Mii> = {};
 	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,12 +139,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 		}
 	} else if (description === undefined) {
 		// If images or description were not changed, regenerate the metadata image
-		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,75 +8,46 @@ import sharp from "sharp";
 
 import qrcode from "qrcode-generator";
 import { profanity } from "@2toad/profanity";
-import { MiiGender, MiiPlatform } from "@prisma/client";
+import { MiiGender } from "@prisma/client";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@/lib/schemas";
+import { nameSchema, 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 { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
+import { TomodachiLifeMii } from "@/lib/tomodachi-life-mii";
-
-import { SwitchMiiInstructions } from "@/types";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 
-const submitSchema = z
+const submitSchema = z.object({
-	.object({
-		platform: z.enum(MiiPlatform).default("THREE_DS"),
 	name: nameSchema,
 	tags: tagsSchema,
 	description: z.string().trim().max(256).optional(),
-
+	qrBytesRaw: z.array(z.number(), { error: "A QR code is required" }).length(372, {
-		// 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, 3);
+	const rateLimit = new RateLimit(request, 2);
 	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 temporarily disabled" }, 503);
+	if (!value) return rateLimit.sendResponse({ error: "Submissions are disabled" }, 409);
 
-	// Parse tags and QR code as JSON
+	// Parse data
 	const formData = await request.formData();
 
 	let rawTags: string[];
@@ -91,78 +62,18 @@ 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) {
+	if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
-		const error = parsed.error.issues[0].message;
+	const { name: uncensoredName, tags: uncensoredTags, description: uncensoredDescription, qrBytesRaw, image1, image2, image3 } = parsed.data;
-		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);
@@ -170,60 +81,43 @@ export async function POST(request: NextRequest) {
 	const description = uncensoredDescription && profanity.censor(uncensoredDescription);
 
 	// Validate image files
-	const customImages: File[] = [];
+	const images: File[] = [];
 
 	for (const img of [image1, image2, image3]) {
 		if (!img) continue;
 
 		const imageValidation = await validateImage(img);
 		if (imageValidation.valid) {
-			customImages.push(img);
+			images.push(img);
 		} else {
 			return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
 		}
 	}
 
-	// Check Mii portrait image as well (Switch)
+	const qrBytes = new Uint8Array(qrBytesRaw);
-	if (platform === "SWITCH") {
-		const imageValidation = await validateImage(miiPortraitImage);
-		if (!imageValidation.valid) return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
-	}
 
-	const qrBytes = new Uint8Array(qrBytesRaw ?? []);
+	// Convert QR code to JS
-
+	let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
-	// 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",
 
-			// 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,
-					}),
 		},
 	});
 
@@ -231,40 +125,34 @@ 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 {
-		let portraitBuffer: Buffer | undefined;
+		const studioUrl = conversion.mii.studioUrl({ width: 512 });
-
+		const studioResponse = await fetch(studioUrl);
-		// 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());
+		const studioArrayBuffer = await studioResponse.arrayBuffer();
-		} else if (platform === "SWITCH") {
+		studioBuffer = Buffer.from(studioArrayBuffer);
-			portraitBuffer = Buffer.from(await miiPortraitImage.arrayBuffer());
-		}
-
-		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");
-
-		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("Failed to download/store Mii portrait:", error);
+		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/store Mii portrait" }, 500);
+		return rateLimit.sendResponse({ error: "Failed to download Mii image" }, 500);
 	}
 
-	if (platform === "THREE_DS") {
 	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");
@@ -281,6 +169,7 @@ export async function POST(request: NextRequest) {
 		const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.png");
 
 		await fs.writeFile(codeFileLocation, codePngBuffer);
+		await generateMetadataImage(miiRecord, session.user?.name!);
 	} catch (error) {
 		// Clean up if something went wrong
 		await prisma.mii.delete({ where: { id: miiRecord.id } });
@@ -289,12 +178,11 @@ export async function POST(request: NextRequest) {
 		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "file-processing" } });
 		return rateLimit.sendResponse({ error: "Failed to process and store Mii files" }, 500);
 	}
-	}
 
 	// Compress and store user images
 	try {
 		await Promise.all(
-			customImages.map(async (image, index) => {
+			images.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`);
@@ -309,7 +197,7 @@ export async function POST(request: NextRequest) {
 				id: miiRecord.id,
 			},
 			data: {
-				imageCount: customImages.length,
+				imageCount: images.length,
 			},
 		});
 	} catch (error) {

src/app/globals.css

@@ -91,23 +91,6 @@ 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 */
 * {
@@ -118,35 +101,3 @@ 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,18 +7,14 @@ 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/mii/delete-mii-button";
+import DeleteMiiButton from "@/components/delete-mii";
-import ShareMiiButton from "@/components/mii/share-mii-button";
+import ShareMiiButton from "@/components/share-mii-button";
-import ThreeDsScanTutorialButton from "@/components/tutorial/3ds-scan";
+import ScanTutorialButton from "@/components/tutorial/scan";
-import SwitchScanTutorialButton from "@/components/tutorial/switch-add-mii";
+import ProfilePicture from "@/components/profile-picture";
 import Description from "@/components/description";
-import MiiInstructions from "@/components/mii/instructions";
-
-import { SwitchMiiInstructions } from "@/types";
 
 interface Props {
 	params: Promise<{ id: string }>;
@@ -53,33 +49,23 @@ 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 ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+		description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island 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 ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island with ${mii._count.likedBy} likes.`,
-			images: [
+			images: [{ url: metadataImageUrl, alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character` }],
-				{
-					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 ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			description: `Check out '${mii.name}', a Tomodachi Life Mii created by ${name} on TomodachiShare. From ${mii.islandName} Island with ${mii._count.likedBy} likes.`,
-			images: [
+			images: [{ url: metadataImageUrl, alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character` }],
-				{
+			creator: name,
-					url: metadataImageUrl,
-					alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character`,
-				},
-			],
-			creator: mii.user.name!,
 		},
 		alternates: {
 			canonical: `/mii/${mii.id}`,
@@ -123,19 +109,18 @@ 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 h-min 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 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={250}
+								width={200}
-								height={250}
+								height={200}
-								className="drop-shadow-lg hover:scale-105 transition-transform w-full max-h-96 object-contain"
+								className="drop-shadow-lg hover:scale-105 transition-transform"
 							/>
 						</div>
 						{/* QR Code */}
-						{mii.platform === "THREE_DS" && (
 						<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
 							<ImageViewer
 								src={`/mii/${mii.id}/image?type=qr-code`}
@@ -145,11 +130,9 @@ export default async function MiiPage({ params }: Props) {
 								className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
 							/>
 						</div>
-						)}
 						<hr className="w-full border-t-2 border-t-amber-400" />
 
 						{/* Mii Info */}
-						{mii.platform === "THREE_DS" && (
 						<ul className="text-sm w-full p-2 *:flex *:justify-between *:items-center *:my-1">
 							<li>
 								Name:{" "}
@@ -160,67 +143,17 @@ export default async function MiiPage({ params }: Props) {
 							<li>
 								From: <span className="text-right font-medium">{mii.islandName} Island</span>
 							</li>
+							{mii.allowedCopying !== null && (
 								<li>
-									Allowed Copying: <input type="checkbox" checked={mii.allowedCopying ?? false} disabled className="checkbox cursor-auto!" />
+									Allowed Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox cursor-auto!" />
 								</li>
-							</ul>
 							)}
-
+						</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="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 w-full">
+						<div className="grid grid-cols-2 gap-2">
-							<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={`tooltip mt-1! ${
+								className={`rounded-xl flex justify-center items-center size-16 text-5xl border-2 shadow-sm ${
-									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"
 								}`}
 							>
@@ -228,22 +161,12 @@ export default async function MiiPage({ params }: Props) {
 							</div>
 
 							<div
-								className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+								className={`rounded-xl flex justify-center items-center size-16 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>
 
@@ -306,11 +229,8 @@ export default async function MiiPage({ params }: Props) {
 								<Icon icon="material-symbols:flag-rounded" />
 								<span>Report</span>
 							</Link>
-							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchScanTutorialButton />}
+							<ScanTutorialButton />
 						</div>
-
-						{/* Instructions */}
-						{mii.platform === "SWITCH" && <MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />}
 					</div>
 				</div>
 
@@ -348,7 +268,7 @@ export default async function MiiPage({ params }: Props) {
 							))}
 						</div>
 					) : (
-						<p className="indent-7.5 text-black/50">There is nothing here...</p>
+						<p className="indent-8 text-black/50">There is nothing here...</p>
 					)}
 				</div>
 			</div>

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

@@ -95,7 +95,9 @@ 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">{mii.mii.name}</p>
+								<p className="text-xl font-bold line-clamp-1" title={"hello"}>
+									{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 MiiList from "@/components/mii-list";
-import Skeleton from "@/components/mii/list/skeleton";
+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 MiiList from "@/components/mii-list";
-import Skeleton from "@/components/mii/list/skeleton";
+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 Skeleton from "@/components/mii-list/skeleton";
-import MiiList from "@/components/mii/list";
+import MiiList from "@/components/mii-list";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

src/app/submit/page.tsx

@@ -38,12 +38,6 @@ 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
-					id="submit"
+					name="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"
-					id="agreement"
+					name="agreement"
 					disabled={hasExpired}
 					checked={isChecked}
 					onChange={(e) => setIsChecked(e.target.checked)}

src/components/carousel.tsx

@@ -12,16 +12,14 @@ interface Props {
 }
 
 export default function Carousel({ images, className }: Props) {
-	const [emblaRef, emblaApi] = useEmblaCarousel({ duration: 15 });
+	const [emblaRef, emblaApi] = useEmblaCarousel();
 	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]);
 
@@ -76,8 +74,6 @@ 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) => (
@@ -90,6 +86,8 @@ export default function Carousel({ images, className }: Props) {
 							/>
 						))}
 					</div>
+				</>
+			)}
 		</div>
 	);
 }

src/components/delete-mii.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 LikeButton from "./like-button";
-import SubmitButton from "../submit-button";
+import SubmitButton from "./submit-button";
 
 interface Props {
 	miiId: number;

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

@@ -4,9 +4,8 @@ import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { Icon } from "@iconify/react";
 
-import { MiiGender, MiiPlatform } from "@prisma/client";
+import { MiiGender } from "@prisma/client";
 
-import PlatformSelect from "./platform-select";
 import TagFilter from "./tag-filter";
 import GenderSelect from "./gender-select";
 import OtherFilters from "./other-filters";
@@ -17,10 +16,9 @@ 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(
@@ -63,12 +61,11 @@ 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, platform, gender, allowCopying]);
+	}, [tags, exclude, gender, allowCopying]);
 
 	return (
 		<div className="relative">
@@ -87,20 +84,6 @@ 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" />
@@ -114,16 +97,19 @@ export default function FilterMenu() {
 					</div>
 					<TagFilter isExclude />
 
-					{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>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 />
-						</>
-					)}
 				</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, MiiPlatform } from "@prisma/client";
+import { MiiGender } from "@prisma/client";
 
 export default function GenderSelect() {
 	const router = useRouter();
@@ -11,7 +11,6 @@ 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;
@@ -32,44 +31,26 @@ export default function GenderSelect() {
 	};
 
 	return (
-		<div className="flex gap-0.5 w-fit">
+		<div className="grid grid-cols-2 gap-0.5">
 			<button
 				onClick={() => handleClick("MALE")}
 				aria-label="Filter for Male Miis"
-				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all ${
-				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"
-				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all ${
-				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 { MiiGender, MiiPlatform, Prisma } from "@prisma/client";
+import { 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 Carousel from "../carousel";
-import LikeButton from "../../like-button";
+import LikeButton from "../like-button";
-import DeleteMiiButton from "../delete-mii-button";
+import DeleteMiiButton from "../delete-mii";
 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, platform, gender, allowCopying, page = 1, limit = 24, seed } = parsed.data;
+	const { q: query, sort, tags, exclude, gender, allowCopying, page = 1, limit = 24, seed } = parsed.data;
 
 	// My Likes page
 	let miiIdsLiked: number[] | undefined = undefined;
@@ -52,8 +52,6 @@ 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
@@ -73,7 +71,6 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 				},
 			},
 		}),
-		platform: true,
 		name: true,
 		imageCount: true,
 		tags: true,
@@ -146,13 +143,7 @@ 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({
+			prisma.mii.findMany({ where, orderBy, select, skip: (page - 1) * limit, take: limit }),
-				where,
-				orderBy,
-				select,
-				skip: (page - 1) * limit,
-				take: limit,
-			}),
 		]);
 	}
 
@@ -165,7 +156,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-md: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-[56rem]:flex-col">
 				<div className="flex items-center gap-2">
 					{totalCount == filteredCount ? (
 						<>
@@ -192,26 +183,19 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 				{miis.map((mii) => (
 					<div
 						key={mii.id}
-						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"
+						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"
 					>
 						<Carousel
 							images={[
 								`/mii/${mii.id}/image?type=mii`,
-								...(platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
+								`/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="relative font-bold text-2xl line-clamp-1" title={mii.name}>
+							<Link href={`/mii/${mii.id}`} className="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" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
+			<input type="checkbox" name="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
 		</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/dating-preferences.tsx

@@ -1,37 +0,0 @@
-"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/instructions.tsx

@@ -1,238 +0,0 @@
-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/platform-select.tsx

@@ -1,58 +0,0 @@
-"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/personality-viewer.tsx

@@ -1,58 +0,0 @@
-"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

@@ -1,59 +0,0 @@
-"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 onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
+			<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!">
 				Delete Account
 			</button>
 

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

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

src/components/submit-form/index.tsx

@@ -2,27 +2,22 @@
 
 import { redirect } from "next/navigation";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, 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 { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
+import { TomodachiLifeMii } from "@/lib/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 ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
+import SubmitTutorialButton from "../tutorial/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";
@@ -40,58 +35,16 @@ export default function SubmitForm() {
 	);
 
 	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
-	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
+	const [studioUrl, setStudioUrl] = useState<string | undefined>();
-	const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
+	const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
+
+	const [error, setError] = useState<string | undefined>(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);
@@ -107,36 +60,15 @@ 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,
@@ -152,7 +84,7 @@ export default function SubmitForm() {
 	};
 
 	useEffect(() => {
-		if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
+		if (qrBytesRaw.length == 0) return;
 		const qrBytes = new Uint8Array(qrBytesRaw);
 
 		const preview = async () => {
@@ -164,43 +96,38 @@ export default function SubmitForm() {
 				return;
 			}
 
-			// Convert QR code to JS (3DS)
+			// Convert QR code to JS
-			let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
+			let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
 			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();
 
-				setGeneratedQrCodeUri(generatedCode.createDataURL());
+				setGeneratedQrCodeUrl(generatedCode.createDataURL());
 			} catch {
-				setError("Failed to regenerate QR code");
+				setError("Failed to get and/or generate Mii images");
 			}
 		};
 
 		preview();
-	}, [qrBytesRaw, platform]);
+	}, [qrBytesRaw]);
 
 	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
+					<Carousel images={[studioUrl ?? "/loading.svg", generatedQrCodeUrl ?? "/loading.svg", ...files.map((file) => URL.createObjectURL(file))]} />
-						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}>
@@ -235,53 +162,12 @@ 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
-						id="name"
+						name="name"
 						type="text"
 						className="pill input w-full col-span-2"
 						minLength={2}
@@ -299,13 +185,11 @@ export default function SubmitForm() {
 					<TagSelector tags={tags} setTags={setTags} showTagLimit />
 				</div>
 
-				{/* Description */}
 				<div className="w-full grid grid-cols-3 items-start">
-					<label htmlFor="description" className="font-semibold py-2">
+					<label htmlFor="reason-note" className="font-semibold py-2">
 						Description
 					</label>
 					<textarea
-						id="description"
 						rows={5}
 						maxLength={256}
 						placeholder="(optional) Type a description..."
@@ -315,69 +199,7 @@ export default function SubmitForm() {
 					/>
 				</div>
 
-				{/* 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>
-
-				{/* (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>
-
-					<div className="flex flex-col items-center gap-2">
-						<PortraitUpload setImage={setMiiPortraitUri} />
-						<SwitchSubmitTutorialButton />
-					</div>
-
-					<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>
-
-				{/* (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>
@@ -394,30 +216,12 @@ export default function SubmitForm() {
 					</button>
 
 					<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-						<ThreeDsSubmitTutorialButton />
+					<SubmitTutorialButton />
 
 					<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
 				</div>
-				</div>
 
-				{/* (Switch only) Mii instructions */}
+				{/* Separator */}
-				<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

@@ -1,124 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

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

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import { FileWithPath } from "react-dropzone";
 import jsQR from "jsqr";
 import Dropzone from "../dropzone";
@@ -10,13 +10,11 @@ interface Props {
 }
 
 export default function QrUpload({ setQrBytesRaw }: Props) {
-	const [hasImage, setHasImage] = useState(false);
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 
 	const handleDrop = useCallback(
 		(acceptedFiles: FileWithPath[]) => {
-			const file = acceptedFiles[0];
+			acceptedFiles.forEach((file) => {
-
 				// Scan QR code
 				const reader = new FileReader();
 				reader.onload = async (event) => {
@@ -37,11 +35,11 @@ export default function QrUpload({ setQrBytesRaw }: Props) {
 						if (!code) return;
 
 						setQrBytesRaw(code.binaryData!);
-					setHasImage(true);
 					};
 					image.src = event.target!.result as string;
 				};
 				reader.readAsDataURL(file);
+			});
 		},
 		[setQrBytesRaw],
 	);
@@ -50,15 +48,9 @@ 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">
-					{!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-slate-800 cursor-pointer"
+								className="text-black cursor-pointer"
 								onClick={(e) => {
 									e.stopPropagation();
 									removeTag(tag);

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

@@ -1,61 +0,0 @@
-"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

@@ -1,101 +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/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,6 +5,7 @@ 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
@@ -29,7 +30,7 @@ interface Props {
 export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 	const [isVisible, setIsVisible] = useState(false);
 
-	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
 	const [selectedIndex, setSelectedIndex] = useState(0);
 
 	// Build index map
@@ -105,7 +106,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-xl 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-md h-120 transition-discrete duration-300 flex flex-col ${
 					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
 				}`}
 			>
@@ -143,7 +144,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 															alt="tutorial thumbnail"
 															width={128}
 															height={128}
-															className="rounded-lg border-2 border-zinc-300 object-cover"
+															className="rounded-lg border-2 border-zinc-300"
 														/>
 														<p className="mt-2">{tutorial.title}</p>
 														{/* Set opacity to 0 to keep height the same with other tutorials */}

src/components/tutorial/scan.tsx

@@ -0,0 +1,42 @@
+"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

@@ -0,0 +1,64 @@
+"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

@@ -1,52 +0,0 @@
-"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

@@ -1,50 +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: "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 = [2000, 2000];
+const MAX_IMAGE_DIMENSIONS = [1920, 1080];
 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 2000x2000" };
+			return { valid: false, error: "Image dimensions are invalid. Resolution must be between 128x128 and 1920x1080" };
 		}
 
 		// Check for inappropriate content
@@ -133,60 +133,29 @@ 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")}`),
 		),
-		mii.platform === "THREE_DS"
+		fs.readFile(path.join(miiUploadsDirectory, "qr-code.png")).then((buffer) =>
-			? 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 portrait */}
+				{/* Mii image */}
-				<div
+				<div tw="w-80 rounded-xl flex justify-center mr-2" style={{ backgroundImage: "linear-gradient(to bottom, #fef3c7, #fde68a);" }}>
-					tw={`h-62 rounded-xl flex justify-center items-center mr-2 ${mii.platform === "THREE_DS" ? "w-80" : "w-100"}`}
+					<img src={miiImage} width={248} height={248} style={{ filter: "drop-shadow(0 10px 8px #00000024) drop-shadow(0 4px 3px #00000024)" }} />
-					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 */}
-				{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" />
+					<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 { ThreeDsTomodachiLifeMii, HairDyeMode } from "./three-ds-tomodachi-life-mii";
+import { TomodachiLifeMii, HairDyeMode } from "./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: ThreeDsTomodachiLifeMii } | never {
+export function convertQrCode(bytes: Uint8Array): { mii: Mii; tomodachiLifeMii: TomodachiLifeMii } | 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 = ThreeDsTomodachiLifeMii.fromBytes(bytes);
+		const tomodachiLifeMii = TomodachiLifeMii.fromBytes(bytes);
 
 		// Apply hair dye fields.
 		switch (tomodachiLifeMii.hairDyeMode) {

src/lib/schemas.ts

@@ -1,4 +1,4 @@
-import { MiiGender, MiiPlatform } from "@prisma/client";
+import { MiiGender } from "@prisma/client";
 import { z } from "zod";
 
 // profanity censoring bypasses the regex in some of these but I think it's funny
@@ -58,8 +58,7 @@ export const searchSchema = z.object({
 				.map((tag) => tag.trim())
 				.filter((tag) => tag.length > 0),
 		),
-	platform: z.enum(MiiPlatform, { error: "Platform must be either 'THREE_DS', or 'SWITCH'" }).optional(),
+	gender: z.enum(MiiGender, { error: "Gender must be either 'MALE', or 'FEMALE'" }).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
@@ -82,223 +81,3 @@ 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

@@ -1,165 +0,0 @@
-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/tomodachi-life-mii.ts

@@ -1,4 +1,4 @@
-import { TOMODACHI_LIFE_DECRYPTION_KEY } from "./constants";
+import { TOMODACHI_LIFE_DECRYPTION_KEY } from "../lib/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 ThreeDsTomodachiLifeMii {
+export class TomodachiLifeMii {
 	firstName: string;
 	lastName: string;
 	islandName: string;
@@ -73,7 +73,7 @@ export class ThreeDsTomodachiLifeMii {
 		this.studioHairColor = hairDyeConverter[this.hairDye];
 	}
 
-	static fromBytes(bytes: Uint8Array): ThreeDsTomodachiLifeMii {
+	static fromBytes(bytes: Uint8Array): TomodachiLifeMii {
 		const iv = bytes.subarray(0x70, 128);
 		const encryptedExtraData = bytes.subarray(128, -4);
 
@@ -88,7 +88,7 @@ export class ThreeDsTomodachiLifeMii {
 		const decryptedExtraData = sjcl.codec.bytes.fromBits(decryptedBits);
 		const data = new Uint8Array(decryptedExtraData);
 
-		return new ThreeDsTomodachiLifeMii(data.buffer);
+		return new TomodachiLifeMii(data.buffer);
 	}
 
 	private readUtf16String(buffer: ArrayBuffer, offset: number, byteLength: number): string {

src/types.d.ts

@@ -1,160 +0,0 @@
-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
-	};
-}