mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
feat: better notices for queued miis
This commit is contained in:
parent
0671bcbfba
commit
99beabd385
5 changed files with 350 additions and 315 deletions
|
|
@ -130,11 +130,12 @@ export default async function MiiPage({ params }: Props) {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{mii.in_queue && (
|
{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" />
|
<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
|
||||||
<p className="font-medium">
|
<p className="font-medium">
|
||||||
This Mii is waiting to be manually reviewed and is hidden from the main page. (This could take a few hours or a couple of days) You can still
|
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.
|
||||||
share the Mii through the URL!
|
<br />
|
||||||
|
Despite that, you can still share the Mii through the URL!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ export const metadata: Metadata = {
|
||||||
export default async function SubmitPage() {
|
export default async function SubmitPage() {
|
||||||
const session = await auth();
|
const session = await auth();
|
||||||
|
|
||||||
if (!session) redirect("/login");
|
if (!session || !session.user) redirect("/login");
|
||||||
const activePunishment = await prisma.punishment.findFirst({
|
const activePunishment = await prisma.punishment.findFirst({
|
||||||
where: {
|
where: {
|
||||||
userId: Number(session?.user?.id),
|
userId: Number(session?.user?.id),
|
||||||
|
|
@ -45,5 +45,7 @@ export default async function SubmitPage() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return <SubmitForm />;
|
const inQueueMiisCount = await prisma.mii.count({ where: { userId: Number(session.user.id), in_queue: true } });
|
||||||
|
|
||||||
|
return <SubmitForm inQueueMiisCount={inQueueMiisCount} />;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,19 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
||||||
}
|
}
|
||||||
|
|
||||||
const where: Prisma.MiiWhereInput = {
|
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
|
// Only show liked miis on likes page
|
||||||
...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
|
...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
|
||||||
// Searching
|
// Searching
|
||||||
|
|
@ -57,8 +69,6 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
||||||
...(makeup && { makeup: { equals: makeup } }),
|
...(makeup && { makeup: { equals: makeup } }),
|
||||||
// Quarantined
|
// Quarantined
|
||||||
...(!quarantined && !userId && { quarantined: false }),
|
...(!quarantined && !userId && { quarantined: false }),
|
||||||
// Profiles
|
|
||||||
...(userId && { userId }),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const select: Prisma.MiiSelect = {
|
const select: Prisma.MiiSelect = {
|
||||||
|
|
@ -81,6 +91,7 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
|
||||||
makeup: true,
|
makeup: true,
|
||||||
allowedCopying: true,
|
allowedCopying: true,
|
||||||
quarantined: true,
|
quarantined: true,
|
||||||
|
in_queue: true,
|
||||||
// Mii liked check
|
// Mii liked check
|
||||||
...(session?.user?.id && {
|
...(session?.user?.id && {
|
||||||
likedBy: {
|
likedBy: {
|
||||||
|
|
|
||||||
|
|
@ -32,8 +32,15 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||||
{miis.map((mii) => (
|
{miis.map((mii) => (
|
||||||
<div
|
<div
|
||||||
key={mii.id}
|
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" : mii.in_queue ? "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
|
<Carousel
|
||||||
images={[
|
images={[
|
||||||
`/mii/${mii.id}/image?type=mii`,
|
`/mii/${mii.id}/image?type=mii`,
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,11 @@ import SubmitButton from "../submit-button";
|
||||||
import Dropzone from "../dropzone";
|
import Dropzone from "../dropzone";
|
||||||
import Image from "next/image";
|
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 [files, setFiles] = useState<FileWithPath[]>([]);
|
||||||
|
|
||||||
const handleDrop = useCallback(
|
const handleDrop = useCallback(
|
||||||
|
|
@ -192,316 +196,326 @@ export default function SubmitForm() {
|
||||||
</div>
|
</div>
|
||||||
</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 className="max-w-2xl">
|
||||||
<div>
|
{inQueueMiisCount && (
|
||||||
<h2 className="text-2xl font-bold">Submit your Mii</h2>
|
<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">
|
||||||
<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
|
<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
|
||||||
</div>
|
<p className="font-medium">
|
||||||
|
You have {inQueueMiisCount} Mii{inQueueMiisCount > 1 && "s"} pending manual review. You can view your queue on your profile.
|
||||||
{/* 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
|
|
||||||
</p>
|
</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>
|
{/* Separator */}
|
||||||
</div>
|
<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" />
|
{/* Switch button */}
|
||||||
<div className="flex justify-between items-center">
|
<button
|
||||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
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-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
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue