Merge d331d8ed46 into 8dfd1d0b12

backend/src/app/api/submit/route.ts

@@ -38,7 +38,7 @@ const submitSchema = z.object({
 		.trim()
 		.transform((val) => (val === "" ? null : val))
 		.refine((val) => val === null || /^[a-zA-Z0-9_-]{11}$/.test(val), "Invalid YouTube video ID")
-		.optional(),
+		.nullish(),
 
 	way: z.enum(["savedata", "manual"]).optional(),
 
@@ -102,8 +102,8 @@ export async function POST(request: NextRequest) {
 		gender: formData.get("gender") ?? undefined, // ZOD MOMENT
 		makeup: formData.get("makeup") ?? undefined,
 		miiPortraitImage: formData.get("miiPortraitImage"),
-		youtubeId: formData.get("youtubeId"),
-		way: formData.get("way"),
+		youtubeId: formData.get("youtubeId") ?? undefined,
+		way: formData.get("way") ?? undefined,
 
 		miiDataFile: formData.get("miiDataFile") ?? undefined,
 

frontend/package.json

@@ -31,6 +31,7 @@
 		"react-image-crop": "^11.0.10",
 		"react-router": "^7.14.1",
 		"tailwindcss": "^4.2.2",
+		"vite-plugin-node-polyfills": "^0.26.0",
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {

frontend/src/components/tutorial/3ds-scan.tsx

@@ -1,54 +1,54 @@
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { Icon } from "@iconify/react";
-import Tutorial from ".";
-
-export default function ThreeDsScanTutorialButton() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<>
-			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
-				<Icon icon="fa:question-circle" />
-				<span>Tutorial</span>
-			</button>
-
-			{isOpen &&
-				createPortal(
-					<Tutorial
-						tutorials={[
-							{
-								title: "Adding Mii",
-								steps: [
-									{
-										text: "1. Enter the town hall",
-										imageSrc: "/tutorial/3ds/step1.png",
-									},
-									{
-										text: "2. Go into 'QR Code'",
-										imageSrc: "/tutorial/3ds/adding-mii/step2.png",
-									},
-									{
-										text: "3. Press 'Scan QR Code'",
-										imageSrc: "/tutorial/3ds/adding-mii/step3.png",
-									},
-									{
-										text: "4. Click on the QR code below the Mii's image",
-										imageSrc: "/tutorial/3ds/adding-mii/step4.png",
-									},
-									{
-										text: "5. Scan with your 3DS",
-										imageSrc: "/tutorial/3ds/adding-mii/step5.png",
-									},
-									{ type: "finish" },
-								],
-							},
-						]}
-						isOpen={isOpen}
-						setIsOpen={setIsOpen}
-					/>,
-					document.body,
-				)}
-		</>
-	);
-}
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function ThreeDsScanTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step2.png",
+									},
+									{
+										text: "3. Press 'Scan QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step3.png",
+									},
+									{
+										text: "4. Click on the QR code below the Mii's image",
+										imageSrc: "/tutorial/3ds/adding-mii/step4.png",
+									},
+									{
+										text: "5. Scan with your 3DS",
+										imageSrc: "/tutorial/3ds/adding-mii/step5.png",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/pages/submit.tsx

@@ -23,7 +23,7 @@ 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 ThreeDsSubmitTutorialButton from "../components/tutorial/3ds-submit";
 import Dropzone from "../components/dropzone";
 import ImageList from "../components/submit-form/image-list";
 import SubmitButton from "../components/submit-button";
@@ -472,7 +472,7 @@ export default function SubmitPage() {
 								Use your camera
 							</button>
 							<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-							<ThreeDsScanTutorialButton />
+							<ThreeDsSubmitTutorialButton />
 							<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
 						</div>
 					</div>

frontend/vite.config.ts

@@ -1,8 +1,20 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vite.dev/config/
-export default defineConfig({
-	plugins: [react(), tailwindcss()],
-});
+export default defineConfig(({ command }) => ({
+	plugins: [react(), tailwindcss(), nodePolyfills()],
+	resolve: {
+		alias:
+			command === "build"
+				? [
+						{
+							find: "vite-plugin-node-polyfills/shims/buffer",
+							replacement: require.resolve("vite-plugin-node-polyfills/shims/buffer"),
+						},
+					]
+				: [],
+	},
+}));