trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-03-28 19:23:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: fake mii editor

Browse source
This commit is contained in:
trafficlunar 2026-02-27 23:11:38 +00:00
parent d45eb07879
commit e31141ea39
33 changed files with 1972 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
prisma/migrations/20260224165818_instructions_json/migration.sql Normal file
View file

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

1
prisma/schema.prisma
View file

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

128
src/app/api/submit/route.ts
View file

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

33
src/app/globals.css
View file

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

20
src/app/mii/[id]/page.tsx
View file

@ -132,15 +132,17 @@ export default async function MiiPage({ params }: Props) {
/>
</div>
{/* QR Code */}
<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
<ImageViewer
src={`/mii/${mii.id}/image?type=qr-code`}
alt="mii qr code"
width={128}
height={128}
className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
/>
</div>
{mii.platform === "THREE_DS" && (
<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
<ImageViewer
src={`/mii/${mii.id}/image?type=qr-code`}
alt="mii qr code"
width={128}
height={128}
className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
/>
</div>
)}
<hr className="w-full border-t-2 border-t-amber-400" />
{/* Mii Info */}

2
src/components/admin/control-center.tsx
View file

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

2
src/components/admin/return-to-island.tsx
View file

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

26
src/components/carousel.tsx
View file

@ -19,7 +19,9 @@ export default function Carousel({ images, className }: Props) {
useEffect(() => {
if (!emblaApi) return;
emblaApi.reInit();
setScrollSnaps(emblaApi.scrollSnapList());
setSelectedIndex(0);
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [images, emblaApi]);
@ -74,20 +76,20 @@ export default function Carousel({ images, className }: Props) {
>
<Icon icon="ic:round-chevron-right" />
</button>
<div className="flex justify-center p-2 gap-2 absolute right-0">
{scrollSnaps.map((_, index) => (
<button
key={index}
type="button"
aria-label={`Go to ${index} in Carousel`}
onClick={() => emblaApi?.scrollTo(index)}
className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/>
))}
</div>
</>
)}
<div className="flex justify-center p-2 gap-2 absolute right-0">
{scrollSnaps.map((_, index) => (
<button
key={index}
type="button"
aria-label={`Go to ${index} in Carousel`}
onClick={() => emblaApi?.scrollTo(index)}
className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/>
))}
</div>
</div>
);
}

2
src/components/mii-list/index.tsx
View file

@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
<Carousel
images={[
`/mii/${mii.id}/image?type=mii`,
`/mii/${mii.id}/image?type=qr-code`,
...(platform === "THREE_DS" ? `/mii/${mii.id}/image?type=qr-code` : ""),
...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
]}
/>

2
src/components/mii-list/other-filters.tsx
View file

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

2
src/components/profile-settings/delete-account.tsx
View file

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

2
src/components/submit-form/edit-form.tsx
View file

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

239
src/components/submit-form/index.tsx
View file

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

247
src/components/submit-form/mii-editor/color-picker.tsx Normal file
View file

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

82
src/components/submit-form/mii-editor/index.tsx Normal file
View file

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

122
src/components/submit-form/mii-editor/number-inputs.tsx Normal file
View file

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

39
src/components/submit-form/mii-editor/tabs/ears.tsx Normal file
View file

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

49
src/components/submit-form/mii-editor/tabs/eyebrows.tsx Normal file
View file

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

88
src/components/submit-form/mii-editor/tabs/eyes.tsx Normal file
View file

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

56
src/components/submit-form/mii-editor/tabs/glasses.tsx Normal file
View file

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

125
src/components/submit-form/mii-editor/tabs/hair.tsx Normal file
View file

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

60
src/components/submit-form/mii-editor/tabs/head.tsx Normal file
View file

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

48
src/components/submit-form/mii-editor/tabs/lips.tsx Normal file
View file

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

246
src/components/submit-form/mii-editor/tabs/misc.tsx Normal file
View file

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

39
src/components/submit-form/mii-editor/tabs/nose.tsx Normal file
View file

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

87
src/components/submit-form/mii-editor/tabs/other.tsx Normal file
View file

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

23
src/components/submit-form/mii-editor/type-selector.tsx Normal file
View file

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

46
src/components/tutorial/switch-submit.tsx
View file

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

4
src/lib/images.tsx
View file

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

6
src/lib/qr-codes.ts
View file

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

188
src/lib/schemas.ts
View file

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

8
src/lib/tomodachi-life-mii.ts → src/lib/three-ds-tomodachi-life-mii.ts
View file

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

155
src/types.d.ts vendored
View file

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