feat: groundwork for different platform tutorials

src/app/mii/[id]/page.tsx

@@ -12,7 +12,8 @@ import LikeButton from "@/components/like-button";
 import ImageViewer from "@/components/image-viewer";
 import DeleteMiiButton from "@/components/delete-mii";
 import ShareMiiButton from "@/components/share-mii-button";
-import ScanTutorialButton from "@/components/tutorial/scan";
+import ThreeDsScanTutorialButton from "@/components/tutorial/3ds-scan";
+import SwitchScanTutorialButton from "@/components/tutorial/switch-scan";
 
 interface Props {
 	params: Promise<{ id: string }>;
@@ -233,7 +234,7 @@ export default async function MiiPage({ params }: Props) {
 								<Icon icon="material-symbols:flag-rounded" />
 								<span>Report</span>
 							</Link>
-							<ScanTutorialButton />
+							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchScanTutorialButton />}
 						</div>
 					</div>
 				</div>

src/app/off-the-island/page.tsx

@@ -95,9 +95,7 @@ export default async function ExiledPage() {
 						<div key={mii.miiId} className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
 							<Image src={`/mii/${mii.miiId}/image?type=mii`} alt="mii image" width={96} height={96} />
 							<div className="p-4">
-								<p className="text-xl font-bold line-clamp-1" title={"hello"}>
-									{mii.mii.name}
-								</p>
+								<p className="text-xl font-bold line-clamp-1">{mii.mii.name}</p>
 								<p className="text-sm">
 									<span className="font-bold">Reason:</span> {mii.reason}
 								</p>

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

@@ -7,7 +7,7 @@ import { Icon } from "@iconify/react";
 
 import TutorialPage from "./page";
 
-export default function ScanTutorialButton() {
+export default function ThreeDsScanTutorialButton() {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 
@@ -66,11 +66,11 @@ export default function ScanTutorialButton() {
 							<div className="flex flex-col min-h-0 h-full">
 								<div className="overflow-hidden h-full" ref={emblaRef}>
 									<div className="flex h-full">
-										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
-										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/adding-mii/step2.png" />
-										<TutorialPage text="3. Press 'Scan QR Code'" imageSrc="/tutorial/adding-mii/step3.png" />
-										<TutorialPage text="4. Click on the QR code below the Mii's image" imageSrc="/tutorial/adding-mii/step4.png" />
-										<TutorialPage text="5. Scan with your 3DS" imageSrc="/tutorial/adding-mii/step5.png" />
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/3ds/step1.png" />
+										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/3ds/adding-mii/step2.png" />
+										<TutorialPage text="3. Press 'Scan QR Code'" imageSrc="/tutorial/3ds/adding-mii/step3.png" />
+										<TutorialPage text="4. Click on the QR code below the Mii's image" imageSrc="/tutorial/3ds/adding-mii/step4.png" />
+										<TutorialPage text="5. Scan with your 3DS" imageSrc="/tutorial/3ds/adding-mii/step5.png" />
 										<TutorialPage carouselIndex={selectedIndex} finishIndex={5} />
 									</div>
 								</div>

src/components/tutorial/3ds-submit.tsx

@@ -69,7 +69,7 @@ export default function ThreeDsSubmitTutorialButton() {
 							<div className="flex flex-col min-h-0 h-full">
 								<div className="overflow-hidden h-full" ref={emblaRef}>
 									<div className="flex h-full">
-										<StartingPage emblaApi={emblaApi} />
+										<StartingPage isSwitch emblaApi={emblaApi} />
 
 										{/* Allow Copying */}
 										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />

src/components/tutorial/starting-page.tsx

@@ -3,9 +3,10 @@ import { UseEmblaCarouselType } from "embla-carousel-react";
 
 interface Props {
 	emblaApi: UseEmblaCarouselType[1] | undefined;
+	isSwitch?: boolean;
 }
 
-export default function StartingPage({ emblaApi }: Props) {
+export default function StartingPage({ emblaApi, isSwitch }: Props) {
 	const goToTutorial = (index: number) => {
 		if (!emblaApi) return;
 
@@ -29,7 +30,7 @@ export default function StartingPage({ emblaApi }: Props) {
 					className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
 				>
 					<Image
-						src={"/tutorial/allow-copying/thumbnail.png"}
+						src={`/tutorial/${isSwitch ? "switch" : "3ds"}/allow-copying/thumbnail.png`}
 						alt="Allow Copying thumbnail"
 						width={128}
 						height={128}
@@ -45,7 +46,7 @@ export default function StartingPage({ emblaApi }: Props) {
 					className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
 				>
 					<Image
-						src={"/tutorial/create-qr-code/thumbnail.png"}
+						src={`/tutorial/${isSwitch ? "switch" : "3ds"}/create-qr-code/thumbnail.png`}
 						alt="Creating QR code thumbnail"
 						width={128}
 						height={128}

src/components/tutorial/switch-scan.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+import TutorialPage from "./page";
+
+export default function SwitchScanTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+			setSelectedIndex(0);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
+	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(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--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 w-full max-w-md h-[30rem] 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 p-6 pb-0">
+								<h2 className="text-xl font-bold">Tutorial</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>
+
+							<div className="flex flex-col min-h-0 h-full">
+								<div className="overflow-hidden h-full" ref={emblaRef}>
+									<div className="flex h-full">
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/switch/step1.png" />
+										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/switch/adding-mii/step2.png" />
+										<TutorialPage text="3. Press 'Scan QR Code'" imageSrc="/tutorial/switch/adding-mii/step3.png" />
+										<TutorialPage text="4. Click on the QR code below the Mii's image" imageSrc="/tutorial/switch/adding-mii/step4.png" />
+										<TutorialPage text="5. Scan with your 3DS" imageSrc="/tutorial/switch/adding-mii/step5.png" />
+										<TutorialPage carouselIndex={selectedIndex} finishIndex={5} />
+									</div>
+								</div>
+
+								<div className="flex justify-between items-center mt-2 px-6 pb-6">
+									<button
+										onClick={() => emblaApi?.scrollPrev()}
+										aria-label="Scroll Carousel Left"
+										className="pill button !p-1 aspect-square text-2xl"
+									>
+										<Icon icon="tabler:chevron-left" />
+									</button>
+
+									<span className="text-sm">Adding Mii to Island</span>
+
+									<button
+										onClick={() => emblaApi?.scrollNext()}
+										aria-label="Scroll Carousel Right"
+										className="pill button !p-1 aspect-square text-2xl"
+									>
+										<Icon icon="tabler:chevron-right" />
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}

src/components/tutorial/switch-submit.tsx

@@ -69,32 +69,35 @@ export default function SwitchSubmitTutorialButton() {
 							<div className="flex flex-col min-h-0 h-full">
 								<div className="overflow-hidden h-full" ref={emblaRef}>
 									<div className="flex h-full">
-										<StartingPage emblaApi={emblaApi} />
+										<StartingPage isSwitch emblaApi={emblaApi} />
 
 										{/* Allow Copying */}
-										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
-										<TutorialPage text="2. Go into 'Mii List'" imageSrc="/tutorial/allow-copying/step2.png" />
-										<TutorialPage text="3. Select and edit the Mii you wish to submit" imageSrc="/tutorial/allow-copying/step3.png" />
-										<TutorialPage text="4. Click 'Other Settings' in the information screen" imageSrc="/tutorial/allow-copying/step4.png" />
-										<TutorialPage text="5. Click on 'Don't Allow' under the 'Copying' text" imageSrc="/tutorial/allow-copying/step5.png" />
-										<TutorialPage text="6. Press 'Allow'" imageSrc="/tutorial/allow-copying/step6.png" />
-										<TutorialPage text="7. Confirm the edits to the Mii" imageSrc="/tutorial/allow-copying/step7.png" />
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/switch/step1.png" />
+										<TutorialPage text="2. Go into 'Mii List'" imageSrc="/tutorial/switch/allow-copying/step2.png" />
+										<TutorialPage text="3. Select and edit the Mii you wish to submit" imageSrc="/tutorial/switch/allow-copying/step3.png" />
+										<TutorialPage text="4. Click 'Other Settings' in the information screen" imageSrc="/tutorial/switch/allow-copying/step4.png" />
+										<TutorialPage text="5. Click on 'Don't Allow' under the 'Copying' text" imageSrc="/tutorial/switch/allow-copying/step5.png" />
+										<TutorialPage text="6. Press 'Allow'" imageSrc="/tutorial/switch/allow-copying/step6.png" />
+										<TutorialPage text="7. Confirm the edits to the Mii" imageSrc="/tutorial/switch/allow-copying/step7.png" />
 										<TutorialPage carouselIndex={selectedIndex} finishIndex={8} />
 
 										<StartingPage emblaApi={emblaApi} />
 
 										{/* Create QR Code */}
-										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/step1.png" />
-										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/create-qr-code/step2.png" />
-										<TutorialPage text="3. Press 'Create QR Code'" imageSrc="/tutorial/create-qr-code/step3.png" />
-										<TutorialPage text="4. Select and press 'OK' on the Mii you wish to submit" imageSrc="/tutorial/create-qr-code/step4.png" />
+										<TutorialPage text="1. Enter the town hall" imageSrc="/tutorial/switch/step1.png" />
+										<TutorialPage text="2. Go into 'QR Code'" imageSrc="/tutorial/switch/create-qr-code/step2.png" />
+										<TutorialPage text="3. Press 'Create QR Code'" imageSrc="/tutorial/switch/create-qr-code/step3.png" />
+										<TutorialPage
+											text="4. Select and press 'OK' on the Mii you wish to submit"
+											imageSrc="/tutorial/switch/create-qr-code/step4.png"
+										/>
 										<TutorialPage
 											text="5. Pick any option; it doesn't matter since the QR code regenerates upon submission."
-											imageSrc="/tutorial/create-qr-code/step5.png"
+											imageSrc="/tutorial/switch/create-qr-code/step5.png"
 										/>
 										<TutorialPage
 											text="6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card)."
-											imageSrc="/tutorial/create-qr-code/step6.png"
+											imageSrc="/tutorial/switch/create-qr-code/step6.png"
 										/>
 										<TutorialPage carouselIndex={selectedIndex} finishIndex={16} />
 									</div>