import React, { useState, useEffect, useRef, useCallback } from 'react'; import { CANVAS_WIDTH, CANVAS_HEIGHT, GROUND_HEIGHT, PLAYER_SIZE, ENEMY_WIDTH, ENEMY_HEIGHT, INITIAL_OBSTACLE_SPEED, SPEED_INCREMENT, ASSETS } from './constants'; import { Player, Obstacle, Enemy, GameState } from './types'; import { GoogleGenAI, Modality } from "@google/genai"; const ai = new GoogleGenAI({ apiKey: process.env.API_KEY }); // Audio Decoding Helpers function decode(base64: string) { const binaryString = atob(base64); const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i); } return bytes; } async function decodeAudioData( data: Uint8Array, ctx: AudioContext, sampleRate: number, numChannels: number, ): Promise { const dataInt16 = new Int16Array(data.buffer); const frameCount = dataInt16.length / numChannels; const buffer = ctx.createBuffer(numChannels, frameCount, sampleRate); for (let channel = 0; channel < numChannels; channel++) { const channelData = buffer.getChannelData(channel); for (let i = 0; i < frameCount; i++) { channelData[i] = dataInt16[i * numChannels + channel] / 32768.0; } } return buffer; } interface Particle { x: number; y: number; vx: number; vy: number; life: number; size: number; color: string; } const App: React.FC = () => { const canvasRef = useRef(null); const anikImgRef = useRef(null); const dgmImgRef = useRef(null); const audioCtxRef = useRef(null); const [imagesLoaded, setImagesLoaded] = useState(false); const [isPortrait, setIsPortrait] = useState(false); const [isSpeaking, setIsSpeaking] = useState(false); const [gameState, setGameState] = useState({ score: 0, isGameOver: false, isStarted: false, highScore: parseInt(localStorage.getItem('dgm_highscore') || '0'), }); const [roastMessage, setRoastMessage] = useState(""); const particlesRef = useRef([]); const landingSquashRef = useRef(0); useEffect(() => { const checkOrientation = () => { setIsPortrait(window.innerHeight > window.innerWidth && window.innerWidth < 600); }; checkOrientation(); window.addEventListener('resize', checkOrientation); return () => window.removeEventListener('resize', checkOrientation); }, []); useEffect(() => { let loadedCount = 0; const totalToLoad = 2; const onImageLoad = () => { loadedCount++; if (loadedCount === totalToLoad) setImagesLoaded(true); }; const anikImg = new Image(); anikImg.src = ASSETS.anik; anikImg.onload = onImageLoad; anikImgRef.current = anikImg; const dgmImg = new Image(); dgmImg.src = ASSETS.dgm; dgmImg.onload = onImageLoad; dgmImgRef.current = dgmImg; }, []); const playerRef = useRef({ x: 250, y: CANVAS_HEIGHT - PLAYER_SIZE - GROUND_HEIGHT, width: PLAYER_SIZE, height: PLAYER_SIZE, vy: 0, gravity: 1.5, jumpStrength: -25, groundY: CANVAS_HEIGHT - PLAYER_SIZE - GROUND_HEIGHT, isJumping: false }); const enemyRef = useRef({ x: 40, y: CANVAS_HEIGHT - ENEMY_HEIGHT - GROUND_HEIGHT, width: ENEMY_WIDTH, height: ENEMY_HEIGHT, stickAngle: 0 }); const obstaclesRef = useRef([]); const frameCountRef = useRef(0); const currentSpeedRef = useRef(INITIAL_OBSTACLE_SPEED); const requestRef = useRef(0); const spawnParticles = (x: number, y: number, count: number, color: string = '#60a5fa') => { for (let i = 0; i < count; i++) { particlesRef.current.push({ x, y, vx: -2 - Math.random() * 4, vy: -Math.random() * 2, life: 1.0, size: 2 + Math.random() * 5, color }); } }; const jump = useCallback(() => { if (!playerRef.current.isJumping && gameState.isStarted && !gameState.isGameOver) { playerRef.current.vy = playerRef.current.jumpStrength; playerRef.current.isJumping = true; spawnParticles(playerRef.current.x + 50, playerRef.current.groundY + PLAYER_SIZE, 10, '#94a3b8'); if ('vibrate' in navigator) navigator.vibrate(10); } }, [gameState.isStarted, gameState.isGameOver]); const speakRoast = async (text: string) => { if (!text) return; try { setIsSpeaking(true); if (!audioCtxRef.current) { audioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 }); } const ctx = audioCtxRef.current; const response = await ai.models.generateContent({ model: "gemini-2.5-flash-preview-tts", contents: [{ parts: [{ text: `Say sarcastically in Bengali: ${text}` }] }], config: { responseModalities: [Modality.AUDIO], speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: 'Kore' }, }, }, }, }); const base64Audio = response.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data; if (base64Audio) { const audioBuffer = await decodeAudioData(decode(base64Audio), ctx, 24000, 1); const source = ctx.createBufferSource(); source.buffer = audioBuffer; source.connect(ctx.destination); source.onended = () => setIsSpeaking(false); source.start(); } else { setIsSpeaking(false); } } catch (error) { console.error("TTS Error:", error); setIsSpeaking(false); } }; const startGame = () => { setGameState(prev => ({ ...prev, isStarted: true, isGameOver: false, score: 0 })); obstaclesRef.current = []; particlesRef.current = []; currentSpeedRef.current = INITIAL_OBSTACLE_SPEED; playerRef.current.y = playerRef.current.groundY; playerRef.current.vy = 0; playerRef.current.isJumping = false; setRoastMessage(""); setIsSpeaking(false); }; const gameOver = async () => { setGameState(prev => { const newScore = prev.score; const newHigh = Math.max(prev.highScore, newScore); localStorage.setItem('dgm_highscore', newHigh.toString()); return { ...prev, isGameOver: true, highScore: newHigh }; }); if ('vibrate' in navigator) navigator.vibrate([100, 50, 100]); try { const res = await ai.models.generateContent({ model: 'gemini-3-flash-preview', contents: `Short sarcastic roast in Bengali (max 10 words) for DGM on a motorcycle caught by Boss Anik in a suit. Mention "বস অনিক" and his stick. Score: ${gameState.score}.`, }); const text = res.text || "বস অনিক DGM-কে ধরে ফেলেছে!"; setRoastMessage(text); // Automatically play the roast as "Note Player" speakRoast(text); } catch (err) { setRoastMessage("বস অনিক DGM-কে ধরে ফেলেছে!"); } }; const update = () => { if (!gameState.isStarted || gameState.isGameOver) return; frameCountRef.current++; const p = playerRef.current; p.y += p.vy; p.vy += p.gravity; landingSquashRef.current *= 0.8; if (p.y >= p.groundY) { if (p.isJumping) { spawnParticles(p.x + 50, p.groundY + PLAYER_SIZE, 8, '#94a3b8'); landingSquashRef.current = 15; } p.y = p.groundY; p.vy = 0; p.isJumping = false; if (frameCountRef.current % 5 === 0) spawnParticles(p.x + 10, p.y + p.height - 5, 2, '#ffffff33'); } particlesRef.current = particlesRef.current .map(part => ({ ...part, x: part.x + part.vx, y: part.y + part.vy, life: part.life - 0.02, size: part.size * 0.98 })) .filter(part => part.life > 0); enemyRef.current.stickAngle = Math.sin(frameCountRef.current * 0.15) * 0.4; enemyRef.current.y = (CANVAS_HEIGHT - ENEMY_HEIGHT - GROUND_HEIGHT) + Math.sin(frameCountRef.current * 0.1) * 5; const spawnRate = Math.max(60, 100 - (currentSpeedRef.current * 2)); if (frameCountRef.current % Math.floor(spawnRate) === 0) { const size = 45; obstaclesRef.current.push({ x: CANVAS_WIDTH, y: CANVAS_HEIGHT - size - GROUND_HEIGHT, width: size, height: size, speed: currentSpeedRef.current }); } const nextObstacles: Obstacle[] = []; for (const obs of obstaclesRef.current) { obs.x -= obs.speed; if ( p.x + p.width * 0.7 > obs.x && p.x < obs.x + obs.width && p.y + p.height > obs.y ) { gameOver(); } if (obs.x + obs.width > 0) nextObstacles.push(obs); else { setGameState(prev => ({ ...prev, score: prev.score + 1 })); currentSpeedRef.current += SPEED_INCREMENT; } } obstaclesRef.current = nextObstacles; }; const draw = (ctx: CanvasRenderingContext2D) => { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); ctx.fillStyle = '#f0f4f8'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); ctx.strokeStyle = '#e2e8f0'; ctx.lineWidth = 1; for (let i = -100; i < CANVAS_WIDTH + 100; i += 120) { const offset = (frameCountRef.current * (currentSpeedRef.current * 0.6)) % 120; ctx.beginPath(); ctx.moveTo(i - offset, CANVAS_HEIGHT - GROUND_HEIGHT); ctx.lineTo(i - offset - 50, CANVAS_HEIGHT); ctx.stroke(); } ctx.fillStyle = '#cbd5e1'; ctx.fillRect(0, CANVAS_HEIGHT - GROUND_HEIGHT, CANVAS_WIDTH, GROUND_HEIGHT); ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, CANVAS_HEIGHT - GROUND_HEIGHT); ctx.lineTo(CANVAS_WIDTH, CANVAS_HEIGHT - GROUND_HEIGHT); ctx.stroke(); particlesRef.current.forEach(p => { ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); }); ctx.globalAlpha = 1.0; const e = enemyRef.current; if (anikImgRef.current) { ctx.save(); ctx.drawImage(anikImgRef.current, e.x, e.y, e.width, e.height); ctx.restore(); } ctx.fillStyle = '#ef4444'; ctx.font = 'bold 18px Arial'; ctx.textAlign = 'center'; ctx.fillText('অনিক (বস)', e.x + e.width / 2, e.y - 15); ctx.save(); ctx.translate(e.x + e.width * 0.8, e.y + e.height * 0.7); ctx.rotate(e.stickAngle); ctx.strokeStyle = '#643200'; ctx.lineWidth = 6; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(40, -40); ctx.stroke(); ctx.restore(); const p = playerRef.current; let rotation = 0; if (p.isJumping) { rotation = p.vy < 0 ? 0.1 : -0.1; } const squash = landingSquashRef.current; const drawWidth = p.width + squash; const drawHeight = p.height - squash; ctx.save(); ctx.translate(p.x + p.width / 2, p.y + p.height / 2 + squash / 2); ctx.rotate(rotation); if (dgmImgRef.current) { ctx.drawImage(dgmImgRef.current, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight); } ctx.fillStyle = '#1e293b'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.fillText('DGM', 0, -drawHeight / 2 - 10); ctx.restore(); ctx.fillStyle = '#991b1b'; for (const obs of obstaclesRef.current) { ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(obs.x, obs.y, obs.width, obs.height, 5); else ctx.rect(obs.x, obs.y, obs.width, obs.height); ctx.fill(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 1; ctx.stroke(); } }; const gameLoop = useCallback(() => { const ctx = canvasRef.current?.getContext('2d'); if (!ctx || !imagesLoaded || isPortrait) return; update(); draw(ctx); requestRef.current = requestAnimationFrame(gameLoop); }, [imagesLoaded, gameState.isStarted, gameState.isGameOver, isPortrait]); useEffect(() => { requestRef.current = requestAnimationFrame(gameLoop); return () => cancelAnimationFrame(requestRef.current); }, [gameLoop]); return (

DGM Escape

SCORE {gameState.score}

BEST {gameState.highScore}

TAP TO JUMP

); }; export default App;

DGM Escape

Rotate Device

MOTOR MISSION!

BUSTED!

VoltBlaster

DGM Escape - Boss Chase Runner

Inspired by VoltBlaster?