234 lines
11 KiB
TypeScript
234 lines
11 KiB
TypeScript
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Button } from '../components/ui/Button';
|
|
import { ArrowLeft, Play, RefreshCw, Trophy } from 'lucide-react';
|
|
import { StorageService } from '../services/storageService';
|
|
|
|
interface GameProps {
|
|
onExit: () => void;
|
|
}
|
|
|
|
export const TruthTrek: React.FC<GameProps> = ({ onExit }) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [gameOver, setGameOver] = useState(false);
|
|
const [score, setScore] = useState(0);
|
|
const [highScore, setHighScore] = useState(0);
|
|
const [difficulty, setDifficulty] = useState<'easy' | 'medium' | 'hard'>('medium');
|
|
|
|
const MASTER_QUESTIONS = [
|
|
{ question: "2 + 2 = 4", answer: true, trueLabel: "True", falseLabel: "False" },
|
|
{ question: "Nepal is in Europe", answer: false, trueLabel: "True", falseLabel: "False" },
|
|
{ question: "Water boils at 100°C", answer: true, trueLabel: "True", falseLabel: "False" },
|
|
{ question: "The Earth is flat", answer: false, trueLabel: "True", falseLabel: "False" },
|
|
{ question: "Sagarmatha is 8848m", answer: true, trueLabel: "True", falseLabel: "False" },
|
|
{ question: "Zebra is a fish", answer: false, trueLabel: "True", falseLabel: "False" }
|
|
];
|
|
|
|
const gameState = useRef({
|
|
lane: 0, gates: [] as any[], particles: [] as any[], torches: [] as any[],
|
|
speed: 3, score: 0, frameCount: 0, isDying: false
|
|
});
|
|
|
|
const requestRef = useRef<number>(0);
|
|
|
|
useEffect(() => {
|
|
const loadHighScore = async () => {
|
|
const profile = await StorageService.getProfile();
|
|
if (profile?.highScores?.truth) {
|
|
setHighScore(profile.highScores.truth);
|
|
}
|
|
};
|
|
loadHighScore();
|
|
|
|
for(let i=0; i<10; i++) gameState.current.torches.push({y: i*100, frame: Math.random()*100});
|
|
|
|
return () => cancelAnimationFrame(requestRef.current);
|
|
}, []);
|
|
|
|
const startGame = () => {
|
|
cancelAnimationFrame(requestRef.current);
|
|
setIsPlaying(true); setGameOver(false); setScore(0);
|
|
gameState.current = {
|
|
lane: 0, gates: [{y: -200, ...MASTER_QUESTIONS[0], passed: false}],
|
|
particles: [], torches: gameState.current.torches,
|
|
speed: difficulty === 'easy' ? 3 : difficulty === 'medium' ? 5 : 7,
|
|
score: 0, frameCount: 0, isDying: false
|
|
};
|
|
requestRef.current = requestAnimationFrame(gameLoop);
|
|
};
|
|
|
|
const switchLane = () => {
|
|
if (gameState.current.isDying) return;
|
|
gameState.current.lane = gameState.current.lane === 0 ? 1 : 0;
|
|
};
|
|
|
|
const gameLoop = () => {
|
|
const ctx = canvasRef.current?.getContext('2d');
|
|
if(!ctx || !canvasRef.current) return;
|
|
const W = 800; const H = 450;
|
|
const S = gameState.current;
|
|
|
|
if (!S.isDying) {
|
|
S.frameCount++; S.gates.forEach(g => g.y += S.speed);
|
|
S.torches.forEach(t => { t.y += S.speed; if(t.y > H) t.y = -50; t.frame++; });
|
|
|
|
if (S.gates[S.gates.length - 1].y > 200) {
|
|
const q = MASTER_QUESTIONS[Math.floor(Math.random() * MASTER_QUESTIONS.length)];
|
|
S.gates.push({y: -250, ...q, passed: false});
|
|
}
|
|
if (S.gates[0].y > H) S.gates.shift();
|
|
|
|
const pY = H - 80;
|
|
S.gates.forEach(g => {
|
|
if (!g.passed && g.y > pY - 30 && g.y < pY + 30) {
|
|
const isCorrect = (S.lane === 0 && g.answer) || (S.lane === 1 && !g.answer);
|
|
if (isCorrect) {
|
|
g.passed = true; S.score += 10; setScore(S.score);
|
|
for(let i=0; i<15; i++) S.particles.push({x: S.lane===0?W/4:W*0.75, y: pY, vx: Math.random()*6-3, vy: Math.random()*6-3, l: 20, c: '#4ade80'});
|
|
} else {
|
|
S.isDying = true;
|
|
setTimeout(() => {
|
|
setGameOver(true); setIsPlaying(false);
|
|
const finalScore = S.score;
|
|
if (finalScore > highScore) setHighScore(finalScore);
|
|
StorageService.saveHighScore('truth', finalScore);
|
|
StorageService.addPoints(Math.floor(finalScore / 2), finalScore, 'game_reward', 'Truth Trek Expedition');
|
|
}, 1000);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const grad = ctx.createLinearGradient(0,0,W,0); grad.addColorStop(0, '#1e1b4b'); grad.addColorStop(0.5, '#312e81'); grad.addColorStop(1, '#1e1b4b');
|
|
ctx.fillStyle = grad; ctx.fillRect(0,0,W,H);
|
|
|
|
ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)'; ctx.lineWidth = 2;
|
|
ctx.beginPath(); ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H); ctx.stroke();
|
|
|
|
S.torches.forEach(t => {
|
|
const flicker = Math.sin(t.frame * 0.5) * 5;
|
|
ctx.fillStyle = '#ea580c';
|
|
ctx.beginPath(); ctx.arc(20, t.y, 5 + flicker/2, 0, Math.PI*2); ctx.fill();
|
|
ctx.beginPath(); ctx.arc(W-20, t.y, 5 + flicker/2, 0, Math.PI*2); ctx.fill();
|
|
});
|
|
|
|
S.gates.forEach(g => {
|
|
const scale = 1 + (g.y / H);
|
|
const w = 180 * scale; const h = 100 * scale;
|
|
|
|
ctx.fillStyle = 'rgba(17, 24, 39, 0.9)'; ctx.fillRect((W-w*2)/2, g.y - 80, w*2, 60);
|
|
ctx.fillStyle = 'white'; ctx.font = `bold ${Math.max(12, 16*scale)}px sans-serif`; ctx.textAlign='center';
|
|
ctx.fillText(g.question, W/2, g.y - 45);
|
|
|
|
ctx.fillStyle = 'rgba(34, 197, 94, 0.2)'; ctx.strokeStyle = '#22c55e'; ctx.lineWidth = 4;
|
|
ctx.fillRect(W/2 - w - 10, g.y, w, h); ctx.strokeRect(W/2 - w - 10, g.y, w, h);
|
|
ctx.fillStyle = '#4ade80'; ctx.fillText(g.trueLabel, W/2 - w/2 - 10, g.y + h/2);
|
|
|
|
ctx.fillStyle = 'rgba(239, 68, 68, 0.2)'; ctx.strokeStyle = '#ef4444';
|
|
ctx.fillRect(W/2 + 10, g.y, w, h); ctx.strokeRect(W/2 + 10, g.y, w, h);
|
|
ctx.fillStyle = '#f87171'; ctx.fillText(g.falseLabel, W/2 + w/2 + 10, g.y + h/2);
|
|
});
|
|
|
|
if (!S.isDying) {
|
|
const px = S.lane === 0 ? W/4 : W*0.75;
|
|
ctx.shadowBlur = 20; ctx.shadowColor = '#60a5fa';
|
|
ctx.fillStyle = '#3b82f6'; ctx.beginPath(); ctx.arc(px, H-80, 25, 0, Math.PI*2); ctx.fill();
|
|
ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(px-5, H-85, 8, 0, Math.PI*2); ctx.fill();
|
|
ctx.shadowBlur = 0;
|
|
} else {
|
|
for(let i=0; i<5; i++) S.particles.push({x: S.lane===0?W/4:W*0.75, y: H-80, vx: Math.random()*10-5, vy: Math.random()*10-5, l: 30, c: '#ef4444'});
|
|
}
|
|
|
|
S.particles.forEach(p => {
|
|
p.x += p.vx; p.y += p.vy; p.l--;
|
|
ctx.fillStyle = p.c; ctx.globalAlpha = p.l/30; ctx.fillRect(p.x, p.y, 5, 5);
|
|
});
|
|
ctx.globalAlpha = 1;
|
|
|
|
requestRef.current = requestAnimationFrame(gameLoop);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-indigo-950/90 backdrop-blur-xl flex flex-col items-center justify-center relative overflow-hidden select-none"
|
|
onClick={switchLane}
|
|
onKeyDown={(e) => {
|
|
if (e.code === 'ArrowLeft') gameState.current.lane = 0;
|
|
if (e.code === 'ArrowRight') gameState.current.lane = 1;
|
|
if (e.code === 'Space') switchLane();
|
|
}}
|
|
tabIndex={0}
|
|
>
|
|
{/* Header HUD */}
|
|
<div className="absolute top-6 w-full max-w-5xl px-6 z-50 flex justify-between items-start pointer-events-none">
|
|
<button
|
|
onClick={onExit}
|
|
className="pointer-events-auto flex items-center gap-2 px-5 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-full backdrop-blur-md border border-white/20 transition-all hover:scale-105 active:scale-95 font-bold text-sm shadow-xl"
|
|
>
|
|
<ArrowLeft size={18} /> EXIT
|
|
</button>
|
|
|
|
{isPlaying && (
|
|
<div className="flex flex-col items-end gap-2 animate-in fade-in slide-in-from-top-4">
|
|
<div className="bg-black/40 backdrop-blur-md px-6 py-2 rounded-2xl border border-white/10 text-white font-mono font-black text-4xl shadow-xl tracking-wider">
|
|
{score}
|
|
</div>
|
|
<div className="text-xs text-white/80 font-bold bg-black/20 px-3 py-1 rounded-full uppercase tracking-widest border border-white/5">HI: {highScore}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative rounded-[2rem] overflow-hidden shadow-2xl shadow-indigo-500/20 border-8 border-indigo-900/50 w-full max-w-5xl aspect-video bg-black ring-1 ring-white/10">
|
|
<canvas ref={canvasRef} width={800} height={450} className="w-full h-full block touch-none cursor-pointer"/>
|
|
|
|
{!isPlaying && !gameOver && (
|
|
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm flex flex-col items-center justify-center text-white p-6 text-center animate-in fade-in">
|
|
<h2 className="text-6xl font-black mb-6 text-indigo-400 tracking-wider drop-shadow-md">TRUTH TREK</h2>
|
|
<div className="mb-8 bg-white/10 px-6 py-3 rounded-full border border-white/20 flex items-center gap-3 backdrop-blur-md">
|
|
<Trophy size={18} className="text-yellow-400" />
|
|
<span className="text-sm font-bold text-yellow-100 uppercase tracking-widest">Personal Best: {highScore}</span>
|
|
</div>
|
|
|
|
<div className="flex gap-4 mb-10">
|
|
{['easy', 'medium', 'hard'].map((d) => (
|
|
<button
|
|
key={d}
|
|
onClick={(e) => { e.stopPropagation(); setDifficulty(d as any); }}
|
|
className={`px-6 py-3 rounded-xl text-sm font-black uppercase transition-all border-2 ${
|
|
difficulty === d
|
|
? 'bg-indigo-600 border-indigo-400 text-white shadow-[0_0_20px_rgba(99,102,241,0.5)] scale-110'
|
|
: 'bg-black/40 border-gray-700 text-gray-400 hover:text-white hover:border-gray-500'
|
|
}`}
|
|
>
|
|
{d}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<Button onClick={(e) => { e.stopPropagation(); startGame(); }} className="bg-indigo-600 hover:bg-indigo-500 text-xl px-12 py-6 rounded-full font-black shadow-[0_0_30px_rgba(99,102,241,0.5)] transform hover:scale-105 active:scale-95 transition-all border border-white/10 group">
|
|
<Play size={28} className="mr-3 fill-white group-hover:scale-110 transition-transform"/> START MISSION
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{gameOver && (
|
|
<div className="absolute inset-0 bg-red-950/90 backdrop-blur-md flex flex-col items-center justify-center text-white p-6 text-center animate-in zoom-in duration-300">
|
|
<h2 className="text-7xl font-black mb-4 tracking-tighter drop-shadow-lg">FAILED!</h2>
|
|
|
|
<div className="flex flex-col items-center gap-1 mb-10 bg-black/30 px-8 py-4 rounded-3xl border border-red-500/30">
|
|
<span className="text-red-200 text-xs uppercase font-bold tracking-[0.2em]">Score</span>
|
|
<span className="text-6xl font-mono font-black text-yellow-400">{score}</span>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<Button onClick={(e) => { e.stopPropagation(); startGame(); }} className="bg-white text-indigo-900 hover:bg-gray-200 font-black px-10 py-5 text-xl rounded-full shadow-[0_0_30px_rgba(255,255,255,0.3)] hover:scale-105 active:scale-95 transition-all flex items-center gap-3">
|
|
<RefreshCw size={24} className="mr-2"/> RETRY
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|