fix: even more fixes

for 22fb3a2e

.dockerignore

@@ -0,0 +1,11 @@
+.next
+node_modules
+.git
+uploads
+Dockerfile
+.dockerignore
+.gitignore
+README.md
+DEVELOPMENT.md
+LICENSE
+.env*

next.config.ts

@@ -4,31 +4,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
 	output: "standalone",
 	images: {
-		localPatterns: [
-			{
-				pathname: "/mii/*/image",
-			},
-			{
-				pathname: "/profile/*/picture",
-			},
-			{
-				pathname: "/tutorial/**",
-			},
-			{
-				pathname: "/guest.webp",
-			},
-		],
-		remotePatterns: [
-			{
-				hostname: "avatars.githubusercontent.com",
-			},
-			{
-				hostname: "cdn.discordapp.com",
-			},
-			{
-				hostname: "studio.mii.nintendo.com",
-			},
-		],
+		unoptimized: true,
 	},
 };
 

package.json

@@ -16,43 +16,43 @@
 		"@bprogress/next": "^3.2.12",
 		"@hello-pangea/dnd": "^18.0.1",
 		"@prisma/client": "^6.19.2",
-		"@sentry/nextjs": "^10.39.0",
+		"@sentry/nextjs": "^10.45.0",
 		"bit-buffer": "^0.3.0",
 		"canvas-confetti": "^1.9.4",
-		"dayjs": "^1.11.19",
+		"dayjs": "^1.11.20",
 		"downshift": "^9.3.2",
 		"embla-carousel-react": "^8.6.0",
-		"file-type": "^21.3.0",
+		"file-type": "^21.3.3",
 		"jsqr": "^1.4.0",
-		"next": "16.1.6",
+		"next": "16.2.0",
 		"next-auth": "5.0.0-beta.30",
 		"qrcode-generator": "^2.0.4",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-dropzone": "^15.0.0",
 		"redis": "^5.11.0",
-		"satori": "^0.19.2",
+		"satori": "^0.25.0",
 		"seedrandom": "^3.0.5",
 		"sharp": "^0.34.5",
 		"sjcl-with-all": "1.0.8",
-		"swr": "^2.4.0",
+		"swr": "^2.4.1",
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {
-		"@eslint/eslintrc": "^3.3.3",
+		"@eslint/eslintrc": "^3.3.5",
 		"@iconify/react": "^6.0.2",
-		"@tailwindcss/postcss": "^4.2.0",
+		"@tailwindcss/postcss": "^4.2.2",
 		"@types/canvas-confetti": "^1.9.0",
-		"@types/node": "^25.3.0",
+		"@types/node": "^25.5.0",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
 		"@types/seedrandom": "^3.0.8",
 		"@types/sjcl": "^1.0.34",
-		"eslint": "^10.0.1",
-		"eslint-config-next": "16.1.6",
+		"eslint": "^10.0.3",
+		"eslint-config-next": "16.2.0",
 		"prisma": "^6.19.2",
 		"schema-dts": "^1.1.5",
-		"tailwindcss": "^4.2.0",
+		"tailwindcss": "^4.2.2",
 		"typescript": "^5.9.3"
 	}
 }

prisma/migrations/20260324215914_remove_usernames/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `username` on the `users` table. All the data in the column will be lost.
+  - You are about to drop the column `usernameUpdatedAt` on the `users` table. All the data in the column will be lost.
+
+*/
+-- DropIndex
+DROP INDEX "users_username_key";
+
+-- AlterTable
+ALTER TABLE "miis" ALTER COLUMN "allowedCopying" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "users" DROP COLUMN "username",
+DROP COLUMN "usernameUpdatedAt";

prisma/schema.prisma

