root
516 lines
24 KiB
TypeScript
516 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
type GameState = "upload" | "ready" | "playing" | "gameover";
|
|
type BossState = "idle" | "attacking" | "stunned" | "dizzy";
|
|
|
|
const powerUps: Record<string, { name: string; icon: string; duration: number }> = {
|
|
double: { name: "2x Damage", icon: "⚔️", duration: 5000 },
|
|
freeze: { name: "Stun Boss", icon: "❄️", duration: 3000 },
|
|
bomb: { name: "Bomb", icon: "💣", duration: 0 },
|
|
none: { name: "", icon: "", duration: 0 },
|
|
};
|
|
|
|
const playSound = (type: "punch" | "combo" | "powerup" | "ko" | "gameover" | "bossAttack" | "hit") => {
|
|
try {
|
|
const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
|
|
const oscillator = audioCtx.createOscillator();
|
|
const gainNode = audioCtx.createGain();
|
|
oscillator.connect(gainNode);
|
|
gainNode.connect(audioCtx.destination);
|
|
|
|
switch (type) {
|
|
case "punch":
|
|
oscillator.frequency.setValueAtTime(150, audioCtx.currentTime);
|
|
oscillator.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.1);
|
|
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.1);
|
|
break;
|
|
case "hit":
|
|
oscillator.frequency.setValueAtTime(200, audioCtx.currentTime);
|
|
oscillator.frequency.exponentialRampToValueAtTime(80, audioCtx.currentTime + 0.15);
|
|
gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.15);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.15);
|
|
break;
|
|
case "bossAttack":
|
|
oscillator.frequency.setValueAtTime(80, audioCtx.currentTime);
|
|
oscillator.frequency.setValueAtTime(120, audioCtx.currentTime + 0.1);
|
|
oscillator.frequency.setValueAtTime(80, audioCtx.currentTime + 0.2);
|
|
gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.3);
|
|
break;
|
|
case "combo":
|
|
oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
|
|
oscillator.frequency.setValueAtTime(400, audioCtx.currentTime + 0.1);
|
|
oscillator.frequency.setValueAtTime(500, audioCtx.currentTime + 0.2);
|
|
gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.3);
|
|
break;
|
|
case "powerup":
|
|
oscillator.frequency.setValueAtTime(200, audioCtx.currentTime);
|
|
oscillator.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + 0.3);
|
|
gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.3);
|
|
break;
|
|
case "ko":
|
|
oscillator.frequency.setValueAtTime(100, audioCtx.currentTime);
|
|
oscillator.frequency.exponentialRampToValueAtTime(30, audioCtx.currentTime + 0.5);
|
|
gainNode.gain.setValueAtTime(0.8, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.5);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.5);
|
|
break;
|
|
case "gameover":
|
|
oscillator.frequency.setValueAtTime(400, audioCtx.currentTime);
|
|
oscillator.frequency.setValueAtTime(300, audioCtx.currentTime + 0.2);
|
|
oscillator.frequency.setValueAtTime(200, audioCtx.currentTime + 0.4);
|
|
gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.6);
|
|
oscillator.start(audioCtx.currentTime);
|
|
oscillator.stop(audioCtx.currentTime + 0.6);
|
|
break;
|
|
}
|
|
} catch (e) {}
|
|
};
|
|
|
|
export default function BossPunch() {
|
|
const [bossImage, setBossImage] = useState<string | null>(null);
|
|
const [gameState, setGameState] = useState<GameState>("upload");
|
|
const [score, setScore] = useState(0);
|
|
const [bossHealth, setBossHealth] = useState(100);
|
|
const [playerHealth, setPlayerHealth] = useState(100);
|
|
const [combo, setCombo] = useState(0);
|
|
const [maxCombo, setMaxCombo] = useState(0);
|
|
const [lastHit, setLastHit] = useState<"left" | "right" | null>(null);
|
|
const [playerX, setPlayerX] = useState(0);
|
|
const [bossX, setBossX] = useState(0);
|
|
const [bossRotation, setBossRotation] = useState(0);
|
|
const [bossState, setBossState] = useState<BossState>("idle");
|
|
const [isPaid, setIsPaid] = useState(false);
|
|
const [showPayModal, setShowPayModal] = useState(false);
|
|
const [activePowerUp, setActivePowerUp] = useState<string>("none");
|
|
const [powerUpCooldown, setPowerUpCooldown] = useState(0);
|
|
const [floatingTexts, setFloatingTexts] = useState<{ id: number; text: string; x: number; y: number; type: string }[]>([]);
|
|
const [screenShake, setScreenShake] = useState(false);
|
|
const [particles, setParticles] = useState<{ id: number; x: number; y: number; vx: number; vy: number; color: string; life: number }[]>([]);
|
|
const [winQuote, setWinQuote] = useState("I am sorry Haitham!");
|
|
const [showWinQuoteInput, setShowWinQuoteInput] = useState(false);
|
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const floatingIdRef = useRef(0);
|
|
const particleIdRef = useRef(0);
|
|
const attackIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const addFloatingText = (text: string, x: number, y: number, type: string = "damage") => {
|
|
const id = floatingIdRef.current++;
|
|
setFloatingTexts(prev => [...prev, { id, text, x, y, type }]);
|
|
setTimeout(() => {
|
|
setFloatingTexts(prev => prev.filter(t => t.id !== id));
|
|
}, 1500);
|
|
};
|
|
|
|
const addParticle = (x: number, y: number, color: string) => {
|
|
const id = particleIdRef.current++;
|
|
setParticles(prev => [...prev, {
|
|
id, x, y,
|
|
vx: (Math.random() - 0.5) * 10,
|
|
vy: (Math.random() - 0.5) * 10 - 5,
|
|
color, life: 1
|
|
}]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (particles.length > 0) {
|
|
const timer = setInterval(() => {
|
|
setParticles(prev => prev.map(p => ({
|
|
...p,
|
|
x: p.x + p.vx,
|
|
y: p.y + p.vy,
|
|
vy: p.vy + 0.5,
|
|
life: p.life - 0.05
|
|
})).filter(p => p.life > 0));
|
|
}, 16);
|
|
return () => clearInterval(timer);
|
|
}
|
|
}, [particles.length]);
|
|
|
|
useEffect(() => {
|
|
if (gameState === "playing" && bossState !== "stunned" && bossState !== "dizzy") {
|
|
attackIntervalRef.current = setInterval(() => {
|
|
if (bossState === "idle" && Math.random() < 0.3) {
|
|
bossAttack();
|
|
}
|
|
}, 2000);
|
|
}
|
|
return () => {
|
|
if (attackIntervalRef.current) clearInterval(attackIntervalRef.current);
|
|
};
|
|
}, [gameState, bossState]);
|
|
|
|
const bossAttack = () => {
|
|
if (bossState !== "idle") return;
|
|
setBossState("attacking");
|
|
playSound("bossAttack");
|
|
setBossX(-30);
|
|
setTimeout(() => {
|
|
setBossX(30);
|
|
setTimeout(() => {
|
|
const damage = 5 + Math.floor(Math.random() * 10);
|
|
setPlayerHealth(prev => Math.max(0, prev - damage));
|
|
playSound("hit");
|
|
setScreenShake(true);
|
|
setTimeout(() => setScreenShake(false), 200);
|
|
addFloatingText(`-${damage}`, 30, 60, "boss");
|
|
setBossX(0);
|
|
setBossState("idle");
|
|
if (playerHealth - damage <= 0) {
|
|
setGameState("gameover");
|
|
playSound("gameover");
|
|
}
|
|
}, 150);
|
|
}, 150);
|
|
};
|
|
|
|
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
setBossImage(event.target?.result as string);
|
|
setGameState("ready");
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const startGame = () => {
|
|
setGameState("playing");
|
|
setScore(0);
|
|
setBossHealth(100);
|
|
setPlayerHealth(100);
|
|
setCombo(0);
|
|
setMaxCombo(0);
|
|
setActivePowerUp("none");
|
|
setBossState("idle");
|
|
};
|
|
|
|
const activatePowerUp = (type: string) => {
|
|
if (powerUpCooldown > 0 || gameState !== "playing") return;
|
|
playSound("powerup");
|
|
setActivePowerUp(type);
|
|
if (type === "bomb") {
|
|
setBossHealth(prev => Math.max(0, prev - 30));
|
|
addFloatingText("-30! 💣", 70, 30, "powerup");
|
|
setScreenShake(true);
|
|
setTimeout(() => setScreenShake(false), 300);
|
|
} else if (type === "freeze") {
|
|
setBossState("stunned");
|
|
setTimeout(() => setBossState("idle"), 3000);
|
|
} else {
|
|
setTimeout(() => setActivePowerUp("none"), powerUps[type]?.duration || 5000);
|
|
}
|
|
setPowerUpCooldown(10);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (powerUpCooldown > 0) {
|
|
const timer = setInterval(() => {
|
|
setPowerUpCooldown(prev => Math.max(0, prev - 1));
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}
|
|
}, [powerUpCooldown]);
|
|
|
|
const punch = useCallback((hand: "left" | "right") => {
|
|
if (gameState !== "playing" || bossState === "stunned") return;
|
|
if (Math.random() < 0.15 && bossState === "idle") {
|
|
setBossState("dizzy");
|
|
addFloatingText("Miss!", 70, 40, "miss");
|
|
setTimeout(() => setBossState("idle"), 500);
|
|
return;
|
|
}
|
|
setLastHit(hand);
|
|
setCombo(c => {
|
|
const newCombo = c + 1;
|
|
if (newCombo > maxCombo) setMaxCombo(newCombo);
|
|
if (newCombo % 10 === 0) {
|
|
playSound("combo");
|
|
addFloatingText(`${newCombo} COMBO! 🔥`, 50, 50, "combo");
|
|
}
|
|
return newCombo;
|
|
});
|
|
let damage = 5 + Math.floor(combo / 5);
|
|
damage = Math.min(damage, 20);
|
|
if (activePowerUp === "double") damage *= 2;
|
|
playSound("punch");
|
|
const newHealth = Math.max(0, bossHealth - damage);
|
|
setBossHealth(newHealth);
|
|
setScore(s => s + damage * 10);
|
|
setBossRotation(hand === "left" ? -20 - (damage * 2) : 20 + (damage * 2));
|
|
setBossX(hand === "left" ? -20 : 20);
|
|
setTimeout(() => { setBossRotation(0); setBossX(0); }, 150);
|
|
setPlayerX(hand === "left" ? 40 : -40);
|
|
setTimeout(() => setPlayerX(0), 100);
|
|
for (let i = 0; i < 5; i++) {
|
|
addParticle(70, 40, damage > 15 ? "#ff0000" : "#ffffff");
|
|
}
|
|
addFloatingText(`-${damage}`, 60 + (Math.random() * 20 - 10), 30 + (Math.random() * 20 - 10), "damage");
|
|
if (damage > 10) {
|
|
setScreenShake(true);
|
|
setTimeout(() => setScreenShake(false), 100);
|
|
}
|
|
setTimeout(() => setLastHit(null), 150);
|
|
if (newHealth <= 0) {
|
|
playSound("ko");
|
|
setGameState("gameover");
|
|
}
|
|
}, [gameState, combo, bossHealth, activePowerUp, maxCombo, bossState]);
|
|
|
|
const resetGame = () => {
|
|
setGameState("ready");
|
|
setScore(0);
|
|
setBossHealth(100);
|
|
setPlayerHealth(100);
|
|
setCombo(0);
|
|
setMaxCombo(0);
|
|
setActivePowerUp("none");
|
|
setBossState("idle");
|
|
};
|
|
|
|
const shakeClass = screenShake ? "animate-pulse" : "";
|
|
|
|
return (
|
|
<div className={`min-h-screen bg-gradient-to-b from-red-900 via-red-800 to-orange-900 flex flex-col items-center justify-center p-2 overflow-hidden ${shakeClass}`}>
|
|
{particles.map(p => (
|
|
<motion.div
|
|
key={p.id}
|
|
initial={{ x: `${p.x}%`, y: `${p.y}%`, opacity: 1 }}
|
|
animate={{ x: `${p.x + p.vx}%`, y: `${p.y + p.vy}%`, opacity: p.life }}
|
|
className="absolute w-3 h-3 rounded-full pointer-events-none"
|
|
style={{ backgroundColor: p.color }}
|
|
/>
|
|
))}
|
|
|
|
{floatingTexts.map(ft => (
|
|
<motion.div
|
|
key={ft.id}
|
|
initial={{ opacity: 1, y: 0, scale: 0.5 }}
|
|
animate={{ opacity: 0, y: -50, scale: ft.type === "boss" ? 1.5 : 1.2 }}
|
|
transition={{ duration: 1 }}
|
|
className={`absolute pointer-events-none text-2xl font-black ${ft.type === "boss" ? "text-red-400" : ft.type === "miss" ? "text-gray-400" : ft.type === "combo" ? "text-yellow-400" : "text-white"}`}
|
|
style={{ left: `${ft.x}%`, top: `${ft.y}%` }}
|
|
>
|
|
{ft.text}
|
|
</motion.div>
|
|
))}
|
|
|
|
<div className="absolute top-0 left-0 right-0 p-2 flex justify-between items-center z-10">
|
|
<h1 className="text-xl font-black text-white tracking-wider">
|
|
BOSS<span className="text-red-500">PUNCH</span>
|
|
</h1>
|
|
{gameState === "playing" && (
|
|
<div className="bg-black/50 rounded-full px-3 py-1 flex gap-3 text-xs">
|
|
<span className="text-white font-bold">Score: {score}</span>
|
|
<span className="text-yellow-400 font-bold">Combo: {combo}x</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{gameState === "playing" && (
|
|
<div className="absolute top-12 left-2 right-2 flex flex-col gap-1 z-10">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-white w-12">BOSS</span>
|
|
<div className="flex-1 h-3 bg-gray-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-red-500 to-green-500 transition-all duration-200" style={{ width: `${bossHealth}%` }} />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-white w-12">YOU</span>
|
|
<div className="flex-1 h-3 bg-gray-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-green-500 to-blue-500 transition-all duration-200" style={{ width: `${playerHealth}%` }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{gameState === "playing" && (
|
|
<div className="absolute top-24 left-0 right-0 flex justify-center gap-2 z-10">
|
|
{(["double", "freeze", "bomb"] as string[]).map(pu => (
|
|
<button
|
|
key={pu}
|
|
onClick={() => activatePowerUp(pu)}
|
|
disabled={powerUpCooldown > 0 || bossState === "stunned"}
|
|
className={`bg-white/20 backdrop-blur rounded-full p-2 text-xl transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed ${activePowerUp === pu ? "ring-2 ring-yellow-400" : ""}`}
|
|
title={powerUps[pu]?.name}
|
|
>
|
|
{powerUps[pu]?.icon}
|
|
</button>
|
|
))}
|
|
{powerUpCooldown > 0 && <span className="absolute -bottom-2 text-xs text-white/70">{powerUpCooldown}s</span>}
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative w-full max-w-lg aspect-square max-h-[45vh] mt-8">
|
|
<AnimatePresence>
|
|
{bossImage && (
|
|
<motion.div
|
|
className="absolute right-0 top-1/3"
|
|
animate={{
|
|
x: bossX,
|
|
rotate: bossState === "dizzy" ? [0, -10, 10, -10, 10, 0] : bossRotation,
|
|
scale: bossState === "stunned" ? 0.9 : bossHealth > 0 ? 1 : 0.8,
|
|
opacity: bossState === "stunned" ? 0.7 : 1
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300 }}
|
|
>
|
|
<div className="relative w-32 h-32 md:w-48 md:h-48">
|
|
<div className={`absolute -left-6 top-1/2 w-10 h-10 ${activePowerUp === "freeze" ? "bg-cyan-300" : bossState === "dizzy" ? "bg-gray-400" : "bg-red-600"} rounded-full border-4 border-red-400 flex items-center justify-center`}>
|
|
<span className="text-white font-bold text-xs">L</span>
|
|
</div>
|
|
<div className={`absolute -right-6 top-1/3 w-10 h-10 ${activePowerUp === "freeze" ? "bg-cyan-300" : bossState === "dizzy" ? "bg-gray-400" : "bg-red-600"} rounded-full border-4 border-red-400 flex items-center justify-center`}>
|
|
<span className="text-white font-bold text-xs">R</span>
|
|
</div>
|
|
<div className={`w-full h-full rounded-2xl overflow-hidden border-4 ${activePowerUp === "freeze" ? "border-cyan-400" : bossState === "stunned" ? "border-blue-400" : "border-white"} shadow-2xl`}>
|
|
<img src={bossImage} alt="Boss" className="w-full h-full object-cover" />
|
|
</div>
|
|
{bossState === "stunned" && <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-2xl">💫</div>}
|
|
{bossState === "dizzy" && <div className="absolute top-0 right-0 text-xl">😵</div>}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<AnimatePresence>
|
|
{gameState === "playing" && (
|
|
<motion.div className="absolute left-0 bottom-0" animate={{ x: playerX }} transition={{ duration: 0.1 }}>
|
|
<div className="w-20 h-28 md:w-28 md:h-36 relative">
|
|
<motion.div className="absolute top-1/3 -right-3 w-12 h-12 bg-blue-600 border-4 border-blue-400 rounded-full cursor-pointer flex items-center justify-center text-2xl" whileTap={{ scale: 0.8 }} onClick={() => punch("right")}>👊</motion.div>
|
|
<motion.div className="absolute top-1/3 -left-3 w-12 h-12 bg-blue-600 border-4 border-blue-400 rounded-full cursor-pointer flex items-center justify-center text-2xl" whileTap={{ scale: 0.8 }} onClick={() => punch("left")}>👊</motion.div>
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-20 bg-blue-700 rounded-t-xl" />
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-10 bg-amber-200 rounded-full" />
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{lastHit && (
|
|
<motion.div initial={{ opacity: 1, scale: 0.5 }} animate={{ opacity: 0, scale: 1.5 }} className="absolute right-1/4 top-1/3 text-5xl font-black text-yellow-400">
|
|
Pow!
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-2 w-full max-w-md">
|
|
{gameState === "upload" && (
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center">
|
|
<div className="bg-white/10 backdrop-blur rounded-2xl p-6 border-2 border-dashed border-white/30">
|
|
<div className="text-5xl mb-3">👔</div>
|
|
<h2 className="text-xl font-bold text-white mb-2">Upload Your Boss!</h2>
|
|
<p className="text-white/70 mb-4">Take out your frustrations!</p>
|
|
<input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
|
|
<button onClick={() => fileInputRef.current?.click()} className="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full text-lg transition-all hover:scale-105 shadow-lg">
|
|
📸 Upload Photo
|
|
</button>
|
|
<p className="text-xs text-white/50 mt-4">Free with ads • $9.99 for ad-free</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{gameState === "ready" && bossImage && (
|
|
<motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="text-center">
|
|
<div className="bg-white/10 backdrop-blur rounded-xl p-3 mb-3 border border-white/20">
|
|
<button onClick={() => setShowWinQuoteInput(!showWinQuoteInput)} className="text-white/70 text-sm hover:text-white flex items-center justify-center gap-2">
|
|
🏆 {showWinQuoteInput ? "Hide" : "If u win he says..."}
|
|
</button>
|
|
{showWinQuoteInput && (
|
|
<input
|
|
type="text"
|
|
value={winQuote}
|
|
onChange={(e) => setWinQuote(e.target.value)}
|
|
placeholder="What does boss say when u win?"
|
|
className="w-full mt-2 bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white placeholder-white/50 text-sm"
|
|
/>
|
|
)}
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white mb-2">Ready to Fight!</h2>
|
|
<p className="text-white/70 mb-4">Boss fights back! Don't lose!</p>
|
|
<button onClick={startGame} className="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white font-bold py-3 px-10 rounded-full text-lg transition-all hover:scale-105 shadow-xl">
|
|
🥊 START FIGHT
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
|
|
{gameState === "playing" && (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
|
|
<p className="text-white/70 text-sm mb-2">Tap to punch!</p>
|
|
<div className="flex gap-4 justify-center">
|
|
<button onClick={() => punch("left")} className="bg-blue-600 hover:scale-110 w-20 h-20 rounded-full border-4 border-blue-400 flex items-center justify-center text-3xl active:scale-90 transition-transform">👊</button>
|
|
<button onClick={() => punch("right")} className="bg-blue-600 hover:scale-110 w-20 h-20 rounded-full border-4 border-blue-400 flex items-center justify-center text-3xl active:scale-90 transition-transform">👊</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{gameState === "gameover" && (
|
|
<motion.div initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} className="text-center">
|
|
<div className={`rounded-2xl p-6 border-4 ${bossHealth <= 0 ? "bg-gradient-to-b from-yellow-500 to-orange-500 border-yellow-300" : "bg-gradient-to-b from-red-600 to-red-800 border-red-400"}`}>
|
|
<div className="text-6xl mb-2">{bossHealth <= 0 ? "🏆" : "💀"}</div>
|
|
<h2 className="text-3xl font-black text-white mb-2">{bossHealth <= 0 ? "KNOCKOUT!" : "YOU LOSE!"}</h2>
|
|
{bossHealth <= 0 && (
|
|
<div className="bg-white/20 rounded-lg p-3 mb-3">
|
|
<p className="text-lg font-bold text-white">Boss says:</p>
|
|
<p className="text-white text-xl">"{winQuote}"</p>
|
|
</div>
|
|
)}
|
|
<p className="text-xl font-bold text-white mb-2">Score: {score}</p>
|
|
<p className="text-white/80 mb-4">Max Combo: {maxCombo}x</p>
|
|
<div className="space-y-2">
|
|
<button onClick={resetGame} className="w-full bg-white text-red-600 font-bold py-2 px-6 rounded-full text-base transition-all hover:scale-105">
|
|
🔄 Fight Again
|
|
</button>
|
|
{!isPaid && (
|
|
<button onClick={() => setShowPayModal(true)} className="w-full bg-yellow-400 text-yellow-900 font-bold py-2 px-6 rounded-full text-base transition-all hover:scale-105 flex items-center justify-center gap-2">
|
|
⭐ $9.99 - No Ads
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stripe Payment Modal */}
|
|
{showPayModal && (
|
|
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full text-center">
|
|
<h3 className="text-2xl font-bold text-gray-800 mb-2">Remove Ads</h3>
|
|
<p className="text-gray-600 mb-4">Get BossPunch ad-free forever!</p>
|
|
<p className="text-4xl font-black text-purple-600 mb-4">$9.99</p>
|
|
<button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg mb-2 transition">
|
|
Pay with Card
|
|
</button>
|
|
<button onClick={() => setShowPayModal(false)} className="text-gray-500 text-sm">Cancel</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!isPaid && gameState !== "upload" && (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-black/80 py-2 text-center">
|
|
<p className="text-white/60 text-xs">Advertisement</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|