mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 21:27:46 +00:00
Compare commits
6 commits
e81f054e3a
...
aa20e931ee
| Author | SHA1 | Date | |
|---|---|---|---|
| aa20e931ee | |||
| 0bd2d6d565 | |||
| 50bad620ce | |||
| 94eef81b93 | |||
| 59d2b0b2c1 | |||
| 63dbaf13fa |
44 changed files with 1469 additions and 1428 deletions
|
|
@ -9,7 +9,8 @@ const nextConfig: NextConfig = {
|
|||
headers: [
|
||||
{ key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:4321" },
|
||||
{ key: "Access-Control-Allow-Credentials", value: "true" },
|
||||
{ key: "Access-Control-Allow-Methods", value: "GET,POST,PATCH,DELETE,OPTIONS" },
|
||||
{ key: "Access-Control-Allow-Methods", value: "GET,POST,DELETE,OPTIONS" },
|
||||
{ key: "Access-Control-Allow-Headers", value: "Content-Type" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
|
|||
import { prisma } from "@/lib/prisma";
|
||||
import { idSchema } from "@tomodachi-share/shared/schemas";
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { settings } from "@/lib/settings";
|
||||
import { settings } from "../../../../lib/settings";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json({ success: true, value: settings.canSubmit });
|
||||
}
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { settings } from "@/lib/settings";
|
||||
import { settings } from "../../../../lib/settings";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json({ success: true, value: settings.queueEnabled });
|
||||
}
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { auth } from "@/lib/auth";
|
|||
import { prisma } from "@/lib/prisma";
|
||||
import { generateMetadataImage } from "@/lib/images";
|
||||
|
||||
export async function PATCH() {
|
||||
export async function POST() {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { auth } from "@/lib/auth";
|
|||
import { prisma } from "@/lib/prisma";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
|
|||
import { prisma } from "@/lib/prisma";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { prisma } from "@/lib/prisma";
|
|||
import { userNameSchema } from "@tomodachi-share/shared/schemas";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const formDataSchema = z.object({
|
|||
image: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
});
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { RateLimit } from "@/lib/rate-limit";
|
|||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { idSchema, nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@
|
|||
import { generateMetadataImage, validateImage } from "@/lib/images";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
import { minifyInstructions, SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import { settings } from "@/lib/settings";
|
||||
import { settings } from "../../../../../lib/settings";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ const editSchema = z.object({
|
|||
image3: z.union([z.instanceof(File), z.any()]).optional(),
|
||||
});
|
||||
|
||||
export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { prisma } from "@/lib/prisma";
|
|||
import { idSchema } from "@tomodachi-share/shared/schemas";
|
||||
import { RateLimit } from "@/lib/rate-limit";
|
||||
|
||||
export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -89,6 +89,10 @@ export async function GET(request: NextRequest) {
|
|||
_count: {
|
||||
select: { likedBy: true },
|
||||
},
|
||||
// Admin
|
||||
...(parentPage === "admin" && {
|
||||
description: true,
|
||||
}),
|
||||
};
|
||||
|
||||
let totalCount: number;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
|
|||
import { RateLimit } from "@/lib/rate-limit";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import Mii from "../../../../../shared/src/mii.js/mii";
|
|||
import { convertQrCode, minifyInstructions, ThreeDsTomodachiLifeMii } from "@tomodachi-share/shared";
|
||||
|
||||
import { SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import { settings } from "@/lib/settings";
|
||||
import { settings } from "../../../lib/settings";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leaving TomodachiShare",
|
||||
description: "Warning: You are leaving TomodachiShare, proceed with caution",
|
||||
};
|
||||
|
||||
interface Props {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}
|
||||
|
||||
export default async function LinkOutPage({ searchParams }: Props) {
|
||||
const url = (await searchParams).url;
|
||||
if (!url || Array.isArray(url)) redirect("/");
|
||||
|
||||
let parsed: URL;
|
||||
try {
|
||||
parsed = new URL(url);
|
||||
} catch {
|
||||
redirect("/"); // redirect if URL is invalid
|
||||
}
|
||||
|
||||
// Next.js doesn't allow attacks like these but you can never be too safe
|
||||
if (!["http:", "https:"].includes(parsed.protocol)) redirect("/");
|
||||
|
||||
const isSafe = Array.from(SAFE_LINKS).some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
|
||||
if (isSafe) redirect(url);
|
||||
|
||||
return (
|
||||
<div className="grow flex items-center justify-center">
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg py-8 px-6 max-w-md w-full text-center flex flex-col items-center">
|
||||
<h2 className="text-3xl font-black flex items-center gap-2 mb-1">
|
||||
<Icon icon="mingcute:alert-fill" className="text-5xl" />
|
||||
Warning
|
||||
</h2>
|
||||
<p>You're attempting to leave TomodachiShare island! The destination website is potentially dangerous.</p>
|
||||
|
||||
<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 break-all w-full mt-4">
|
||||
<code className="font-mono text-sm">{url}</code>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-2">
|
||||
<Link href="/" className="pill button gap-2 mt-8 w-fit self-center bg-zinc-100! border-zinc-300! hover:bg-zinc-300!">
|
||||
<Icon icon="ic:round-home" fontSize={24} />
|
||||
Travel Back
|
||||
</Link>
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer" className="pill button gap-2 mt-8 w-fit self-center">
|
||||
<Icon icon="ic:round-open-in-new" fontSize={21} />
|
||||
Continue
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SAFE_LINKS = new Set([
|
||||
"tomodachishare.com",
|
||||
"trafficlunar.net",
|
||||
"youtube.com",
|
||||
"youtu.be",
|
||||
"twitter.com",
|
||||
"x.com",
|
||||
"reddit.com",
|
||||
"tiktok.com",
|
||||
"tumblr.com",
|
||||
"instagram.com",
|
||||
"wikipedia.org",
|
||||
]);
|
||||
|
|
@ -18,6 +18,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
|
|||
sameSite: "none",
|
||||
path: "/",
|
||||
secure: true,
|
||||
domain: process.env.NODE_ENV === "production" ? ".tomodachishare.com" : "localhost",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
|
|||
|
||||
{/* Watermark */}
|
||||
<div tw="absolute bottom-0 right-0 flex items-center">
|
||||
<img src={`${process.env.NEXT_PUBLIC_BASE_URL}/logo.svg`} height={32} />
|
||||
<img src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/logo.svg`} height={32} />
|
||||
{/* I tried using text-orange-400 but it wasn't correct..? */}
|
||||
<span tw="ml-2 font-black text-xl" style={{ color: "#FF8904" }}>
|
||||
TomodachiShare
|
||||
|
|
|
|||
1
frontend/public/logo.svg
Normal file
1
frontend/public/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="130.734" height="105.615" viewBox="0 0 34.59 27.944"><rect width="32.208" height="25.562" x="1.191" y="1.191" rx="1.874" fill="#f8f8f8" stroke="#ff8904" stroke-width="2.381" paint-order="stroke fill markers"/><rect width="29.369" height="22.49" x="2.611" y="2.727" rx=".966" fill="#c8c8c8" paint-order="stroke fill markers"/><g fill="#fef3c6"><rect width="13.371" height="20.989" x="17.918" y="3.478" rx=".423" paint-order="stroke fill markers"/><rect width="13.371" height="20.989" x="3.301" y="3.478" rx=".423" paint-order="stroke fill markers"/></g><g fill="#ff8904"><use href="#B" paint-order="stroke fill markers"/><circle cx="9.986" cy="13.076" r="5.512" paint-order="stroke fill markers"/><use href="#B" x="14.204" y="-0.093" paint-order="stroke fill markers"/><circle cx="24.191" cy="12.983" r="5.512" paint-order="stroke fill markers"/></g><g fill="none" stroke="#c8c8c8" stroke-linejoin="round"><rect width="13.791" height="20.704" x="17.295" y="3.62" ry="1.146" rx="1.095" stroke-width="1.786" paint-order="stroke fill markers"/><rect width="13.366" height="21.167" x="3.301" y="3.389" ry="1.146" rx="1.095" stroke-width="1.323" paint-order="stroke fill markers"/></g><defs ><path id="B" d="M15.03 24.516c0-2.307-.961-4.439-2.522-5.592s-3.483-1.153-5.044 0-2.522 3.285-2.522 5.592h5.044z"/></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,25 +1,26 @@
|
|||
import { useState } from "react";
|
||||
|
||||
export default function BannerForm() {
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const onClickClear = async () => {
|
||||
await fetch("/api/admin/banner", { method: "DELETE" });
|
||||
};
|
||||
|
||||
const onClickSet = async () => {
|
||||
await fetch("/api/admin/banner", { method: "POST", body: message });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex gap-2">
|
||||
<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
|
||||
<button type="button" className="pill button" onClick={onClickClear}>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="pill button" onClick={onClickSet}>
|
||||
Set
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { useState } from "react";
|
||||
|
||||
export default function BannerForm() {
|
||||
const [message, setMessage] = useState("");
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
const onClickClear = async () => {
|
||||
await fetch(`${API_URL}/api/admin/banner`, { method: "DELETE", credentials: "include" }); // TODO
|
||||
};
|
||||
|
||||
const onClickSet = async () => {
|
||||
await fetch(`${API_URL}/api/admin/banner`, { method: "POST", body: message, credentials: "include" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex gap-2">
|
||||
<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
|
||||
<button type="button" className="pill button" onClick={onClickClear}>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="pill button" onClick={onClickSet}>
|
||||
Set
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,68 @@
|
|||
// import { useSearchParams } from "next/navigation";
|
||||
// import { Suspense, useEffect, useState } from "react";
|
||||
|
||||
// import useSWR from "swr";
|
||||
// import { Icon } from "@iconify/react";
|
||||
|
||||
// interface ApiResponse {
|
||||
// message: string;
|
||||
// }
|
||||
|
||||
// const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
|
||||
// function RedirectBanner() {
|
||||
// const searchParams = useSearchParams();
|
||||
// const from = searchParams.get("from");
|
||||
// if (from !== "old-domain") return null;
|
||||
|
||||
// return (
|
||||
// <div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
|
||||
// <Icon icon="humbleicons:link" className="text-2xl min-w-6" />
|
||||
// <span>We have moved URLs, welcome to tomodachishare.com!</span>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default function AdminBanner() {
|
||||
// const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
|
||||
// const [shouldShow, setShouldShow] = useState(true);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!data?.message) return;
|
||||
|
||||
// // Check if the current banner text was closed by the user
|
||||
// const closedBanner = window.localStorage.getItem("closedBanner");
|
||||
// setShouldShow(data.message !== closedBanner);
|
||||
// }, [data]);
|
||||
|
||||
// const handleClose = () => {
|
||||
// if (!data) return;
|
||||
|
||||
// // Close banner and remember it
|
||||
// window.localStorage.setItem("closedBanner", data.message);
|
||||
// setShouldShow(false);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// {data && data.message && shouldShow && (
|
||||
// <div className="relative w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between">
|
||||
// <div className="flex gap-2 h-full items-center w-fit">
|
||||
// <Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
|
||||
// <span>{data.message}</span>
|
||||
// </div>
|
||||
|
||||
// <button onClick={handleClose} className="min-sm:absolute right-2 cursor-pointer p-1.5">
|
||||
// <Icon icon="humbleicons:times" className="text-2xl min-w-6" />
|
||||
// </button>
|
||||
// </div>
|
||||
// )}
|
||||
// <Suspense>
|
||||
// <RedirectBanner />
|
||||
// </Suspense>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
import { useEffect, useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { useSearchParams } from "react-router";
|
||||
|
||||
interface ApiResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
function RedirectBanner() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const from = searchParams.get("from");
|
||||
if (from !== "old-domain") return null;
|
||||
|
||||
return (
|
||||
<div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
|
||||
<Icon icon="humbleicons:link" className="text-2xl min-w-6" />
|
||||
<span>We have moved URLs, welcome to tomodachishare.com!</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminBanner() {
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [shouldShow, setShouldShow] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${import.meta.env.VITE_API_URL}/api/admin/banner`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to get admin banner");
|
||||
return res.json() as Promise<ApiResponse>;
|
||||
})
|
||||
.then((data) => {
|
||||
if (!data.message) return;
|
||||
const closedBanner = localStorage.getItem("closedBanner");
|
||||
setMessage(data.message);
|
||||
setShouldShow(data.message !== closedBanner);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleClose = () => {
|
||||
if (!message) return;
|
||||
|
||||
// Close banner and remember it
|
||||
localStorage.setItem("closedBanner", message);
|
||||
setShouldShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{shouldShow && message && (
|
||||
<div className="relative w-full min-h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between">
|
||||
<div className="flex gap-2 h-full items-center w-fit">
|
||||
<Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
|
||||
<button onClick={handleClose} className="sm:absolute right-2 cursor-pointer p-1.5">
|
||||
<Icon icon="humbleicons:times" className="text-2xl min-w-6" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<RedirectBanner />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
// import { settings } from "@/lib/settings";
|
||||
// import { useState } from "react";
|
||||
|
||||
// export default function ControlCenter() {
|
||||
// const [canSubmit, setCanSubmit] = useState(settings.canSubmit);
|
||||
// const [isQueueEnabled, setIsQeueueEnabled] = useState(settings.queueEnabled);
|
||||
|
||||
// const onClickSet = async () => {
|
||||
// await fetch("/api/admin/can-submit", { method: "PATCH", body: JSON.stringify(canSubmit) });
|
||||
// await fetch("/api/admin/queue", { method: "PATCH", body: JSON.stringify(isQueueEnabled) });
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
|
||||
// <div className="flex items-center gap-2">
|
||||
// <input
|
||||
// id="submit"
|
||||
// type="checkbox"
|
||||
// className="checkbox size-6!"
|
||||
// placeholder="Enter banner text"
|
||||
// checked={canSubmit}
|
||||
// onChange={(e) => setCanSubmit(e.target.checked)}
|
||||
// />
|
||||
// <label htmlFor="submit">Enable Submissions</label>
|
||||
// </div>
|
||||
// <div className="flex items-center gap-2">
|
||||
// <input
|
||||
// id="queue"
|
||||
// type="checkbox"
|
||||
// className="checkbox size-6!"
|
||||
// placeholder="Enter banner text"
|
||||
// checked={isQueueEnabled}
|
||||
// onChange={(e) => setIsQeueueEnabled(e.target.checked)}
|
||||
// />
|
||||
// <label htmlFor="queue">Enable Queue</label>
|
||||
// </div>
|
||||
|
||||
// <div className="flex gap-2 self-end">
|
||||
// <button type="submit" className="pill button" onClick={onClickSet}>
|
||||
// Set
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// import { settings } from "@/lib/settings";
|
||||
// import { useState } from "react";
|
||||
|
||||
// export default function ControlCenter() {
|
||||
// const [canSubmit, setCanSubmit] = useState(settings.canSubmit);
|
||||
// const [isQueueEnabled, setIsQeueueEnabled] = useState(settings.queueEnabled);
|
||||
|
||||
// const onClickSet = async () => {
|
||||
// await fetch("/api/admin/can-submit", { method: "POST", body: JSON.stringify(canSubmit) });
|
||||
// await fetch("/api/admin/queue", { method: "POST", body: JSON.stringify(isQueueEnabled) });
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
|
||||
// <div className="flex items-center gap-2">
|
||||
// <input
|
||||
// id="submit"
|
||||
// type="checkbox"
|
||||
// className="checkbox size-6!"
|
||||
// placeholder="Enter banner text"
|
||||
// checked={canSubmit}
|
||||
// onChange={(e) => setCanSubmit(e.target.checked)}
|
||||
// />
|
||||
// <label htmlFor="submit">Enable Submissions</label>
|
||||
// </div>
|
||||
// <div className="flex items-center gap-2">
|
||||
// <input
|
||||
// id="queue"
|
||||
// type="checkbox"
|
||||
// className="checkbox size-6!"
|
||||
// placeholder="Enter banner text"
|
||||
// checked={isQueueEnabled}
|
||||
// onChange={(e) => setIsQeueueEnabled(e.target.checked)}
|
||||
// />
|
||||
// <label htmlFor="queue">Enable Queue</label>
|
||||
// </div>
|
||||
|
||||
// <div className="flex gap-2 self-end">
|
||||
// <button type="submit" className="pill button" onClick={onClickSet}>
|
||||
// Set
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,84 +1,84 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import SubmitButton from "../submit-button";
|
||||
|
||||
export default function RegenerateImagesButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch("/api/admin/regenerate-metadata-images", { method: "PATCH" });
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setError(data.error);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
close();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setIsOpen(true)} className="pill button w-fit">
|
||||
Regenerate all Mii metadata images
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
||||
isVisible ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Regenerate Images</h2>
|
||||
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-zinc-500">Are you sure? This will delete and regenerate every metadata image.</p>
|
||||
|
||||
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button onClick={close} className="pill button">
|
||||
Cancel
|
||||
</button>
|
||||
<SubmitButton onClick={handleSubmit} />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import SubmitButton from "../submit-button";
|
||||
|
||||
export default function RegenerateImagesButton() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch("/api/admin/regenerate-metadata-images", { method: "POST" });
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setError(data.error);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
close();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setIsOpen(true)} className="pill button w-fit">
|
||||
Regenerate all Mii metadata images
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
||||
isVisible ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Regenerate Images</h2>
|
||||
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-zinc-500">Are you sure? This will delete and regenerate every metadata image.</p>
|
||||
|
||||
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button onClick={close} className="pill button">
|
||||
Cancel
|
||||
</button>
|
||||
<SubmitButton onClick={handleSubmit} />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
// const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
// const handleClick = async () => {
|
||||
// const response = await fetch("/api/return", { method: "DELETE" });
|
||||
// const response = await fetch("/api/return", { method: "POST" });
|
||||
|
||||
// if (!response.ok) {
|
||||
// const data = await response.json();
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
import { Icon } from "@iconify/react";
|
||||
import { useEffect } from "react";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../session";
|
||||
import { Link } from "react-router";
|
||||
|
||||
export default function HeaderProfile() {
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL;
|
||||
const $session = useStore(session);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE_URL}/api/auth/session`, { credentials: "include" })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to get session");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
session.set(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!$session?.user ? (
|
||||
<li>
|
||||
<Link to={"/login"} className="pill button h-full">
|
||||
Login
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<>
|
||||
<li title="Your profile">
|
||||
<Link
|
||||
to={`/profile/${$session?.user?.id}`}
|
||||
aria-label="Go to profile"
|
||||
className="pill button gap-2! p-0! h-full max-w-64"
|
||||
data-tooltip="Your Profile"
|
||||
>
|
||||
<img
|
||||
src={$session?.user?.image ?? "/guest.png"}
|
||||
alt="profile picture"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
|
||||
/>
|
||||
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li title="Logout">
|
||||
<Link to={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
|
||||
<Icon icon="ic:round-logout" fontSize={24} />
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,27 @@
|
|||
import { Icon } from "@iconify/react";
|
||||
import SearchBar from "./search-bar";
|
||||
import HeaderProfile from "./header-profile";
|
||||
import { Link } from "react-router";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../session";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function Header() {
|
||||
const $session = useStore(session);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${import.meta.env.VITE_API_URL}/api/auth/session`, { credentials: "include" })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to get session");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
session.set(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
|
||||
<Link
|
||||
|
|
@ -35,7 +53,47 @@ export default function Header() {
|
|||
Submit
|
||||
</Link>
|
||||
</li>
|
||||
<HeaderProfile />
|
||||
{!$session?.user ? (
|
||||
<li>
|
||||
<Link to={"/login"} className="pill button h-full">
|
||||
Login
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<>
|
||||
<li title="Your profile">
|
||||
<Link
|
||||
to={`/profile/${$session?.user?.id}`}
|
||||
aria-label="Go to profile"
|
||||
className="pill button gap-2! p-0! h-full max-w-64"
|
||||
data-tooltip="Your Profile"
|
||||
>
|
||||
<img
|
||||
src={$session.user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${$session.user.image}` : $session.user.image}
|
||||
onError={(e) => {
|
||||
e.currentTarget.onerror = null; // Prevent infinite loops
|
||||
e.currentTarget.src = "/guest.png";
|
||||
}}
|
||||
alt="profile picture"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
|
||||
/>
|
||||
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li title="Logout">
|
||||
<Link
|
||||
to={`${import.meta.env.VITE_API_URL}/api/auth/signout`}
|
||||
aria-label="Log Out"
|
||||
className="pill button p-2! aspect-square h-full"
|
||||
data-tooltip="Log Out"
|
||||
>
|
||||
<Icon icon="ic:round-logout" fontSize={24} />
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Icon, loadIcons } from "@iconify/react";
|
||||
import { abbreviateNumber } from "../lib/abbreviation";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../session";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
interface Props {
|
||||
likes: number;
|
||||
|
|
@ -11,33 +14,41 @@ interface Props {
|
|||
big?: boolean;
|
||||
}
|
||||
|
||||
export default function LikeButton({ likes, isLiked, disabled, abbreviate, big }: Props) {
|
||||
export default function LikeButton({ likes, miiId, isLiked, disabled, abbreviate, big }: Props) {
|
||||
const $session = useStore(session);
|
||||
const navigate = useNavigate();
|
||||
const [isLikedState, setIsLikedState] = useState(isLiked);
|
||||
const [likesState] = useState(likes);
|
||||
const [isAnimating] = useState(false);
|
||||
const [likesState, setLikesState] = useState(likes);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
const onClick = async () => {
|
||||
// if (disabled) return;
|
||||
// if (!session.data?.user) {
|
||||
// router.push("/login");
|
||||
// return;
|
||||
// }
|
||||
// setIsLikedState(!isLikedState);
|
||||
// setLikesState(isLikedState ? likesState - 1 : likesState + 1);
|
||||
// // Trigger animation
|
||||
// if (!isLikedState) {
|
||||
// setIsAnimating(true);
|
||||
// setTimeout(() => setIsAnimating(false), 1000); // match animation duration
|
||||
// }
|
||||
// const response = await fetch(`/api/mii/${miiId}/like`, { method: "PATCH" });
|
||||
// if (response.ok) {
|
||||
// const { liked, count } = await response.json();
|
||||
// setIsLikedState(liked);
|
||||
// setLikesState(count);
|
||||
// } else {
|
||||
// setIsLikedState(isLikedState);
|
||||
// setLikesState(likesState);
|
||||
// }
|
||||
if (disabled || !miiId) return;
|
||||
if ($session === undefined) return;
|
||||
if ($session === null) {
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const prevLiked = isLikedState;
|
||||
const prevLikes = likesState;
|
||||
setIsLikedState(!prevLiked);
|
||||
setLikesState(prevLiked ? likesState - 1 : likesState + 1);
|
||||
|
||||
// Trigger animation
|
||||
if (!prevLiked) {
|
||||
setIsAnimating(true);
|
||||
setTimeout(() => setIsAnimating(false), 1000);
|
||||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/like`, { method: "POST", credentials: "include" });
|
||||
if (response.ok) {
|
||||
const { liked, count } = await response.json();
|
||||
setIsLikedState(liked);
|
||||
setLikesState(count);
|
||||
} else {
|
||||
setIsLikedState(prevLiked);
|
||||
setLikesState(prevLikes);
|
||||
}
|
||||
};
|
||||
|
||||
// Preload like button icons
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import { Icon } from "@iconify/react";
|
||||
import DeleteMiiButton from "./delete-mii-button";
|
||||
import { Link } from "react-router";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../../session";
|
||||
|
||||
interface Props {
|
||||
mii: any;
|
||||
}
|
||||
|
||||
export default function AuthorButtons({ mii }: Props) {
|
||||
// const session = useSession();
|
||||
|
||||
// if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID)))
|
||||
// return null;
|
||||
const $session = useStore(session);
|
||||
if ($session === undefined) return null;
|
||||
if ($session === null) return null;
|
||||
if (Number($session?.user?.id) !== mii.userId && Number($session?.user?.id) !== Number(import.meta.env.VITE_ADMIN_USER_ID)) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
|
|||
const [inputMiiName, setInputMiiName] = useState("");
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/delete`, { method: "DELETE", credentials: "include" });
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/delete`, { method: "POST", credentials: "include" });
|
||||
if (!response.ok) {
|
||||
const { error } = await response.json();
|
||||
setError(error);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Icon } from "@iconify/react";
|
|||
import LikeButton from "../../like-button";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../../../session";
|
||||
import Carousel from "../../carousel";
|
||||
import Description from "../../description";
|
||||
|
||||
interface ApiResponse {
|
||||
totalCount: number;
|
||||
|
|
@ -26,6 +26,8 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
const [searchParams] = useSearchParams();
|
||||
const [data, setData] = useState<ApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [acceptingAll, setAcceptingAll] = useState(false);
|
||||
const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
|
||||
|
||||
const $session = useStore(session);
|
||||
|
||||
|
|
@ -39,15 +41,46 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
if (!res.ok) throw new Error("Failed to fetch Miis");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
.then(async (data) => {
|
||||
setData(data);
|
||||
setLoading(false);
|
||||
|
||||
if ($session === undefined || $session === null || !data.miis.length) return;
|
||||
const ids = data.miis.map((m: any) => m.id).join(",");
|
||||
fetch(`${import.meta.env.VITE_API_URL}/api/mii/has-liked?ids=${ids}`, { credentials: "include" })
|
||||
.then((res) => (res.ok ? res.json() : []))
|
||||
.then((likedIds: number[]) => setLikedIds(new Set(likedIds)))
|
||||
.catch((err) => {
|
||||
console.error("Error fetching likes:", err);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [searchParams, userId, parentPage]);
|
||||
}, [searchParams, userId, parentPage, $session]);
|
||||
|
||||
async function handleAcceptAll() {
|
||||
if (!data) return;
|
||||
setAcceptingAll(true);
|
||||
try {
|
||||
await Promise.all(
|
||||
data.miis.map((mii) =>
|
||||
fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
}),
|
||||
),
|
||||
);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (userId) params.append("userId", userId.toString());
|
||||
if (parentPage) params.append("parentPage", parentPage);
|
||||
const res = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${params.toString()}`, { credentials: "include" });
|
||||
if (res.ok) setData(await res.json());
|
||||
} finally {
|
||||
setAcceptingAll(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -62,6 +95,16 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
</div>
|
||||
|
||||
<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
|
||||
{parentPage === "admin" && data.miis.length > 0 && (
|
||||
<button
|
||||
onClick={handleAcceptAll}
|
||||
disabled={acceptingAll}
|
||||
className="pill button flex items-center gap-1.5 px-3 py-1.5 bg-green-500! border-green-600! hover:bg-green-600! disabled:opacity-60 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-xl shadow transition-colors"
|
||||
>
|
||||
<Icon icon="material-symbols:check-circle-rounded" className="text-base" />
|
||||
{acceptingAll ? "Accepting…" : `Accept All`}
|
||||
</button>
|
||||
)}
|
||||
<FilterMenu />
|
||||
<SortSelect />
|
||||
</div>
|
||||
|
|
@ -80,21 +123,29 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{parentPage !== "admin" ? <Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
||||
<img
|
||||
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
||||
width={240}
|
||||
height={160}
|
||||
alt="mii image"
|
||||
className="w-full h-auto aspect-3/2 object-contain"
|
||||
/>
|
||||
</Link> : <Carousel
|
||||
images={[
|
||||
`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`,
|
||||
...(mii.platform === "THREE_DS" ? [`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=qr-code`] : [`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=features`]),
|
||||
...Array.from({ length: mii.imageCount }, (_, index) => `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=image${index}`),
|
||||
]}
|
||||
/>}
|
||||
{parentPage !== "admin" ? (
|
||||
<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
||||
<img
|
||||
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
||||
width={240}
|
||||
height={160}
|
||||
alt="mii image"
|
||||
className="w-full h-auto aspect-3/2 object-contain"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-1 rounded-xl bg-zinc-200">
|
||||
{[
|
||||
`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`,
|
||||
mii.platform === "THREE_DS"
|
||||
? `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=qr-code`
|
||||
: `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=features`,
|
||||
...Array.from({ length: mii.imageCount }, (_, i) => `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=image${i}`),
|
||||
].map((src, i) => (
|
||||
<img key={i} src={src} alt="mii image" className="w-full bg-zinc-200" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<div className="flex justify-between">
|
||||
|
|
@ -109,6 +160,7 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{mii.tags.map((tag: string) => (
|
||||
<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
|
|
@ -117,8 +169,10 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{parentPage === "admin" && mii.description && <Description text={mii.description} />}
|
||||
|
||||
<div className="mt-auto grid grid-cols-2 items-center">
|
||||
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
|
||||
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
|
||||
|
||||
{!userId && (
|
||||
<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
|
|
@ -135,13 +189,12 @@ export default function MiiList({ parentPage, userId }: Props) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Controls */}
|
||||
{parentPage === "admin" && (
|
||||
<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(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH", credentials: "include" });
|
||||
await fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, { method: "POST", credentials: "include" });
|
||||
}}
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default function DeleteAccount() {
|
|||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch("/api/auth/delete", { method: "DELETE" });
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/delete`, { method: "POST", credentials: "include" });
|
||||
if (!response.ok) {
|
||||
const { error } = await response.json();
|
||||
setError(error);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
|
|||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/about-me`, {
|
||||
method: "PATCH",
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ description }),
|
||||
credentials: "include",
|
||||
|
|
@ -52,7 +52,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
|
|||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/name`, {
|
||||
method: "PATCH",
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name }),
|
||||
credentials: "include",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function ProfilePictureSettings() {
|
|||
if (newPicture) formData.append("image", newPicture);
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/picture`, {
|
||||
method: "PATCH",
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "include",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,456 +0,0 @@
|
|||
// import { redirect } from "next/navigation";
|
||||
|
||||
// import { useCallback, useEffect, useRef, useState } from "react";
|
||||
// import { FileWithPath } from "react-dropzone";
|
||||
// import { Mii, MiiGender, MiiMakeup } from "@prisma/client";
|
||||
// import { useSession } from "next-auth/react";
|
||||
|
||||
// import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
|
||||
// import { defaultInstructions, minifyInstructions } from "@/lib/switch";
|
||||
// import { SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
|
||||
// import TagSelector from "../tag-selector";
|
||||
// import ImageList from "./image-list";
|
||||
// import LikeButton from "../like-button";
|
||||
// import Carousel from "../carousel";
|
||||
// import SubmitButton from "../submit-button";
|
||||
// import Dropzone from "../dropzone";
|
||||
// import MiiEditor from "./mii-editor";
|
||||
// import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
// import { Icon } from "@iconify/react";
|
||||
// import SwitchFileUpload from "./switch-file-upload";
|
||||
|
||||
// interface Props {
|
||||
// mii: Mii;
|
||||
// likes: number;
|
||||
// }
|
||||
|
||||
// function deepMerge<T>(target: T, source: Partial<T>): T {
|
||||
// const output = structuredClone(target);
|
||||
|
||||
// if (typeof source !== "object" || source === null) return output;
|
||||
|
||||
// for (const key in source) {
|
||||
// const sourceValue = source[key];
|
||||
// const targetValue = (output as any)[key];
|
||||
|
||||
// if (typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue)) {
|
||||
// (output as any)[key] = deepMerge(targetValue, sourceValue);
|
||||
// } else {
|
||||
// (output as any)[key] = sourceValue;
|
||||
// }
|
||||
// }
|
||||
|
||||
// return output;
|
||||
// }
|
||||
|
||||
// export default function EditForm({ mii, likes }: Props) {
|
||||
// const session = useSession();
|
||||
// const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||
|
||||
// const handleFilesChange: React.Dispatch<React.SetStateAction<FileWithPath[]>> = (updater) => {
|
||||
// hasCustomImagesChanged.current = true;
|
||||
// setFiles(updater);
|
||||
// };
|
||||
|
||||
// const handleDrop = useCallback(
|
||||
// (acceptedFiles: FileWithPath[]) => {
|
||||
// if (files.length >= 3) return;
|
||||
// hasCustomImagesChanged.current = true;
|
||||
|
||||
// setFiles((prev) => [...prev, ...acceptedFiles]);
|
||||
// },
|
||||
// [files.length],
|
||||
// );
|
||||
|
||||
// const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
// const [name, setName] = useState(mii.name);
|
||||
// const [tags, setTags] = useState(mii.tags);
|
||||
// const [description, setDescription] = useState(mii.description);
|
||||
// const [gender, setGender] = useState<MiiGender>(mii.gender ?? "MALE");
|
||||
// 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 [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
|
||||
// const nameValidation = nameSchema.safeParse(name);
|
||||
// if (!nameValidation.success) {
|
||||
// setError(nameValidation.error.issues[0].message);
|
||||
// return;
|
||||
// }
|
||||
// const tagsValidation = tagsSchema.safeParse(tags);
|
||||
// if (!tagsValidation.success) {
|
||||
// setError(tagsValidation.error.issues[0].message);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // Send request to server
|
||||
// const formData = new FormData();
|
||||
// if (name != mii.name) formData.append("name", name);
|
||||
// if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
|
||||
// if (description && description != mii.description) formData.append("description", description);
|
||||
// if (gender != mii.gender) formData.append("gender", gender);
|
||||
// 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 (hasCustomImagesChanged.current) {
|
||||
// files.forEach((file, index) => {
|
||||
// // image1, image2, etc.
|
||||
// formData.append(`image${index + 1}`, file);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // Switch pictures
|
||||
// async function getBlob(uri: string): Promise<Blob | null> {
|
||||
// const response = await fetch(uri);
|
||||
// if (!response.ok) {
|
||||
// setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// const blob = await response.blob();
|
||||
// if (!blob.type.startsWith("image/")) {
|
||||
// setError("Invalid image file found");
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// return blob;
|
||||
// }
|
||||
|
||||
// if (miiPortraitUri && hasMiiPortraitChanged.current) {
|
||||
// const blob = await getBlob(miiPortraitUri);
|
||||
// if (blob) formData.append("miiPortraitImage", blob);
|
||||
// }
|
||||
// if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
|
||||
// const blob = await getBlob(miiFeaturesUri);
|
||||
// if (blob) formData.append("miiFeaturesImage", blob);
|
||||
// }
|
||||
|
||||
// const response = await fetch(`/api/mii/${mii.id}/edit`, {
|
||||
// method: "PATCH",
|
||||
// body: formData,
|
||||
// });
|
||||
// const { error } = await response.json();
|
||||
|
||||
// if (!response.ok) {
|
||||
// setError(error);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 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 () => {
|
||||
// try {
|
||||
// const existing = await Promise.all(
|
||||
// Array.from({ length: mii.imageCount }, async (_, index) => {
|
||||
// const path = `/mii/${mii.id}/image?type=image${index}`;
|
||||
// const response = await fetch(path);
|
||||
// const blob = await response.blob();
|
||||
|
||||
// return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path });
|
||||
// }),
|
||||
// );
|
||||
|
||||
// setFiles(existing);
|
||||
// } catch (error) {
|
||||
// console.error("Error loading existing images:", error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// loadExistingImages();
|
||||
// }, [mii.id, mii.imageCount]);
|
||||
|
||||
// return (
|
||||
// <div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
|
||||
// <div className="flex justify-center">
|
||||
// <div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
|
||||
// <Carousel
|
||||
// images={[
|
||||
// miiPortraitUri ?? `/mii/${mii.id}/image?type=mii`,
|
||||
// ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [miiFeaturesUri ?? `/mii/${mii.id}/image?type=features`]),
|
||||
// ...files.map((file) => URL.createObjectURL(file)),
|
||||
// ]}
|
||||
// />
|
||||
|
||||
// <div className="p-4 flex flex-col gap-1 h-full">
|
||||
// <h1 className="font-bold text-2xl line-clamp-1" title={name}>
|
||||
// {name || "Mii name"}
|
||||
// </h1>
|
||||
// <div id="tags" className="flex flex-wrap gap-1">
|
||||
// {tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
|
||||
// {tags.map((tag) => (
|
||||
// <span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
// {tag}
|
||||
// </span>
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
// <div className="mt-auto">
|
||||
// <LikeButton likes={likes} isLiked={false} abbreviate disabled />
|
||||
// </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>
|
||||
// <h2 className="text-2xl font-bold">Edit your Mii</h2>
|
||||
// <p className="text-sm text-zinc-500">Make changes to your existing Mii.</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>
|
||||
|
||||
// <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>
|
||||
|
||||
// <div className="w-full grid grid-cols-3 items-start">
|
||||
// <label htmlFor="reason-note" className="font-semibold py-2">
|
||||
// Description
|
||||
// </label>
|
||||
// <textarea
|
||||
// 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>
|
||||
|
||||
// {session.data?.user?.id == import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID && (
|
||||
// <>
|
||||
// <div className="w-full grid grid-cols-3 items-center">
|
||||
// <label htmlFor="quarantined" className="font-semibold py-2">
|
||||
// Quarantined
|
||||
// </label>
|
||||
|
||||
// <div className="col-span-2 flex gap-1">
|
||||
// <input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={(e) => setQuarantined(e.target.checked)} />
|
||||
// </div>
|
||||
// </div>
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {/* Makeup/Images/Instructions (Switch only) */}
|
||||
// {mii.platform === "SWITCH" && (
|
||||
// <>
|
||||
// <div className="w-full grid grid-cols-3 items-start z-20">
|
||||
// <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>
|
||||
|
||||
// <div className="w-full grid grid-cols-3 items-start">
|
||||
// <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 Portrait */}
|
||||
// <div>
|
||||
// {/* Separator */}
|
||||
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
// <hr className="grow border-zinc-300" />
|
||||
// <span>Mii Portrait</span>
|
||||
// <hr className="grow border-zinc-300" />
|
||||
// </div>
|
||||
|
||||
// <div className="flex flex-col items-center gap-2">
|
||||
// <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>
|
||||
|
||||
// <p className="text-xs text-zinc-400 text-center mt-2">You must upload a screenshot of the features, check tutorial on how.</p>
|
||||
// </div>
|
||||
|
||||
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
// <hr className="grow border-zinc-300" />
|
||||
// <span>Instructions</span>
|
||||
// <hr className="grow border-zinc-300" />
|
||||
// </div>
|
||||
|
||||
// {/* 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 />
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {/* Separator */}
|
||||
// <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
// <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">
|
||||
// <Dropzone onDrop={handleDrop}>
|
||||
// <p className="text-center text-sm">
|
||||
// Drag and drop your images here
|
||||
// <br />
|
||||
// or click to open
|
||||
// </p>
|
||||
// </Dropzone>
|
||||
// </div>
|
||||
|
||||
// <ImageList files={files} setFiles={handleFilesChange} />
|
||||
|
||||
// <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} text="Edit" className="ml-auto" />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { type FileWithPath } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import qrcode from "qrcode-generator";
|
||||
|
||||
import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
|
||||
import { defaultInstructions, type SwitchMiiInstructions, ThreeDsTomodachiLifeMii, convertQrCode } from "@tomodachi-share/shared";
|
||||
import { Mii } from "@tomodachi-share/shared/miijs";
|
||||
|
||||
import TagSelector from "../tag-selector";
|
||||
import ImageList from "./image-list";
|
||||
import SwitchFileUpload from "./switch-file-upload";
|
||||
import QrUpload from "./qr-upload";
|
||||
import Camera from "./camera";
|
||||
import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
|
||||
import MiiEditor from "./mii-editor";
|
||||
import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
|
||||
import LikeButton from "../like-button";
|
||||
import Carousel from "../carousel";
|
||||
import SubmitButton from "../submit-button";
|
||||
import Dropzone from "../dropzone";
|
||||
import type { MiiPlatform, MiiGender, MiiMakeup } from "@tomodachi-share/shared";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
export default function SubmitForm() {
|
||||
const navigate = useNavigate();
|
||||
const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
if (files.length >= 3) return;
|
||||
setFiles((prev) => [...prev, ...acceptedFiles]);
|
||||
},
|
||||
[files.length],
|
||||
);
|
||||
|
||||
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
|
||||
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
|
||||
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>();
|
||||
const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
|
||||
|
||||
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);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validate before sending request
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
if (!nameValidation.success) {
|
||||
setError(nameValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
const tagsValidation = tagsSchema.safeParse(tags);
|
||||
if (!tagsValidation.success) {
|
||||
setError(tagsValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send request to server
|
||||
const formData = new FormData();
|
||||
formData.append("platform", platform);
|
||||
formData.append("name", name);
|
||||
formData.append("tags", JSON.stringify(tags));
|
||||
formData.append("description", description);
|
||||
formData.append("youtubeId", youtubeId);
|
||||
files.forEach((file, index) => {
|
||||
// image1, image2, etc.
|
||||
formData.append(`image${index + 1}`, file);
|
||||
});
|
||||
|
||||
if (platform === "THREE_DS") {
|
||||
formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
|
||||
} else if (platform === "SWITCH") {
|
||||
const portraitResponse = await fetch(miiPortraitUri!);
|
||||
const featuresResponse = await fetch(miiFeaturesUri!);
|
||||
|
||||
if (!portraitResponse.ok || !featuresResponse.ok) {
|
||||
setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
|
||||
return;
|
||||
}
|
||||
|
||||
const portraitBlob = await portraitResponse.blob();
|
||||
const featuresBlob = await featuresResponse.blob();
|
||||
if (!portraitBlob.type.startsWith("image/") || !featuresBlob.type.startsWith("image/")) {
|
||||
setError("Invalid image file found");
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append("gender", gender);
|
||||
formData.append("makeup", makeup);
|
||||
formData.append("miiPortraitImage", portraitBlob);
|
||||
formData.append("miiFeaturesImage", featuresBlob);
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/submit`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "include",
|
||||
});
|
||||
const { id, error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(String(error)); // app can crash if error message is not a string
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(`/mii/${id}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
|
||||
const preview = async () => {
|
||||
setError("");
|
||||
|
||||
// Validate QR code size
|
||||
if (qrBytesRaw.length !== 372) {
|
||||
setError("QR code size is not a valid Tomodachi Life QR code");
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert QR code to JS (3DS)
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
|
||||
try {
|
||||
conversion = convertQrCode(qrBytes);
|
||||
setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : String(error));
|
||||
return;
|
||||
}
|
||||
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
try {
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
const generatedCode = qrcode(0, "L");
|
||||
generatedCode.addData(byteString, "Byte");
|
||||
generatedCode.make();
|
||||
|
||||
setGeneratedQrCodeUri(generatedCode.createDataURL());
|
||||
} catch {
|
||||
setError("Failed to regenerate QR code");
|
||||
}
|
||||
};
|
||||
|
||||
preview();
|
||||
}, [qrBytesRaw, platform]);
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
|
||||
<Carousel
|
||||
images={[
|
||||
miiPortraitUri ?? "/loading.svg",
|
||||
...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : [miiFeaturesUri ?? "/loading.svg"]),
|
||||
...files.map((file) => URL.createObjectURL(file)),
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<h1 className="font-bold text-2xl line-clamp-1" title={name}>
|
||||
{name || "Mii name"}
|
||||
</h1>
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
|
||||
{tags.map((tag) => (
|
||||
<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto">
|
||||
<LikeButton likes={0} isLiked={false} disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-2xl">
|
||||
<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>
|
||||
|
||||
{/* 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-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">
|
||||
<img
|
||||
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">
|
||||
<img
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import AdminBanner from "./components/admin/banner";
|
||||
import Footer from "./components/footer";
|
||||
import Header from "./components/header";
|
||||
import { useEffect } from "react";
|
||||
|
|
@ -27,7 +28,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
|||
return (
|
||||
<>
|
||||
<Header />
|
||||
{/* <AdminBanner /> */}
|
||||
<AdminBanner />
|
||||
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
|
||||
<Footer />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import ProfileLikesPage from "./pages/profile/likes.tsx";
|
|||
import ReportMiiPage from "./pages/report/mii.tsx";
|
||||
import ReportUserPage from "./pages/report/user.tsx";
|
||||
import AdminPage from "./pages/admin.tsx";
|
||||
import EditMiiPage from "./pages/edit.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
|
|
@ -30,6 +31,7 @@ createRoot(document.getElementById("root")!).render(
|
|||
<Routes>
|
||||
<Route path="/" element={<IndexPage />} />
|
||||
<Route path="/mii/:id" element={<MiiPage />} />
|
||||
<Route path="/edit/:id" element={<EditMiiPage />} />
|
||||
<Route path="/profile" element={<ProfileLayout />}>
|
||||
<Route path=":id" element={<ProfilePage />} />
|
||||
<Route path="likes" element={<ProfileLikesPage />} />
|
||||
|
|
|
|||
|
|
@ -2,10 +2,16 @@ import { useStore } from "@nanostores/react";
|
|||
import MiiList from "../components/mii/list";
|
||||
import { session } from "../session";
|
||||
import { Navigate } from "react-router";
|
||||
import BannerForm from "../components/admin/banner-form";
|
||||
|
||||
export default function AdminPage() {
|
||||
const $session = useStore(session);
|
||||
if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
|
||||
if ($session === null || ($session && Number($session?.user?.id) !== 1)) return <Navigate to="/404" replace />;
|
||||
return <MiiList parentPage="admin" />;
|
||||
if ($session === null || Number($session?.user?.id) != import.meta.env.VITE_ADMIN_USER_ID) return <Navigate to="/404" replace />;
|
||||
return (
|
||||
<>
|
||||
<BannerForm />
|
||||
<MiiList parentPage="admin" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
474
frontend/src/pages/edit.tsx
Normal file
474
frontend/src/pages/edit.tsx
Normal file
|
|
@ -0,0 +1,474 @@
|
|||
import { useStore } from "@nanostores/react";
|
||||
import { Navigate, useNavigate, useParams } from "react-router";
|
||||
import { session } from "../session";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { type FileWithPath } from "react-dropzone";
|
||||
|
||||
import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
|
||||
import { type MiiGender, type MiiMakeup, type SwitchMiiInstructions, deepMerge, defaultInstructions, minifyInstructions } from "@tomodachi-share/shared";
|
||||
import Carousel from "../components/carousel";
|
||||
import LikeButton from "../components/like-button";
|
||||
import TagSelector from "../components/tag-selector";
|
||||
import { Icon } from "@iconify/react";
|
||||
import SwitchFileUpload from "../components/submit-form/switch-file-upload";
|
||||
import SwitchSubmitTutorialButton from "../components/tutorial/switch-submit";
|
||||
import MiiEditor from "../components/submit-form/mii-editor";
|
||||
import ImageList from "../components/submit-form/image-list";
|
||||
import Dropzone from "../components/dropzone";
|
||||
import SubmitButton from "../components/submit-button";
|
||||
|
||||
export default function EditMiiPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const $session = useStore(session);
|
||||
const [mii, setMii] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||
|
||||
const handleFilesChange: React.Dispatch<React.SetStateAction<FileWithPath[]>> = (updater) => {
|
||||
hasCustomImagesChanged.current = true;
|
||||
setFiles(updater);
|
||||
};
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
if (files.length >= 3) return;
|
||||
hasCustomImagesChanged.current = true;
|
||||
|
||||
setFiles((prev) => [...prev, ...acceptedFiles]);
|
||||
},
|
||||
[files.length],
|
||||
);
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [gender, setGender] = useState<MiiGender>("MALE");
|
||||
const [makeup, setMakeup] = useState<MiiMakeup>("PARTIAL");
|
||||
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(undefined);
|
||||
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(undefined);
|
||||
const [youtubeId, setYouTubeId] = useState("");
|
||||
const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
|
||||
|
||||
const [quarantined, setQuarantined] = useState(false);
|
||||
const hasCustomImagesChanged = useRef(false);
|
||||
const hasMiiPortraitChanged = useRef(false);
|
||||
const hasMiiFeaturesChanged = useRef(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validate before sending request
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
if (!nameValidation.success) {
|
||||
setError(nameValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
const tagsValidation = tagsSchema.safeParse(tags);
|
||||
if (!tagsValidation.success) {
|
||||
setError(tagsValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send request to server
|
||||
const formData = new FormData();
|
||||
if (name != mii.name) formData.append("name", name);
|
||||
if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
|
||||
if (description && description != mii.description) formData.append("description", description);
|
||||
if (gender != mii.gender) formData.append("gender", gender);
|
||||
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 (hasCustomImagesChanged.current) {
|
||||
files.forEach((file, index) => {
|
||||
// image1, image2, etc.
|
||||
formData.append(`image${index + 1}`, file);
|
||||
});
|
||||
}
|
||||
|
||||
// Switch pictures
|
||||
async function getBlob(uri: string): Promise<Blob | null> {
|
||||
const response = await fetch(uri);
|
||||
if (!response.ok) {
|
||||
setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
|
||||
return null;
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
if (!blob.type.startsWith("image/")) {
|
||||
setError("Invalid image file found");
|
||||
return null;
|
||||
}
|
||||
|
||||
return blob;
|
||||
}
|
||||
|
||||
if (miiPortraitUri && hasMiiPortraitChanged.current) {
|
||||
const blob = await getBlob(miiPortraitUri);
|
||||
if (blob) formData.append("miiPortraitImage", blob);
|
||||
}
|
||||
if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
|
||||
const blob = await getBlob(miiFeaturesUri);
|
||||
if (blob) formData.append("miiFeaturesImage", blob);
|
||||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${mii.id}/edit`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "include",
|
||||
});
|
||||
const { error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(`/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(() => {
|
||||
if (!mii) return;
|
||||
const loadExistingImages = async () => {
|
||||
try {
|
||||
const existing = await Promise.all(
|
||||
Array.from({ length: mii.imageCount }, async (_, index) => {
|
||||
const path = `${API_URL}/mii/${mii.id}/image?type=image${index}`;
|
||||
const response = await fetch(path);
|
||||
const blob = await response.blob();
|
||||
|
||||
return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path });
|
||||
}),
|
||||
);
|
||||
|
||||
setFiles(existing);
|
||||
} catch (error) {
|
||||
console.error("Error loading existing images:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadExistingImages();
|
||||
}, [mii, mii?.id, mii?.imageCount]);
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_URL}/api/mii/${id}/info`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch Miis");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setMii(data);
|
||||
setName(data.name);
|
||||
setTags(data.tags);
|
||||
setDescription(data.description);
|
||||
setGender(data.gender ?? "MALE");
|
||||
setMakeup(data.makeup ?? "PARTIAL");
|
||||
setMiiPortraitUri(`${API_URL}/mii/${data.id}/image?type=mii`);
|
||||
setMiiFeaturesUri(`${API_URL}/mii/${data.id}/image?type=features`);
|
||||
setYouTubeId(data.youtubeId ?? "");
|
||||
setQuarantined(data.quarantined);
|
||||
instructions.current = deepMerge(defaultInstructions, (data.instructions as object) ?? {});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
navigate("/404");
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
|
||||
if ($session === null) return <Navigate to="/" replace />;
|
||||
if (loading || !mii) return <div className="p-6 text-center">Loading...</div>;
|
||||
if (Number($session?.user?.id) !== mii.userId && Number($session?.user?.id) !== Number(import.meta.env.VITE_ADMIN_USER_ID))
|
||||
// Check ownership
|
||||
return <Navigate to="/" replace />;
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
|
||||
<Carousel
|
||||
images={[
|
||||
miiPortraitUri ?? `${API_URL}/mii/${mii.id}/image?type=mii`,
|
||||
...(mii.platform === "THREE_DS"
|
||||
? [`${API_URL}/mii/${mii.id}/image?type=qr-code`]
|
||||
: [miiFeaturesUri ?? `${API_URL}/mii/${mii.id}/image?type=features`]),
|
||||
...files.map((file) => URL.createObjectURL(file)),
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<h1 className="font-bold text-2xl line-clamp-1" title={name}>
|
||||
{name || "Mii name"}
|
||||
</h1>
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
|
||||
{tags.map((tag: string) => (
|
||||
<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto">
|
||||
<LikeButton likes={0} isLiked={false} abbreviate disabled />
|
||||
</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>
|
||||
<h2 className="text-2xl font-bold">Edit your Mii</h2>
|
||||
<p className="text-sm text-zinc-500">Make changes to your existing Mii.</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>
|
||||
|
||||
<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>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-start">
|
||||
<label htmlFor="reason-note" className="font-semibold py-2">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
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>
|
||||
|
||||
{$session?.user?.id == import.meta.env.VITE_ADMIN_USER_ID && (
|
||||
<>
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="quarantined" className="font-semibold py-2">
|
||||
Quarantined
|
||||
</label>
|
||||
|
||||
<div className="col-span-2 flex gap-1">
|
||||
<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={(e) => setQuarantined(e.target.checked)} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Makeup/Images/Instructions (Switch only) */}
|
||||
{mii.platform === "SWITCH" && (
|
||||
<>
|
||||
<div className="w-full grid grid-cols-3 items-start z-20">
|
||||
<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>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-start">
|
||||
<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 Portrait */}
|
||||
<div>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Mii Portrait</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<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>
|
||||
|
||||
<p className="text-xs text-zinc-400 text-center mt-2">You must upload a screenshot of the features, check tutorial on how.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Instructions</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
{/* 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 />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
|
||||
<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">
|
||||
<Dropzone onDrop={handleDrop}>
|
||||
<p className="text-center text-sm">
|
||||
Drag and drop your images here
|
||||
<br />
|
||||
or click to open
|
||||
</p>
|
||||
</Dropzone>
|
||||
</div>
|
||||
|
||||
<ImageList files={files} setFiles={handleFilesChange} />
|
||||
|
||||
<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} text="Edit" className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,12 +10,17 @@ import MiiInstructions from "../components/mii/instructions";
|
|||
import { Icon } from "@iconify/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router";
|
||||
import AuthorButtons from "../components/mii/author-buttons";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../session";
|
||||
|
||||
export default function MiiPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const $session = useStore(session);
|
||||
const [mii, setMii] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
|
|
@ -28,6 +33,14 @@ export default function MiiPage() {
|
|||
.then((data) => {
|
||||
setMii(data);
|
||||
setLoading(false);
|
||||
|
||||
if ($session === null || $session === undefined) return;
|
||||
fetch(`${API_URL}/api/mii/has-liked?ids=${data.id}`, { credentials: "include" })
|
||||
.then((res) => (res.ok ? res.json() : []))
|
||||
.then((likedIds: number[]) => setIsLiked(likedIds.length > 0))
|
||||
.catch((err) => {
|
||||
console.error("Error liking:", err);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
|
|
@ -36,10 +49,7 @@ export default function MiiPage() {
|
|||
});
|
||||
}, [id]);
|
||||
|
||||
if (loading || !mii) {
|
||||
return <div className="p-6 text-center">Loading...</div>;
|
||||
}
|
||||
|
||||
if (loading || !mii) return <div className="p-6 text-center">Loading...</div>;
|
||||
const images = [...Array.from({ length: mii.imageCount ?? 0 }, (_, index) => `${API_URL}/mii/${mii.id}/image?type=image${index}`)];
|
||||
|
||||
return (
|
||||
|
|
@ -254,7 +264,7 @@ export default function MiiPage() {
|
|||
{/* Submission name */}
|
||||
<h1 className="text-4xl font-extrabold wrap-break-word whitespace-break-spaces text-amber-700 flex-1 min-w-0">{mii.name}</h1>
|
||||
{/* Like button */}
|
||||
<LikeButton likes={mii._count?.likedBy ?? 0} miiId={mii.id} isLiked={false} big />
|
||||
<LikeButton likes={mii._count?.likedBy ?? 0} miiId={mii.id} isLiked={isLiked} big />
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div id="tags" className="flex flex-wrap gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
|
||||
|
|
@ -291,7 +301,7 @@ export default function MiiPage() {
|
|||
|
||||
{/* Buttons */}
|
||||
<div className="flex gap-3 w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:size-12 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-xs">
|
||||
{/* <AuthorButtons mii={mii} /> */}
|
||||
<AuthorButtons mii={mii} />
|
||||
|
||||
<ShareMiiButton miiId={mii.id} />
|
||||
<Link aria-label="Report Mii" to={`/report/mii/${mii.id}`}>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,13 @@ export default function ProfileLayout() {
|
|||
|
||||
useEffect(() => {
|
||||
if ($session === undefined) return; // session still loading
|
||||
if ($session === null) {
|
||||
// not logged in
|
||||
|
||||
const userId = id ?? $session?.user?.id;
|
||||
if (!userId) {
|
||||
navigate("/404");
|
||||
return;
|
||||
}
|
||||
|
||||
const userId = id ? id : $session.user!.id;
|
||||
|
||||
fetch(`${import.meta.env.VITE_API_URL}/api/profile/${userId}/info`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch profile");
|
||||
|
|
|
|||
|
|
@ -1,11 +1,542 @@
|
|||
import { useStore } from "@nanostores/react";
|
||||
import SubmitForm from "../components/submit-form";
|
||||
import { Navigate, useNavigate } from "react-router";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { FileWithPath } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import {
|
||||
convertQrCode,
|
||||
defaultInstructions,
|
||||
ThreeDsTomodachiLifeMii,
|
||||
type MiiGender,
|
||||
type MiiMakeup,
|
||||
type MiiPlatform,
|
||||
type SwitchMiiInstructions,
|
||||
} from "@tomodachi-share/shared";
|
||||
import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
|
||||
import type { Mii } from "@tomodachi-share/shared/miijs";
|
||||
|
||||
import Carousel from "../components/carousel";
|
||||
import LikeButton from "../components/like-button";
|
||||
import TagSelector from "../components/tag-selector";
|
||||
import SwitchFileUpload from "../components/submit-form/switch-file-upload";
|
||||
import SwitchSubmitTutorialButton from "../components/tutorial/switch-submit";
|
||||
import QrUpload from "../components/submit-form/qr-upload";
|
||||
import Camera from "../components/submit-form/camera";
|
||||
import ThreeDsScanTutorialButton from "../components/tutorial/3ds-scan";
|
||||
import Dropzone from "../components/dropzone";
|
||||
import ImageList from "../components/submit-form/image-list";
|
||||
import SubmitButton from "../components/submit-button";
|
||||
import MiiEditor from "../components/submit-form/mii-editor";
|
||||
|
||||
import { session } from "../session";
|
||||
import { Navigate } from "react-router";
|
||||
import qrcode from "qrcode-generator";
|
||||
|
||||
export default function SubmitPage() {
|
||||
const navigate = useNavigate();
|
||||
const $session = useStore(session);
|
||||
const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles: FileWithPath[]) => {
|
||||
if (files.length >= 3) return;
|
||||
setFiles((prev) => [...prev, ...acceptedFiles]);
|
||||
},
|
||||
[files.length],
|
||||
);
|
||||
|
||||
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
|
||||
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
|
||||
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>();
|
||||
const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
|
||||
|
||||
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);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validate before sending request
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
if (!nameValidation.success) {
|
||||
setError(nameValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
const tagsValidation = tagsSchema.safeParse(tags);
|
||||
if (!tagsValidation.success) {
|
||||
setError(tagsValidation.error.issues[0].message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send request to server
|
||||
const formData = new FormData();
|
||||
formData.append("platform", platform);
|
||||
formData.append("name", name);
|
||||
formData.append("tags", JSON.stringify(tags));
|
||||
formData.append("description", description);
|
||||
formData.append("youtubeId", youtubeId);
|
||||
files.forEach((file, index) => {
|
||||
// image1, image2, etc.
|
||||
formData.append(`image${index + 1}`, file);
|
||||
});
|
||||
|
||||
if (platform === "THREE_DS") {
|
||||
formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
|
||||
} else if (platform === "SWITCH") {
|
||||
const portraitResponse = await fetch(miiPortraitUri!);
|
||||
const featuresResponse = await fetch(miiFeaturesUri!);
|
||||
|
||||
if (!portraitResponse.ok || !featuresResponse.ok) {
|
||||
setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
|
||||
return;
|
||||
}
|
||||
|
||||
const portraitBlob = await portraitResponse.blob();
|
||||
const featuresBlob = await featuresResponse.blob();
|
||||
if (!portraitBlob.type.startsWith("image/") || !featuresBlob.type.startsWith("image/")) {
|
||||
setError("Invalid image file found");
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append("gender", gender);
|
||||
formData.append("makeup", makeup);
|
||||
formData.append("miiPortraitImage", portraitBlob);
|
||||
formData.append("miiFeaturesImage", featuresBlob);
|
||||
formData.append("instructions", JSON.stringify(instructions.current));
|
||||
}
|
||||
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/submit`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "include",
|
||||
});
|
||||
const { id, error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(String(error)); // app can crash if error message is not a string
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(`/mii/${id}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
|
||||
const preview = async () => {
|
||||
setError("");
|
||||
|
||||
// Validate QR code size
|
||||
if (qrBytesRaw.length !== 372) {
|
||||
setError("QR code size is not a valid Tomodachi Life QR code");
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert QR code to JS (3DS)
|
||||
let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
|
||||
try {
|
||||
conversion = convertQrCode(qrBytes);
|
||||
setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : String(error));
|
||||
return;
|
||||
}
|
||||
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
try {
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
const generatedCode = qrcode(0, "L");
|
||||
generatedCode.addData(byteString, "Byte");
|
||||
generatedCode.make();
|
||||
|
||||
setGeneratedQrCodeUri(generatedCode.createDataURL());
|
||||
} catch {
|
||||
setError("Failed to regenerate QR code");
|
||||
}
|
||||
};
|
||||
|
||||
preview();
|
||||
}, [qrBytesRaw, platform]);
|
||||
|
||||
if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
|
||||
if ($session === null) return <Navigate to="/login" replace />;
|
||||
return <SubmitForm />;
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
|
||||
<Carousel
|
||||
images={[
|
||||
miiPortraitUri ?? "/loading.svg",
|
||||
...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : [miiFeaturesUri ?? "/loading.svg"]),
|
||||
...files.map((file) => URL.createObjectURL(file)),
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="p-4 flex flex-col gap-1 h-full">
|
||||
<h1 className="font-bold text-2xl line-clamp-1" title={name}>
|
||||
{name || "Mii name"}
|
||||
</h1>
|
||||
<div id="tags" className="flex flex-wrap gap-1">
|
||||
{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
|
||||
{tags.map((tag) => (
|
||||
<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto">
|
||||
<LikeButton likes={0} isLiked={false} disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-2xl">
|
||||
<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>
|
||||
|
||||
{/* 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-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">
|
||||
<img
|
||||
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">
|
||||
<img
|
||||
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} />
|
||||
<ThreeDsScanTutorialButton />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@ export * from "./constants";
|
|||
export * from "./qr-codes";
|
||||
export * from "./switch";
|
||||
export * from "./three-ds-tomodachi-life-mii";
|
||||
export * from "./utils";
|
||||
export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform, ReportReason } from "./types";
|
||||
|
|
|
|||
Loading…
Reference in a new issue