mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-03-28 19:23:15 +00:00
Compare commits
No commits in common. "a6b444fcea0ae9c378a229304930708f07f855ab" and "a5e5d0557e4bb0f55073f7068f8643bd417cdc47" have entirely different histories.
a6b444fcea
...
a5e5d0557e
32 changed files with 247 additions and 623 deletions
|
|
@ -30,7 +30,6 @@
|
|||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-dropzone": "^15.0.0",
|
||||
"react-image-crop": "^11.0.10",
|
||||
"redis": "^5.11.0",
|
||||
"satori": "^0.25.0",
|
||||
"seedrandom": "^3.0.5",
|
||||
|
|
|
|||
|
|
@ -65,9 +65,6 @@ importers:
|
|||
react-dropzone:
|
||||
specifier: ^15.0.0
|
||||
version: 15.0.0(react@19.2.4)
|
||||
react-image-crop:
|
||||
specifier: ^11.0.10
|
||||
version: 11.0.10(react@19.2.4)
|
||||
redis:
|
||||
specifier: ^5.11.0
|
||||
version: 5.11.0
|
||||
|
|
@ -2937,11 +2934,6 @@ packages:
|
|||
peerDependencies:
|
||||
react: '>= 16.8 || 18.0.0'
|
||||
|
||||
react-image-crop@11.0.10:
|
||||
resolution: {integrity: sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.13.1'
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
|
|
@ -5302,8 +5294,8 @@ snapshots:
|
|||
'@next/eslint-plugin-next': 16.2.0
|
||||
eslint: 10.0.3(jiti@2.6.1)
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-jsx-a11y: 6.10.2(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-react: 7.37.5(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-react-hooks: 7.0.1(eslint@10.0.3(jiti@2.6.1))
|
||||
|
|
@ -5325,7 +5317,7 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
|
||||
eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1)):
|
||||
dependencies:
|
||||
'@nolyfill/is-core-module': 1.0.39
|
||||
debug: 4.4.3
|
||||
|
|
@ -5336,22 +5328,22 @@ snapshots:
|
|||
tinyglobby: 0.2.15
|
||||
unrs-resolver: 1.11.1
|
||||
optionalDependencies:
|
||||
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
|
||||
eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1)):
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
optionalDependencies:
|
||||
'@typescript-eslint/parser': 8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3)
|
||||
eslint: 10.0.3(jiti@2.6.1)
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.3(jiti@2.6.1))
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)):
|
||||
eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1)):
|
||||
dependencies:
|
||||
'@rtsao/scc': 1.1.0
|
||||
array-includes: 3.1.9
|
||||
|
|
@ -5362,7 +5354,7 @@ snapshots:
|
|||
doctrine: 2.1.0
|
||||
eslint: 10.0.3(jiti@2.6.1)
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1)))(eslint@10.0.3(jiti@2.6.1))
|
||||
eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.3(jiti@2.6.1))
|
||||
hasown: 2.0.2
|
||||
is-core-module: 2.16.1
|
||||
is-glob: 4.0.3
|
||||
|
|
@ -6297,10 +6289,6 @@ snapshots:
|
|||
prop-types: 15.8.1
|
||||
react: 19.2.4
|
||||
|
||||
react-image-crop@11.0.10(react@19.2.4):
|
||||
dependencies:
|
||||
react: 19.2.4
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-is@18.3.1: {}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB |
|
|
@ -11,11 +11,9 @@ import { profanity } from "@2toad/profanity";
|
|||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { idSchema, nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { idSchema, nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { generateMetadataImage, validateImage } from "@/lib/images";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
import { minifyInstructions } from "@/lib/switch";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
@ -23,7 +21,6 @@ const editSchema = z.object({
|
|||
name: nameSchema.optional(),
|
||||
tags: tagsSchema.optional(),
|
||||
description: z.string().trim().max(256).optional(),
|
||||
instructions: switchMiiInstructionsSchema,
|
||||
image1: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
image2: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
image3: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
|
|
@ -34,7 +31,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
Sentry.setUser({ id: session.user?.id, name: session.user?.name });
|
||||
|
||||
const rateLimit = new RateLimit(request, 3); // no grouped pathname; edit each mii 1 time a minute
|
||||
const rateLimit = new RateLimit(request, 1); // no grouped pathname; edit each mii 1 time a minute
|
||||
const check = await rateLimit.handle();
|
||||
if (check) return check;
|
||||
|
||||
|
|
@ -66,22 +63,17 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
return rateLimit.sendResponse({ error: "Invalid JSON in tags" }, 400);
|
||||
}
|
||||
|
||||
let minifiedInstructions: Partial<SwitchMiiInstructions> | undefined;
|
||||
if (mii.platform === "SWITCH")
|
||||
minifiedInstructions = minifyInstructions(JSON.parse((formData.get("instructions") as string) ?? "{}") as SwitchMiiInstructions);
|
||||
|
||||
const parsed = editSchema.safeParse({
|
||||
name: formData.get("name") ?? undefined,
|
||||
tags: rawTags,
|
||||
description: formData.get("description") ?? undefined,
|
||||
instructions: minifiedInstructions,
|
||||
image1: formData.get("image1"),
|
||||
image2: formData.get("image2"),
|
||||
image3: formData.get("image3"),
|
||||
});
|
||||
|
||||
if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
|
||||
const { name, tags, description, instructions, image1, image2, image3 } = parsed.data;
|
||||
const { name, tags, description, image1, image2, image3 } = parsed.data;
|
||||
|
||||
// Validate image files
|
||||
const images: File[] = [];
|
||||
|
|
@ -99,10 +91,9 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
|
||||
// Edit Mii in database
|
||||
const updateData: Prisma.MiiUpdateInput = {};
|
||||
if (name !== undefined) updateData.name = profanity.censor(name); // Censor potentially inappropriate words
|
||||
if (tags !== undefined) updateData.tags = tags.map((t) => profanity.censor(t));
|
||||
if (name !== undefined) updateData.name = profanity.censor(name); // Censor potential inappropriate words
|
||||
if (tags !== undefined) updateData.tags = tags.map((t) => profanity.censor(t)); // Same here
|
||||
if (description !== undefined) updateData.description = profanity.censor(description);
|
||||
if (instructions !== undefined) updateData.instructions = instructions;
|
||||
if (images.length > 0) updateData.imageCount = images.length;
|
||||
|
||||
if (Object.keys(updateData).length == 0) return rateLimit.sendResponse({ error: "Nothing was changed" }, 400);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import Mii from "@/lib/mii.js/mii";
|
|||
import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
|
||||
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
import { minifyInstructions } from "@/lib/switch";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
@ -34,7 +33,6 @@ const submitSchema = z
|
|||
// Switch
|
||||
gender: z.enum(MiiGender).default("MALE"),
|
||||
miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
instructions: switchMiiInstructionsSchema,
|
||||
|
||||
// QR code
|
||||
|
|
@ -53,15 +51,15 @@ const submitSchema = z
|
|||
// This refine function is probably useless
|
||||
.refine(
|
||||
(data) => {
|
||||
// If platform is Switch, gender, miiPortraitImage, and miiFeaturesImage must be present
|
||||
// If platform is Switch, gender and miiPortraitImage must be present
|
||||
if (data.platform === "SWITCH") {
|
||||
return data.gender !== undefined && data.miiPortraitImage !== undefined;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{
|
||||
message: "Gender, Mii portrait & features image, and instructions are required for Switch platform",
|
||||
path: ["gender", "miiPortraitImage", "miiFeaturesImage", "instructions"],
|
||||
message: "Gender, Mii portrait image, and instructions are required for Switch platform",
|
||||
path: ["gender", "miiPortraitImage", "instructions"],
|
||||
},
|
||||
);
|
||||
|
||||
|
|
@ -95,8 +93,32 @@ export async function POST(request: NextRequest) {
|
|||
|
||||
// Minify instructions to save space and improve user experience
|
||||
let minifiedInstructions: Partial<SwitchMiiInstructions> | undefined;
|
||||
if (formData.get("platform") === "SWITCH")
|
||||
minifiedInstructions = minifyInstructions(JSON.parse((formData.get("instructions") as string) ?? "{}") as SwitchMiiInstructions);
|
||||
if (formData.get("platform") === "SWITCH") {
|
||||
const DEFAULT_ZERO_FIELDS = new Set(["height", "distance", "rotation", "size", "stretch"]);
|
||||
|
||||
function minify(object: Partial<SwitchMiiInstructions>): Partial<SwitchMiiInstructions> {
|
||||
for (const key in object) {
|
||||
const value = object[key as keyof SwitchMiiInstructions];
|
||||
|
||||
if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (typeof value === "object" && !Array.isArray(value)) {
|
||||
minify(value as Partial<SwitchMiiInstructions>);
|
||||
|
||||
if (Object.keys(value).length === 0) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
minifiedInstructions = minify(JSON.parse((formData.get("instructions") as string) ?? "{}") as SwitchMiiInstructions);
|
||||
}
|
||||
|
||||
// Parse and check all submission info
|
||||
const parsed = submitSchema.safeParse({
|
||||
|
|
@ -107,7 +129,6 @@ export async function POST(request: NextRequest) {
|
|||
|
||||
gender: formData.get("gender") ?? undefined, // ZOD MOMENT
|
||||
miiPortraitImage: formData.get("miiPortraitImage"),
|
||||
miiFeaturesImage: formData.get("miiFeaturesImage"),
|
||||
instructions: minifiedInstructions,
|
||||
|
||||
qrBytesRaw: rawQrBytesRaw,
|
||||
|
|
@ -138,7 +159,6 @@ export async function POST(request: NextRequest) {
|
|||
qrBytesRaw,
|
||||
gender,
|
||||
miiPortraitImage,
|
||||
miiFeaturesImage,
|
||||
image1,
|
||||
image2,
|
||||
image3,
|
||||
|
|
@ -163,12 +183,10 @@ export async function POST(request: NextRequest) {
|
|||
}
|
||||
}
|
||||
|
||||
// Check Mii portrait & features image (Switch)
|
||||
// Check Mii portrait image as well (Switch)
|
||||
if (platform === "SWITCH") {
|
||||
const portraitValidation = await validateImage(miiPortraitImage);
|
||||
const featuresValidation = await validateImage(miiFeaturesImage);
|
||||
if (!portraitValidation.valid) return rateLimit.sendResponse({ error: portraitValidation.error }, portraitValidation.status ?? 400);
|
||||
if (!featuresValidation.valid) return rateLimit.sendResponse({ error: featuresValidation.error }, featuresValidation.status ?? 400);
|
||||
const imageValidation = await validateImage(miiPortraitImage);
|
||||
if (!imageValidation.valid) return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
|
||||
}
|
||||
|
||||
const qrBytes = new Uint8Array(qrBytesRaw ?? []);
|
||||
|
|
@ -228,15 +246,8 @@ export async function POST(request: NextRequest) {
|
|||
portraitBuffer = Buffer.from(await studioResponse.arrayBuffer());
|
||||
} else if (platform === "SWITCH") {
|
||||
portraitBuffer = Buffer.from(await miiPortraitImage.arrayBuffer());
|
||||
|
||||
// Save features image
|
||||
const featuresBuffer = Buffer.from(await miiFeaturesImage.arrayBuffer());
|
||||
const pngBuffer = await sharp(featuresBuffer).png({ quality: 85 }).toBuffer();
|
||||
const fileLocation = path.join(miiUploadsDirectory, "features.png");
|
||||
await fs.writeFile(fileLocation, pngBuffer);
|
||||
}
|
||||
|
||||
// Save portrait image
|
||||
if (!portraitBuffer) throw Error("Mii portrait buffer not initialised");
|
||||
const pngBuffer = await sharp(portraitBuffer).png({ quality: 85 }).toBuffer();
|
||||
const fileLocation = path.join(miiUploadsDirectory, "mii.png");
|
||||
|
|
@ -247,9 +258,9 @@ export async function POST(request: NextRequest) {
|
|||
// Clean up if something went wrong
|
||||
await prisma.mii.delete({ where: { id: miiRecord.id } });
|
||||
|
||||
console.error("Failed to download/store Mii portrait/features:", error);
|
||||
console.error("Failed to download/store Mii portrait:", error);
|
||||
Sentry.captureException(error, { extra: { miiId: miiRecord.id, stage: "studio-image-download" } });
|
||||
return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait/features" }, 500);
|
||||
return rateLimit.sendResponse({ error: "Failed to download/store Mii portrait" }, 500);
|
||||
}
|
||||
|
||||
if (platform === "THREE_DS") {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ input[type="range"] {
|
|||
|
||||
/* Track */
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
|
||||
@apply h-2 bg-orange-200 border-2 border-orange-400 rounded-full;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { Lexend } from "next/font/google";
|
|||
import { WebSite, WithContext } from "schema-dts";
|
||||
|
||||
import "./globals.css";
|
||||
import "react-image-crop/dist/ReactCrop.css";
|
||||
|
||||
import Providers from "./provider";
|
||||
import Header from "@/components/header";
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import { prisma } from "@/lib/prisma";
|
|||
|
||||
const searchParamsSchema = z.object({
|
||||
type: z
|
||||
.enum(["mii", "qr-code", "features", "image0", "image1", "image2", "metadata"], {
|
||||
message: "Image type must be either 'mii', 'qr-code', 'features', 'image[number from 0 to 2]' or 'metadata'",
|
||||
.enum(["mii", "qr-code", "image0", "image1", "image2", "metadata"], {
|
||||
message: "Image type must be either 'mii', 'qr-code', 'image[number from 0 to 2]' or 'metadata'",
|
||||
})
|
||||
.default("mii"),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ export default async function MiiPage({ params }: Props) {
|
|||
/>
|
||||
</div>
|
||||
{/* QR Code */}
|
||||
{mii.platform === "THREE_DS" ? (
|
||||
{mii.platform === "THREE_DS" && (
|
||||
<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
|
||||
<ImageViewer
|
||||
src={`/mii/${mii.id}/image?type=qr-code`}
|
||||
|
|
@ -145,14 +145,6 @@ export default async function MiiPage({ params }: Props) {
|
|||
className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ImageViewer
|
||||
src={`/mii/${mii.id}/image?type=features`}
|
||||
alt="mii features"
|
||||
width={300}
|
||||
height={300}
|
||||
className="rounded-lg hover:brightness-90 mb-4 transition-all"
|
||||
/>
|
||||
)}
|
||||
<hr className="w-full border-t-2 border-t-amber-400" />
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
|
|||
|
||||
export default function MiiInstructions({ instructions }: Props) {
|
||||
if (Object.keys(instructions).length === 0) return null;
|
||||
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
|
||||
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, datingPreferences, voice, personality } = instructions;
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
|
||||
|
|
@ -122,15 +122,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
Instructions
|
||||
</h2>
|
||||
|
||||
{head && (
|
||||
<Section name="Head" instructions={head}>
|
||||
{head.skinColor && (
|
||||
<TableCell label="Skin Color">
|
||||
<ColorPosition color={head.skinColor} />
|
||||
</TableCell>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
{head && <Section name="Head" instructions={head}></Section>}
|
||||
{hair && (
|
||||
<Section name="Hair" instructions={hair}>
|
||||
{hair.subColor && (
|
||||
|
|
@ -204,10 +196,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
<label htmlFor="height" className="w-16">
|
||||
Height
|
||||
</label>
|
||||
<div className="relative h-5 flex justify-center items-center">
|
||||
<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
</div>
|
||||
<input id="height" type="range" min={0} max={100} step={1} disabled value={height} />
|
||||
</div>
|
||||
)}
|
||||
{weight && (
|
||||
|
|
@ -215,23 +204,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
<label htmlFor="weight" className="w-16">
|
||||
Weight
|
||||
</label>
|
||||
<div className="relative h-5 flex justify-center items-center">
|
||||
<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{birthday && (
|
||||
<div className="pl-2 not-nth-2:mt-4">
|
||||
<h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
{birthday.day && <TableCell label="Day">{birthday.day}</TableCell>}
|
||||
{birthday.month && <TableCell label="Month">{birthday.month}</TableCell>}
|
||||
{birthday.age && <TableCell label="Age">{birthday.age}</TableCell>}
|
||||
{birthday.dontAge && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>}
|
||||
</tbody>
|
||||
</table>
|
||||
<input id="weight" type="range" min={0} max={100} step={1} disabled value={weight} />
|
||||
</div>
|
||||
)}
|
||||
{datingPreferences && (
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
|
|||
<Carousel
|
||||
images={[
|
||||
`/mii/${mii.id}/image?type=mii`,
|
||||
...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [`/mii/${mii.id}/image?type=features`]),
|
||||
...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
|
||||
...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,26 +15,23 @@ export default function VoiceViewer({ data, onClick, onClickTone }: Props) {
|
|||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
{VOICE_SETTINGS.map((label) => (
|
||||
<div key={label} className="relative flex gap-3">
|
||||
<div key={label} className="flex gap-3">
|
||||
<label htmlFor={label} className="text-sm w-14">
|
||||
{label}
|
||||
</label>
|
||||
<div className="relative h-5 flex justify-center items-center">
|
||||
<input
|
||||
type="range"
|
||||
name={label}
|
||||
className="grow z-10"
|
||||
className="grow"
|
||||
min={0}
|
||||
max={50}
|
||||
max={100}
|
||||
step={1}
|
||||
value={data[label as keyof typeof data] ?? 25}
|
||||
value={data[label as keyof typeof data] ?? 50}
|
||||
disabled={!onClick}
|
||||
onChange={(e) => {
|
||||
if (onClick) onClick(e, label);
|
||||
}}
|
||||
/>
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import ReactCrop, { Crop } from "react-image-crop";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
image: string | undefined;
|
||||
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
}
|
||||
|
||||
export default function CropPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const applyCrop = useCallback(() => {
|
||||
if (!imageRef.current || !canvasRef.current || !crop) return;
|
||||
|
||||
const image = imageRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
|
||||
if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const scaleX = image.naturalWidth / image.width;
|
||||
const scaleY = image.naturalHeight / image.height;
|
||||
|
||||
canvas.width = crop.width * scaleX;
|
||||
canvas.height = crop.height * scaleY;
|
||||
|
||||
ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
|
||||
|
||||
setImage(canvas.toDataURL());
|
||||
close();
|
||||
}, [crop, setImage]);
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Crop Portrait</h2>
|
||||
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full flex justify-center">
|
||||
<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
|
||||
<img ref={imageRef} src={image} />
|
||||
</ReactCrop>
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center gap-2">
|
||||
<button type="button" onClick={close} className="pill button">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" onClick={applyCrop} className="pill button">
|
||||
Crop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,8 +7,6 @@ import { FileWithPath } from "react-dropzone";
|
|||
import { Mii } from "@prisma/client";
|
||||
|
||||
import { nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
import { defaultInstructions, minifyInstructions } from "@/lib/switch";
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
|
||||
import TagSelector from "../tag-selector";
|
||||
import ImageList from "./image-list";
|
||||
|
|
@ -16,8 +14,6 @@ import LikeButton from "../like-button";
|
|||
import Carousel from "../carousel";
|
||||
import SubmitButton from "../submit-button";
|
||||
import Dropzone from "../dropzone";
|
||||
import MiiEditor from "./mii-editor";
|
||||
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
|
||||
interface Props {
|
||||
mii: Mii;
|
||||
|
|
@ -44,8 +40,6 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
const [description, setDescription] = useState(mii.description);
|
||||
const hasFilesChanged = useRef(false);
|
||||
|
||||
const instructions = useRef<SwitchMiiInstructions>({ ...defaultInstructions, ...(mii.instructions as object as Partial<SwitchMiiInstructions>) });
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validate before sending request
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
|
|
@ -64,10 +58,6 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
if (name != mii.name) formData.append("name", name);
|
||||
if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
|
||||
if (description && description != mii.description) formData.append("description", description);
|
||||
console.log(minifyInstructions(structuredClone(instructions.current)));
|
||||
console.log(mii.instructions);
|
||||
if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
|
||||
if (hasFilesChanged.current) {
|
||||
files.forEach((file, index) => {
|
||||
|
|
@ -189,22 +179,8 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Instructions (Switch only) */}
|
||||
{mii.platform === "SWITCH" && (
|
||||
<>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Instructions</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<MiiEditor instructions={instructions} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
<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>Custom images</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
|
|
|
|||
|
|
@ -13,14 +13,13 @@ import { nameSchema, tagsSchema } from "@/lib/schemas";
|
|||
import { convertQrCode } from "@/lib/qr-codes";
|
||||
import Mii from "@/lib/mii.js/mii";
|
||||
import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii";
|
||||
import { defaultInstructions } from "@/lib/switch";
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
|
||||
import TagSelector from "../tag-selector";
|
||||
import ImageList from "./image-list";
|
||||
import SwitchFileUpload from "./switch-file-upload";
|
||||
import PortraitUpload from "./portrait-upload";
|
||||
import QrUpload from "./qr-upload";
|
||||
import Camera from "./camera";
|
||||
import QrScanner from "./qr-scanner";
|
||||
import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
|
||||
import MiiEditor from "./mii-editor";
|
||||
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
|
|
@ -42,7 +41,6 @@ export default function SubmitForm() {
|
|||
|
||||
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
|
||||
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
|
||||
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>();
|
||||
const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
|
|
@ -52,7 +50,45 @@ export default function SubmitForm() {
|
|||
|
||||
const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
|
||||
const [gender, setGender] = useState<MiiGender>("MALE");
|
||||
const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
|
||||
const instructions = useRef<SwitchMiiInstructions>({
|
||||
head: { skinColor: null },
|
||||
hair: {
|
||||
color: null,
|
||||
subColor: null,
|
||||
subColor2: null,
|
||||
style: null,
|
||||
isFlipped: false,
|
||||
},
|
||||
eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyes: {
|
||||
main: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelashesTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelashesBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelidTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelidBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyeliner: { color: null },
|
||||
pupil: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
},
|
||||
nose: { height: null, size: null },
|
||||
lips: { color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
|
||||
ears: { height: null, size: null },
|
||||
glasses: { ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
|
||||
other: {
|
||||
wrinkles1: { height: null, distance: null, size: null, stretch: null },
|
||||
wrinkles2: { height: null, distance: null, size: null, stretch: null },
|
||||
beard: { color: null },
|
||||
moustache: { color: null, height: null, isFlipped: false, size: null, stretch: null },
|
||||
goatee: { color: null },
|
||||
mole: { color: null, height: null, distance: null, size: null },
|
||||
eyeShadow: { color: null, height: null, distance: null, size: null, stretch: null },
|
||||
blush: { color: null, height: null, distance: null, size: null, stretch: null },
|
||||
},
|
||||
height: null,
|
||||
weight: null,
|
||||
datingPreferences: [],
|
||||
voice: { speed: null, pitch: null, depth: null, delivery: null, tone: null },
|
||||
personality: { movement: null, speech: null, energy: null, thinking: null, overall: null },
|
||||
});
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
|
|
@ -83,24 +119,21 @@ export default function SubmitForm() {
|
|||
if (platform === "THREE_DS") {
|
||||
formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
|
||||
} else if (platform === "SWITCH") {
|
||||
const portraitResponse = await fetch(miiPortraitUri!);
|
||||
const featuresResponse = await fetch(miiFeaturesUri!);
|
||||
const response = await fetch(miiPortraitUri!);
|
||||
|
||||
if (!portraitResponse.ok || !featuresResponse.ok) {
|
||||
setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
|
||||
if (!response.ok) {
|
||||
setError("Failed to check Mii portrait. Did you upload one?");
|
||||
return;
|
||||
}
|
||||
|
||||
const portraitBlob = await portraitResponse.blob();
|
||||
const featuresBlob = await featuresResponse.blob();
|
||||
if (!portraitBlob.type.startsWith("image/") || !featuresBlob.type.startsWith("image/")) {
|
||||
setError("Invalid image file found");
|
||||
const blob = await response.blob();
|
||||
if (!blob.type.startsWith("image/")) {
|
||||
setError("Invalid image file returned");
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append("gender", gender);
|
||||
formData.append("miiPortraitImage", portraitBlob);
|
||||
formData.append("miiFeaturesImage", featuresBlob);
|
||||
formData.append("miiPortraitImage", blob);
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +197,7 @@ export default function SubmitForm() {
|
|||
<Carousel
|
||||
images={[
|
||||
miiPortraitUri ?? "/loading.svg",
|
||||
...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : [miiFeaturesUri ?? "/loading.svg"]),
|
||||
...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : []),
|
||||
...files.map((file) => URL.createObjectURL(file)),
|
||||
]}
|
||||
/>
|
||||
|
|
@ -336,8 +369,7 @@ export default function SubmitForm() {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} hasCrop />
|
||||
<SwitchFileUpload text="a screenshot of your Mii's features here" setImage={setMiiFeaturesUri} />
|
||||
<PortraitUpload setImage={setMiiPortraitUri} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
</div>
|
||||
|
||||
|
|
@ -361,7 +393,7 @@ export default function SubmitForm() {
|
|||
Use your camera
|
||||
</button>
|
||||
|
||||
<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
<ThreeDsSubmitTutorialButton />
|
||||
|
||||
<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function EyebrowsTab({ instructions }: Props) {
|
||||
const [color, setColor] = useState(instructions.current.eyebrows.color ?? 3);
|
||||
const [color, setColor] = useState(3);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,9 @@ const TABS: { name: keyof SwitchMiiInstructions["eyes"]; length: number; colorsD
|
|||
|
||||
export default function EyesTab({ instructions }: Props) {
|
||||
const [tab, setTab] = useState(0);
|
||||
const [colors, setColors] = useState<number[]>(() =>
|
||||
TABS.map((t) => {
|
||||
const entry = instructions.current.eyes[t.name];
|
||||
const color = "color" in entry ? entry.color : null;
|
||||
return color ?? 122;
|
||||
}),
|
||||
);
|
||||
|
||||
// One type/color state per tab
|
||||
const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(122));
|
||||
|
||||
const currentTab = TABS[tab];
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function GlassesTab({ instructions }: Props) {
|
||||
const [ringColor, setRingColor] = useState(instructions.current.glasses.ringColor ?? 133);
|
||||
const [shadesColor, setShadesColor] = useState(instructions.current.glasses.shadesColor ?? 133);
|
||||
const [ringColor, setRingColor] = useState(133);
|
||||
const [shadesColor, setShadesColor] = useState(133);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ type Tab = "sets" | "bangs" | "back";
|
|||
|
||||
export default function HairTab({ instructions }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("sets");
|
||||
const [color, setColor] = useState(instructions.current.hair.color ?? 3);
|
||||
const [subColor, setSubColor] = useState<number | null>(instructions.current.hair.subColor);
|
||||
const [subColor2, setSubColor2] = useState<number | null>(instructions.current.hair.subColor2);
|
||||
const [style, setStyle] = useState<number | null>(instructions.current.hair.style);
|
||||
const [isFlipped, setIsFlipped] = useState(instructions.current.hair.isFlipped);
|
||||
const [color, setColor] = useState(3);
|
||||
const [subColor, setSubColor] = useState<number | null>(null);
|
||||
const [subColor2, setSubColor2] = useState<number | null>(null);
|
||||
const [style, setStyle] = useState<number | null>(null);
|
||||
const [isFlipped, setIsFlipped] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ interface Props {
|
|||
const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
|
||||
|
||||
export default function HeadTab({ instructions }: Props) {
|
||||
const [color, setColor] = useState(instructions.current.head.skinColor ?? 109);
|
||||
const [color, setColor] = useState(109);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -29,10 +29,7 @@ export default function HeadTab({ instructions }: Props) {
|
|||
<button
|
||||
type="button"
|
||||
key={i + 108}
|
||||
onClick={() => {
|
||||
setColor(i + 108);
|
||||
instructions.current.head.skinColor = 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>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function LipsTab({ instructions }: Props) {
|
||||
const [color, setColor] = useState(instructions.current.lips.color ?? 128);
|
||||
const [hasLipstick, setHasLipstick] = useState(instructions.current.lips.hasLipstick);
|
||||
const [color, setColor] = useState(128);
|
||||
const [hasLipstick, setHasLipstick] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -12,28 +12,22 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function HeadTab({ instructions }: Props) {
|
||||
const [height, setHeight] = useState(instructions.current.height ?? 64);
|
||||
const [weight, setWeight] = useState(instructions.current.weight ?? 64);
|
||||
const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
|
||||
const [height, setHeight] = useState(50);
|
||||
const [weight, setWeight] = useState(50);
|
||||
const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>([]);
|
||||
const [voice, setVoice] = useState({
|
||||
speed: instructions.current.voice.speed ?? 25,
|
||||
pitch: instructions.current.voice.pitch ?? 25,
|
||||
depth: instructions.current.voice.depth ?? 25,
|
||||
delivery: instructions.current.voice.delivery ?? 25,
|
||||
tone: instructions.current.voice.tone ?? 0,
|
||||
});
|
||||
const [birthday, setBirthday] = useState({
|
||||
day: instructions.current.birthday.day ?? (null as number | null),
|
||||
month: instructions.current.birthday.month ?? (null as number | null),
|
||||
age: instructions.current.birthday.age ?? (null as number | null),
|
||||
dontAge: instructions.current.birthday.dontAge,
|
||||
speed: 50,
|
||||
pitch: 50,
|
||||
depth: 50,
|
||||
delivery: 50,
|
||||
tone: 0,
|
||||
});
|
||||
const [personality, setPersonality] = useState({
|
||||
movement: instructions.current.personality.movement ?? -1,
|
||||
speech: instructions.current.personality.speech ?? -1,
|
||||
energy: instructions.current.personality.energy ?? -1,
|
||||
thinking: instructions.current.personality.thinking ?? -1,
|
||||
overall: instructions.current.personality.overall ?? -1,
|
||||
movement: -1,
|
||||
speech: -1,
|
||||
energy: -1,
|
||||
thinking: -1,
|
||||
overall: -1,
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -53,13 +47,11 @@ export default function HeadTab({ instructions }: Props) {
|
|||
<label htmlFor="height" className="text-sm">
|
||||
Height
|
||||
</label>
|
||||
<div className="relative h-5 flex justify-center items-center">
|
||||
<input
|
||||
type="range"
|
||||
id="height"
|
||||
className="grow z-10"
|
||||
min={0}
|
||||
max={128}
|
||||
max={100}
|
||||
step={1}
|
||||
value={height}
|
||||
onChange={(e) => {
|
||||
|
|
@ -67,21 +59,17 @@ export default function HeadTab({ instructions }: Props) {
|
|||
instructions.current.height = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="weight" className="text-sm">
|
||||
Weight
|
||||
</label>
|
||||
<div className="relative h-5 flex justify-center items-center">
|
||||
<input
|
||||
type="range"
|
||||
id="weight"
|
||||
className="grow z-10"
|
||||
min={0}
|
||||
max={128}
|
||||
max={100}
|
||||
step={1}
|
||||
value={weight}
|
||||
onChange={(e) => {
|
||||
|
|
@ -89,8 +77,6 @@ export default function HeadTab({ instructions }: Props) {
|
|||
instructions.current.weight = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
|
||||
|
|
@ -131,81 +117,6 @@ export default function HeadTab({ instructions }: Props) {
|
|||
instructions.current.voice.tone = i;
|
||||
}}
|
||||
/>
|
||||
|
||||
<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>Birthday</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label htmlFor="day" className="text-xs">
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="day"
|
||||
min={1}
|
||||
max={31}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.day ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.day = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="month" className="text-xs">
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="month"
|
||||
min={1}
|
||||
max={12}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.month ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.month = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="age" className="text-xs">
|
||||
Age
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
min={1}
|
||||
max={100}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.age ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.age = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1.5 col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dontAge"
|
||||
className="checkbox"
|
||||
checked={birthday.dontAge}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
|
||||
instructions.current.birthday.dontAge = e.target.checked;
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="dontAge" className="text-sm select-none">
|
||||
Don't Age
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ interface Props {
|
|||
instructions: React.RefObject<SwitchMiiInstructions>;
|
||||
}
|
||||
|
||||
const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number; defaultColor?: number }[] = [
|
||||
const TABS: { name: keyof SwitchMiiInstructions["other"]; length: number }[] = [
|
||||
{ name: "wrinkles1", length: 9 },
|
||||
{ name: "wrinkles2", length: 15 },
|
||||
{ name: "beard", length: 15 },
|
||||
{ name: "moustache", length: 16 },
|
||||
{ name: "goatee", length: 14 },
|
||||
{ name: "mole", length: 2 },
|
||||
{ name: "eyeShadow", length: 4, defaultColor: 139 },
|
||||
{ name: "eyeShadow", length: 4 },
|
||||
{ name: "blush", length: 8 },
|
||||
];
|
||||
|
||||
|
|
@ -22,13 +22,8 @@ export default function OtherTab({ instructions }: Props) {
|
|||
const [tab, setTab] = useState(0);
|
||||
const [isFlipped, setIsFlipped] = useState(false);
|
||||
|
||||
const [colors, setColors] = useState<number[]>(() =>
|
||||
TABS.map((t) => {
|
||||
const entry = instructions.current.other[t.name];
|
||||
const color = "color" in entry ? entry.color : null;
|
||||
return color ?? t.defaultColor ?? 0;
|
||||
}),
|
||||
);
|
||||
// One type/color state per tab
|
||||
const [colors, setColors] = useState<number[]>([0, 0, 0, 0, 0, 0, 139, 0]);
|
||||
|
||||
const currentTab = TABS[tab];
|
||||
|
||||
|
|
|
|||
45
src/components/submit-form/portrait-upload.tsx
Normal file
45
src/components/submit-form/portrait-upload.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { FileWithPath } from "react-dropzone";
|
||||
import Dropzone from "../dropzone";
|
||||
|
||||
interface Props {
|
||||
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
}
|
||||
|
||||
export default function PortraitUpload({ setImage }: Props) {
|
||||
const [hasImage, setHasImage] = useState(false);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
const file = acceptedFiles[0];
|
||||
// Convert to Data URI
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
setImage(event.target!.result as string);
|
||||
setHasImage(true);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
[setImage],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="max-w-md w-full">
|
||||
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
|
||||
<p className="text-center text-sm">
|
||||
{!hasImage ? (
|
||||
<>
|
||||
Drag and drop a screenshot of your Mii's features here
|
||||
<br />
|
||||
or click to open
|
||||
</>
|
||||
) : (
|
||||
"Uploaded!"
|
||||
)}
|
||||
</p>
|
||||
</Dropzone>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,11 +10,10 @@ import { useSelect } from "downshift";
|
|||
interface Props {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
|
||||
setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
|
||||
}
|
||||
|
||||
export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: Props) {
|
||||
export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
|
||||
|
|
@ -46,11 +45,11 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
},
|
||||
});
|
||||
|
||||
const takePicture = useCallback(() => {
|
||||
const scanQRCode = useCallback(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
// Continue scanning in a loop
|
||||
if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
|
||||
requestRef.current = requestAnimationFrame(scanQRCode);
|
||||
|
||||
const video = videoRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
|
|
@ -63,13 +62,6 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
canvas.height = video.videoHeight;
|
||||
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
||||
|
||||
if (setImage) {
|
||||
setImage(canvas.toDataURL());
|
||||
close();
|
||||
return;
|
||||
}
|
||||
if (!setQrBytesRaw) return;
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
|
||||
const code = jsQR(imageData.data, imageData.width, imageData.height);
|
||||
if (!code || !code.binaryData) return;
|
||||
|
|
@ -81,7 +73,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
}
|
||||
|
||||
setQrBytesRaw(code.binaryData);
|
||||
close();
|
||||
setIsOpen(false);
|
||||
}, [isOpen, setIsOpen, setQrBytesRaw]);
|
||||
|
||||
const requestPermission = () => {
|
||||
|
|
@ -137,7 +129,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
})
|
||||
.catch((err) => console.error("Camera error", err));
|
||||
|
||||
if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
|
||||
requestRef.current = requestAnimationFrame(scanQRCode);
|
||||
|
||||
// cleanup
|
||||
return () => {
|
||||
|
|
@ -150,7 +142,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
videoRef.current.srcObject = null;
|
||||
}
|
||||
};
|
||||
}, [isOpen, permissionGranted, selectedDeviceId, takePicture]);
|
||||
}, [isOpen, permissionGranted, selectedDeviceId, scanQRCode]);
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
|
||||
|
|
@ -165,7 +157,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">{setQrBytesRaw ? "Scan QR Code" : "Take Picture"}</h2>
|
||||
<h2 className="text-xl font-bold">Scan QR Code</h2>
|
||||
<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
|
|
@ -207,31 +199,26 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`relative w-full ${setQrBytesRaw ? "aspect-square" : ""}`}>
|
||||
<div className="relative w-full aspect-square">
|
||||
{!permissionGranted && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-amber-50 border-2 border-amber-500 text-center p-8">
|
||||
<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
|
||||
<p className="text-gray-600">Please allow camera access in your browser settings to {setQrBytesRaw ? "scan QR codes" : "take pictures"}</p>
|
||||
<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
|
||||
<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 py-0.5! px-2!">
|
||||
Request Permission
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<video ref={videoRef} className={`size-full rounded-2xl border-2 border-amber-500 max-h-96 ${setQrBytesRaw ? "object-cover" : ""}`} />
|
||||
{setQrBytesRaw && <QrFinder />}
|
||||
<video ref={videoRef} className="size-full object-cover rounded-2xl border-2 border-amber-500" />
|
||||
<QrFinder />
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center gap-2">
|
||||
<div className="mt-4 flex justify-center">
|
||||
<button type="button" onClick={close} className="pill button">
|
||||
Cancel
|
||||
</button>
|
||||
{setImage && (
|
||||
<button type="button" onClick={takePicture} className="pill button">
|
||||
Take Picture
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { FileWithPath } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
import Dropzone from "../dropzone";
|
||||
import Camera from "./camera";
|
||||
import CropPortrait from "./crop-portrait";
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
hasCrop?: boolean;
|
||||
image?: string | undefined;
|
||||
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
}
|
||||
|
||||
export default function SwitchFileUpload({ text, hasCrop = false, image, setImage }: Props) {
|
||||
const [isCameraOpen, setIsCameraOpen] = useState(false);
|
||||
const [isCropOpen, setIsCropOpen] = useState(false);
|
||||
const [hasImage, setHasImage] = useState(false);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
const file = acceptedFiles[0];
|
||||
// Convert to Data URI
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
setImage(event.target!.result as string);
|
||||
setHasImage(true);
|
||||
if (hasCrop) setIsCropOpen(true);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
[setImage],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCameraOpen) return;
|
||||
if (hasCrop) setIsCropOpen(true);
|
||||
}, [isCameraOpen]);
|
||||
|
||||
return (
|
||||
<div className="max-w-md w-full flex flex-col items-center gap-2">
|
||||
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
|
||||
<p className="text-center text-sm">
|
||||
{!hasImage ? (
|
||||
<>
|
||||
Drag and drop {text}
|
||||
<br />
|
||||
or click to open
|
||||
</>
|
||||
) : (
|
||||
"Uploaded!"
|
||||
)}
|
||||
</p>
|
||||
</Dropzone>
|
||||
|
||||
<span>or</span>
|
||||
|
||||
<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
|
||||
<Icon icon="mdi:camera" fontSize={20} />
|
||||
Use your camera
|
||||
</button>
|
||||
{hasCrop && (
|
||||
<>
|
||||
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
|
||||
<Icon icon="material-symbols:crop" fontSize={20} />
|
||||
Crop Image
|
||||
</button>
|
||||
<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Camera isOpen={isCameraOpen} setIsOpen={setIsCameraOpen} setImage={setImage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -27,19 +27,15 @@ export default function SwitchAddMiiTutorialButton() {
|
|||
imageSrc: "/tutorial/switch/adding-mii/step1.jpg",
|
||||
},
|
||||
{
|
||||
text: "2. Press 'From scratch' and choose the Male template",
|
||||
text: "2. Press 'From scratch' and choose the Male template (instructions may be slightly inaccurate if you select Female)",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step2.jpg",
|
||||
},
|
||||
{
|
||||
text: "3. Click on the features image on this page to zoom it in and add all features on the mii editor",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step3.png",
|
||||
text: "3. Follow all instructions (not all instructions will be there, check next slide for more)",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step3.jpg",
|
||||
},
|
||||
{
|
||||
text: "4. If the author added instructions, follow them (not all instructions will be there, check next slide for more)",
|
||||
imageSrc: "/tutorial/switch/adding-mii/step4.jpg",
|
||||
},
|
||||
{
|
||||
text: "5. For instructions like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
|
||||
text: "4. If the instructions have height, distance, etc. the value will be relative to how many times to click the button - positive for up/left, negative for down/right",
|
||||
imageSrc: "/tutorial/switch/step4.jpg",
|
||||
},
|
||||
{ type: "finish" },
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useState } from "react";
|
|||
import { createPortal } from "react-dom";
|
||||
import Tutorial from ".";
|
||||
|
||||
export default function SwitchSubmitTutorialButton() {
|
||||
export default function SubmitTutorialButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -279,23 +279,15 @@ export const switchMiiInstructionsSchema = z
|
|||
.optional(),
|
||||
})
|
||||
.optional(),
|
||||
height: z.number().int().min(0).max(128).optional(),
|
||||
weight: z.number().int().min(0).max(128).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(),
|
||||
birthday: z
|
||||
.object({
|
||||
day: z.number().int().min(1).max(31).optional(),
|
||||
month: z.number().int().min(1).max(12).optional(),
|
||||
age: z.number().int().min(1).max(100).optional(),
|
||||
dontAge: z.boolean().optional(),
|
||||
})
|
||||
.optional(),
|
||||
voice: z
|
||||
.object({
|
||||
speed: z.number().int().min(0).max(50).optional(),
|
||||
pitch: z.number().int().min(0).max(50).optional(),
|
||||
depth: z.number().int().min(0).max(50).optional(),
|
||||
delivery: z.number().int().min(0).max(50).optional(),
|
||||
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(),
|
||||
|
|
|
|||
|
|
@ -1,78 +1,3 @@
|
|||
import { SwitchMiiInstructions } from "@/types";
|
||||
|
||||
export function minifyInstructions(instructions: Partial<SwitchMiiInstructions>) {
|
||||
const DEFAULT_ZERO_FIELDS = new Set(["height", "distance", "rotation", "size", "stretch"]);
|
||||
|
||||
function minify(object: Partial<SwitchMiiInstructions>): Partial<SwitchMiiInstructions> {
|
||||
for (const key in object) {
|
||||
const value = object[key as keyof SwitchMiiInstructions];
|
||||
|
||||
if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (typeof value === "object" && !Array.isArray(value)) {
|
||||
minify(value as Partial<SwitchMiiInstructions>);
|
||||
|
||||
if (Object.keys(value).length === 0) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
return minify(instructions);
|
||||
}
|
||||
|
||||
export const defaultInstructions: SwitchMiiInstructions = {
|
||||
head: { skinColor: null },
|
||||
hair: {
|
||||
color: null,
|
||||
subColor: null,
|
||||
subColor2: null,
|
||||
style: null,
|
||||
isFlipped: false,
|
||||
},
|
||||
eyebrows: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyes: {
|
||||
main: { color: null, height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelashesTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelashesBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelidTop: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyelidBottom: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
eyeliner: { color: null },
|
||||
pupil: { height: null, distance: null, rotation: null, size: null, stretch: null },
|
||||
},
|
||||
nose: { height: null, size: null },
|
||||
lips: { color: null, height: null, rotation: null, size: null, stretch: null, hasLipstick: false },
|
||||
ears: { height: null, size: null },
|
||||
glasses: { ringColor: null, shadesColor: null, height: null, size: null, stretch: null },
|
||||
other: {
|
||||
wrinkles1: { height: null, distance: null, size: null, stretch: null },
|
||||
wrinkles2: { height: null, distance: null, size: null, stretch: null },
|
||||
beard: { color: null },
|
||||
moustache: { color: null, height: null, isFlipped: false, size: null, stretch: null },
|
||||
goatee: { color: null },
|
||||
mole: { color: null, height: null, distance: null, size: null },
|
||||
eyeShadow: { color: null, height: null, distance: null, size: null, stretch: null },
|
||||
blush: { color: null, height: null, distance: null, size: null, stretch: null },
|
||||
},
|
||||
height: null,
|
||||
weight: null,
|
||||
datingPreferences: [],
|
||||
birthday: {
|
||||
day: null,
|
||||
month: null,
|
||||
age: null,
|
||||
dontAge: false,
|
||||
},
|
||||
voice: { speed: null, pitch: null, depth: null, delivery: null, tone: null },
|
||||
personality: { movement: null, speech: null, energy: null, thinking: null, overall: null },
|
||||
};
|
||||
|
||||
export const COLORS: string[] = [
|
||||
// Outside
|
||||
"000000",
|
||||
|
|
|
|||
6
src/types.d.ts
vendored
6
src/types.d.ts
vendored
|
|
@ -143,12 +143,6 @@ interface SwitchMiiInstructions {
|
|||
height: number | null;
|
||||
weight: number | null;
|
||||
datingPreferences: MiiGender[];
|
||||
birthday: {
|
||||
day: number | null;
|
||||
month: number | null;
|
||||
age: number | null; // TODO: update accordingly with mii creation date
|
||||
dontAge: boolean;
|
||||
};
|
||||
voice: {
|
||||
speed: number | null;
|
||||
pitch: number | null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue