mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-03-28 11:13:16 +00:00
feat: fake mii editor
This commit is contained in:
parent
d45eb07879
commit
e31141ea39
33 changed files with 1972 additions and 207 deletions
|
|
@ -0,0 +1,2 @@
|
|||
-- AlterTable
|
||||
ALTER TABLE "miis" ADD COLUMN "instructions" JSONB;
|
||||
|
|
@ -78,6 +78,7 @@ model Mii {
|
|||
description String? @db.VarChar(256)
|
||||
platform MiiPlatform @default(THREE_DS)
|
||||
|
||||
instructions Json?
|
||||
firstName String?
|
||||
lastName String?
|
||||
gender MiiGender?
|
||||
|
|
|
|||
|
|
@ -12,13 +12,14 @@ import { MiiGender, MiiPlatform } from "@prisma/client";
|
|||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
|
||||
import { generateMetadataImage, validateImage } from "@/lib/images";
|
||||
import { convertQrCode } from "@/lib/qr-codes";
|
||||
import Mii from "@/lib/mii.js/mii";
|
||||
import { TomodachiLifeMii } from "@/lib/tomodachi-life-mii";
|
||||
import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
|
||||
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
@ -32,11 +33,15 @@ const submitSchema = z
|
|||
// Switch
|
||||
gender: z.enum(MiiGender).default("MALE"),
|
||||
miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
instructions: switchMiiInstructionsSchema,
|
||||
|
||||
// QR code
|
||||
qrBytesRaw: z.array(z.number(), { error: "A QR code is required" }).length(372, {
|
||||
qrBytesRaw: z
|
||||
.array(z.number(), { error: "A QR code is required" })
|
||||
.length(372, {
|
||||
error: "QR code size is not a valid Tomodachi Life QR code",
|
||||
}),
|
||||
})
|
||||
.nullish(),
|
||||
|
||||
// Custom images
|
||||
image1: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
|
|
@ -53,8 +58,8 @@ const submitSchema = z
|
|||
return true;
|
||||
},
|
||||
{
|
||||
message: "Gender and Mii portrait image are required for Switch platform",
|
||||
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;
|
||||
}
|
||||
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
// Recurse into nested objects
|
||||
if (typeof value === "object") {
|
||||
minimize(value as Partial<SwitchMiiInstructions>);
|
||||
|
||||
if (Object.keys(value).length === 0) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
minifiedInstructions = minimize(instructions as SwitchMiiInstructions);
|
||||
}
|
||||
|
||||
const qrBytes = new Uint8Array(qrBytesRaw ?? []);
|
||||
|
||||
// Convert QR code to JS (3DS)
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii } | undefined;
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii } | undefined;
|
||||
if (platform === "THREE_DS") {
|
||||
try {
|
||||
conversion = convertQrCode(qrBytes);
|
||||
|
|
@ -166,13 +211,16 @@ export async function POST(request: NextRequest) {
|
|||
gender: gender ?? "MALE",
|
||||
|
||||
// Automatically detect certain information if on 3DS
|
||||
...(platform === "THREE_DS" &&
|
||||
conversion && {
|
||||
...(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,6 +260,7 @@ export async function POST(request: NextRequest) {
|
|||
return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait" }, 500);
|
||||
}
|
||||
|
||||
if (platform === "THREE_DS") {
|
||||
try {
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
|
|
@ -237,6 +286,7 @@ export async function POST(request: NextRequest) {
|
|||
Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "file-processing" } });
|
||||
return rateLimit.sendResponse({ error: "Failed to process and store Mii files" }, 500);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await generateMetadataImage(miiRecord, session.user.name!);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,6 +132,7 @@ export default async function MiiPage({ params }: Props) {
|
|||
/>
|
||||
</div>
|
||||
{/* QR Code */}
|
||||
{mii.platform === "THREE_DS" && (
|
||||
<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
|
||||
<ImageViewer
|
||||
src={`/mii/${mii.id}/image?type=qr-code`}
|
||||
|
|
@ -141,6 +142,7 @@ export default async function MiiPage({ params }: Props) {
|
|||
className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<hr className="w-full border-t-2 border-t-amber-400" />
|
||||
|
||||
{/* Mii Info */}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ export default function Carousel({ images, className }: Props) {
|
|||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.reInit();
|
||||
setScrollSnaps(emblaApi.scrollSnapList());
|
||||
setSelectedIndex(0);
|
||||
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
|
||||
}, [images, emblaApi]);
|
||||
|
||||
|
|
@ -74,6 +76,8 @@ export default function Carousel({ images, className }: Props) {
|
|||
>
|
||||
<Icon icon="ic:round-chevron-right" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex justify-center p-2 gap-2 absolute right-0">
|
||||
{scrollSnaps.map((_, index) => (
|
||||
|
|
@ -86,8 +90,6 @@ export default function Carousel({ images, className }: Props) {
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`),
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { FileWithPath } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
|
|
@ -12,15 +12,17 @@ import { MiiGender, MiiPlatform } from "@prisma/client";
|
|||
import { nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { convertQrCode } from "@/lib/qr-codes";
|
||||
import Mii from "@/lib/mii.js/mii";
|
||||
import { TomodachiLifeMii } from "@/lib/tomodachi-life-mii";
|
||||
import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
|
||||
import TagSelector from "../tag-selector";
|
||||
import ImageList from "./image-list";
|
||||
import PortraitUpload from "./portrait-upload";
|
||||
import QrUpload from "./qr-upload";
|
||||
import QrScanner from "./qr-scanner";
|
||||
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
|
||||
import MiiEditor from "./mii-editor";
|
||||
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
import LikeButton from "../like-button";
|
||||
import Carousel from "../carousel";
|
||||
import SubmitButton from "../submit-button";
|
||||
|
|
@ -48,6 +50,53 @@ export default function SubmitForm() {
|
|||
|
||||
const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
|
||||
const [gender, setGender] = useState<MiiGender>("MALE");
|
||||
const instructions = useRef<SwitchMiiInstructions>({
|
||||
head: { type: 0, skinColor: 0 },
|
||||
hair: {
|
||||
setType: 0,
|
||||
bangsType: 0,
|
||||
backType: 0,
|
||||
color: 0,
|
||||
subColor: 0,
|
||||
style: 0,
|
||||
isFlipped: false,
|
||||
},
|
||||
eyebrows: { type: 0, color: 0, height: 0, distance: 0, rotation: 0, size: 0, stretch: 0 },
|
||||
eyes: {
|
||||
eyesType: 0,
|
||||
eyelashesTop: 0,
|
||||
eyelashesBottom: 0,
|
||||
eyelidTop: 0,
|
||||
eyelidBottom: 0,
|
||||
eyeliner: 0,
|
||||
pupil: 0,
|
||||
color: 0,
|
||||
height: 0,
|
||||
distance: 0,
|
||||
rotation: 0,
|
||||
size: 0,
|
||||
stretch: 0,
|
||||
},
|
||||
nose: { type: 0, height: 0, size: 0 },
|
||||
lips: { type: 0, color: 0, height: 0, rotation: 0, size: 0, stretch: 0, hasLipstick: false },
|
||||
ears: { type: 0, height: 0, size: 0 },
|
||||
glasses: { type: 0, ringColor: 0, shadesColor: 0, height: 0, size: 0, stretch: 0 },
|
||||
other: {
|
||||
wrinkles1: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
wrinkles2: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
beard: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
moustache: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
goatee: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
mole: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
eyeShadow: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
blush: { type: 0, color: 0, height: 0, distance: 0, size: 0, stretch: 0 },
|
||||
},
|
||||
height: 0,
|
||||
weight: 0,
|
||||
datingPreferences: [],
|
||||
voice: { speed: 0, pitch: 0, depth: 0, delivery: 0, tone: 0 },
|
||||
personality: { movement: 0, speech: 0, energy: 0, thinking: 0, overall: 0 },
|
||||
});
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
|
|
@ -70,13 +119,14 @@ export default function SubmitForm() {
|
|||
formData.append("name", name);
|
||||
formData.append("tags", JSON.stringify(tags));
|
||||
formData.append("description", description);
|
||||
formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
|
||||
files.forEach((file, index) => {
|
||||
// image1, image2, etc.
|
||||
formData.append(`image${index + 1}`, file);
|
||||
});
|
||||
|
||||
if (platform === "SWITCH") {
|
||||
if (platform === "THREE_DS") {
|
||||
formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
|
||||
} else if (platform === "SWITCH") {
|
||||
const response = await fetch(miiPortraitUri!);
|
||||
|
||||
if (!response.ok) {
|
||||
|
|
@ -92,6 +142,7 @@ export default function SubmitForm() {
|
|||
|
||||
formData.append("gender", gender);
|
||||
formData.append("miiPortraitImage", blob);
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
}
|
||||
|
||||
const response = await fetch("/api/submit", {
|
||||
|
|
@ -109,7 +160,7 @@ export default function SubmitForm() {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (qrBytesRaw.length == 0) return;
|
||||
if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
|
||||
const preview = async () => {
|
||||
|
|
@ -123,7 +174,7 @@ export default function SubmitForm() {
|
|||
|
||||
// Convert QR code to JS (3DS)
|
||||
if (platform === "THREE_DS") {
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
|
||||
try {
|
||||
conversion = convertQrCode(qrBytes);
|
||||
setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
|
||||
|
|
@ -153,7 +204,13 @@ export default function SubmitForm() {
|
|||
<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
|
||||
<Carousel images={[miiPortraitUri ?? "/loading.svg", generatedQrCodeUri ?? "/loading.svg", ...files.map((file) => URL.createObjectURL(file))]} />
|
||||
<Carousel
|
||||
images={[
|
||||
miiPortraitUri ?? "/loading.svg",
|
||||
...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : []),
|
||||
...files.map((file) => URL.createObjectURL(file)),
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<h1 className="font-bold text-2xl line-clamp-1" title={name}>
|
||||
|
|
@ -234,7 +291,7 @@ export default function SubmitForm() {
|
|||
Name
|
||||
</label>
|
||||
<input
|
||||
name="name"
|
||||
id="name"
|
||||
type="text"
|
||||
className="pill input w-full col-span-2"
|
||||
minLength={2}
|
||||
|
|
@ -258,7 +315,7 @@ export default function SubmitForm() {
|
|||
Description
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
id="description"
|
||||
rows={5}
|
||||
maxLength={256}
|
||||
placeholder="(optional) Type a description..."
|
||||
|
|
@ -269,8 +326,7 @@ export default function SubmitForm() {
|
|||
</div>
|
||||
|
||||
{/* Gender (switch only) */}
|
||||
{platform === "SWITCH" && (
|
||||
<div className="w-full grid grid-cols-3 items-start">
|
||||
<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<label htmlFor="gender" className="font-semibold py-2">
|
||||
Gender
|
||||
</label>
|
||||
|
|
@ -312,10 +368,9 @@ export default function SubmitForm() {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{platform === "SWITCH" && (
|
||||
<>
|
||||
{/* (Switch Only) Mii Portrait */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
|
|
@ -326,10 +381,10 @@ export default function SubmitForm() {
|
|||
<div className="flex flex-col items-center gap-2">
|
||||
<PortraitUpload setImage={setMiiPortraitUri} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* QR code selector */}
|
||||
{/* (3DS only) QR code scanning */}
|
||||
<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>QR Code</span>
|
||||
|
|
@ -346,15 +401,25 @@ export default function SubmitForm() {
|
|||
</button>
|
||||
|
||||
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
{platform === "THREE_DS" ? (
|
||||
<>
|
||||
<ThreeDsSubmitTutorialButton />
|
||||
|
||||
<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
|
||||
</>
|
||||
) : (
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* (Switch only) Mii instructions */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Instructions</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<MiiEditor instructions={instructions} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
)}
|
||||
<span className="text-xs text-zinc-400">Instructions are recommended, but not required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom images selector */}
|
||||
|
|
|
|||
247
src/components/submit-form/mii-editor/color-picker.tsx
Normal file
247
src/components/submit-form/mii-editor/color-picker.tsx
Normal 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
82
src/components/submit-form/mii-editor/index.tsx
Normal 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
122
src/components/submit-form/mii-editor/number-inputs.tsx
Normal 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
39
src/components/submit-form/mii-editor/tabs/ears.tsx
Normal 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
49
src/components/submit-form/mii-editor/tabs/eyebrows.tsx
Normal 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
88
src/components/submit-form/mii-editor/tabs/eyes.tsx
Normal 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
56
src/components/submit-form/mii-editor/tabs/glasses.tsx
Normal 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
125
src/components/submit-form/mii-editor/tabs/hair.tsx
Normal 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
60
src/components/submit-form/mii-editor/tabs/head.tsx
Normal 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
48
src/components/submit-form/mii-editor/tabs/lips.tsx
Normal 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
246
src/components/submit-form/mii-editor/tabs/misc.tsx
Normal 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
39
src/components/submit-form/mii-editor/tabs/nose.tsx
Normal 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
87
src/components/submit-form/mii-editor/tabs/other.tsx
Normal 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
23
src/components/submit-form/mii-editor/type-selector.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
155
src/types.d.ts
vendored
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue