feat: integrate Sensei Spook mascot in 4 stances, speech bubbles, and style updates
This commit is contained in:
Ajasra committed
commit
e04672db2a
104 files changed
+8262
No files matched your search
@@ -0,0 +1,357 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { Camera, SwitchCamera, Upload, AlertCircle, ArrowLeft, RefreshCw } from "lucide-react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface CameraScreenProps {
|
||||
config: BoothConfig;
|
||||
onPhotoCaptured: (imageBase64: string) => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const CameraScreen: React.FC<CameraScreenProps> = ({
|
||||
config,
|
||||
onPhotoCaptured,
|
||||
onBack,
|
||||
}) => {
|
||||
const { t, isWeChat } = useI18n();
|
||||
const [facingMode, setFacingMode] = useState<"user" | "environment">(
|
||||
config.camera.defaultFacingMode || "user"
|
||||
);
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const [cameraError, setCameraError] = useState<string | null>(null);
|
||||
const [countdown, setCountdown] = useState<number | null>(null);
|
||||
const [isFlashing, setIsFlashing] = useState(false);
|
||||
const [hasMultipleCameras, setHasMultipleCameras] = useState<boolean>(false);
|
||||
const [isSwitchingCamera, setIsSwitchingCamera] = useState<boolean>(false);
|
||||
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
|
||||
const stopStream = useCallback(() => {
|
||||
if (streamRef.current) {
|
||||
streamRef.current.getTracks().forEach((track) => {
|
||||
try {
|
||||
track.stop();
|
||||
} catch (e) {
|
||||
console.warn("Error stopping track:", e);
|
||||
}
|
||||
});
|
||||
streamRef.current = null;
|
||||
}
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = null;
|
||||
}
|
||||
setStream(null);
|
||||
}, []);
|
||||
|
||||
const checkCameraDevices = useCallback(async () => {
|
||||
if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoInputs = devices.filter((device) => device.kind === "videoinput");
|
||||
setHasMultipleCameras(videoInputs.length > 1);
|
||||
} catch (err) {
|
||||
console.warn("Could not enumerate camera devices:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof navigator !== "undefined" && navigator.mediaDevices?.addEventListener) {
|
||||
const handleDeviceChange = () => {
|
||||
checkCameraDevices();
|
||||
};
|
||||
navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
|
||||
return () => {
|
||||
navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
|
||||
};
|
||||
}
|
||||
}, [checkCameraDevices]);
|
||||
|
||||
const startCamera = useCallback(async (targetFacingMode: "user" | "environment") => {
|
||||
try {
|
||||
setCameraError(null);
|
||||
stopStream();
|
||||
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
!window.isSecureContext &&
|
||||
window.location.hostname !== "localhost" &&
|
||||
window.location.hostname !== "127.0.0.1"
|
||||
) {
|
||||
setCameraError(
|
||||
t({
|
||||
en: "Camera access requires HTTPS or localhost. Please take a photo with your device.",
|
||||
zh: "摄像头需要安全连接(HTTPS)。请直接使用手机拍摄或上传照片。"
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
|
||||
setCameraError(
|
||||
t({
|
||||
en: "Live camera is not supported. Please click Upload to take a photo.",
|
||||
zh: "当前环境不支持实时取景，请点击右下角按钮直接拍照或上传。"
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||
|
||||
let newStream: MediaStream | null = null;
|
||||
try {
|
||||
const primaryConstraints: MediaStreamConstraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: { ideal: targetFacingMode },
|
||||
width: { ideal: 1920 },
|
||||
height: { ideal: 1080 },
|
||||
},
|
||||
};
|
||||
newStream = await navigator.mediaDevices.getUserMedia(primaryConstraints);
|
||||
} catch (tier1Error: any) {
|
||||
try {
|
||||
const secondaryConstraints: MediaStreamConstraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
facingMode: { ideal: targetFacingMode },
|
||||
},
|
||||
};
|
||||
newStream = await navigator.mediaDevices.getUserMedia(secondaryConstraints);
|
||||
} catch (tier2Error: any) {
|
||||
newStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!newStream) {
|
||||
throw new Error("Unable to acquire media stream.");
|
||||
}
|
||||
|
||||
streamRef.current = newStream;
|
||||
setStream(newStream);
|
||||
|
||||
if (videoRef.current) {
|
||||
const video = videoRef.current;
|
||||
video.srcObject = newStream;
|
||||
video.setAttribute("playsinline", "true");
|
||||
video.setAttribute("webkit-playsinline", "true");
|
||||
video.onloadedmetadata = () => {
|
||||
video.play().catch((playErr) => {
|
||||
console.log("[Camera] Video play deferred:", playErr);
|
||||
});
|
||||
};
|
||||
}
|
||||
checkCameraDevices();
|
||||
} catch (err: any) {
|
||||
console.error("Camera access error:", err);
|
||||
let errorMsg = t({
|
||||
en: "Camera access was denied or not found. Please click Upload to take/choose a photo.",
|
||||
zh: "无法访问摄像头。请点击下方上传按钮直接拍照或从相册选择。"
|
||||
});
|
||||
setCameraError(errorMsg);
|
||||
}
|
||||
}, [stopStream, checkCameraDevices, t]);
|
||||
|
||||
useEffect(() => {
|
||||
startCamera(facingMode);
|
||||
return () => {
|
||||
stopStream();
|
||||
};
|
||||
}, [facingMode, startCamera, stopStream]);
|
||||
|
||||
const toggleCameraFacingMode = async () => {
|
||||
if (isSwitchingCamera) return;
|
||||
setIsSwitchingCamera(true);
|
||||
const nextMode = facingMode === "user" ? "environment" : "user";
|
||||
setFacingMode(nextMode);
|
||||
setTimeout(() => {
|
||||
setIsSwitchingCamera(false);
|
||||
}, 400);
|
||||
};
|
||||
|
||||
const handleCapture = () => {
|
||||
if (!videoRef.current) return;
|
||||
const video = videoRef.current;
|
||||
const videoWidth = video.videoWidth || 1080;
|
||||
const videoHeight = video.videoHeight || 1920;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = videoWidth;
|
||||
canvas.height = videoHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
if (facingMode === "user") {
|
||||
ctx.translate(canvas.width, 0);
|
||||
ctx.scale(-1, 1);
|
||||
}
|
||||
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
const photoBase64 = canvas.toDataURL("image/jpeg", 0.92);
|
||||
|
||||
setIsFlashing(true);
|
||||
setTimeout(() => {
|
||||
setIsFlashing(false);
|
||||
stopStream();
|
||||
onPhotoCaptured(photoBase64);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const startCountdown = () => {
|
||||
if (countdown !== null) return;
|
||||
const seconds = config.camera.countdownSeconds || 3;
|
||||
setCountdown(seconds);
|
||||
|
||||
let remaining = seconds;
|
||||
const interval = setInterval(() => {
|
||||
remaining -= 1;
|
||||
if (remaining > 0) {
|
||||
setCountdown(remaining);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setCountdown(null);
|
||||
handleCapture();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string;
|
||||
stopStream();
|
||||
onPhotoCaptured(result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col items-center justify-between p-2 sm:p-4 overflow-hidden select-none">
|
||||
{/* Top Header */}
|
||||
<div className="w-full flex items-center justify-between px-2 mb-1 z-30 min-h-[40px]">
|
||||
<button
|
||||
onClick={() => {
|
||||
stopStream();
|
||||
onBack();
|
||||
}}
|
||||
className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
|
||||
>
|
||||
<ArrowLeft size={16} className="stroke-[3]" />
|
||||
<span>{t(config.labels.backButton)}</span>
|
||||
</button>
|
||||
|
||||
{hasMultipleCameras ? (
|
||||
<button
|
||||
onClick={toggleCameraFacingMode}
|
||||
disabled={isSwitchingCamera || countdown !== null}
|
||||
className="p-2.5 rounded-2xl btn-cartoon-dark text-amber-300 hover:text-white transition active:scale-95 shadow-md"
|
||||
title="Switch front/back camera"
|
||||
>
|
||||
<SwitchCamera size={18} className={`stroke-[2.5] ${isSwitchingCamera ? "animate-spin" : ""}`} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-10" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Video Viewport - Made bigger, flex-1 with Mascot overlaying */}
|
||||
<div className="relative w-full max-w-md flex-1 min-h-0 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-1">
|
||||
{cameraError ? (
|
||||
<div className="p-6 text-center text-red-200 flex flex-col items-center justify-center space-y-4">
|
||||
<AlertCircle size={44} className="text-amber-400 stroke-[2.5]" />
|
||||
<p className="text-xs sm:text-sm font-bold leading-relaxed">{cameraError}</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className={`w-full h-full object-cover ${facingMode === "user" ? "scale-x-[-1]" : ""}`}
|
||||
/>
|
||||
{isFlashing && <div className="absolute inset-0 bg-white z-50 animate-flash" />}
|
||||
{countdown !== null && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[2px] z-40">
|
||||
<span className="text-8xl sm:text-9xl font-black text-amber-400 animate-ping drop-shadow-[0_8px_0_#090314]">
|
||||
{countdown}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* Martial Framing Guides */}
|
||||
<div className="absolute inset-x-6 top-6 bottom-20 pointer-events-none border border-dashed border-amber-400/30 rounded-2xl flex flex-col justify-start items-center py-3">
|
||||
<span className="text-[10px] font-black tracking-widest text-amber-300/60 uppercase">
|
||||
⚡ {t({ en: "HEAD & MARTIAL POSE", zh: "头部与武道姿势区域" })} ⚡
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Mascot Character - Overlaying bottom-left of the picture frame */}
|
||||
<div className="absolute -bottom-4 -left-3 sm:-bottom-2 sm:-left-2 z-30 pointer-events-none">
|
||||
<MascotGuide
|
||||
pose="kick"
|
||||
size="lg"
|
||||
speechPosition="right"
|
||||
speechText={{
|
||||
en: "Strike your pose! Punch, kick, or victory stance!",
|
||||
zh: "摆出你的武道英姿！冲拳、高踢或胜利架势！",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Action Bar */}
|
||||
<div className="w-full max-w-sm flex items-center justify-between px-6 py-2 z-20 min-h-[76px]">
|
||||
{/* Upload / Device Photo Button */}
|
||||
{config.camera.allowUpload ? (
|
||||
<div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleFileUpload}
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="p-3.5 rounded-2xl btn-cartoon-dark text-amber-300 transition active:scale-95 shadow-md flex items-center justify-center"
|
||||
title={t(config.labels.cameraUpload)}
|
||||
>
|
||||
<Upload size={20} className="stroke-[2.5]" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-12" />
|
||||
)}
|
||||
|
||||
{/* Shutter Button */}
|
||||
<button
|
||||
onClick={startCountdown}
|
||||
disabled={Boolean(cameraError) || countdown !== null || !stream}
|
||||
className="w-18 h-18 sm:w-20 sm:h-20 rounded-full btn-cartoon-orange flex items-center justify-center disabled:opacity-50 active:scale-95 shadow-lg"
|
||||
title={t(config.labels.cameraSnap)}
|
||||
>
|
||||
<Camera size={32} className="text-white drop-shadow-[0_2px_0_#9a3412]" />
|
||||
</button>
|
||||
|
||||
{/* Balance spacer */}
|
||||
<div className="w-12" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ArrowLeft, Check, RefreshCw } from "lucide-react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface ConfirmScreenProps {
|
||||
config: BoothConfig;
|
||||
photoUrl: string;
|
||||
onConfirm: () => void;
|
||||
onRetake: () => void;
|
||||
}
|
||||
|
||||
export const ConfirmScreen: React.FC<ConfirmScreenProps> = ({
|
||||
config,
|
||||
photoUrl,
|
||||
onConfirm,
|
||||
onRetake,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col items-center justify-between p-3 sm:p-4 overflow-hidden select-none">
|
||||
{/* Top Header - Back/Retake button on top left, title removed */}
|
||||
<div className="w-full flex items-center justify-between px-1 mb-1 z-30 min-h-[40px]">
|
||||
<button
|
||||
onClick={onRetake}
|
||||
className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
|
||||
>
|
||||
<ArrowLeft size={16} className="stroke-[3]" />
|
||||
<span>{t(config.labels.retakeButton)}</span>
|
||||
</button>
|
||||
|
||||
<div className="w-16" />
|
||||
</div>
|
||||
|
||||
{/* Captured Photo Preview Card */}
|
||||
<div className="relative w-full max-w-sm aspect-[9/16] 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={photoUrl}
|
||||
alt="Captured Pose"
|
||||
className="w-full h-full object-cover select-none"
|
||||
/>
|
||||
|
||||
{/* Mascot Comic Callout in preview */}
|
||||
<div className="absolute -bottom-2 -left-2 sm:bottom-1 sm:left-1 pointer-events-none z-20">
|
||||
<MascotGuide
|
||||
pose="bow"
|
||||
size="md"
|
||||
speechPosition="right"
|
||||
speechText={{
|
||||
en: "Epic martial focus! Ready to pick your style?",
|
||||
zh: "气势十足！准备好选择你的万圣风格了吗？",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Action Bar - Single centered button matching Standby Screen style */}
|
||||
<div className="w-full max-w-sm flex items-center justify-center py-2 z-20 min-h-[70px]">
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg active:scale-95"
|
||||
>
|
||||
<Check size={17} className="stroke-[3]" />
|
||||
<span>{t(config.labels.confirmButton)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Sparkles, Loader2, Flame } from "lucide-react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface LoadingScreenProps {
|
||||
config: BoothConfig;
|
||||
currentStepMessage?: string;
|
||||
}
|
||||
|
||||
export const LoadingScreen: React.FC<LoadingScreenProps> = ({
|
||||
config,
|
||||
currentStepMessage,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const [progress, setProgress] = useState(15);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
if (prev >= 92) return prev;
|
||||
return prev + Math.floor(Math.random() * 8) + 3;
|
||||
});
|
||||
}, 700);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col items-center justify-center p-6 text-center select-none overflow-hidden">
|
||||
{/* Animated Center Karate Ghost & Ki-Sphere */}
|
||||
<div className="relative mb-4 flex flex-col items-center">
|
||||
<MascotGuide
|
||||
pose="punch"
|
||||
size="md"
|
||||
speechPosition="top"
|
||||
speechText={{
|
||||
en: "KIAI! Gathering dojo ki and pumpkin magic...",
|
||||
zh: "气合！正在汇聚道馆灵气与南瓜魔法...",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl sm:text-2xl font-black text-white tracking-wide mb-2 drop-shadow-[0_2px_0_#090314]">
|
||||
{t(config.labels.processingTitle)}
|
||||
</h2>
|
||||
|
||||
<p className="text-xs sm:text-sm text-purple-200 max-w-xs mb-6 font-medium leading-relaxed drop-shadow">
|
||||
{currentStepMessage || t(config.labels.processingSubtitle)}
|
||||
</p>
|
||||
|
||||
{/* Chunky Progress Bar */}
|
||||
<div className="w-full max-w-xs h-6 rounded-full bg-black/60 border-2 border-black p-1 shadow-inner relative overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-amber-400 via-orange-500 to-cyan-400 transition-all duration-300 shadow-[0_0_15px_rgba(251,191,36,0.6)]"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="text-[11px] font-black text-amber-300 mt-2 tracking-wider">
|
||||
{progress}% · {t({ en: "MARTIAL MAGIC BREWING", zh: "武道气合凝聚中" })}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
interface RateLimitedScreenProps {
|
||||
config: BoothConfig;
|
||||
resetMinutes: number;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export const RateLimitedScreen: React.FC<RateLimitedScreenProps> = ({
|
||||
config,
|
||||
resetMinutes,
|
||||
onReset,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col items-center justify-center p-8 text-center select-none space-y-6">
|
||||
<div className="w-24 h-24 rounded-full bg-gradient-to-tr from-purple-900 to-orange-950 flex items-center justify-center border-2 border-orange-500/40 shadow-[0_0_30px_rgba(255,109,0,0.3)]">
|
||||
<span className="text-4xl animate-bounce">⏳</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-w-xs">
|
||||
<h2 className="text-2xl font-black text-white tracking-wide drop-shadow-[0_2px_0_#090314]">
|
||||
{t({ en: "Martial Energy Cooling Down! ⚡", zh: "武道气合修整中！⚡" })}
|
||||
</h2>
|
||||
<p className="text-amber-200/90 text-sm leading-relaxed font-bold">
|
||||
{t({
|
||||
en: "You have conjured the maximum number of Halloween portraits for this session.",
|
||||
zh: "当前设备生成的万圣武道照已达上限，稍作休息吧！"
|
||||
})}
|
||||
</p>
|
||||
{resetMinutes > 0 && (
|
||||
<p className="text-slate-300 text-xs mt-2 bg-black/40 px-3 py-1.5 rounded-full border border-purple-500/30">
|
||||
{t({
|
||||
en: `More energy ready in approx ${resetMinutes} minutes.`,
|
||||
zh: `预计约 ${resetMinutes} 分钟后恢复。`
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="px-6 py-3.5 rounded-2xl btn-cartoon-orange text-white font-black text-sm shadow-xl flex items-center space-x-2 transition active:scale-95"
|
||||
>
|
||||
<RotateCcw size={18} />
|
||||
<span>{t({ en: "Return to Dojo 🥋", zh: "返回万圣道馆 🥋" })}</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { BoothConfig } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface StandbyScreenProps {
|
||||
config: BoothConfig;
|
||||
onStart: () => void;
|
||||
}
|
||||
|
||||
export const StandbyScreen: React.FC<StandbyScreenProps> = ({
|
||||
config,
|
||||
onStart,
|
||||
}) => {
|
||||
const { labels } = config;
|
||||
const { t, language } = useI18n();
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onStart}
|
||||
className="relative flex-1 flex flex-col items-center justify-between px-3 py-2 sm:px-6 sm:py-4 cursor-pointer select-none overflow-hidden"
|
||||
>
|
||||
{/* Center Hero Character - Clean 3D Mascot */}
|
||||
<div className="my-auto flex flex-col items-center text-center z-10 space-y-2 sm:space-y-3 px-2 max-w-sm">
|
||||
{/* Title & Subtitle with Stylized Typography */}
|
||||
<div className="space-y-0.5">
|
||||
<h2 className={`text-2xl sm:text-3xl md:text-4xl font-black text-amber-100 tracking-wider drop-shadow-[0_4px_12px_rgba(0,0,0,0.95)] ${language === 'en' ? 'font-cinzel' : 'font-dojo'}`}>
|
||||
{t(labels.welcomeTitle)}
|
||||
</h2>
|
||||
<p className="text-amber-400/95 font-semibold text-[11px] sm:text-xs tracking-widest uppercase drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]">
|
||||
{t(labels.welcomeSubtitle)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Floating 3D Karate Ghost Mascot with Comic Speech Bubble */}
|
||||
<MascotGuide
|
||||
pose="bow"
|
||||
size="lg"
|
||||
speechPosition="top"
|
||||
className="my-1"
|
||||
speechText={{
|
||||
en: "Osu! Welcome to our dojo! Strike your fiercest martial arts pose & become an epic Shanghai legend!",
|
||||
zh: "押忍！欢迎来到道馆！摆出你最帅气的武道姿势，成为魔都万圣传奇！",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Halloween Game Action Button */}
|
||||
<div className="z-10 w-full flex flex-col items-center pb-1">
|
||||
<button
|
||||
onClick={onStart}
|
||||
className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg"
|
||||
>
|
||||
<span>{t(labels.welcomeCta)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Check, ArrowLeft, Wand2 } from "lucide-react";
|
||||
import { BoothConfig, BoothStyle } from "@/types/booth";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { MascotGuide } from "@/components/MascotGuide";
|
||||
|
||||
interface StyleScreenProps {
|
||||
config: BoothConfig;
|
||||
styles: BoothStyle[];
|
||||
onStyleSelected: (style: BoothStyle) => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const StyleScreen: React.FC<StyleScreenProps> = ({
|
||||
config,
|
||||
styles,
|
||||
onStyleSelected,
|
||||
onBack,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const [selectedId, setSelectedId] = useState<string>(styles[0]?.id || "");
|
||||
|
||||
const handleConfirm = () => {
|
||||
const chosen = styles.find((s) => s.id === selectedId) || styles[0];
|
||||
if (chosen) {
|
||||
onStyleSelected(chosen);
|
||||
}
|
||||
};
|
||||
|
||||
const currentStyle = styles.find((s) => s.id === selectedId);
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 flex flex-col justify-between p-3 sm:p-4 overflow-hidden select-none">
|
||||
{/* Top Header - Back on left, Confirm on right */}
|
||||
<div className="w-full flex items-center justify-between px-1 mb-1 z-30 min-h-[40px]">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="p-2 px-3 game-btn-dark flex items-center space-x-1 font-bold text-xs shrink-0 cursor-pointer shadow-md"
|
||||
title="Back"
|
||||
>
|
||||
<ArrowLeft size={16} className="stroke-[2.5]" />
|
||||
<span>{t(config.labels.backButton)}</span>
|
||||
</button>
|
||||
|
||||
{/* Top-Right Confirm / Transform Button - Clean text, no icon */}
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="py-2 px-3.5 game-btn-gold font-extrabold text-xs tracking-wider flex items-center justify-center uppercase font-cinzel shadow-lg active:scale-95 cursor-pointer"
|
||||
>
|
||||
<span>{t(config.labels.confirmStyleButton)}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Styles Grid (2x2) with Game Stone/Wood Frame Card Styling - Moved down with spacing */}
|
||||
<div className="w-full max-w-sm mx-auto grid grid-cols-2 gap-3 z-20 mt-3 mb-auto py-1">
|
||||
{styles.map((style) => {
|
||||
const isSelected = selectedId === style.id;
|
||||
const styleName = t(style.name);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={style.id}
|
||||
onClick={() => setSelectedId(style.id)}
|
||||
className={`relative flex flex-col items-center p-2.5 rounded-2xl cursor-pointer transition-all duration-200 ${
|
||||
isSelected
|
||||
? "game-panel-amber ring-2 ring-amber-400 scale-[1.03] shadow-[0_8px_25px_rgba(249,115,22,0.6)]"
|
||||
: "game-panel opacity-85 hover:opacity-100 hover:border-purple-400/80"
|
||||
}`}
|
||||
>
|
||||
{isSelected && (
|
||||
<div className="absolute -top-2.5 -right-2.5 w-7 h-7 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 border-2 border-black flex items-center justify-center text-black z-30 shadow-[0_2px_8px_rgba(0,0,0,0.8)]">
|
||||
<Check size={16} className="stroke-[3.5]" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Artwork Thumbnail */}
|
||||
<div className="relative w-full aspect-square rounded-xl overflow-hidden bg-black/80 border-2 border-[#3d1e6d] shadow-inner">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={style.thumbnail}
|
||||
alt={styleName}
|
||||
className="w-full h-full object-cover select-none"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title & Tag */}
|
||||
<div className="mt-2 text-center w-full px-1">
|
||||
<span className="block text-xs font-bold text-amber-100 truncate drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]">
|
||||
{styleName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Selected Style Description Card & Mascot Comic Guide - Lifted up to slightly overlay bottom of style cards */}
|
||||
<div className="w-full max-w-sm mx-auto z-30 flex items-center justify-start gap-1 px-1 -mt-5 sm:-mt-6 pb-2 pointer-events-none">
|
||||
<MascotGuide
|
||||
pose="punch"
|
||||
size="md"
|
||||
speechPosition="right"
|
||||
speechText={{
|
||||
en: "Choose your legendary martial transformation!",
|
||||
zh: "挑选你专属的万圣节武道变身奥义！",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user