"use client"; import { redirect } from "next/navigation"; import { useCallback, useEffect, useRef, useState } from "react"; import { FileWithPath } from "react-dropzone"; import { Icon } from "@iconify/react"; import qrcode from "qrcode-generator"; import { MiiGender, MiiMakeup, MiiPlatform } from "@prisma/client"; import { nameSchema, tagsSchema } from "@/lib/schemas"; import { convertQrCode } from "@/lib/qr-codes"; import Mii from "@/lib/mii.js/mii"; import { ThreeDsTomodachiLifeMii } from "@/lib/three-ds-tomodachi-life-mii"; import { defaultInstructions } from "@/lib/switch"; import { SwitchMiiInstructions } from "@/types"; import TagSelector from "../tag-selector"; import ImageList from "./image-list"; import SwitchFileUpload from "./switch-file-upload"; import 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 Image from "next/image"; export default function SubmitForm() { const [files, setFiles] = useState([]); 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(); const [miiFeaturesUri, setMiiFeaturesUri] = useState(); const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState(); const [name, setName] = useState(""); const [tags, setTags] = useState([]); const [description, setDescription] = useState(""); const [qrBytesRaw, setQrBytesRaw] = useState([]); const [platform, setPlatform] = useState("SWITCH"); const [gender, setGender] = useState("MALE"); const [makeup, setMakeup] = useState("PARTIAL"); const instructions = useRef(defaultInstructions); const [error, setError] = useState(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); 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("/api/submit", { method: "POST", body: formData, }); const { id, error } = await response.json(); if (!response.ok) { setError(String(error)); // app can crash if error message is not a string return; } redirect(`/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 (
URL.createObjectURL(file)), ]} />

{name || "Mii name"}

{tags.length == 0 && tag} {tags.map((tag) => ( {tag} ))}

Submit your Mii

Share your creation for others to see.

{/* Separator */}
Info
{/* Platform select */}
{/* Animated indicator */} {/* TODO: maybe change width as part of animation? */}
{/* Switch button */} {/* 3DS button */}
{/* Name */}
setName(e.target.value)} />
{/* Description */}