feat: integrate Sensei Spook mascot in 4 stances, speech bubbles, and style updates

components/screens/ResultScreen.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Download } from "lucide-react";
+import confetti from "canvas-confetti";
+import { BoothConfig } from "@/types/booth";
+import { useI18n } from "@/lib/i18n";
+import { MascotGuide } from "@/components/MascotGuide";
+
+interface ResultScreenProps {
+  config: BoothConfig;
+  resultImageUrl: string;
+  providerInfo?: {
+    provider: string;
+    model: string;
+    durationMs: number;
+    fallbackTriggered: boolean;
+  };
+  onStartOver?: () => void;
+}
+
+export const ResultScreen: React.FC<ResultScreenProps> = ({
+  config,
+  resultImageUrl,
+  providerInfo,
+  onStartOver,
+}) => {
+  const { t, isWeChat } = useI18n();
+  const [currentUrl, setCurrentUrl] = useState("");
+
+  useEffect(() => {
+    try {
+      confetti({
+        particleCount: 80,
+        spread: 85,
+        origin: { y: 0.65 },
+        colors: ["#ff6d00", "#06b6d4", "#a855f7", "#fbbf24", "#ffffff"],
+      });
+    } catch (e) {
+      // Ignore
+    }
+
+    if (typeof window !== "undefined") {
+      setCurrentUrl(window.location.href);
+    }
+  }, []);
+
+  const handleDownload = () => {
+    const a = document.createElement("a");
+    a.href = resultImageUrl;
+    a.download = `shanghai-karate-spooky-${Date.now()}.jpg`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+
+  return (
+    <div className="relative flex-1 flex flex-col justify-between p-2 sm:p-3 overflow-hidden select-none">
+      {/* Top spacing */}
+      <div className="w-full min-h-[4px] sm:min-h-[8px]" />
+
+      {/* Main Result Image Card - Compact 9:16 frame */}
+      <div className="relative w-full max-w-[275px] sm:max-w-[310px] mx-auto aspect-[9/16] rounded-2xl sm:rounded-3xl overflow-hidden bg-black border-4 border-black shadow-[0_8px_0_#090314,0_0_25px_rgba(255,109,0,0.3)] flex items-center justify-center my-auto">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={resultImageUrl}
+          alt="Halloween Karate Result"
+          className="w-full h-full object-cover select-none"
+        />
+
+        {/* WeChat Long-Press Save Floating Badge */}
+        {isWeChat && (
+          <div className="absolute top-2 inset-x-3 py-1 px-3 rounded-full bg-black/75 backdrop-blur-sm border border-amber-400/50 text-center">
+            <span className="text-[10px] sm:text-[11px] font-bold text-amber-300">
+              👉 {t(config.labels.wechatSaveTip)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom Bar: Mascot on far bottom-left, Save Button on bottom-right */}
+      <div className="w-full max-w-[340px] sm:max-w-md mx-auto flex items-end justify-between z-30 -mt-10 sm:-mt-12 px-1 pb-1">
+        {/* Mascot hugging the far bottom-left with speech bubble to the right and lifted higher */}
+        <div className="pointer-events-none -ml-4 sm:-ml-2 -mb-1">
+          <MascotGuide
+            pose="zen"
+            size="md"
+            speechPosition="right"
+            speechClassName="-translate-y-10 sm:-translate-y-8 max-w-[340px] sm:max-w-[400px]"
+            speechText={{
+              en: "Sensational! A true Shanghai Halloween Master!",
+              zh: "太赞了！真正的万圣空手道宗师诞生！",
+            }}
+          />
+        </div>
+
+        {/* Save Button on the bottom-right */}
+        <div className="pb-1.5 shrink-0">
+          <button
+            onClick={handleDownload}
+            className="py-2 px-3.5 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center space-x-1.5 uppercase font-cinzel shadow-lg active:scale-95 cursor-pointer"
+          >
+            <Download size={15} className="stroke-[2.5]" />
+            <span>{t(config.labels.downloadLabel)}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};