mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 21:27:46 +00:00
Compare commits
19 commits
f82fc3587d
...
ab4b42c5b4
| Author | SHA1 | Date | |
|---|---|---|---|
| ab4b42c5b4 | |||
| d947f09112 | |||
| 94389ddc8f | |||
| fc7374e9b0 | |||
| f70a03abf2 | |||
| 99beabd385 | |||
| 0671bcbfba | |||
| a79d668cdd | |||
| 7ad5d1a775 | |||
| 3cf511e157 | |||
| c45c51fa31 | |||
| 14c992a9ce | |||
| 307aefa894 | |||
| 949e86111a | |||
|
|
d11f32eefb | ||
| 4a5126c87b | |||
| f30f12d086 | |||
| 926dd9dd6b | |||
| 4cc31ab8b7 |
30 changed files with 676 additions and 523 deletions
4
LICENSE
4
LICENSE
|
|
@ -629,8 +629,8 @@ to attach them to the start of each source file to most effectively
|
|||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) 2024 trafficlunar
|
||||
Website to discover and share Tomodachi Life Miis.
|
||||
Copyright (C) 2026 trafficlunar
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
> [!IMPORTANT]
|
||||
> As of **6th April 2026**, this repository is archived.<br>
|
||||
> The website will be continued to be updated privately, the current state of the source code remains here due to the license.<br>
|
||||
> You can still help out! Contact me to see the private codebase.
|
||||
|
||||
<p align="center">
|
||||
<img src="public/logo.svg" alt="TomodachiShare Logo" width="128" />
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
Warnings:
|
||||
|
||||
- The values [COPYRIGHT] on the enum `ReportReason` will be removed. If these variants are still used in the database, this will fail.
|
||||
|
||||
*/
|
||||
-- AlterEnum
|
||||
BEGIN;
|
||||
CREATE TYPE "ReportReason_new" AS ENUM ('INAPPROPRIATE', 'SPAM', 'BAD_QUALITY', 'OTHER');
|
||||
ALTER TABLE "reports" ALTER COLUMN "reason" TYPE "ReportReason_new" USING ("reason"::text::"ReportReason_new");
|
||||
ALTER TYPE "ReportReason" RENAME TO "ReportReason_old";
|
||||
ALTER TYPE "ReportReason_new" RENAME TO "ReportReason";
|
||||
DROP TYPE "public"."ReportReason_old";
|
||||
COMMIT;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
-- AlterTable
|
||||
ALTER TABLE "miis" ADD COLUMN "youtubeId" TEXT;
|
||||
|
|
@ -79,6 +79,7 @@ model Mii {
|
|||
in_queue Boolean @default(false)
|
||||
|
||||
instructions Json?
|
||||
youtubeId String?
|
||||
gender MiiGender?
|
||||
makeup MiiMakeup?
|
||||
|
||||
|
|
@ -193,7 +194,6 @@ enum ReportType {
|
|||
enum ReportReason {
|
||||
INAPPROPRIATE
|
||||
SPAM
|
||||
COPYRIGHT
|
||||
BAD_QUALITY
|
||||
OTHER
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default async function AdminPage({ searchParams }: Props) {
|
|||
{/* Queue */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Reports</span>
|
||||
<span>Queue</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
<MiiList parentPage="admin" searchParams={await searchParams} />
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { generateMetadataImage, validateImage } from "@/lib/images";
|
|||
import { RateLimit } from "@/lib/rate-limit";
|
||||
import { SwitchMiiInstructions } from "@/types";
|
||||
import { minifyInstructions } from "@/lib/switch";
|
||||
import { settings } from "@/lib/settings";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
@ -31,6 +32,10 @@ const editSchema = z.object({
|
|||
makeup: z.enum(MiiMakeup).optional(),
|
||||
miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
youtubeId: z
|
||||
.string()
|
||||
.regex(/^[a-zA-Z0-9_-]{11}$/, "Invalid YouTube video ID")
|
||||
.optional(),
|
||||
instructions: switchMiiInstructionsSchema,
|
||||
image1: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
image2: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
|
|
@ -42,7 +47,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, 2); // no grouped pathname; edit each mii 2 times a minute
|
||||
const rateLimit = new RateLimit(request, 6); // no grouped pathname; edit each mii 2 times a minute
|
||||
const check = await rateLimit.handle();
|
||||
if (check) return check;
|
||||
|
||||
|
|
@ -87,6 +92,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
makeup: formData.get("makeup") ?? undefined,
|
||||
miiPortraitImage: formData.get("miiPortraitImage"),
|
||||
miiFeaturesImage: formData.get("miiFeaturesImage"),
|
||||
youtubeId: formData.get("youtubeId"),
|
||||
instructions: minifiedInstructions,
|
||||
image1: formData.get("image1"),
|
||||
image2: formData.get("image2"),
|
||||
|
|
@ -94,7 +100,8 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
});
|
||||
|
||||
if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
|
||||
const { name, tags, description, quarantined, gender, makeup, miiPortraitImage, miiFeaturesImage, instructions, image1, image2, image3 } = parsed.data;
|
||||
const { name, tags, description, quarantined, gender, makeup, miiPortraitImage, miiFeaturesImage, youtubeId, instructions, image1, image2, image3 } =
|
||||
parsed.data;
|
||||
|
||||
// Validate image files
|
||||
let wasImagesModerated = false;
|
||||
|
|
@ -132,9 +139,12 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
|
|||
if (quarantined !== undefined) updateData.quarantined = quarantined;
|
||||
if (mii.platform === "SWITCH" && gender !== undefined) updateData.gender = gender;
|
||||
if (makeup !== undefined) updateData.makeup = makeup;
|
||||
if (youtubeId !== undefined) updateData.youtubeId = youtubeId;
|
||||
if (instructions !== undefined) updateData.instructions = instructions;
|
||||
if (images.length > 0) updateData.imageCount = images.length;
|
||||
if (wasImagesModerated) updateData.in_queue = true;
|
||||
|
||||
const imagesChanged = images.length > 0 || miiPortraitImage || miiFeaturesImage;
|
||||
if ((settings.queueEnabled && imagesChanged) || wasImagesModerated) updateData.in_queue = true;
|
||||
|
||||
if (Object.keys(updateData).length === 0) return rateLimit.sendResponse({ error: "Nothing was changed" }, 400);
|
||||
const updatedMii = await prisma.mii.update({
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import { RateLimit } from "@/lib/rate-limit";
|
|||
const reportSchema = z.object({
|
||||
id: z.coerce.number({ error: "ID must be a number" }).int({ error: "ID must be an integer" }).positive({ error: "ID must be valid" }),
|
||||
type: z.enum(["mii", "user"], { error: "Type must be either 'mii' or 'user'" }),
|
||||
reason: z.enum(["inappropriate", "spam", "copyright", "bad_quality", "other"], {
|
||||
message: "Reason must be either 'inappropriate', 'spam', 'copyright', 'bad_quality' or 'other'",
|
||||
reason: z.enum(["inappropriate", "spam", "bad_quality", "other"], {
|
||||
message: "Reason must be either 'inappropriate', 'spam', 'bad_quality' or 'other'",
|
||||
}),
|
||||
notes: z.string().trim().max(256).optional(),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ const submitSchema = z
|
|||
makeup: z.enum(MiiMakeup).default("PARTIAL"),
|
||||
miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
youtubeId: z
|
||||
.string()
|
||||
.regex(/^[a-zA-Z0-9_-]{11}$/, "Invalid YouTube video ID")
|
||||
.optional(),
|
||||
instructions: switchMiiInstructionsSchema,
|
||||
|
||||
// QR code
|
||||
|
|
@ -108,6 +112,7 @@ export async function POST(request: NextRequest) {
|
|||
makeup: formData.get("makeup") ?? undefined,
|
||||
miiPortraitImage: formData.get("miiPortraitImage"),
|
||||
miiFeaturesImage: formData.get("miiFeaturesImage"),
|
||||
youtubeId: formData.get("youtubeId"),
|
||||
instructions: minifiedInstructions,
|
||||
|
||||
qrBytesRaw: rawQrBytesRaw,
|
||||
|
|
@ -142,6 +147,7 @@ export async function POST(request: NextRequest) {
|
|||
makeup,
|
||||
miiPortraitImage,
|
||||
miiFeaturesImage,
|
||||
youtubeId,
|
||||
image1,
|
||||
image2,
|
||||
image3,
|
||||
|
|
@ -206,6 +212,7 @@ export async function POST(request: NextRequest) {
|
|||
allowedCopying: conversion.mii.allowCopying,
|
||||
}
|
||||
: {
|
||||
youtubeId,
|
||||
instructions: minifiedInstructions,
|
||||
makeup: makeup ?? "PARTIAL",
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -19,21 +19,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-amber-50 text-slate-800;
|
||||
|
||||
--color1: var(--color-amber-50);
|
||||
--color2: var(--color-amber-100);
|
||||
|
||||
background-image:
|
||||
repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
|
||||
repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
|
||||
background-position:
|
||||
0 0,
|
||||
10px 10px;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-3xl shadow-md;
|
||||
}
|
||||
|
|
@ -126,20 +111,20 @@ 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-1 bg-orange-300 rounded-full;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
|
||||
@apply h-1 bg-orange-300 rounded-full;
|
||||
}
|
||||
|
||||
/* Thumb */
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition -mt-1.5;
|
||||
@apply appearance-none size-4 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition -mt-1.5;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
|
||||
@apply size-3.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
|
|
@ -150,3 +135,17 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||
input[type="range"]:hover::-moz-range-thumb {
|
||||
@apply not-disabled:bg-orange-500;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-amber-50 text-slate-800;
|
||||
|
||||
/* syntax highlighting is a bit broken when it's at the top so it's at the bottom */
|
||||
background-image: url('data:image/svg+xml;utf8,\
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">\
|
||||
<rect width="10" height="10" fill="%23fef3c6"/>\
|
||||
<rect x="10" y="10" width="10" height="10" fill="%23fef3c6"/>\
|
||||
<rect x="10" width="10" height="10" fill="%23fffbeb"/>\
|
||||
<rect y="10" width="10" height="10" fill="%23fffbeb"/>\
|
||||
</svg>');
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,11 +130,12 @@ export default async function MiiPage({ params }: Props) {
|
|||
</div>
|
||||
)}
|
||||
{mii.in_queue && (
|
||||
<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-center gap-3 text-zinc-700">
|
||||
<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600">
|
||||
<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
|
||||
<p className="font-medium">
|
||||
This Mii is waiting to be manually reviewed {!settings.queueEnabled && "after being auto-flagged for inappropriate images "}
|
||||
and is hidden from the main page.
|
||||
This Mii is waiting to be manually reviewed and is hidden from the main page. The review could take between a few hours and a few days.
|
||||
<br />
|
||||
Despite that, you can still share the Mii through the URL!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -380,7 +381,28 @@ export default async function MiiPage({ params }: Props) {
|
|||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
{mii.platform === "SWITCH" && <MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />}
|
||||
{mii.platform === "SWITCH" && (
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
|
||||
<h2 className="text-xl font-semibold text-amber-700 flex items-center gap-2">
|
||||
<Icon icon="fa7-solid:list" />
|
||||
Instructions
|
||||
</h2>
|
||||
|
||||
{mii.youtubeId && (
|
||||
<iframe
|
||||
src={`https://www.youtube-nocookie.com/embed/${mii.youtubeId}`}
|
||||
title="YouTube video player"
|
||||
allow="clipboard-write; encrypted-media;"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
className="aspect-video rounded-2xl w-full max-w-135"
|
||||
></iframe>
|
||||
)}
|
||||
|
||||
<MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default async function RandomPage() {
|
|||
|
||||
const randomIndex = Math.floor(Math.random() * count);
|
||||
const randomMii = await prisma.mii.findFirst({
|
||||
where: { in_queue: false, quarantined: false },
|
||||
skip: randomIndex,
|
||||
take: 1,
|
||||
select: { id: true },
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const metadata: Metadata = {
|
|||
export default async function SubmitPage() {
|
||||
const session = await auth();
|
||||
|
||||
if (!session) redirect("/login");
|
||||
if (!session || !session.user) redirect("/login");
|
||||
const activePunishment = await prisma.punishment.findFirst({
|
||||
where: {
|
||||
userId: Number(session?.user?.id),
|
||||
|
|
@ -45,5 +45,7 @@ export default async function SubmitPage() {
|
|||
</div>
|
||||
);
|
||||
|
||||
return <SubmitForm />;
|
||||
const inQueueMiisCount = await prisma.mii.count({ where: { userId: Number(session.user.id), in_queue: true } });
|
||||
|
||||
return <SubmitForm inQueueMiisCount={inQueueMiisCount} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,19 +41,6 @@ export default function Footer() {
|
|||
•
|
||||
</span>
|
||||
|
||||
<a
|
||||
href="https://github.com/trafficlunar/tomodachi-share"
|
||||
target="_blank"
|
||||
className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline inline-flex items-end gap-1"
|
||||
>
|
||||
<Icon icon="mdi:github" className="text-lg" />
|
||||
Source Code
|
||||
</a>
|
||||
|
||||
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
||||
•
|
||||
</span>
|
||||
|
||||
<a href="https://trafficlunar.net" target="_blank" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
|
||||
Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -88,8 +88,8 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
|
|||
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden">
|
||||
<Image src={`/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} />
|
||||
<div className="p-4">
|
||||
<p className="text-xl font-bold line-clamp-1" title={miiName}>
|
||||
<div className="p-4 min-w-0">
|
||||
<p className="text-xl font-bold line-clamp-3 wrap-anywhere" title={miiName}>
|
||||
{miiName}
|
||||
</p>
|
||||
<LikeButton likes={likes} isLiked={true} disabled />
|
||||
|
|
@ -97,7 +97,16 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
|
|||
</div>
|
||||
|
||||
<p className="text-sm text-zinc-500 my-2">Type the Mii's name below to delete:</p>
|
||||
<input type="text" className="pill input" value={inputMiiName} onChange={(e) => setInputMiiName(e.target.value)} />
|
||||
<input
|
||||
type="text"
|
||||
className="pill input"
|
||||
value={inputMiiName}
|
||||
onChange={(e) => setInputMiiName(e.target.value)}
|
||||
autoCorrect="off"
|
||||
autoComplete="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
|
||||
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||
|
||||
|
|
@ -108,7 +117,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
|
|||
<SubmitButton
|
||||
onClick={handleSubmit}
|
||||
text="Delete"
|
||||
disabled={inputMiiName != miiName}
|
||||
disabled={inputMiiName.trim() != miiName}
|
||||
className="bg-red-400! border-red-500! hover:bg-red-500! disabled:bg-red-200! disabled:border-red-300!"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const ORDINAL_SUFFIXES: Record<string, string> = {
|
|||
};
|
||||
const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
|
||||
|
||||
function not(value: any) {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
|
||||
function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
|
||||
const row = Math.floor(index / cols) + 1;
|
||||
const col = (index % cols) + 1;
|
||||
|
|
@ -36,12 +40,12 @@ function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
|
|||
return `${row}${rowSuffix} row, ${col}${colSuffix} column`;
|
||||
}
|
||||
|
||||
function ColorPosition({ color }: { color: number }) {
|
||||
if (!color) return null;
|
||||
function ColorPosition({ color }: { color: number | undefined | null }) {
|
||||
if (color === undefined || color === null) return null;
|
||||
if (color <= 7) {
|
||||
return (
|
||||
<span className="flex items-center">
|
||||
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
Color menu on left, <GridPosition index={color} cols={1} />
|
||||
</span>
|
||||
);
|
||||
|
|
@ -49,7 +53,7 @@ function ColorPosition({ color }: { color: number }) {
|
|||
if (color >= 108) {
|
||||
return (
|
||||
<span className="flex items-center">
|
||||
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
Outside color menu, <GridPosition index={color - 108} cols={2} />
|
||||
</span>
|
||||
);
|
||||
|
|
@ -57,7 +61,7 @@ function ColorPosition({ color }: { color: number }) {
|
|||
|
||||
return (
|
||||
<span className="flex items-center">
|
||||
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
|
||||
Color menu on right, <GridPosition index={color - 8} cols={10} />
|
||||
</span>
|
||||
);
|
||||
|
|
@ -88,21 +92,21 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
|
|||
const stretch = "stretch" in instructions ? instructions.stretch : undefined;
|
||||
|
||||
return (
|
||||
<div className={`p-3 ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
|
||||
<div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
|
||||
<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
|
||||
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
{color && (
|
||||
{not(color) && (
|
||||
<TableCell label="Color">
|
||||
<ColorPosition color={color} />
|
||||
</TableCell>
|
||||
)}
|
||||
{height && <TableCell label="Height">{height}</TableCell>}
|
||||
{distance && <TableCell label="Distance">{distance}</TableCell>}
|
||||
{rotation && <TableCell label="Rotation">{rotation}</TableCell>}
|
||||
{size && <TableCell label="Size">{size}</TableCell>}
|
||||
{stretch && <TableCell label="Stretch">{stretch}</TableCell>}
|
||||
{not(height) && <TableCell label="Height">{height}</TableCell>}
|
||||
{not(distance) && <TableCell label="Distance">{distance}</TableCell>}
|
||||
{not(rotation) && <TableCell label="Rotation">{rotation}</TableCell>}
|
||||
{not(size) && <TableCell label="Size">{size}</TableCell>}
|
||||
{not(stretch) && <TableCell label="Stretch">{stretch}</TableCell>}
|
||||
|
||||
{children}
|
||||
</tbody>
|
||||
|
|
@ -116,15 +120,10 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
|
||||
<h2 className="text-xl font-semibold text-amber-700 flex items-center gap-2">
|
||||
<Icon icon="fa7-solid:list" />
|
||||
Instructions
|
||||
</h2>
|
||||
|
||||
<>
|
||||
{head && (
|
||||
<Section name="Head" instructions={head}>
|
||||
{head.skinColor && (
|
||||
{not(head.skinColor) && (
|
||||
<TableCell label="Skin Color">
|
||||
<ColorPosition color={head.skinColor} />
|
||||
</TableCell>
|
||||
|
|
@ -133,18 +132,18 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
)}
|
||||
{hair && (
|
||||
<Section name="Hair" instructions={hair}>
|
||||
{hair.subColor && (
|
||||
{not(hair.subColor) && (
|
||||
<TableCell label="Sub Color">
|
||||
<ColorPosition color={hair.subColor} />
|
||||
</TableCell>
|
||||
)}
|
||||
{hair.subColor2 && (
|
||||
{not(hair.subColor2) && (
|
||||
<TableCell label="Sub Color (Back)">
|
||||
<ColorPosition color={hair.subColor2} />
|
||||
</TableCell>
|
||||
)}
|
||||
{hair.style && <TableCell label="Tying Style">{hair.style}</TableCell>}
|
||||
{hair.isFlipped && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
|
||||
{not(hair.style) && <TableCell label="Tying Style">{hair.style}</TableCell>}
|
||||
{not(hair.isFlipped) && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
|
||||
</Section>
|
||||
)}
|
||||
{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
|
||||
|
|
@ -162,18 +161,18 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
{nose && <Section name="Nose" instructions={nose}></Section>}
|
||||
{lips && (
|
||||
<Section name="Lips" instructions={lips}>
|
||||
{lips.hasLipstick && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
|
||||
{not(lips.hasLipstick) && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
|
||||
</Section>
|
||||
)}
|
||||
{ears && <Section name="Ears" instructions={ears}></Section>}
|
||||
{glasses && (
|
||||
<Section name="Glasses" instructions={glasses}>
|
||||
{glasses.ringColor && (
|
||||
{not(glasses.ringColor) && (
|
||||
<TableCell label="Ring Color">
|
||||
<ColorPosition color={glasses.ringColor} />
|
||||
</TableCell>
|
||||
)}
|
||||
{glasses.shadesColor && (
|
||||
{not(glasses.shadesColor) && (
|
||||
<TableCell label="Shades Color">
|
||||
<ColorPosition color={glasses.shadesColor} />
|
||||
</TableCell>
|
||||
|
|
@ -196,7 +195,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
)}
|
||||
|
||||
{(height || weight || datingPreferences || voice || personality) && (
|
||||
<div className="pl-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950">
|
||||
<div className="p-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max">
|
||||
<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
|
||||
|
||||
{height && (
|
||||
|
|
@ -206,7 +205,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
</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 className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -217,7 +216,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
</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 className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -260,6 +259,6 @@ export default function MiiInstructions({ instructions }: Props) {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,19 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
|||
}
|
||||
|
||||
const where: Prisma.MiiWhereInput = {
|
||||
in_queue: parentPage === "admin",
|
||||
// In queue logic
|
||||
...(parentPage === "admin"
|
||||
? { in_queue: true } // Only show queued Miis
|
||||
: userId
|
||||
? {
|
||||
// Include queued Miis if user is on their profile
|
||||
...(Number(session?.user?.id) === userId ? {} : { in_queue: false }),
|
||||
userId,
|
||||
}
|
||||
: {
|
||||
// Don't show queued Miis on main page
|
||||
in_queue: false,
|
||||
}),
|
||||
// Only show liked miis on likes page
|
||||
...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
|
||||
// Searching
|
||||
|
|
@ -57,8 +69,6 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
|||
...(makeup && { makeup: { equals: makeup } }),
|
||||
// Quarantined
|
||||
...(!quarantined && !userId && { quarantined: false }),
|
||||
// Profiles
|
||||
...(userId && { userId }),
|
||||
};
|
||||
|
||||
const select: Prisma.MiiSelect = {
|
||||
|
|
@ -81,6 +91,7 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
|||
makeup: true,
|
||||
allowedCopying: true,
|
||||
quarantined: true,
|
||||
in_queue: true,
|
||||
// Mii liked check
|
||||
...(session?.user?.id && {
|
||||
likedBy: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
|
@ -20,6 +21,8 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
|||
|
||||
export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
const ids = miis.map((m) => m.id).join(",");
|
||||
const { data } = useSWR<number[]>(session.data?.user && miis.length > 0 ? `/api/mii/has-liked?ids=${ids}` : null, fetcher, {
|
||||
revalidateOnFocus: false,
|
||||
|
|
@ -32,8 +35,15 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
|||
{miis.map((mii) => (
|
||||
<div
|
||||
key={mii.id}
|
||||
className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300" : "border-zinc-300"}`}
|
||||
className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300 bg-red-50!" : mii.in_queue && parentPage !== "admin" ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
|
||||
>
|
||||
{mii.in_queue && (
|
||||
<div className="absolute top-2 left-2 z-10 bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1">
|
||||
<Icon icon="mdi:clock-outline" className="text-base" />
|
||||
In Queue
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Carousel
|
||||
images={[
|
||||
`/mii/${mii.id}/image?type=mii`,
|
||||
|
|
@ -80,11 +90,26 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
|||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Controls */}
|
||||
{parentPage === "admin" && (
|
||||
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
|
||||
<button onClick={() => fetch(`/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH" })} className="cursor-pointer">
|
||||
<Icon icon="material-symbols:check-rounded" />
|
||||
</button>
|
||||
<div className="flex justify-between w-full col-span-2 mt-2">
|
||||
<div className="flex gap-1 text-3xl justify-center">
|
||||
<button
|
||||
onClick={async () => {
|
||||
await fetch(`/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH" });
|
||||
}}
|
||||
className="cursor-pointer text-zinc-400 hover:text-green-500 transition-colors p-1 bg-white rounded-md shadow-sm border border-zinc-200 hover:border-green-500"
|
||||
title="Accept Mii"
|
||||
>
|
||||
<Icon icon="material-symbols:check-rounded" />
|
||||
</button>
|
||||
<div className="text-zinc-400 hover:text-red-500 transition-colors p-1 bg-white rounded-md shadow-sm border border-zinc-200 hover:border-red-500 flex items-center justify-center">
|
||||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="text-sm w-1/2 text-right">{mii.createdAt.toLocaleString("en-GB", { timeZone: "UTC" })}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
|
|||
const key = label.toLowerCase() as keyof typeof data;
|
||||
return (
|
||||
<div key={label} className="flex justify-center items-center gap-2">
|
||||
<span className="text-sm font-semibold w-24 shrink-0">{label}</span>
|
||||
<span className="text-sm w-24 shrink-0">{label}</span>
|
||||
<span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
|
||||
<div className="flex gap-0.5">
|
||||
{Array.from({ length: 8 }).map((_, i) => {
|
||||
|
|
@ -43,7 +43,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
|
|||
onClick={() => {
|
||||
if (onClick) onClick(key, i);
|
||||
}}
|
||||
className={`size-7 rounded-lg transition-opacity duration-100 border-orange-500
|
||||
className={`size-7 rounded-lg transition-opacity duration-100 border-black/40
|
||||
${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
|
||||
></button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
|
|||
min={0}
|
||||
max={50}
|
||||
step={1}
|
||||
value={data[label as keyof typeof data] ?? 25}
|
||||
value={data[label.toLowerCase() as keyof typeof data] ?? 25}
|
||||
disabled={!onChange}
|
||||
onChange={(e) => {
|
||||
if (onChange) onChange(e, label);
|
||||
if (onChange) onChange(e, label.toLowerCase());
|
||||
}}
|
||||
/>
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
||||
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ interface Props {
|
|||
const reasonMap: Record<ReportReason, string> = {
|
||||
INAPPROPRIATE: "Inappropriate content",
|
||||
SPAM: "Spam",
|
||||
COPYRIGHT: "Copyrighted content",
|
||||
BAD_QUALITY: "Bad quality",
|
||||
OTHER: "Other...",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,15 +11,13 @@ interface Props {
|
|||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
onCapture?: () => void;
|
||||
setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
setImage?: (value: string | undefined) => void;
|
||||
setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
|
||||
}
|
||||
|
||||
export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
|
||||
|
||||
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
|
||||
const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
if (files.length >= 3) return;
|
||||
hasFilesChanged.current = true;
|
||||
hasCustomImagesChanged.current = true;
|
||||
|
||||
setFiles((prev) => [...prev, ...acceptedFiles]);
|
||||
},
|
||||
|
|
@ -69,10 +69,13 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL");
|
||||
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=mii`);
|
||||
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=features`);
|
||||
const hasFilesChanged = useRef(false);
|
||||
const [youtubeId, setYouTubeId] = useState(mii.youtubeId ?? "");
|
||||
const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {}));
|
||||
|
||||
const [quarantined, setQuarantined] = useState(mii.quarantined);
|
||||
const hasCustomImagesChanged = useRef(false);
|
||||
const hasMiiPortraitChanged = useRef(false);
|
||||
const hasMiiFeaturesChanged = useRef(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validate before sending request
|
||||
|
|
@ -96,10 +99,11 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
if (makeup != mii.makeup) formData.append("makeup", makeup);
|
||||
if (miiPortraitUri) formData.append("miiPortraitUri", miiPortraitUri);
|
||||
if (quarantined != mii.quarantined) formData.append("quarantined", JSON.stringify(quarantined));
|
||||
if (youtubeId != mii.youtubeId) formData.append("youtubeId", youtubeId);
|
||||
if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
|
||||
if (hasFilesChanged.current) {
|
||||
if (hasCustomImagesChanged.current) {
|
||||
files.forEach((file, index) => {
|
||||
// image1, image2, etc.
|
||||
formData.append(`image${index + 1}`, file);
|
||||
|
|
@ -123,11 +127,11 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
return blob;
|
||||
}
|
||||
|
||||
if (miiPortraitUri) {
|
||||
if (miiPortraitUri && hasMiiPortraitChanged.current) {
|
||||
const blob = await getBlob(miiPortraitUri);
|
||||
if (blob) formData.append("miiPortraitImage", blob);
|
||||
}
|
||||
if (miiFeaturesUri) {
|
||||
if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
|
||||
const blob = await getBlob(miiFeaturesUri);
|
||||
if (blob) formData.append("miiFeaturesImage", blob);
|
||||
}
|
||||
|
|
@ -146,6 +150,16 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
redirect(`/mii/${mii.id}`);
|
||||
};
|
||||
|
||||
const handleMiiPortraitChange = (uri: string | undefined) => {
|
||||
hasMiiPortraitChanged.current = true;
|
||||
setMiiPortraitUri(uri);
|
||||
};
|
||||
|
||||
const handleMiiFeaturesChange = (uri: string | undefined) => {
|
||||
hasMiiFeaturesChanged.current = true;
|
||||
setMiiFeaturesUri(uri);
|
||||
};
|
||||
|
||||
// Load existing images - converts image URLs to File objects
|
||||
useEffect(() => {
|
||||
const loadExistingImages = async () => {
|
||||
|
|
@ -368,8 +382,8 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
|
||||
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
|
||||
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={handleMiiPortraitChange} forceCrop />
|
||||
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={handleMiiFeaturesChange} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
</div>
|
||||
|
||||
|
|
@ -382,6 +396,27 @@ export default function EditForm({ mii, likes }: Props) {
|
|||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
{/* YouTube */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="youtube" className="font-semibold">
|
||||
YouTube Video
|
||||
</label>
|
||||
<input
|
||||
id="youtube"
|
||||
type="text"
|
||||
className="pill input w-full col-span-2"
|
||||
minLength={2}
|
||||
maxLength={64}
|
||||
placeholder="Paste a URL or video ID..."
|
||||
value={youtubeId}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
setYouTubeId(match ? match[1] : val);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MiiEditor instructions={instructions} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
image: string | undefined;
|
||||
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
setImage: (value: string | undefined) => void;
|
||||
}
|
||||
|
||||
export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,11 @@ import SubmitButton from "../submit-button";
|
|||
import Dropzone from "../dropzone";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function SubmitForm() {
|
||||
interface Props {
|
||||
inQueueMiisCount: number;
|
||||
}
|
||||
|
||||
export default function SubmitForm({ inQueueMiisCount }: Props) {
|
||||
const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
|
|
@ -54,6 +58,7 @@ export default function SubmitForm() {
|
|||
const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
|
||||
const [gender, setGender] = useState<MiiGender>("MALE");
|
||||
const [makeup, setMakeup] = useState<MiiMakeup>("PARTIAL");
|
||||
const [youtubeId, setYouTubeId] = useState("");
|
||||
const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
|
@ -104,6 +109,7 @@ export default function SubmitForm() {
|
|||
formData.append("makeup", makeup);
|
||||
formData.append("miiPortraitImage", portraitBlob);
|
||||
formData.append("miiFeaturesImage", featuresBlob);
|
||||
formData.append("youtubeId", youtubeId);
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
}
|
||||
|
||||
|
|
@ -192,316 +198,347 @@ export default function SubmitForm() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Submit your Mii</h2>
|
||||
<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Info</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
{/* Platform select */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="name" className="font-semibold">
|
||||
Platform
|
||||
</label>
|
||||
<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
|
||||
{/* Animated indicator */}
|
||||
{/* TODO: maybe change width as part of animation? */}
|
||||
<div
|
||||
className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
|
||||
platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
></div>
|
||||
|
||||
{/* Switch button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatform("SWITCH")}
|
||||
className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
|
||||
platform === "SWITCH" && "text-slate-800!"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="cib:nintendo-switch" className="text-2xl" />
|
||||
Switch
|
||||
</button>
|
||||
|
||||
{/* 3DS button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatform("THREE_DS")}
|
||||
className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
|
||||
platform === "THREE_DS" && "text-slate-800!"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="cib:nintendo-3ds" className="text-2xl" />
|
||||
3DS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="name" className="font-semibold">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
className="pill input w-full col-span-2"
|
||||
minLength={2}
|
||||
maxLength={64}
|
||||
placeholder="Type your mii's name here..."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="tags" className="font-semibold">
|
||||
Tags
|
||||
</label>
|
||||
<TagSelector tags={tags} setTags={setTags} showTagLimit />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="w-full grid grid-cols-3 items-start">
|
||||
<label htmlFor="description" className="font-semibold py-2">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
rows={5}
|
||||
maxLength={512}
|
||||
placeholder="(optional) Type a description..."
|
||||
className="pill input rounded-xl! resize-none col-span-2 text-sm"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gender (switch only) */}
|
||||
<div className={`w-full grid grid-cols-3 items-start z-10 ${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<label htmlFor="gender" className="font-semibold py-2">
|
||||
Gender
|
||||
</label>
|
||||
<div className="col-span-2 flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("MALE")}
|
||||
aria-label="Filter for Male Miis"
|
||||
data-tooltip="Male"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400! ${
|
||||
gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="foundation:male" className="text-blue-400" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("FEMALE")}
|
||||
aria-label="Filter for Female Miis"
|
||||
data-tooltip="Female"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
|
||||
gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="foundation:female" className="text-pink-400" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("NONBINARY")}
|
||||
aria-label="Filter for Nonbinary Miis"
|
||||
data-tooltip="Nonbinary"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
|
||||
gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Makeup (switch only) */}
|
||||
<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<label htmlFor="makeup" className="font-semibold py-2">
|
||||
Face Paint
|
||||
</label>
|
||||
|
||||
<div className="col-span-2 flex gap-1">
|
||||
{/* Full Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("FULL")}
|
||||
aria-label="Full Face Paint"
|
||||
data-tooltip="Full Face Paint"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
|
||||
makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:palette" className="text-pink-400" />
|
||||
</button>
|
||||
|
||||
{/* Partial Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("PARTIAL")}
|
||||
aria-label="Partial Face Paint"
|
||||
data-tooltip="Partial Face Paint"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
|
||||
makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:lipstick" className="text-purple-400" />
|
||||
</button>
|
||||
|
||||
{/* No Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("NONE")}
|
||||
aria-label="No Face Paint"
|
||||
data-tooltip="No Face Paint"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
|
||||
makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="codex:cross" className="text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* (Switch Only) Mii Screenshots */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Screenshots</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 w-full">
|
||||
{/* Step 1 - Portrait */}
|
||||
<div className="flex flex-col items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-2 self-start">
|
||||
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
|
||||
<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
|
||||
</div>
|
||||
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
|
||||
<div data-tooltip="Your screenshot should look like this">
|
||||
<Image
|
||||
src="/tutorial/switch/portrait.png"
|
||||
alt="Example portrait screenshot"
|
||||
width={80}
|
||||
height={80}
|
||||
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 - Features */}
|
||||
<div className="flex flex-col items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-2 self-start">
|
||||
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
|
||||
<span className="text-sm font-semibold text-zinc-600">
|
||||
Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
|
||||
<div data-tooltip="Your features screenshot should show this">
|
||||
<Image
|
||||
src="/tutorial/switch/features.png"
|
||||
alt="Example features screenshot showing the parts panel"
|
||||
width={80}
|
||||
height={80}
|
||||
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SwitchSubmitTutorialButton />
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
|
||||
</div>
|
||||
|
||||
{/* (3DS only) QR code scanning */}
|
||||
<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>QR Code</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<QrUpload setQrBytesRaw={setQrBytesRaw} />
|
||||
<span>or</span>
|
||||
|
||||
<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
|
||||
<Icon icon="mdi:camera" fontSize={20} />
|
||||
Use your camera
|
||||
</button>
|
||||
|
||||
<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
<ThreeDsSubmitTutorialButton />
|
||||
|
||||
<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* (Switch only) Mii instructions */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Instructions</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<MiiEditor instructions={instructions} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
|
||||
Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom images selector */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Custom images</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-md w-full self-center flex flex-col items-center">
|
||||
<Dropzone onDrop={handleDrop}>
|
||||
<p className="text-center text-sm">
|
||||
Drag and drop your images here
|
||||
<br />
|
||||
or click to open
|
||||
<div className="max-w-2xl">
|
||||
{inQueueMiisCount !== 0 && (
|
||||
<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600 mb-4">
|
||||
<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
|
||||
<p className="font-medium">
|
||||
You have {inQueueMiisCount} Mii{inQueueMiisCount > 1 && "s"} pending manual review. You can view your queue on your profile.
|
||||
</p>
|
||||
</Dropzone>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 w-full">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Submit your Mii</h2>
|
||||
<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
|
||||
</div>
|
||||
|
||||
<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
|
||||
</div>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Info</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<ImageList files={files} setFiles={setFiles} />
|
||||
{/* Platform select */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="name" className="font-semibold">
|
||||
Platform
|
||||
</label>
|
||||
<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
|
||||
{/* Animated indicator */}
|
||||
{/* TODO: maybe change width as part of animation? */}
|
||||
<div
|
||||
className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
|
||||
platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
></div>
|
||||
|
||||
<hr className="border-zinc-300 my-2" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
{/* Switch button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatform("SWITCH")}
|
||||
className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
|
||||
platform === "SWITCH" && "text-slate-800!"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="cib:nintendo-switch" className="text-2xl" />
|
||||
Switch
|
||||
</button>
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
{/* 3DS button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatform("THREE_DS")}
|
||||
className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
|
||||
platform === "THREE_DS" && "text-slate-800!"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="cib:nintendo-3ds" className="text-2xl" />
|
||||
3DS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="name" className="font-semibold">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
className="pill input w-full col-span-2"
|
||||
minLength={2}
|
||||
maxLength={64}
|
||||
placeholder="Type your mii's name here..."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="tags" className="font-semibold">
|
||||
Tags
|
||||
</label>
|
||||
<TagSelector tags={tags} setTags={setTags} showTagLimit />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="w-full grid grid-cols-3 items-start">
|
||||
<label htmlFor="description" className="font-semibold py-2">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
rows={5}
|
||||
maxLength={512}
|
||||
placeholder="(optional) Type a description..."
|
||||
className="pill input rounded-xl! resize-none col-span-2 text-sm"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gender (switch only) */}
|
||||
<div className={`w-full grid grid-cols-3 items-start z-20 ${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<label htmlFor="gender" className="font-semibold py-2">
|
||||
Gender
|
||||
</label>
|
||||
<div className="col-span-2 flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("MALE")}
|
||||
aria-label="Filter for Male Miis"
|
||||
data-tooltip="Male"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400! ${
|
||||
gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="foundation:male" className="text-blue-400" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("FEMALE")}
|
||||
aria-label="Filter for Female Miis"
|
||||
data-tooltip="Female"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
|
||||
gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="foundation:female" className="text-pink-400" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGender("NONBINARY")}
|
||||
aria-label="Filter for Nonbinary Miis"
|
||||
data-tooltip="Nonbinary"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
|
||||
gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Makeup (switch only) */}
|
||||
<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<label htmlFor="makeup" className="font-semibold py-2">
|
||||
Face Paint
|
||||
</label>
|
||||
|
||||
<div className="col-span-2 flex gap-1">
|
||||
{/* Full Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("FULL")}
|
||||
aria-label="Full Face Paint"
|
||||
data-tooltip="Face covered more than 80%"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
|
||||
makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:palette" className="text-pink-400" />
|
||||
</button>
|
||||
|
||||
{/* Partial Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("PARTIAL")}
|
||||
aria-label="Partial Face Paint"
|
||||
data-tooltip="For at least any face paint"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
|
||||
makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="mdi:lipstick" className="text-purple-400" />
|
||||
</button>
|
||||
|
||||
{/* No Makeup */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMakeup("NONE")}
|
||||
aria-label="No Face Paint"
|
||||
data-tooltip="No Face Paint"
|
||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
|
||||
makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Icon icon="codex:cross" className="text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* (Switch Only) Mii Screenshots */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Screenshots</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 w-full">
|
||||
{/* Step 1 - Portrait */}
|
||||
<div className="flex flex-col items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-2 self-start">
|
||||
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
|
||||
<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
|
||||
</div>
|
||||
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
|
||||
<div data-tooltip="Your screenshot should look like this">
|
||||
<Image
|
||||
src="/tutorial/switch/portrait.png"
|
||||
alt="Example portrait screenshot"
|
||||
width={80}
|
||||
height={80}
|
||||
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 - Features */}
|
||||
<div className="flex flex-col items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-2 self-start">
|
||||
<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
|
||||
<span className="text-sm font-semibold text-zinc-600">
|
||||
Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
|
||||
<div data-tooltip="Your features screenshot should show this">
|
||||
<Image
|
||||
src="/tutorial/switch/features.png"
|
||||
alt="Example features screenshot showing the parts panel"
|
||||
width={80}
|
||||
height={80}
|
||||
className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SwitchSubmitTutorialButton />
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
|
||||
</div>
|
||||
|
||||
{/* (3DS only) QR code scanning */}
|
||||
<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>QR Code</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<QrUpload setQrBytesRaw={setQrBytesRaw} />
|
||||
<span>or</span>
|
||||
|
||||
<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
|
||||
<Icon icon="mdi:camera" fontSize={20} />
|
||||
Use your camera
|
||||
</button>
|
||||
|
||||
<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
<ThreeDsSubmitTutorialButton />
|
||||
|
||||
<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* (Switch only) Mii instructions */}
|
||||
<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Instructions</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
{/* YouTube */}
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="youtube" className="font-semibold">
|
||||
YouTube Video
|
||||
</label>
|
||||
<input
|
||||
id="youtube"
|
||||
type="text"
|
||||
className="pill input w-full col-span-2"
|
||||
minLength={2}
|
||||
maxLength={64}
|
||||
placeholder="Paste a URL or video ID..."
|
||||
value={youtubeId}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
setYouTubeId(match ? match[1] : val);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MiiEditor instructions={instructions} />
|
||||
<SwitchSubmitTutorialButton />
|
||||
<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
|
||||
Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom images selector */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Custom images</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-md w-full self-center flex flex-col items-center">
|
||||
<Dropzone onDrop={handleDrop}>
|
||||
<p className="text-center text-sm">
|
||||
Drag and drop your images here
|
||||
<br />
|
||||
or click to open
|
||||
</p>
|
||||
</Dropzone>
|
||||
|
||||
<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
|
||||
</div>
|
||||
|
||||
<ImageList files={files} setFiles={setFiles} />
|
||||
|
||||
<hr className="border-zinc-300 my-2" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ 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 className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ 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 className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -223,7 +223,6 @@ export default function HeadTab({ instructions }: Props) {
|
|||
instructions.current.personality = updated;
|
||||
return updated;
|
||||
});
|
||||
instructions.current.personality = personality;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface Props {
|
|||
text: string;
|
||||
forceCrop?: boolean;
|
||||
image?: string | undefined;
|
||||
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
setImage: (value: string | undefined) => void;
|
||||
}
|
||||
|
||||
export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,9 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
|
|||
const formData = new FormData();
|
||||
formData.append("image", blob);
|
||||
|
||||
const moderationResponse = await fetch("https://api.trafficlunar.net/moderate/image", { method: "POST", body: formData });
|
||||
const headers = new Headers();
|
||||
headers.append("token", process.env.TOKEN ?? "");
|
||||
const moderationResponse = await fetch("https://api.trafficlunar.net/moderate/image", { method: "POST", body: formData, headers });
|
||||
const result = await moderationResponse.json();
|
||||
if (result.error) {
|
||||
return { valid: false, error: result.error };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export const settings = {
|
||||
canSubmit: true,
|
||||
queueEnabled: false,
|
||||
queueEnabled: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export function minifyInstructions(instructions: Partial<SwitchMiiInstructions>)
|
|||
for (const key in object) {
|
||||
const value = object[key as keyof SwitchMiiInstructions];
|
||||
|
||||
if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
|
||||
if (value === null || value === undefined || (typeof value === "boolean" && value === false) || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
|
||||
delete object[key as keyof SwitchMiiInstructions];
|
||||
continue;
|
||||
}
|
||||
|
|
@ -84,115 +84,115 @@ export const COLORS: string[] = [
|
|||
"A56B2A",
|
||||
"D4A15A",
|
||||
// Row 1
|
||||
"F2F2F2",
|
||||
"E6D5C3",
|
||||
"F3E6A2",
|
||||
"CDE6A1",
|
||||
"A9DFA3",
|
||||
"8ED8B0",
|
||||
"8FD3E8",
|
||||
"C9C2E6",
|
||||
"F3C1CF",
|
||||
"F0A8A8",
|
||||
"FFFFFF",
|
||||
"E6CEB2",
|
||||
"FAF79A",
|
||||
"D7FA9C",
|
||||
"BCF1A9",
|
||||
"85E5B5",
|
||||
"9FE3FE",
|
||||
"D1C5ED",
|
||||
"FEC8D6",
|
||||
"FEBFB8",
|
||||
// Row 2
|
||||
"D8D8D8",
|
||||
"E8C07D",
|
||||
"F0D97A",
|
||||
"CDE07A",
|
||||
"7BC96F",
|
||||
"6BC4B2",
|
||||
"5BBAD6",
|
||||
"D9A7E0",
|
||||
"F7B6C2",
|
||||
"F47C6C",
|
||||
"DBD7CE",
|
||||
"E6BA79",
|
||||
"F7EA9B",
|
||||
"D6E683",
|
||||
"97DE7E",
|
||||
"7FD4BD",
|
||||
"78C4DC",
|
||||
"EFBDFA",
|
||||
"FCACC9",
|
||||
"FFA6A6",
|
||||
// Row 3
|
||||
"C0C0C0",
|
||||
"D9A441",
|
||||
"F4C542",
|
||||
"D4C86A",
|
||||
"8FD14F",
|
||||
"58B88A",
|
||||
"6FA8DC",
|
||||
"B4A7D6",
|
||||
"F06277",
|
||||
"FF6F61",
|
||||
"BDBDBD",
|
||||
"CF9F4A",
|
||||
"FDE249",
|
||||
"D5D86F",
|
||||
"9EE041",
|
||||
"63C787",
|
||||
"85BDFA",
|
||||
"C4ADE4",
|
||||
"FA7495",
|
||||
"FF7366",
|
||||
// Row 4
|
||||
"A8A8A8",
|
||||
"D29B62",
|
||||
"F2CF75",
|
||||
"D8C47A",
|
||||
"8DB600",
|
||||
"66C2A5",
|
||||
"4DA3D9",
|
||||
"C27BA0",
|
||||
"D35D6E",
|
||||
"FF4C3B",
|
||||
"9B9B9B",
|
||||
"D09B69",
|
||||
"F9DF82",
|
||||
"D8CC82",
|
||||
"93BE0D",
|
||||
"79C49D",
|
||||
"56B4F0",
|
||||
"BF83CB",
|
||||
"C7556E",
|
||||
"F54949",
|
||||
// Row 5
|
||||
"9A9A9A",
|
||||
"C77800",
|
||||
"F4B183",
|
||||
"D6BF3A",
|
||||
"3FA34D",
|
||||
"4CA3A3",
|
||||
"7EA6E0",
|
||||
"B56576",
|
||||
"FF1744",
|
||||
"FF2A00",
|
||||
"797880",
|
||||
"A96001",
|
||||
"FFC28B",
|
||||
"CBBF37",
|
||||
"4AAD1C",
|
||||
"4FAEB0",
|
||||
"8AA6FA",
|
||||
"A992C8",
|
||||
"B05380",
|
||||
"EF0D0E",
|
||||
// Row 6
|
||||
"8A817C",
|
||||
"B85C1E",
|
||||
"FF8C00",
|
||||
"D2B48C",
|
||||
"2E8B57",
|
||||
"2F7E8C",
|
||||
"2E86C1",
|
||||
"7D5BA6",
|
||||
"C2185B",
|
||||
"E0193A",
|
||||
"786F66",
|
||||
"A54D1B",
|
||||
"FF960E",
|
||||
"CDB987",
|
||||
"34996F",
|
||||
"347E8B",
|
||||
"2982D4",
|
||||
"845BB7",
|
||||
"C81C56",
|
||||
"D8530E",
|
||||
// Row 7
|
||||
"6E6E6E",
|
||||
"95543A",
|
||||
"F4A460",
|
||||
"B7A369",
|
||||
"3B7A0A",
|
||||
"1F6F78",
|
||||
"3F51B5",
|
||||
"673AB7",
|
||||
"B71C1C",
|
||||
"C91F3A",
|
||||
"6D6E70",
|
||||
"8D4F40",
|
||||
"FFB166",
|
||||
"A59562",
|
||||
"427901",
|
||||
"216663",
|
||||
"4655A8",
|
||||
"6E42B1",
|
||||
"991C3C",
|
||||
"B63D42",
|
||||
// Row 8
|
||||
"3E3E3E",
|
||||
"8B5A2B",
|
||||
"F0986C",
|
||||
"9E8F2A",
|
||||
"0B5D3B",
|
||||
"0E3A44",
|
||||
"1F2A44",
|
||||
"4B2E2E",
|
||||
"9C1B1B",
|
||||
"7A3B2E",
|
||||
"404040",
|
||||
"7E4500",
|
||||
"EF9974",
|
||||
"99922A",
|
||||
"017562",
|
||||
"0C4F58",
|
||||
"154166",
|
||||
"4B164E",
|
||||
"8A163D",
|
||||
"A80C0D",
|
||||
// Row 9
|
||||
"2E2E2E",
|
||||
"7A4A2A",
|
||||
"A86A1D",
|
||||
"6E6B2A",
|
||||
"2F6F55",
|
||||
"004E52",
|
||||
"1C2F6E",
|
||||
"3A1F4D",
|
||||
"A52A2A",
|
||||
"8B4513",
|
||||
"2E2526",
|
||||
"663D2B",
|
||||
"885816",
|
||||
"605F31",
|
||||
"396F58",
|
||||
"013D3B",
|
||||
"223266",
|
||||
"38263C",
|
||||
"842626",
|
||||
"7B3B17",
|
||||
// Row 10
|
||||
"000000",
|
||||
"5A2E0C",
|
||||
"7B3F00",
|
||||
"5C4A00",
|
||||
"004225",
|
||||
"003B44",
|
||||
"0A1F44",
|
||||
"2B1B3F",
|
||||
"7B2D2D",
|
||||
"8B3A0E",
|
||||
"41220D",
|
||||
"5F380D",
|
||||
"4D3D0C",
|
||||
"0C4A35",
|
||||
"0D2E35",
|
||||
"161C40",
|
||||
"321C40",
|
||||
"722E3B",
|
||||
"5B160E",
|
||||
// Hair tab extra colors
|
||||
"FFD8BA",
|
||||
"FFD5AC",
|
||||
|
|
|
|||
Loading…
Reference in a new issue