@@ -9,7 +9,6 @@ datasource db {
 
 model User {
   id            Int       @id @default(autoincrement())
-  username      String?   @unique
   name          String
   email         String    @unique
   emailVerified DateTime?
@@ -19,7 +18,6 @@ model User {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  usernameUpdatedAt DateTime?
   imageUpdatedAt DateTime?
 
   accounts Account[]

src/app/admin/page.tsx

@@ -21,7 +21,7 @@ export const metadata: Metadata = {
 export default async function AdminPage() {
 	const session = await auth();
 
-	if (!session || Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) redirect("/404");
+	if (!session || Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) redirect("/404");
 
 	return (
 		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">

src/app/api/admin/banner/route.ts

@@ -11,7 +11,7 @@ export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	const body = await request.text();
 	bannerText = body;
@@ -23,7 +23,7 @@ export async function DELETE() {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	bannerText = null;
 	return NextResponse.json({ success: true });

src/app/api/admin/can-submit/route.ts

@@ -12,7 +12,7 @@ export async function PATCH(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	const body = await request.json();
 	const validatedCanSubmit = z.boolean().safeParse(body);

src/app/api/admin/lookup/route.ts

@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	const searchParams = request.nextUrl.searchParams;
 	const parsed = idSchema.safeParse(searchParams.get("id"));
@@ -51,7 +51,6 @@ export async function GET(request: NextRequest) {
 	return NextResponse.json({
 		success: true,
 		name: user.name,
-		username: user.username,
 		image: user.image,
 		createdAt: user.createdAt,
 		punishments: user.punishments,

src/app/api/admin/punish/route.ts

@@ -30,7 +30,7 @@ export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	const searchParams = request.nextUrl.searchParams;
 	const parsedUserId = idSchema.safeParse(searchParams.get("id"));
@@ -69,7 +69,7 @@ export async function DELETE(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	const searchParams = request.nextUrl.searchParams;
 	const parsedPunishmentId = idSchema.safeParse(searchParams.get("id"));

src/app/api/admin/regenerate-metadata-images/route.ts

@@ -7,7 +7,7 @@ export async function PATCH() {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-	if (Number(session.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+	if (Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
 	// Start processing in background
 	regenerateImages().catch(console.error);

src/app/api/auth/about-me/route.ts

@@ -10,7 +10,7 @@ import { RateLimit } from "@/lib/rate-limit";
 export async function PATCH(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 3);
 	const check = await rateLimit.handle();
@@ -24,7 +24,7 @@ export async function PATCH(request: NextRequest) {
 
 	try {
 		await prisma.user.update({
-			where: { id: Number(session.user.id) },
+			where: { id: Number(session.user?.id) },
 			data: { description: profanity.censor(description) },
 		});
 	} catch (error) {

src/app/api/auth/delete/route.ts

@@ -8,7 +8,7 @@ import { RateLimit } from "@/lib/rate-limit";
 export async function DELETE(request: NextRequest) {
 	const session = await auth();
 	if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
+	Sentry.setUser({ id: session.user.id, name: session.user.name });
 
 	const rateLimit = new RateLimit(request, 1);
 	const check = await rateLimit.handle();

src/app/api/auth/display-name/route.ts

@@ -1,40 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import * as Sentry from "@sentry/nextjs";
-import { profanity } from "@2toad/profanity";
-
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { displayNameSchema } from "@/lib/schemas";
-import { RateLimit } from "@/lib/rate-limit";
-
-export async function PATCH(request: NextRequest) {
-	const session = await auth();
-	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
-
-	const rateLimit = new RateLimit(request, 3);
-	const check = await rateLimit.handle();
-	if (check) return check;
-
-	const { displayName } = await request.json();
-	if (!displayName) return rateLimit.sendResponse({ error: "New display name is required" }, 400);
-
-	const validation = displayNameSchema.safeParse(displayName);
-	if (!validation.success) return rateLimit.sendResponse({ error: validation.error.issues[0].message }, 400);
-
-	// Check for inappropriate words
-	if (profanity.exists(displayName)) return rateLimit.sendResponse({ error: "Display name contains inappropriate words" }, 400);
-
-	try {
-		await prisma.user.update({
-			where: { id: Number(session.user.id) },
-			data: { name: displayName },
-		});
-	} catch (error) {
-		console.error("Failed to update display name:", error);
-		Sentry.captureException(error, { extra: { stage: "update-display-name" } });
-		return rateLimit.sendResponse({ error: "Failed to update display name" }, 500);
-	}
-
-	return rateLimit.sendResponse({ success: true });
-}

src/app/api/auth/name/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import * as Sentry from "@sentry/nextjs";
+import { profanity } from "@2toad/profanity";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { userNameSchema } from "@/lib/schemas";
+import { RateLimit } from "@/lib/rate-limit";
+
+export async function PATCH(request: NextRequest) {
+	const session = await auth();
+	if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	Sentry.setUser({ id: session.user.id, name: session.user.name });
+
+	const rateLimit = new RateLimit(request, 3);
+	const check = await rateLimit.handle();
+	if (check) return check;
+
+	const { name } = await request.json();
+	if (!name) return rateLimit.sendResponse({ error: "New name is required" }, 400);
+
+	const validation = userNameSchema.safeParse(name);
+	if (!validation.success) return rateLimit.sendResponse({ error: validation.error.issues[0].message }, 400);
+
+	// Check for inappropriate words
+	if (profanity.exists(name)) return rateLimit.sendResponse({ error: "Name contains inappropriate words" }, 400);
+
+	try {
+		await prisma.user.update({
+			where: { id: Number(session.user.id) },
+			data: { name },
+		});
+	} catch (error) {
+		console.error("Failed to update name:", error);
+		Sentry.captureException(error, { extra: { stage: "update-name" } });
+		return rateLimit.sendResponse({ error: "Failed to update name" }, 500);
+	}
+
+	return rateLimit.sendResponse({ success: true });
+}

src/app/api/auth/picture/route.ts

@@ -21,14 +21,14 @@ const formDataSchema = z.object({
 export async function PATCH(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 3);
 	const check = await rateLimit.handle();
 	if (check) return check;
 
 	// Check if profile picture was updated in the last 7 days
-	const user = await prisma.user.findUnique({ where: { id: Number(session.user.id) } });
+	const user = await prisma.user.findUnique({ where: { id: Number(session.user?.id) } });
 	if (user && user.imageUpdatedAt) {
 		const timePeriod = dayjs().subtract(7, "days");
 		const lastUpdate = dayjs(user.imageUpdatedAt);
@@ -48,8 +48,8 @@ export async function PATCH(request: NextRequest) {
 	// If there is no image, set the profile picture to the guest image
 	if (!image) {
 		await prisma.user.update({
-			where: { id: Number(session.user.id) },
-			data: { image: `/guest.webp`, imageUpdatedAt: new Date() },
+			where: { id: Number(session.user?.id) },
+			data: { image: `/guest.png`, imageUpdatedAt: new Date() },
 		});
 
 		return rateLimit.sendResponse({ success: true });
@@ -64,10 +64,10 @@ export async function PATCH(request: NextRequest) {
 
 	try {
 		const buffer = Buffer.from(await image.arrayBuffer());
-		const webpBuffer = await sharp(buffer, { animated: true }).resize({ width: 128, height: 128 }).webp({ quality: 85 }).toBuffer();
-		const fileLocation = path.join(uploadsDirectory, `${session.user.id}.webp`);
+		const pngBuffer = await sharp(buffer, { animated: true }).resize({ width: 128, height: 128 }).png({ quality: 85 }).toBuffer();
+		const fileLocation = path.join(uploadsDirectory, `${session.user?.id}.png`);
 
-		await fs.writeFile(fileLocation, webpBuffer);
+		await fs.writeFile(fileLocation, pngBuffer);
 	} catch (error) {
 		console.error("Error uploading profile picture:", error);
 		Sentry.captureException(error, { extra: { stage: "upload-profile-picture" } });
@@ -76,8 +76,8 @@ export async function PATCH(request: NextRequest) {
 
 	try {
 		await prisma.user.update({
-			where: { id: Number(session.user.id) },
-			data: { image: `/profile/${session.user.id}/picture`, imageUpdatedAt: new Date() },
+			where: { id: Number(session.user?.id) },
+			data: { image: `/profile/${session.user?.id}/picture`, imageUpdatedAt: new Date() },
 		});
 	} catch (error) {
 		console.error("Failed to update profile picture:", error);

src/app/api/auth/username/route.ts

@@ -1,54 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import * as Sentry from "@sentry/nextjs";
-
-import dayjs from "dayjs";
-import { profanity } from "@2toad/profanity";
-
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { usernameSchema } from "@/lib/schemas";
-import { RateLimit } from "@/lib/rate-limit";
-
-export async function PATCH(request: NextRequest) {
-	const session = await auth();
-	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
-
-	const rateLimit = new RateLimit(request, 3);
-	const check = await rateLimit.handle();
-	if (check) return check;
-
-	const { username } = await request.json();
-	if (!username) return rateLimit.sendResponse({ error: "New username is required" }, 400);
-
-	// Check if username was updated in the last 90 days
-	const user = await prisma.user.findUnique({ where: { id: Number(session.user.id) } });
-	if (user && user.usernameUpdatedAt) {
-		const timePeriod = dayjs().subtract(90, "days");
-		const lastUpdate = dayjs(user.usernameUpdatedAt);
-
-		if (lastUpdate.isAfter(timePeriod)) return rateLimit.sendResponse({ error: "Username was changed in the last 90 days" }, 400);
-	}
-
-	const validation = usernameSchema.safeParse(username);
-	if (!validation.success) return rateLimit.sendResponse({ error: validation.error.issues[0].message }, 400);
-
-	// Check for inappropriate words
-	if (profanity.exists(username)) return rateLimit.sendResponse({ error: "Username contains inappropriate words" }, 400);
-
-	const existingUser = await prisma.user.findUnique({ where: { username } });
-	if (existingUser) return rateLimit.sendResponse({ error: "Username is already taken" }, 400);
-
-	try {
-		await prisma.user.update({
-			where: { id: Number(session.user.id) },
-			data: { username, usernameUpdatedAt: new Date() },
-		});
-	} catch (error) {
-		console.error("Failed to update username:", error);
-		Sentry.captureException(error, { extra: { stage: "update-username" } });
-		return rateLimit.sendResponse({ error: "Failed to update username" }, 500);
-	}
-
-	return rateLimit.sendResponse({ success: true });
-}

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

@@ -14,7 +14,7 @@ const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 30, "/api/mii/delete");
 	const check = await rateLimit.handle();
@@ -33,7 +33,7 @@ export async function DELETE(request: NextRequest, { params }: { params: Promise
 	});
 
 	if (!mii) return rateLimit.sendResponse({ error: "Mii not found" }, 404);
-	if (!(Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)))
+	if (!(Number(session.user?.id) === mii.userId || Number(session.user?.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)))
 		return rateLimit.sendResponse({ error: "You don't have ownership of that Mii" }, 403);
 
 	const miiUploadsDirectory = path.join(uploadsDirectory, miiId.toString());

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

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import * as Sentry from "@sentry/nextjs";
 import { z } from "zod";
-import { Mii } from "@prisma/client";
+import { Mii, Prisma } from "@prisma/client";
 
 import fs from "fs/promises";
 import path from "path";
@@ -29,7 +29,7 @@ const editSchema = z.object({
 export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-	Sentry.setUser({ id: session.user.id, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 1); // no grouped pathname; edit each mii 1 time a minute
 	const check = await rateLimit.handle();
@@ -49,7 +49,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	});
 
 	if (!mii) return rateLimit.sendResponse({ error: "Mii not found" }, 404);
-	if (!(Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)))
+	if (!(Number(session.user?.id) === mii.userId || Number(session.user?.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)))
 		return rateLimit.sendResponse({ error: "You don't have ownership of that Mii" }, 403);
 
 	// Parse form data
@@ -90,7 +90,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	}
 
 	// Edit Mii in database
-	const updateData: Partial<Mii> = {};
+	const updateData: Prisma.MiiUpdateInput = {};
 	if (name !== undefined) updateData.name = profanity.censor(name); // Censor potential inappropriate words
 	if (tags !== undefined) updateData.tags = tags.map((t) => profanity.censor(t)); // Same here
 	if (description !== undefined) updateData.description = profanity.censor(description);
@@ -126,10 +126,10 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 			await Promise.all(
 				images.map(async (image, index) => {
 					const buffer = Buffer.from(await image.arrayBuffer());
-					const webpBuffer = await sharp(buffer).webp({ quality: 85 }).toBuffer();
-					const fileLocation = path.join(miiUploadsDirectory, `image${index}.webp`);
+					const pngBuffer = await sharp(buffer).png({ quality: 85 }).toBuffer();
+					const fileLocation = path.join(miiUploadsDirectory, `image${index}.png`);
 
-					await fs.writeFile(fileLocation, webpBuffer);
+					await fs.writeFile(fileLocation, pngBuffer);
 				}),
 			);
 		} catch (error) {

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

@@ -22,7 +22,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 		const existingLike = await tx.like.findUnique({
 			where: {
 				userId_miiId: {
-					userId: Number(session.user.id),
+					userId: Number(session.user?.id),
 					miiId,
 				},
 			},
@@ -33,7 +33,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 			await tx.like.delete({
 				where: {
 					userId_miiId: {
-						userId: Number(session.user.id),
+						userId: Number(session.user?.id),
 						miiId,
 					},
 				},
@@ -42,7 +42,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 			// Add a like if it doesn't exist
 			await tx.like.create({
 				data: {
-					userId: Number(session.user.id),
+					userId: Number(session.user?.id),
 					miiId,
 				},
 			});

src/app/api/report/route.ts

@@ -19,7 +19,7 @@ const reportSchema = z.object({
 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, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 2);
 	const check = await rateLimit.handle();
@@ -35,7 +35,7 @@ export async function POST(request: NextRequest) {
 		include: {
 			user: {
 				select: {
-					username: true;
+					name: true;
 				};
 			};
 		};
@@ -48,7 +48,7 @@ export async function POST(request: NextRequest) {
 			include: {
 				user: {
 					select: {
-						username: true,
+						name: true,
 					},
 				},
 			},
@@ -66,7 +66,7 @@ export async function POST(request: NextRequest) {
 		where: {
 			targetId: id,
 			reportType: type.toUpperCase() as ReportType,
-			authorId: Number(session.user.id),
+			authorId: Number(session.user?.id),
 		},
 	});
 
@@ -79,7 +79,7 @@ export async function POST(request: NextRequest) {
 				targetId: id,
 				reason: reason.toUpperCase() as ReportReason,
 				reasonNotes: notes,
-				authorId: Number(session.user.id),
+				authorId: Number(session.user?.id),
 				creatorId: mii ? mii.userId : undefined,
 			},
 		});
@@ -92,11 +92,11 @@ export async function POST(request: NextRequest) {
 	// Send notification to ntfy
 	if (process.env.NTFY_URL) {
 		// This is only shown if report type is MII
-		const miiCreatorMessage = mii ? `by @${mii.user.username} (ID: ${mii.userId})` : "";
+		const miiCreatorMessage = mii ? `by ${mii.user.name} (ID: ${mii.userId})` : "";
 
 		await fetch(process.env.NTFY_URL, {
 			method: "POST",
-			body: `Report by @${session.user.username} (ID: ${session.user.id}) on ${type.toUpperCase()} (ID: ${id}) ${miiCreatorMessage}`,
+			body: `Report by ${session.user?.name} (ID: ${session.user?.id}) on ${type.toUpperCase()} (ID: ${id}) ${miiCreatorMessage}`,
 			headers: {
 				Title: "Report recieved - TomodachiShare",
 				Priority: "urgent",

src/app/api/return/route.ts

@@ -14,7 +14,7 @@ export async function DELETE(request: NextRequest) {
 
 	const activePunishment = await prisma.punishment.findFirst({
 		where: {
-			userId: Number(session.user.id),
+			userId: Number(session.user?.id),
 			returned: false,
 		},
 		include: {

src/app/api/submit/route.ts

@@ -66,7 +66,7 @@ const submitSchema = z
 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, username: session.user.username });
+	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
 	const rateLimit = new RateLimit(request, 3);
 	const check = await rateLimit.handle();
@@ -94,17 +94,18 @@ export async function POST(request: NextRequest) {
 	// 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) {
+				if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
 					delete object[key as keyof SwitchMiiInstructions];
 					continue;
 				}
 
-				// Recurse into nested objects
-				if (typeof value === "object") {
+				if (typeof value === "object" && !Array.isArray(value)) {
 					minify(value as Partial<SwitchMiiInstructions>);
 
 					if (Object.keys(value).length === 0) {
@@ -205,7 +206,7 @@ export async function POST(request: NextRequest) {
 	// Create Mii in database
 	const miiRecord = await prisma.mii.create({
 		data: {
-			userId: Number(session.user.id),
+			userId: Number(session.user?.id),
 			platform,
 			name,
 			tags,
@@ -249,10 +250,11 @@ export async function POST(request: NextRequest) {
 		}
 
 		if (!portraitBuffer) throw Error("Mii portrait buffer not initialised");
-		const webpBuffer = await sharp(portraitBuffer).webp({ quality: 85 }).toBuffer();
-		const fileLocation = path.join(miiUploadsDirectory, "mii.webp");
+		const pngBuffer = await sharp(portraitBuffer).png({ quality: 85 }).toBuffer();
+		const fileLocation = path.join(miiUploadsDirectory, "mii.png");
 
-		await fs.writeFile(fileLocation, webpBuffer);
+		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 } });
@@ -276,10 +278,10 @@ export async function POST(request: NextRequest) {
 			const codeBuffer = Buffer.from(codeBase64, "base64");
 
 			// Compress and store
-			const codeWebpBuffer = await sharp(codeBuffer).webp({ quality: 85 }).toBuffer();
-			const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.webp");
+			const codePngBuffer = await sharp(codeBuffer).png({ quality: 85 }).toBuffer();
+			const codeFileLocation = path.join(miiUploadsDirectory, "qr-code.png");
 
-			await fs.writeFile(codeFileLocation, codeWebpBuffer);
+			await fs.writeFile(codeFileLocation, codePngBuffer);
 		} catch (error) {
 			// Clean up if something went wrong
 			await prisma.mii.delete({ where: { id: miiRecord.id } });
@@ -290,23 +292,15 @@ export async function POST(request: NextRequest) {
 		}
 	}
 
-	try {
-		await generateMetadataImage(miiRecord, session.user.name!);
-	} catch (error) {
-		console.error(error);
-		Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "metadata-image" } });
-		return rateLimit.sendResponse({ error: `Failed to generate 'metadata' type image for mii ${miiRecord.id}` }, 500);
-	}
-
 	// Compress and store user images
 	try {
 		await Promise.all(
 			customImages.map(async (image, index) => {
 				const buffer = Buffer.from(await image.arrayBuffer());
-				const webpBuffer = await sharp(buffer).webp({ quality: 85 }).toBuffer();
-				const fileLocation = path.join(miiUploadsDirectory, `image${index}.webp`);
+				const pngBuffer = await sharp(buffer).png({ quality: 85 }).toBuffer();
+				const fileLocation = path.join(miiUploadsDirectory, `image${index}.png`);
 
-				await fs.writeFile(fileLocation, webpBuffer);
+				await fs.writeFile(fileLocation, pngBuffer);
 			}),
 		);
 

src/app/create-username/page.tsx

@@ -1,38 +0,0 @@
-import { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { auth } from "@/lib/auth";
-import UsernameForm from "@/components/username-form";
-
-export const metadata: Metadata = {
-	title: "Create your Username - TomodachiShare",
-	description: "Pick a unique username to start using TomodachiShare",
-	robots: {
-		index: false,
-		follow: false,
-	},
-};
-
-export default async function CreateUsernamePage() {
-	const session = await auth();
-
-	// If the user is not logged in or already has a username, redirect
-	if (!session || session?.user.username) {
-		redirect("/");
-	}
-
-	return (
-		<div className="grow flex items-center justify-center">
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-10 py-12 max-w-md text-center">
-				<h1 className="text-3xl font-bold mb-4">Welcome to the island!</h1>
-
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-6">
-					<hr className="grow border-zinc-300" />
-					<span>Please create a username</span>
-					<hr className="grow border-zinc-300" />
-				</div>
-
-				<UsernameForm />
-			</div>
-		</div>
-	);
-}

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

@@ -44,7 +44,7 @@ export default async function MiiPage({ params }: Props) {
 	});
 
 	// Check ownership
-	if (!mii || (Number(session?.user.id) !== mii.userId && Number(session?.user.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID))) redirect("/404");
+	if (!mii || (Number(session?.user?.id) !== mii.userId && Number(session?.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID))) redirect("/404");
 
 	return <EditForm mii={mii} likes={mii._count.likedBy} />;
 }

src/app/login/page.tsx

@@ -12,9 +12,7 @@ export default async function LoginPage() {
 	const session = await auth();
 
 	// If the user is already logged in, redirect
-	if (session) {
-		redirect("/");
-	}
+	if (session) redirect("/");
 
 	return (
 		<div className="grow flex items-center justify-center">

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

@@ -32,8 +32,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 	if (!searchParamsParsed.success) return rateLimit.sendResponse({ error: searchParamsParsed.error.issues[0].message }, 400);
 	const { type: imageType } = searchParamsParsed.data;
 
-	const fileExtension = imageType === "metadata" ? ".png" : ".webp";
-	const filePath = path.join(process.cwd(), "uploads", "mii", miiId.toString(), `${imageType}${fileExtension}`);
+	const filePath = path.join(process.cwd(), "uploads", "mii", miiId.toString(), `${imageType}.png`);
 
 	let buffer: Buffer | undefined;
 	// Only find Mii if image type is 'metadata'
@@ -109,7 +108,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 	}
 
 	return rateLimit.sendResponse(buffer, 200, {
-		"Content-Type": "image/webp",
+		"Content-Type": "image/png",
 		"X-Robots-Tag": "noindex, noimageindex, nofollow",
 		"Cache-Control": "no-store",
 	});

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

@@ -14,7 +14,7 @@ import ImageViewer from "@/components/image-viewer";
 import DeleteMiiButton from "@/components/mii/delete-mii-button";
 import ShareMiiButton from "@/components/mii/share-mii-button";
 import ThreeDsScanTutorialButton from "@/components/tutorial/3ds-scan";
-import SwitchScanTutorialButton from "@/components/tutorial/switch-scan";
+import SwitchScanTutorialButton from "@/components/tutorial/switch-add-mii";
 import Description from "@/components/description";
 import MiiInstructions from "@/components/mii/instructions";
 
@@ -35,7 +35,6 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 			user: {
 				select: {
 					name: true,
-					username: true,
 				},
 			},
 			_count: {
@@ -49,16 +48,18 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 	const metadataImageUrl = `/mii/${mii.id}/image?type=metadata`;
 
+	const name = `@${mii.user.name}`;
+
 	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.user.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+		description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
 		keywords: ["mii", "tomodachi life", "nintendo", "tomodachishare", "tomodachi-share", "mii creator", "mii collection", ...mii.tags],
-		creator: mii.user.username,
+		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.user.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
 			images: [
 				{
 					url: metadataImageUrl,
@@ -66,19 +67,19 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 				},
 			],
 			publishedTime: mii.createdAt.toISOString(),
-			authors: mii.user.username,
+			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.user.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
+			description: `Check out '${mii.name}', a ${mii.platform === MiiPlatform.SWITCH ? "Switch Living the Dream" : "3DS"} Tomodachi Life Mii created by ${mii.name} on TomodachiShare with ${mii._count.likedBy} likes.`,
 			images: [
 				{
 					url: metadataImageUrl,
 					alt: `${mii.name}, ${mii.tags.join(", ")} ${mii.gender} Mii character`,
 				},
 			],
-			creator: mii.user.username!,
+			creator: mii.user.name!,
 		},
 		alternates: {
 			canonical: `/mii/${mii.id}`,
@@ -98,7 +99,6 @@ export default async function MiiPage({ params }: Props) {
 			user: {
 				select: {
 					name: true,
-					username: true,
 				},
 			},
 			likedBy: session?.user
@@ -291,7 +291,7 @@ export default async function MiiPage({ params }: Props) {
 
 						{/* Buttons */}
 						<div className="flex gap-3 w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:size-12 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-xs">
-							{session && (Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && (
+							{session && (Number(session.user?.id) === mii.userId || Number(session.user?.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && (
 								<>
 									<Link aria-label="Edit Mii" href={`/edit/${mii.id}`}>
 										<Icon icon="mdi:pencil" />

src/app/page.tsx

@@ -39,9 +39,6 @@ export default async function Page({ searchParams }: Props) {
 	const session = await auth();
 	const { page, tags } = await searchParams;
 
-	if (session?.user && !session.user.username) {
-		redirect("/create-username");
-	}
 	if (session?.user) {
 		const activePunishment = await prisma.punishment.findFirst({
 			where: {

src/app/privacy/page.tsx

@@ -32,8 +32,8 @@ export default function PrivacyPage() {
 						<p className="mb-2">The following types of information are stored when you use this website:</p>
 						<ul className="list-disc list-inside">
 							<li>
-								<strong>Account Information:</strong> When you sign up or log in using Discord or Github, your username, e-mail, and profile picture are
-								collected. Your authentication tokens may also be temporarily stored to maintain your login session.
+								<strong>Account Information:</strong> When you sign up or log in using Discord or Github, your name, e-mail, and profile picture are collected.
+								Your authentication tokens may also be temporarily stored to maintain your login session.
 							</li>
 							<li>
 								<strong>Miis:</strong> We store any Miis you submit, including associated images (such as a picture of your Mii, QR codes, and custom images).
@@ -77,7 +77,7 @@ export default function PrivacyPage() {
 						</p>
 						<ul className="list-disc list-inside ml-4">
 							<li>Errors and performance data is collected.</li>
-							<li>Only your user ID and username are sent, no other personally identifiable information is collected.</li>
+							<li>Only your user ID and name are sent, no other personally identifiable information is collected.</li>
 							<li>You can use ad blockers or browser privacy features to opt out.</li>
 						</ul>
 					</section>

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

@@ -39,24 +39,23 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 	return {
 		metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
-		title: `${user.name} (@${user.username}) - TomodachiShare`,
+		title: `${user.name} - TomodachiShare`,
 		description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
 		keywords: ["mii", "tomodachi life", "nintendo", "mii creator", "mii collection", "profile"],
-		creator: user.username,
+		creator: user.name,
 		openGraph: {
 			type: "profile",
-			title: `${user.name} (@${user.username}) - TomodachiShare`,
+			title: `${user.name} - TomodachiShare`,
 			description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
-			images: [user.image ?? "/guest.webp"],
-			username: user.username,
-			firstName: user.name,
+			images: [user.image ?? "/guest.png"],
+			username: user.name,
 		},
 		twitter: {
 			card: "summary",
-			title: `${user.name} (@${user.username}) - TomodachiShare`,
+			title: `${user.name} - TomodachiShare`,
 			description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
-			images: [user.image ?? "/guest.webp"],
-			creator: user.username!,
+			images: [user.image ?? "/guest.png"],
+			creator: user.name,
 		},
 		alternates: {
 			canonical: `/profile/${user.id}`,

src/app/profile/[id]/picture/route.ts

@@ -16,7 +16,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 	if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
 	const userId = parsed.data;
 
-	const filePath = path.join(process.cwd(), "uploads", "user", `${userId}.webp`);
+	const filePath = path.join(process.cwd(), "uploads", "user", `${userId}.png`);
 
 	try {
 		const buffer = await fs.readFile(filePath);

src/app/profile/settings/page.tsx

@@ -21,7 +21,7 @@ export default async function ProfileSettingsPage() {
 
 	if (!session) redirect("/login");
 
-	const user = await prisma.user.findUnique({ where: { id: Number(session.user.id!) }, select: { description: true } });
+	const user = await prisma.user.findUnique({ where: { id: Number(session.user?.id!) }, select: { description: true } });
 
 	return (
 		<div>

src/app/robots.ts

@@ -5,18 +5,7 @@ export default function robots(): MetadataRoute.Robots {
 		rules: {
 			userAgent: "*",
 			allow: "/",
-			disallow: [
-				"/*?*page=",
-				"/profile*?*tags=",
-				"/create-username",
-				"/edit/*",
-				"/profile/settings",
-				"/random",
-				"/submit",
-				"/report/mii/*",
-				"/report/user/*",
-				"/admin",
-			],
+			disallow: ["/*?*page=", "/profile*?*tags=", "/edit/*", "/profile/settings", "/random", "/submit", "/report/mii/*", "/report/user/*", "/admin"],
 		},
 		sitemap: `${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`,
 	};

src/app/submit/page.tsx

@@ -22,10 +22,9 @@ export default async function SubmitPage() {
 	const session = await auth();
 
 	if (!session) redirect("/login");
-	if (!session.user.username) redirect("/create-username");
 	const activePunishment = await prisma.punishment.findFirst({
 		where: {
-			userId: Number(session?.user.id),
+			userId: Number(session?.user?.id),
 			returned: false,
 		},
 	});
@@ -39,6 +38,12 @@ export default async function SubmitPage() {
 	} catch (error) {
 		return <p>An error occurred!</p>;
 	}
+	try {
+		const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/admin/can-submit`);
+		value = await response.json();
+	} catch (error) {
+		return <p>An error occurred!</p>;
+	}
 
 	if (!value)
 		return (

src/components/admin/user-management.tsx

@@ -14,7 +14,6 @@ import PunishmentDeletionDialog from "./punishment-deletion-dialog";
 interface ApiResponse {
 	success: boolean;
 	name: string;
-	username: string;
 	image: string;
 	createdAt: string;
 	punishments: Prisma.PunishmentGetPayload<{
@@ -115,7 +114,7 @@ export default function Punishments() {
 							<ProfilePicture src={user.image} width={96} height={96} className="rounded-full border-2 border-orange-400" />
 							<div className="p-2 flex flex-col">
 								<p className="text-xl font-bold">{user.name}</p>
-								<p className="text-black/60 text-sm font-medium">@{user.username}</p>
+								<p className="text-black/60 text-sm font-medium">@{user.name}</p>
 								<p className="text-sm mt-auto">
 									<span className="font-medium">Created:</span>{" "}
 									{new Date(user.createdAt).toLocaleString("en-GB", {

src/components/description.tsx

@@ -63,7 +63,7 @@ export default function Description({ text, className }: Props) {
 								href={`/profile/${id}`}
 								className="inline-flex items-center align-bottom gap-1.5 pr-2 bg-orange-100 border border-orange-400 rounded-lg mx-1 text-orange-800 text-xs"
 							>
-								<ProfilePicture src={linkedProfile.image || "/guest.webp"} width={24} height={24} className="bg-white rounded-lg border-r border-orange-400" />
+								<ProfilePicture src={linkedProfile.image || "/guest.png"} width={24} height={24} className="bg-white rounded-lg border-r border-orange-400" />
 								{linkedProfile.name}
 							</Link>
 						);

src/components/dropzone.tsx

@@ -22,7 +22,7 @@ export default function Dropzone({ onDrop, options, children }: Props) {
 		onDrop: handleDrop,
 		maxFiles: 3,
 		accept: {
-			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp", ".heic"],
+			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".png", ".heic"],
 		},
 		...options,
 	});

src/components/login-buttons.tsx

@@ -7,7 +7,7 @@ export default function LoginButtons() {
 	return (
 		<div className="flex flex-col items-center gap-2">
 			<button
-				onClick={() => signIn("discord", { redirectTo: "/create-username" })}
+				onClick={() => signIn("discord", { redirectTo: "/" })}
 				aria-label="Login with Discord"
 				className="pill button gap-2 px-3! bg-indigo-400! border-indigo-500! hover:bg-indigo-500!"
 			>
@@ -15,7 +15,7 @@ export default function LoginButtons() {
 				Login with Discord
 			</button>
 			<button
-				onClick={() => signIn("github", { redirectTo: "/create-username" })}
+				onClick={() => signIn("github", { redirectTo: "/" })}
 				aria-label="Login with GitHub"
 				className="pill button gap-2 px-3! bg-zinc-700! border-zinc-800!  hover:bg-zinc-800! text-white"
 			>

src/components/mii/dating-preferences.tsx

@@ -16,16 +16,15 @@ export default function DatingPreferencesViewer({ data, onChecked }: Props) {
 				const genderEnum = gender.toUpperCase() as MiiGender;
 
 				return (
-					<div className="flex gap-1.5">
+					<div key={gender} className="flex gap-1.5">
 						<input
-							key={gender}
 							type="checkbox"
 							id={gender}
 							className="checkbox"
 							checked={data.includes(genderEnum)}
-							onChange={(e) => {
-								if (onChecked) onChecked(e, genderEnum);
-							}}
+							{...(typeof window !== "undefined" && onChecked
+								? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) }
+								: { readOnly: true })}
 						/>
 						<label htmlFor={gender} className="text-sm select-none">
 							{gender}

src/components/mii/instructions.tsx

@@ -76,7 +76,7 @@ function TableCell({ label, children }: TableCellProps) {
 }
 
 function Section({ name, instructions, children, isSubSection }: SectionProps) {
-	if (typeof instructions !== "object") return null;
+	if (typeof instructions !== "object" || !instructions) return null;
 
 	const type = "type" in instructions ? instructions.type : undefined;
 	const color = "color" in instructions ? instructions.color : undefined;
@@ -87,7 +87,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
 	const stretch = "stretch" in instructions ? instructions.stretch : undefined;
 
 	return (
-		<div className={`p-3 ${isSubSection ? "mt-2" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
+		<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">
@@ -149,50 +149,33 @@ export default function MiiInstructions({ instructions }: Props) {
 							<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}>
-					{eyes.eyesType && (
-						<TableCell label="Eyes Type">
-							<GridPosition index={eyes.eyesType} />
-						</TableCell>
-					)}
-					{eyes.eyelashesTop && (
-						<TableCell label="Eyelashes Top Type">
-							<GridPosition index={eyes.eyelashesTop} />
-						</TableCell>
-					)}
-					{eyes.eyelashesBottom && (
-						<TableCell label="Eyelashes Bottom Type">
-							<GridPosition index={eyes.eyelashesBottom} />
-						</TableCell>
-					)}
-					{eyes.eyelidTop && (
-						<TableCell label="Eyelid Top Type">
-							<GridPosition index={eyes.eyelidTop} />
-						</TableCell>
-					)}
-					{eyes.eyelidBottom && (
-						<TableCell label="Eyelid Bottom Type">
-							<GridPosition index={eyes.eyelidBottom} />
-						</TableCell>
-					)}
-					{eyes.eyeliner && (
-						<TableCell label="Eyeliner Type">
-							<GridPosition index={eyes.eyeliner} />
-						</TableCell>
-					)}
-					{eyes.pupil && (
-						<TableCell label="Pupil Type">
-							<GridPosition index={eyes.pupil} />
-						</TableCell>
-					)}
+					<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}></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}>
@@ -213,7 +196,9 @@ export default function MiiInstructions({ instructions }: Props) {
 					<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} />
+					<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} />
@@ -242,24 +227,24 @@ export default function MiiInstructions({ instructions }: Props) {
 						</div>
 					)}
 					{datingPreferences && (
-						<div className="pl-2">
-							<h4 className="text-lg font-semibold mt-4">Dating Preferences</h4>
+						<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">
-							<h4 className="font-semibold text-xl text-amber-800 mb-1 mt-4">Voice</h4>
+						<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">
-							<h4 className="font-semibold text-xl text-amber-800 mb-1 mt-4">Personality</h4>
+						<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>

src/components/mii/list/index.tsx

@@ -1,3 +1,4 @@
+import { headers } from "next/headers";
 import Link from "next/link";
 
 import { MiiGender, MiiPlatform, Prisma } from "@prisma/client";
@@ -25,7 +26,6 @@ interface Props {
 
 export default async function MiiList({ searchParams, userId, inLikesPage }: Props) {
 	const session = await auth();
-
 	const parsed = searchSchema.safeParse(searchParams);
 	if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
 
@@ -34,7 +34,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 	// My Likes page
 	let miiIdsLiked: number[] | undefined = undefined;
 
-	if (inLikesPage && session?.user.id) {
+	if (inLikesPage && session?.user?.id) {
 		const likedMiis = await prisma.like.findMany({
 			where: { userId: Number(session.user.id) },
 			select: { miiId: true },
@@ -69,7 +69,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 			user: {
 				select: {
 					id: true,
-					username: true,
+					name: true,
 				},
 			},
 		}),
@@ -192,19 +192,26 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 				{miis.map((mii) => (
 					<div
 						key={mii.id}
-						className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
+						className="flex flex-col relative bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
 					>
 						<Carousel
 							images={[
 								`/mii/${mii.id}/image?type=mii`,
-								...(platform === "THREE_DS" ? `/mii/${mii.id}/image?type=qr-code` : ""),
+								...(platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
 								...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
 							]}
 						/>
 
 						<div className="p-4 flex flex-col gap-1 h-full">
-							<Link href={`/mii/${mii.id}`} className="font-bold text-2xl line-clamp-1" title={mii.name}>
+							<Link href={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1" title={mii.name}>
 								{mii.name}
+								<div className="absolute right-0 top-1/2 -translate-y-1/2 text-[1.25rem] opacity-25">
+									{mii.platform === "SWITCH" ? (
+										<Icon icon="cib:nintendo-switch" className="text-red-400" />
+									) : (
+										<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+									)}
+								</div>
 							</Link>
 							<div id="tags" className="flex flex-wrap gap-1">
 								{mii.tags.map((tag) => (
@@ -219,11 +226,11 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 
 								{!userId && (
 									<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">
-										@{mii.user?.username}
+										@{mii.user?.name}
 									</Link>
 								)}
 
-								{userId && Number(session?.user.id) == userId && (
+								{userId && Number(session?.user?.id) == userId && (
 									<div className="flex gap-1 text-2xl justify-end text-zinc-400">
 										<Link href={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
 											<Icon icon="mdi:pencil" />

src/components/profile-information.tsx

@@ -15,7 +15,7 @@ interface Props {
 export default async function ProfileInformation({ userId, page }: Props) {
 	const session = await auth();
 
-	const id = userId ? userId : Number(session?.user.id);
+	const id = userId ? userId : Number(session?.user?.id);
 	const user = await prisma.user.findUnique({ where: { id } });
 	const likedMiis = await prisma.like.count({ where: { userId: id } });
 
@@ -23,14 +23,14 @@ export default async function ProfileInformation({ userId, page }: Props) {
 
 	const isAdmin = id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID);
 	const isContributor = process.env.NEXT_PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(id.toString());
-	const isOwnProfile = Number(session?.user.id) === id;
+	const isOwnProfile = Number(session?.user?.id) === id;
 
 	return (
 		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
 			<div className="flex w-full gap-4 overflow-x-scroll">
 				{/* Profile picture */}
 				<Link href={`/profile/${user.id}`} className="size-28 aspect-square">
-					<ProfilePicture src={user.image ?? "/guest.webp"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
+					<ProfilePicture src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
 				</Link>
 				{/* User information */}
 				<div className="flex flex-col w-full relative py-3">
@@ -47,7 +47,7 @@ export default async function ProfileInformation({ userId, page }: Props) {
 							</div>
 						)}
 					</div>
-					<h2 className="text-black/60 text-sm font-semibold wrap-break-word">@{user?.username}</h2>
+					<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
 
 					<div className="mt-3 text-sm flex gap-8">
 						<h4 title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>

src/components/profile-overview.tsx

@@ -7,15 +7,15 @@ export default async function ProfileOverview() {
 
 	return (
 		<li title="Your profile">
-			<Link href={`/profile/${session?.user.id}`} aria-label="Go to profile" className="pill button gap-2! p-0! h-full max-w-64" data-tooltip="Your Profile">
+			<Link href={`/profile/${session?.user?.id}`} aria-label="Go to profile" className="pill button gap-2! p-0! h-full max-w-64" data-tooltip="Your Profile">
 				<Image
-					src={session?.user?.image ?? "/guest.webp"}
+					src={session?.user?.image ?? "/guest.png"}
 					alt="profile picture"
 					width={40}
 					height={40}
 					className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
 				/>
-				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.username ?? "unknown"}</span>
+				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name ?? "unknown"}</span>
 			</Link>
 		</li>
 	);

src/components/profile-picture.tsx

@@ -7,5 +7,5 @@ export default function ProfilePicture(props: Partial<ImageProps>) {
 	const { src, ...rest } = props;
 	const [imgSrc, setImgSrc] = useState(src);
 
-	return <Image width={128} height={128} {...rest} src={imgSrc || "/guest.webp"} alt={"profile picture"} onError={() => setImgSrc("/guest.webp")} />;
+	return <Image width={128} height={128} {...rest} src={imgSrc || "/guest.png"} alt={"profile picture"} onError={() => setImgSrc("/guest.png")} />;
 }

src/components/profile-settings/index.tsx

@@ -2,9 +2,8 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import dayjs from "dayjs";
 
-import { displayNameSchema, usernameSchema } from "@/lib/schemas";
+import { userNameSchema } from "@/lib/schemas";
 
 import ProfilePictureSettings from "./profile-picture";
 import SubmitDialogButton from "./submit-dialog-button";
@@ -19,14 +18,10 @@ export default function ProfileSettings({ currentDescription }: Props) {
 	const router = useRouter();
 
 	const [description, setDescription] = useState(currentDescription);
-	const [displayName, setDisplayName] = useState("");
-	const [username, setUsername] = useState("");
+	const [name, setName] = useState("");
 
 	const [descriptionChangeError, setDescriptionChangeError] = useState<string | undefined>(undefined);
-	const [displayNameChangeError, setDisplayNameChangeError] = useState<string | undefined>(undefined);
-	const [usernameChangeError, setUsernameChangeError] = useState<string | undefined>(undefined);
-
-	const usernameDate = dayjs().add(90, "days");
+	const [nameChangeError, setNameChangeError] = useState<string | undefined>(undefined);
 
 	const handleSubmitDescriptionChange = async (close: () => void) => {
 		const parsed = z.string().trim().max(256).safeParse(description);
@@ -51,45 +46,22 @@ export default function ProfileSettings({ currentDescription }: Props) {
 		router.refresh();
 	};
 
-	const handleSubmitDisplayNameChange = async (close: () => void) => {
-		const parsed = displayNameSchema.safeParse(displayName);
+	const handleSubmitNameChange = async (close: () => void) => {
+		const parsed = userNameSchema.safeParse(name);
 		if (!parsed.success) {
-			setDisplayNameChangeError(parsed.error.issues[0].message);
+			setNameChangeError(parsed.error.issues[0].message);
 			return;
 		}
 
-		const response = await fetch("/api/auth/display-name", {
+		const response = await fetch("/api/auth/name", {
 			method: "PATCH",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ displayName }),
+			body: JSON.stringify({ name }),
 		});
 
 		if (!response.ok) {
 			const { error } = await response.json();
-			setDisplayNameChangeError(error);
-			return;
-		}
-
-		close();
-		router.refresh();
-	};
-
-	const handleSubmitUsernameChange = async (close: () => void) => {
-		const parsed = usernameSchema.safeParse(username);
-		if (!parsed.success) {
-			setUsernameChangeError(parsed.error.issues[0].message);
-			return;
-		}
-
-		const response = await fetch("/api/auth/username", {
-			method: "PATCH",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ username }),
-		});
-
-		if (!response.ok) {
-			const { error } = await response.json();
-			setUsernameChangeError(error);
+			setNameChangeError(error);
 			return;
 		}
 
@@ -101,7 +73,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
 		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
 			<div>
 				<h2 className="text-2xl font-bold">Profile Settings</h2>
-				<p className="text-sm text-zinc-500">Update your account info, and username.</p>
+				<p className="text-sm text-zinc-500">Update your profile picture, description, name, etc.</p>
 			</div>
 
 			{/* Separator */}
@@ -146,58 +118,21 @@ export default function ProfileSettings({ currentDescription }: Props) {
 			{/* Change Name */}
 			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
 				<div className="col-span-3">
-					<label className="font-semibold">Change Display Name</label>
-					<p className="text-sm text-zinc-500">This is a display name shown on your profile — feel free to change it anytime</p>
+					<label className="font-semibold">Change Name</label>
+					<p className="text-sm text-zinc-500">This is your name shown on your profile and miis — feel free to change it anytime</p>
 				</div>
 
 				<div className="flex justify-end gap-1 h-min col-span-2">
-					<input type="text" className="pill input flex-1" placeholder="Type here..." value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+					<input type="text" className="pill input flex-1" placeholder="Type here..." value={name} onChange={(e) => setName(e.target.value)} />
 					<SubmitDialogButton
-						title="Confirm Display Name Change"
-						description="Are you sure? This will only be visible on your profile. You can change it again later."
-						error={displayNameChangeError}
-						onSubmit={handleSubmitDisplayNameChange}
+						title="Confirm Name Change"
+						description="Are you sure? You can change it again later."
+						error={nameChangeError}
+						onSubmit={handleSubmitNameChange}
 					>
 						<div className="bg-orange-100 rounded-xl border-2 border-amber-500 mt-4 px-2 py-1">
-							<p className="font-semibold">New display name:</p>
-							<p className="indent-4">&apos;{displayName}&apos;</p>
-						</div>
-					</SubmitDialogButton>
-				</div>
-			</div>
-
-			{/* Change Username */}
-			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
-				<div className="col-span-3">
-					<label className="font-semibold">Change Username</label>
-					<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
-				</div>
-
-				<div className="flex justify-end gap-1 col-span-2">
-					<div className="relative flex-1">
-						<input
-							type="text"
-							className="pill input w-full indent-4"
-							placeholder="Type here..."
-							value={username}
-							onChange={(e) => setUsername(e.target.value)}
-						/>
-						<span className="absolute top-1/2 -translate-y-1/2 left-4 select-none">@</span>
-					</div>
-					<SubmitDialogButton
-						title="Confirm Username Change"
-						description="Are you sure? Your username is your unique indentifier and can only be changed every 90 days."
-						error={usernameChangeError}
-						onSubmit={handleSubmitUsernameChange}
-					>
-						<p className="text-sm text-zinc-500 mt-2">
-							After submitting, you can change it again on{" "}
-							{usernameDate.toDate().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}.
-						</p>
-
-						<div className="bg-orange-100 rounded-xl border-2 border-amber-500 mt-4 px-2 py-1">
-							<p className="font-semibold">New username:</p>
-							<p className="indent-4">&apos;@{username}&apos;</p>
+							<p className="font-semibold">New name:</p>
+							<p className="indent-4">&apos;{name}&apos;</p>
 						</div>
 					</SubmitDialogButton>
 				</div>

src/components/profile-settings/profile-picture.tsx

@@ -59,7 +59,7 @@ export default function ProfilePictureSettings() {
 						</p>
 
 						<Image
-							src={newPicture ? URL.createObjectURL(newPicture) : "/guest.webp"}
+							src={newPicture ? URL.createObjectURL(newPicture) : "/guest.png"}
 							alt="new profile picture"
 							width={96}
 							height={96}
@@ -93,7 +93,7 @@ export default function ProfilePictureSettings() {
 						<div className="bg-orange-100 rounded-xl border-2 border-amber-500 mt-4 px-2 py-1 flex items-center">
 							<p className="font-semibold mb-2">New profile picture:</p>
 							<Image
-								src={newPicture ? URL.createObjectURL(newPicture) : "/guest.webp"}
+								src={newPicture ? URL.createObjectURL(newPicture) : "/guest.png"}
 								alt="new profile picture"
 								width={128}
 								height={128}

src/components/report/user-form.tsx

@@ -43,11 +43,8 @@ export default function ReportUserForm({ user }: Props) {
 			<hr className="border-zinc-300" />
 
 			<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
-				<ProfilePicture src={user.image ?? "/guest.webp"} width={96} height={96} className="aspect-square rounded-full border-2 border-orange-400" />
-				<div className="flex flex-col justify-center">
+				<ProfilePicture src={user.image ?? "/guest.png"} width={96} height={96} className="aspect-square rounded-full border-2 border-orange-400" />
 				<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
-					<p className="text-sm font-bold overflow-hidden text-ellipsis">@{user.username}</p>
-				</div>
 			</div>
 
 			<div className="w-full grid grid-cols-3 items-center">

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

@@ -90,7 +90,7 @@ export default function EditForm({ mii, likes }: Props) {
 						const response = await fetch(path);
 						const blob = await response.blob();
 
-						return Object.assign(new File([blob], `image${index}.webp`, { type: "image/webp" }), { path });
+						return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path });
 					}),
 				);
 

src/components/submit-form/index.tsx

@@ -51,51 +51,46 @@ export default function SubmitForm() {
 	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
 	const [gender, setGender] = useState<MiiGender>("MALE");
 	const instructions = useRef<SwitchMiiInstructions>({
-		head: { type: 0, skinColor: 0 },
+		head: { type: null, skinColor: null },
 		hair: {
-			setType: 0,
-			bangsType: 0,
-			backType: 0,
-			color: 0,
-			subColor: 0,
-			style: 0,
+			setType: null,
+			bangsType: null,
+			backType: null,
+			color: null,
+			subColor: null,
+			subColor2: null,
+			style: null,
 			isFlipped: false,
 		},
-		eyebrows: { type: 0, color: 0, height: 0, distance: 0, rotation: 0, size: 0, stretch: 0 },
+		eyebrows: { type: null, color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
 		eyes: {
-			eyesType: 0,
-			eyelashesTop: 0,
-			eyelashesBottom: 0,
-			eyelidTop: 0,
-			eyelidBottom: 0,
-			eyeliner: 0,
-			pupil: 0,
-			color: 0,
-			height: 0,
-			distance: 0,
-			rotation: 0,
-			size: 0,
-			stretch: 0,
+			main: { type: null, color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelashesTop: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelashesBottom: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelidTop: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyelidBottom: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null },
+			eyeliner: { type: null, color: null },
+			pupil: { type: null, height: null, distance: null, rotation: null, size: null, stretch: null },
 		},
-		nose: { type: 0, height: 0, size: 0 },
-		lips: { type: 0, color: 0, height: 0, rotation: 0, size: 0, stretch: 0, hasLipstick: false },
-		ears: { type: 0, height: 0, size: 0 },
-		glasses: { type: 0, ringColor: 0, shadesColor: 0, height: 0, size: 0, stretch: 0 },
+		nose: { type: null, height: null, size: null },
+		lips: { type: null, color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
+		ears: { type: null, height: null, size: null },
+		glasses: { type: null, ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
 		other: {
-			wrinkles1: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			wrinkles2: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			beard: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			moustache: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			goatee: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			mole: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			eyeShadow: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
-			blush: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
+			wrinkles1: { type: null, height: null, distance: null, size: null, stretch: null },
+			wrinkles2: { type: null, height: null, distance: null, size: null, stretch: null },
+			beard: { type: null, color: null },
+			moustache: { type: null, color: null, height: null, isFlipped: false, size: null, stretch: null },
+			goatee: { type: null, color: null },
+			mole: { type: null, color: null, height: null, distance: null, size: null },
+			eyeShadow: { type: null, color: null, height: null, distance: null, size: null, stretch: null },
+			blush: { type: null, color: null, height: null, distance: null, size: null, stretch: null },
 		},
-		height: 0,
-		weight: 0,
+		height: null,
+		weight: null,
 		datingPreferences: [],
-		voice: { speed: 0, pitch: 0, depth: 0, delivery: 0, tone: 0 },
-		personality: { movement: 0, speech: 0, energy: 0, thinking: 0, overall: 0 },
+		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);
@@ -378,6 +373,7 @@ export default function SubmitForm() {
 
 					<div className="flex flex-col items-center gap-2">
 						<PortraitUpload setImage={setMiiPortraitUri} />
+						<SwitchSubmitTutorialButton />
 					</div>
 				</div>
 
@@ -416,7 +412,9 @@ export default function SubmitForm() {
 					<div className="flex flex-col items-center gap-2">
 						<MiiEditor instructions={instructions} />
 						<SwitchSubmitTutorialButton />
-						<span className="text-xs text-zinc-400">Instructions are recommended, but not required.</span>
+						<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>
 

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

@@ -1,5 +1,6 @@
 import { SwitchMiiInstructions } from "@/types";
 import React, { useState } from "react";
+import { Icon } from "@iconify/react";
 
 import HeadTab from "./tabs/head";
 import HairTab from "./tabs/hair";
@@ -11,7 +12,6 @@ import EarsTab from "./tabs/ears";
 import GlassesTab from "./tabs/glasses";
 import OtherTab from "./tabs/other";
 import MiscTab from "./tabs/misc";
-import { Icon } from "@iconify/react";
 
 interface Props {
 	instructions: React.RefObject<SwitchMiiInstructions>;
@@ -28,7 +28,7 @@ export const TAB_ICONS: Record<Tab, string> = {
 	lips: "material-symbols-light:lips",
 	ears: "ion:ear",
 	glasses: "solar:glasses-bold",
-	other: "mingcute:head-ai-fill",
+	other: "mdi:sparkles",
 	misc: "material-symbols:settings",
 };
 
@@ -48,8 +48,6 @@ export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
 export default function MiiEditor({ instructions }: Props) {
 	const [tab, setTab] = useState<Tab>("head");
 
-	const ActiveTab = TAB_COMPONENTS[tab];
-
 	return (
 		<>
 			<div className="w-full aspect-video flex bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 interface Props {
-	target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number };
+	target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number } | any;
 }
 
 export default function NumberInputs({ target }: Props) {
@@ -11,9 +11,11 @@ export default function NumberInputs({ target }: Props) {
 	const [size, setSize] = useState(0);
 	const [stretch, setStretch] = useState(0);
 
+	if (!target) return null;
+
 	return (
-		<div className="grid grid-rows-5 h-full">
-			{target.height != undefined && (
+		<div className="grid grid-rows-5 min-h-0">
+			{target.height !== undefined && (
 				<div className="w-full">
 					<label htmlFor="height" className="text-xs">
 						Height
@@ -34,7 +36,7 @@ export default function NumberInputs({ target }: Props) {
 				</div>
 			)}
 
-			{target.distance != undefined && (
+			{target.distance !== undefined && (
 				<div className="w-full">
 					<label htmlFor="distance" className="text-xs">
 						Distance
@@ -55,7 +57,7 @@ export default function NumberInputs({ target }: Props) {
 				</div>
 			)}
 
-			{target.rotation != undefined && (
+			{target.rotation !== undefined && (
 				<div className="w-full">
 					<label htmlFor="rotation" className="text-xs">
 						Rotation
@@ -76,7 +78,7 @@ export default function NumberInputs({ target }: Props) {
 				</div>
 			)}
 
-			{target.size != undefined && (
+			{target.size !== undefined && (
 				<div className="w-full">
 					<label htmlFor="size" className="text-xs">
 						Size
@@ -97,7 +99,7 @@ export default function NumberInputs({ target }: Props) {
 				</div>
 			)}
 
-			{target.stretch != undefined && (
+			{target.stretch !== undefined && (
 				<div className="w-full">
 					<label htmlFor="stretch" className="text-xs">
 						Stretch

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

@@ -9,7 +9,7 @@ interface Props {
 }
 
 export default function EyebrowsTab({ instructions }: Props) {
-	const [type, setType] = useState(0);
+	const [type, setType] = useState(27);
 	const [color, setColor] = useState(0);
 
 	return (
@@ -23,7 +23,7 @@ export default function EyebrowsTab({ instructions }: Props) {
 					<div className="flex justify-center h-74 mt-auto">
 						<TypeSelector
 							hasNoneOption
-							length={35}
+							length={43}
 							type={type}
 							setType={(i) => {
 								setType(i);

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

@@ -8,21 +8,21 @@ interface Props {
 	instructions: React.RefObject<SwitchMiiInstructions>;
 }
 
-const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsDisabled?: number[] }[] = [
-	{ name: "eyesType", length: 50 },
-	{ name: "eyelashesTop", length: 40 },
-	{ name: "eyelashesBottom", length: 20 },
-	{ name: "eyelidTop", length: 10 },
-	{ name: "eyelidBottom", length: 5 },
-	{ name: "eyeliner", length: 15 },
-	{ name: "pupil", length: 3 },
+const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsDisabled?: boolean }[] = [
+	{ name: "main", length: 121 },
+	{ 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 OtherTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
 
 	// One type/color state per tab
-	const [types, setTypes] = useState<number[]>(Array(TABS.length).fill(0));
+	const [types, setTypes] = useState<number[]>([5, 0, 0, 0, 0, 0, 0]);
 	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
 
 	const currentTab = TABS[tab];
@@ -34,7 +34,7 @@ export default function OtherTab({ instructions }: Props) {
 			return copy;
 		});
 
-		instructions.current.eyes[currentTab.name] = value;
+		instructions.current.eyes[currentTab.name].type = value;
 	};
 
 	const setColor = (value: number) => {
@@ -44,8 +44,7 @@ export default function OtherTab({ instructions }: Props) {
 			return copy;
 		});
 
-		// TODO: check in actual game, temp
-		instructions.current.eyes.color = value;
+		if (!currentTab.colorsDisabled) (instructions.current.eyes[currentTab.name] as { color: number }).color = value;
 	};
 
 	return (
@@ -53,7 +52,7 @@ export default function OtherTab({ instructions }: Props) {
 			<div className="flex h-full">
 				<div className="grow flex flex-col">
 					<div className="flex items-center h-8">
-						<h1 className="absolute font-bold text-xl">Other</h1>
+						<h1 className="absolute font-bold text-xl">Eyes</h1>
 
 						<div className="flex justify-center grow">
 							<div className="rounded-2xl bg-orange-200">
@@ -72,15 +71,15 @@ export default function OtherTab({ instructions }: Props) {
 					</div>
 
 					<div className="flex justify-center h-74 mt-auto">
-						<TypeSelector hasNoneOption length={currentTab.length} type={types[tab]} setType={setType} />
+						<TypeSelector hasNoneOption={tab === 0} length={currentTab.length} type={types[tab]} setType={setType} />
 					</div>
 				</div>
 
 				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
-					<div className={`${tab !== 0 ? "hidden" : "w-full"}`}>
+					<div className={`${currentTab.colorsDisabled ? "hidden" : "w-full"}`}>
 						<ColorPicker color={colors[tab]} setColor={setColor} />
 					</div>
-					<NumberInputs target={instructions.current.eyes} />
+					<NumberInputs target={instructions.current.eyes[currentTab.name]} />
 				</div>
 			</div>
 		</div>

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

@@ -24,7 +24,8 @@ export default function GlassesTab({ instructions }: Props) {
 					<div className="flex justify-center h-74 mt-auto">
 						<TypeSelector
 							hasNoneOption
-							length={50}
+							isGlassesTab
+							length={58}
 							type={type}
 							setType={(i) => {
 								setType(i);
@@ -44,6 +45,7 @@ export default function GlassesTab({ instructions }: Props) {
 					/>
 					<ColorPicker
 						color={shadesColor}
+						disabled={type < 44}
 						setColor={(i) => {
 							setShadesColor(i);
 							instructions.current.glasses.shadesColor = i;

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

@@ -11,24 +11,41 @@ type Tab = "sets" | "bangs" | "back";
 
 export default function HairTab({ instructions }: Props) {
 	const [tab, setTab] = useState<Tab>("sets");
-	const [setsType, setSetsType] = useState(0);
-	const [bangsType, setBangsType] = useState(0);
-	const [backType, setBackType] = useState(0);
+	const [setsType, setSetsType] = useState<number | null>(43);
+	const [bangsType, setBangsType] = useState<number | null>(null);
+	const [backType, setBackType] = useState<number | null>(null);
 	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);
 
 	const type = tab === "sets" ? setsType : tab === "bangs" ? bangsType : backType;
+	const length = tab === "sets" ? 245 : tab === "bangs" ? 83 : 111;
+
 	const setType = (value: number) => {
 		if (tab === "sets") {
 			setSetsType(value);
 			instructions.current.hair.setType = value;
+			// Clear bangs and back
+			setBangsType(null);
+			setBackType(null);
+			setSubColor2(null);
+			instructions.current.hair.bangsType = null;
+			instructions.current.hair.backType = null;
+			instructions.current.hair.subColor2 = null;
 		} else if (tab === "bangs") {
 			setBangsType(value);
 			instructions.current.hair.bangsType = value;
+			// Clear set
+			setSetsType(null);
+			instructions.current.hair.setType = null;
 		} else {
 			setBackType(value);
 			instructions.current.hair.backType = value;
+			// Clear set
+			setSetsType(null);
+			instructions.current.hair.setType = null;
 		}
 	};
 
@@ -68,22 +85,7 @@ export default function HairTab({ instructions }: Props) {
 					</div>
 
 					<div className="flex justify-center h-74 mt-auto">
-						<TypeSelector
-							length={50}
-							type={type}
-							setType={(i) => {
-								setType(i);
-
-								// Update ref
-								if (tab === "sets") {
-									instructions.current.hair.setType = i;
-								} else if (tab === "bangs") {
-									instructions.current.hair.bangsType = i;
-								} else if (tab === "back") {
-									instructions.current.hair.backType = i;
-								}
-							}}
-						/>
+						<TypeSelector length={length} type={type} setType={setType} />
 					</div>
 				</div>
 
@@ -97,23 +99,68 @@ export default function HairTab({ instructions }: Props) {
 					/>
 
 					<div className="flex gap-1.5 items-center mb-2 w-full">
-						<input type="checkbox" id="subcolor" className="checkbox" checked={subColor !== null} onChange={(e) => setSubColor(e.target.checked ? 0 : null)} />
+						<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={subColor === null}
-						color={subColor ? subColor : 0}
+						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 w-full 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 w-full mt-auto">
-						<input type="checkbox" id="subcolor" className="checkbox" checked={isFlipped} onChange={(e) => setIsFlipped(e.target.checked)} />
+						<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>

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

@@ -10,8 +10,8 @@ interface Props {
 const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
 
 export default function HeadTab({ instructions }: Props) {
-	const [color, setColor] = useState(108);
-	const [type, setType] = useState(0);
+	const [color, setColor] = useState(109);
+	const [type, setType] = useState(1);
 
 	return (
 		<div className="relative grow p-3 pb-0!">

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

@@ -9,8 +9,9 @@ interface Props {
 }
 
 export default function LipsTab({ instructions }: Props) {
-	const [type, setType] = useState(0);
+	const [type, setType] = useState(1);
 	const [color, setColor] = useState(0);
+	const [hasLipstick, setHasLipstick] = useState(false);
 
 	return (
 		<div className="relative grow p-3 pb-0!">
@@ -22,7 +23,7 @@ export default function LipsTab({ instructions }: Props) {
 
 					<div className="flex justify-center h-74 mt-auto">
 						<TypeSelector
-							length={35}
+							length={53}
 							type={type}
 							setType={(i) => {
 								setType(i);
@@ -41,6 +42,22 @@ export default function LipsTab({ instructions }: Props) {
 						}}
 					/>
 					<NumberInputs target={instructions.current.lips} />
+
+					<div className="flex gap-1.5 items-center w-full mt-auto">
+						<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>
 			</div>
 		</div>

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

@@ -93,10 +93,11 @@ export default function HeadTab({ instructions }: Props) {
 									<DatingPreferencesViewer
 										data={datingPreferences}
 										onChecked={(e, gender) => {
-											setDatingPreferences((prev) =>
-												e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender),
-											);
-											instructions.current.datingPreferences = datingPreferences;
+											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>
@@ -132,7 +133,11 @@ export default function HeadTab({ instructions }: Props) {
 						<PersonalityViewer
 							data={personality}
 							onClick={(key, i) => {
-								setPersonality((p) => ({ ...p, [key]: i }));
+								setPersonality((p) => {
+									const updated = { ...p, [key]: i };
+									instructions.current.personality = updated;
+									return updated;
+								});
 								instructions.current.personality = personality;
 							}}
 						/>

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

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function NoseTab({ instructions }: Props) {
-	const [type, setType] = useState(0);
+	const [type, setType] = useState(5);
 
 	return (
 		<div className="relative grow p-3 pb-0!">
@@ -20,7 +20,7 @@ export default function NoseTab({ instructions }: Props) {
 
 					<div className="flex justify-center h-74 mt-auto">
 						<TypeSelector
-							length={35}
+							length={32}
 							type={type}
 							setType={(i) => {
 								setType(i);

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

@@ -8,26 +8,26 @@ interface Props {
 	instructions: React.RefObject<SwitchMiiInstructions>;
 }
 
-const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number; colorsDisabled?: number[] }[] = [
-	{ name: "wrinkles1", length: 50 },
-	{ name: "wrinkles2", length: 40 },
-	{ name: "beard", length: 20 },
-	{ name: "moustache", length: 10 },
-	{ name: "goatee", length: 5 },
-	{ name: "mole", length: 15 },
-	{ name: "eyeShadow", length: 3 },
-	{ name: "blush", length: 8, colorsDisabled: [6] },
+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 [types, setTypes] = useState<number[]>(Array(TABS.length).fill(0));
 	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
 
 	const currentTab = TABS[tab];
-	const isColorPickerDisabled = currentTab.colorsDisabled ? currentTab.colorsDisabled.includes(types[tab]) : false;
 
 	const setType = (value: number) => {
 		setTypes((prev) => {
@@ -73,13 +73,31 @@ export default function OtherTab({ instructions }: Props) {
 					</div>
 
 					<div className="flex justify-center h-74 mt-auto">
-						<TypeSelector hasNoneOption length={currentTab.length} type={types[tab]} setType={setType} />
+						<TypeSelector length={currentTab.length} type={types[tab]} setType={setType} />
 					</div>
 				</div>
 
 				<div className="shrink-0 w-21 pb-3 flex flex-col items-center">
-					<ColorPicker disabled={isColorPickerDisabled} color={colors[tab]} setColor={setColor} />
+					<ColorPicker color={colors[tab]} setColor={setColor} />
 					<NumberInputs target={instructions.current.other[currentTab.name]} />
+
+					{tab === 3 && (
+						<div className="flex gap-1.5 items-center w-full mt-auto">
+							<input
+								type="checkbox"
+								id="subcolor"
+								className="checkbox"
+								checked={isFlipped}
+								onChange={(e) => {
+									setIsFlipped(e.target.checked);
+									instructions.current.other.moustache.isFlipped = e.target.checked;
+								}}
+							/>
+							<label htmlFor="subcolor" className="text-xs">
+								Flip
+							</label>
+						</div>
+					)}
 				</div>
 			</div>
 		</div>

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

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

src/components/tutorial/index.tsx

@@ -143,7 +143,7 @@ export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
 															alt="tutorial thumbnail"
 															width={128}
 															height={128}
-															className="rounded-lg border-2 border-zinc-300"
+															className="rounded-lg border-2 border-zinc-300 object-cover"
 														/>
 														<p className="mt-2">{tutorial.title}</p>
 														{/* Set opacity to 0 to keep height the same with other tutorials */}

src/components/tutorial/scan.tsx

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

src/components/tutorial/submit.tsx

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

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function SwitchAddMiiTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Press X to open the menu, then select 'Add a Mii'",
+										imageSrc: "/tutorial/switch/step1.jpg",
+									},
+									{
+										text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female)",
+										imageSrc: "/tutorial/switch/step2.jpg",
+									},
+									{
+										text: "3. Follow all instructions (not all instructions will be there, check next slide for more)",
+										imageSrc: "/tutorial/switch/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-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/switch/step1.png",
-									},
-									{
-										text: "2. Go into 'QR Code'",
-										imageSrc: "/tutorial/switch/adding-mii/step2.png",
-									},
-									{
-										text: "3. Press 'Scan QR Code'",
-										imageSrc: "/tutorial/switch/adding-mii/step3.png",
-									},
-									{
-										text: "4. Click on the QR code below the Mii's image",
-										imageSrc: "/tutorial/switch/adding-mii/step4.png",
-									},
-									{
-										text: "5. Scan with your 3DS",
-										imageSrc: "/tutorial/switch/adding-mii/step5.png",
-									},
-									{ type: "finish" },
-								],
-							},
-						]}
-						isOpen={isOpen}
-						setIsOpen={setIsOpen}
-					/>,
-					document.body
-				)}
-		</>
-	);
-}

src/components/tutorial/switch-submit.tsx

@@ -18,32 +18,27 @@ export default function SubmitTutorialButton() {
 					<Tutorial
 						tutorials={[
 							{
-								title: "Create QR Code",
-								thumbnail: "/tutorial/switch/create-qr-code/thumbnail.png",
+								title: "Mii Instructions",
 								steps: [
 									{
-										text: "1. Enter the town hall",
-										imageSrc: "/tutorial/switch/step1.png",
+										text: "1. Press X to open the menu, then select 'Add a Mii' (or 'Residents' if you're submitting an existing Mii)",
+										imageSrc: "/tutorial/switch/step1.jpg",
 									},
 									{
-										text: "2. Go into 'QR Code'",
-										imageSrc: "/tutorial/switch/create-qr-code/step2.png",
+										text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female, it's fine if you change all defaults)",
+										imageSrc: "/tutorial/switch/step2.jpg",
 									},
 									{
-										text: "3. Press 'Create QR Code'",
-										imageSrc: "/tutorial/switch/create-qr-code/step3.png",
+										text: "3. Customize your Mii to your liking",
+										imageSrc: "/tutorial/switch/step3.jpg",
 									},
 									{
-										text: "4. Select and press 'OK' on the Mii you wish to submit",
-										imageSrc: "/tutorial/switch/create-qr-code/step4.png",
+										text: "4. All instructions are optional but if you want to add height, distance, etc. the value will be relative to how many times you clicked the button - positive for up/left, negative for down/right",
+										imageSrc: "/tutorial/switch/step4.jpg",
 									},
 									{
-										text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
-										imageSrc: "/tutorial/switch/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/switch/create-qr-code/step6.png",
+										text: "5. Upload instructions, then screenshot the Mii for the portrait (feel free to crop it)",
+										imageSrc: "/tutorial/switch/step5.jpg",
 									},
 									{ type: "finish" },
 								],

src/components/username-form.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { redirect } from "next/navigation";
-import { usernameSchema } from "@/lib/schemas";
-import SubmitButton from "./submit-button";
-
-export default function UsernameForm() {
-	const [username, setUsername] = useState("");
-	const [error, setError] = useState<string | undefined>(undefined);
-
-	const handleSubmit = async () => {
-		const parsed = usernameSchema.safeParse(username);
-		if (!parsed.success) setError(parsed.error.issues[0].message);
-
-		const response = await fetch("/api/auth/username", {
-			method: "PATCH",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ username }),
-		});
-
-		if (!response.ok) {
-			const { error } = await response.json();
-			setError(error);
-			return;
-		}
-
-		redirect("/");
-	};
-
-	return (
-		<form className="flex flex-col items-center">
-			<input
-				type="text"
-				placeholder="Type your username..."
-				value={username}
-				onChange={(e) => setUsername(e.target.value)}
-				required
-				className="pill input w-96 mb-2"
-			/>
-
-			<SubmitButton onClick={handleSubmit} />
-			{error && <p className="text-red-400 font-semibold mt-4">Error: {error}</p>}
-		</form>
-	);
-}

src/lib/auth.ts

@@ -15,7 +15,6 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 		async session({ session, user }) {
 			if (user) {
 				session.user.id = user.id;
-				session.user.username = user.username;
 				session.user.email = user.email;
 			}
 			return session;

src/lib/images.tsx

@@ -130,10 +130,9 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 
 	// Load assets concurrently
 	const [miiImage, qrCodeImage, fonts] = await Promise.all([
-		// Read and convert the .webp images to .png (because satori doesn't support it)
-		fs.readFile(path.join(miiUploadsDirectory, "mii.webp")).then((buffer) =>
+		// Read and convert the images to data URI
+		fs.readFile(path.join(miiUploadsDirectory, "mii.png")).then((buffer) =>
 			sharp(buffer)
-				.png()
 				// extend to fix shadow bug on landscape pictures
 				.extend({
 					left: 16,
@@ -144,9 +143,8 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 				.then((pngBuffer) => `data:image/png;base64,${pngBuffer.toString("base64")}`),
 		),
 		mii.platform === "THREE_DS"
-			? fs.readFile(path.join(miiUploadsDirectory, "qr-code.webp")).then((buffer) =>
+			? fs.readFile(path.join(miiUploadsDirectory, "qr-code.png")).then((buffer) =>
 					sharp(buffer)
-						.png()
 						.toBuffer()
 						.then((pngBuffer) => `data:image/png;base64,${pngBuffer.toString("base64")}`),
 				)
@@ -240,8 +238,6 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 
 	// Store the file
 	try {
-		// I tried using .webp here but the quality looked awful
-		// but it actually might be well-liked due to the hatred of .webp
 		const fileLocation = path.join(miiUploadsDirectory, "metadata.png");
 		await fs.writeFile(fileLocation, buffer);
 	} catch (error) {

src/lib/rate-limit.ts

@@ -102,7 +102,7 @@ export class RateLimit {
 	async handle(): Promise<NextResponse<object | unknown> | undefined> {
 		const session = await auth();
 		const ip = this.request.headers.get("CF-Connecting-IP") || this.request.headers.get("X-Forwarded-For")?.split(",")[0];
-		const identifier = (session ? session.user.id : ip) ?? "anonymous";
+		const identifier = (session ? session.user?.id : ip) ?? "anonymous";
 
 		this.data = await this.check(identifier);
 

src/lib/schemas.ts

@@ -74,43 +74,35 @@ export const searchSchema = z.object({
 	seed: z.coerce.number({ error: "Seed must be a number" }).int({ error: "Seed must be an integer" }).optional(),
 });
 
-// Account Info
-export const usernameSchema = z
+export const userNameSchema = z
 	.string()
 	.trim()
-	.min(3, "Username must be at least 3 characters long")
-	.max(20, "Username cannot be more than 20 characters long")
-	.regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores");
-
-export const displayNameSchema = z
-	.string()
-	.trim()
-	.min(2, { error: "Display name must be at least 2 characters long" })
-	.max(64, { error: "Display name cannot be more than 64 characters long" })
+	.min(2, { error: "Name must be at least 2 characters long" })
+	.max(64, { error: "Name cannot be more than 64 characters long" })
 	.regex(/^[a-zA-Z0-9-_. ']+$/, {
-		error: "Display name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
+		error: "Name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
 	});
 
 const colorSchema = z.number().int().min(0).max(107).optional();
-const geometrySchema = z.number().int().min(-5).max(5).optional();
+const geometrySchema = z.number().int().min(-10).max(10).optional();
 
 export const switchMiiInstructionsSchema = z
 	.object({
-		head: z.object({ type: z.number().int().min(1).max(16).optional(), skinColor: z.number().int().min(0).max(121).optional() }).optional(),
+		head: z.object({ type: z.number().int().min(0).max(15).optional(), skinColor: z.number().int().min(0).max(121).optional() }).optional(),
 		hair: z
 			.object({
-				setType: z.number().int().min(0).max(25).optional(),
-				bangsType: z.number().int().min(0).max(25).optional(),
-				backType: z.number().int().min(0).max(25).optional(),
+				setType: z.number().int().min(0).max(244).optional(),
+				bangsType: z.number().int().min(0).max(82).optional(),
+				backType: z.number().int().min(0).max(110).optional(),
 				color: colorSchema,
 				subColor: colorSchema,
-				style: z.number().int().min(0).max(3).optional(),
+				style: z.number().int().min(1).max(3).optional(),
 				isFlipped: z.boolean().optional(),
 			})
 			.optional(),
 		eyebrows: z
 			.object({
-				type: z.number().int().min(0).max(25).optional(),
+				type: z.number().int().min(0).max(42).optional(),
 				color: colorSchema,
 				height: geometrySchema,
 				distance: geometrySchema,
@@ -121,13 +113,9 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		eyes: z
 			.object({
-				eyesType: z.number().int().min(0).max(25).optional(),
-				eyelashesTop: z.number().int().min(0).max(6).optional(),
-				eyelashesBottom: z.number().int().min(0).max(25).optional(),
-				eyelidTop: z.number().int().min(0).max(2).optional(),
-				eyelidBottom: z.number().int().min(0).max(25).optional(),
-				eyeliner: z.number().int().min(0).max(25).optional(),
-				pupil: z.number().int().min(0).max(9).optional(),
+				main: z
+					.object({
+						type: z.number().int().min(0).max(120).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -136,16 +124,74 @@ export const switchMiiInstructionsSchema = z
 						stretch: geometrySchema,
 					})
 					.optional(),
+				eyelashesTop: z
+					.object({
+						type: z.number().int().min(0).max(5).optional(),
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelashesBottom: z
+					.object({
+						type: z.number().int().min(0).max(1).optional(),
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelidTop: z
+					.object({
+						type: z.number().int().min(0).max(2).optional(),
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyelidBottom: z
+					.object({
+						type: z.number().int().min(0).max(2).optional(),
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+				eyeliner: z
+					.object({
+						type: z.number().int().min(0).max(1).optional(),
+						color: colorSchema,
+					})
+					.optional(),
+				pupil: z
+					.object({
+						type: z.number().int().min(0).max(9).optional(),
+						height: geometrySchema,
+						distance: geometrySchema,
+						rotation: geometrySchema,
+						size: geometrySchema,
+						stretch: geometrySchema,
+					})
+					.optional(),
+			})
+			.optional(),
 		nose: z
 			.object({
-				type: z.number().int().min(0).max(25).optional(),
+				type: z.number().int().min(0).max(31).optional(),
 				height: geometrySchema,
 				size: geometrySchema,
 			})
 			.optional(),
 		lips: z
 			.object({
-				type: z.number().int().min(0).max(25).optional(),
+				type: z.number().int().min(0).max(52).optional(),
 				color: colorSchema,
 				height: geometrySchema,
 				rotation: geometrySchema,
@@ -163,7 +209,7 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		glasses: z
 			.object({
-				type: z.number().int().min(0).max(25).optional(),
+				type: z.number().int().min(0).max(57).optional(),
 				ringColor: colorSchema,
 				shadesColor: colorSchema,
 				height: geometrySchema,
@@ -175,7 +221,7 @@ export const switchMiiInstructionsSchema = z
 			.object({
 				wrinkles1: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(8).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -185,7 +231,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				wrinkles2: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(14).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -195,7 +241,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				beard: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(14).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -205,7 +251,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				moustache: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(15).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -215,7 +261,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				goatee: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(13).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -225,7 +271,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				mole: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(1).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -235,7 +281,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				eyeShadow: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(3).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -245,7 +291,7 @@ export const switchMiiInstructionsSchema = z
 					.optional(),
 				blush: z
 					.object({
-						type: z.number().int().min(0).max(25).optional(),
+						type: z.number().int().min(0).max(7).optional(),
 						color: colorSchema,
 						height: geometrySchema,
 						distance: geometrySchema,
@@ -269,11 +315,11 @@ export const switchMiiInstructionsSchema = z
 			.optional(),
 		personality: z
 			.object({
-				movement: z.number().int().min(1).max(8).optional(),
-				speech: z.number().int().min(1).max(8).optional(),
-				energy: z.number().int().min(1).max(8).optional(),
-				thinking: z.number().int().min(1).max(8).optional(),
-				overall: z.number().int().min(1).max(8).optional(),
+				movement: z.number().int().min(0).max(5).optional(),
+				speech: z.number().int().min(0).max(5).optional(),
+				energy: z.number().int().min(0).max(5).optional(),
+				thinking: z.number().int().min(0).max(5).optional(),
+				overall: z.number().int().min(0).max(5).optional(),
 			})
 			.optional(),
 	})

src/types.d.ts

@@ -1,167 +1,185 @@
 import { MiiGender, Prisma } from "@prisma/client";
 import { DefaultSession } from "next-auth";
 
-declare module "next-auth" {
-	interface Session {
-		user: {
-			username?: string;
-		} & DefaultSession["user"];
-	}
-
-	interface User {
-		username?: string;
-	}
-}
-
-// All color properties are assumed to be the same 108 colors
+// Some types have different options disabled, we're ignoring them for now
 interface SwitchMiiInstructions {
 	head: {
-		type: number; // 16 types
-		skinColor: number; // additional 14 are not in color menu
+		type: number | null; // 16 types, default is 2
+		skinColor: number | null; // Additional 14 are not in color menu, default is 2
 	};
 	hair: {
-		setType: number; // at least 25
-		bangsType: number; // at least 25
-		backType: number; // at least 25
-		color: number;
-		subColor: number;
-		style: number; // is this different for each hair?
-		isFlipped: boolean; // is this different for bangs/back?
+		setType: number | null; // 245 types, default is 43
+		bangsType: number | null; // 83 types, default is none, if a set is selected, set bangs and back to none and vice-versa
+		backType: number | null; // 111 types, default is none, same here (set related)
+		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: {
-		type: number; // 0 is None, at least 25 (including None)
-		color: number;
-		height: number;
-		distance: number;
-		rotation: number;
-		size: number;
-		stretch: number;
+		type: number | null; // 1 is None, 43 types, default is 28
+		color: number | null;
+		height: number | null;
+		distance: number | null;
+		rotation: number | null;
+		size: number | null;
+		stretch: number | null;
 	};
 	eyes: {
-		eyesType: number; // At least 25
-		eyelashesTop: number; // 6 types
-		eyelashesBottom: number; // unknown
-		eyelidTop: number; // 0 is None, 2 additional types
-		eyelidBottom: number; // unknown
-		eyeliner: number; // unknown
-		pupil: number; // 0 is default, 9 additional types
-		color: number; // is this same as hair?
-		height: number;
-		distance: number;
-		rotation: number;
-		size: number;
-		stretch: number;
+		main: {
+			type: number | null; // 1 is None, 121 types default is 6
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelashesTop: {
+			type: number | null; // 6 types, default is 1
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelashesBottom: {
+			type: number | null; // 2 types, default is 1
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelidTop: {
+			type: number | null; // 3 types, default is 1
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyelidBottom: {
+			type: number | null; // 3 types, default is 1
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
+		eyeliner: {
+			type: number | null; // 2 types, default is 1
+			color: number | null;
+		};
+		pupil: {
+			type: number | null; // 10 types, default is 1
+			height: number | null;
+			distance: number | null;
+			rotation: number | null;
+			size: number | null;
+			stretch: number | null;
+		};
 	};
 	nose: {
-		type: number; // 0 is None, at least 24 additional
-		height: number;
-		size: number;
+		type: number | null; // 1 is None, 32 types, default is 6
+		height: number | null;
+		size: number | null;
 	};
 	lips: {
-		type: number; // 0 is None, at least 24 additional
-		color: number; // is this same as hair?
-		height: number;
-		rotation: number;
-		size: number;
-		stretch: number;
-		hasLipstick: boolean; // is this what it's called?
+		type: number | null; // 1 is None, 53 types, default is 2
+		color: number | null;
+		height: number | null;
+		rotation: number | null;
+		size: number | null;
+		stretch: number | null;
+		hasLipstick: boolean;
 	};
 	ears: {
-		type: number; // 0 is Default, 4 additional
-		height: number;
-		size: number;
+		type: number | null; // 5 types, default is 1
+		height: number | null; // Does not work for default
+		size: number | null; // Does not work for default
 	};
 	glasses: {
-		type: number; // NOTE: THERE IS A GAP!!! 0 is None, at least 29 additional
-		ringColor: number; // i'm assuming based off icon
-		shadesColor: number; // i'm assuming based off icon
-		height: number;
-		size: number;
-		stretch: number;
+		type: number | null; // NOTE: THERE IS A GAP AT 40!!! 1 is None, 58 types, default is 1
+		ringColor: number | null;
+		shadesColor: number | null; // Only works after gap
+		height: number | null;
+		size: number | null;
+		stretch: number | null;
 	};
 	other: {
 		// names were assumed
 		wrinkles1: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 9 types, default is 1
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
 		};
 		wrinkles2: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 15 types, default is 1
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
 		};
 		beard: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 15 types, default is 1
+			color: number | null;
 		};
 		moustache: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 16 types, default is 1
+			color: number | null; // is this same as hair?
+			height: number | null;
+			isFlipped: boolean;
+			size: number | null;
+			stretch: number | null;
 		};
 		goatee: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 14 types, default is 1
+			color: number | null;
 		};
 		mole: {
-			type: number; // 0 is None, at least BLANK additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 2 types, default is 1
+			color: number | null; // is this same as hair?
+			height: number | null;
+			distance: number | null;
+			size: number | null;
 		};
 		eyeShadow: {
-			type: number; // 0 is None, at least 3 additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 4 types, default is 1
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
 		};
 		blush: {
-			type: number; // 0 is None, at least 7 additional
-			color: number; // is this same as hair?
-			height: number;
-			distance: number;
-			size: number;
-			stretch: number;
+			type: number | null; // 8 types, default is 1
+			color: number | null;
+			height: number | null;
+			distance: number | null;
+			size: number | null;
+			stretch: number | null;
 		};
 	};
 	// makeup, use video?
-	height: number;
-	weight: number;
+	height: number | null;
+	weight: number | null;
 	datingPreferences: MiiGender[];
 	voice: {
-		speed: number;
-		pitch: number;
-		depth: number;
-		delivery: number;
-		tone: number; // 1 to 6
+		speed: number | null;
+		pitch: number | null;
+		depth: number | null;
+		delivery: number | null;
+		tone: number | null; // 1 to 6
 	};
 	personality: {
-		movement: number; // 8 levels, slow to quick
-		speech: number; // 8 levels, polite to honest
-		energy: number; // 8 levels, flat to varied
-		thinking: number; // 8 levels, serious to chill
-		overall: number; // 8 levels, normal to quirky
+		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
 	};
 }