);
}
function BrawlerTab({ps,setPs,isMobile}) {
const unlocked=ps.unlockedSkins||["default"];
return (
);
}
function WeaponsTab({ps,setPs,isMobile}) {
const unlocked=ps.unlockedWeapons||["ketchup","mustard"];
return (
CHOOSE YOUR WEAPON
{WEAPONS.map(w=>{
const locked=!unlocked.includes(w.id);
return (
{locked&&
🔒
}
{w.emoji}
{ps.weapon===w.id&&
✓}
{w.desc}
{[["💥 DMG",w.dmg,80,"#ef4444"],["⚡ SPD",w.speed,15,"#3b82f6"],["🎯 RNG",w.range,500,"#22c55e"]].map(([l,v,mx,c])=>(
);
})}
);
}
function PassTab({ps,setPs,isMobile}) {
const nextR=PASS_REWARDS.find(r=>r.level>ps.passLevel);
const pct=nextR?Math.min(100,(ps.xp/nextR.xpNeeded)*100):100;
const claim=r=>{
if(ps.xp>=r.xpNeeded&&r.level>ps.passLevel){
setPs(p=>{
const ns={...p,passLevel:r.level};
if(r.type==="coins") ns.coins=p.coins+r.value;
if(r.type==="skin") ns.unlockedSkins=[...(p.unlockedSkins||[]),r.value];
if(r.type==="weapon") ns.unlockedWeapons=[...(p.unlockedWeapons||[]),r.value];
return ns;
});
}
};
return (
🍽️
FOOD PASS — Season 1
FREE rewards — just play and earn XP!
Level {ps.passLevel} · {ps.xp} XP
{nextR&&{nextR.xpNeeded-ps.xp} to Lv.{nextR.level}}
{PASS_REWARDS.map(r=>{
const unlocked=ps.xp>=r.xpNeeded,claimed=ps.passLevel>=r.level;
return (
{claimed?"✓":r.level}
{r.emoji}
{r.label}
{r.xpNeeded} XP
{!claimed&&unlocked?(
)
:claimed?(
✓ Done)
:(
🔒)}
);
})}
);
}
function DailyTab({ps,isMobile}) {
return (
DAILY CHALLENGES
Resets in 12h · Complete for bonus coins & XP
{DAILY.map(ch=>{
const prog=ps.dailyProgress?.[ch.id]||0,done=prog>=ch.goal,pct=Math.min(100,(prog/ch.goal)*100);
return (
{ch.emoji}
{ch.desc}
Reward: 🪙{ch.reward} + ✨{Math.floor(ch.reward*.5)} XP
{done&&
✓}
);
})}
);
}
function SettingsModal({ps,setPs,onClose}) {
const [name,setName]=useState(ps.name);
return (
⚙️ Settings
{[["🔊 Sound Effects","sfx"],["🎵 Music","music"],["📳 Haptics","haptics"],["🎯 Auto-Aim (mobile)","autoAim"]].map(([label,key])=>(
))}
);
}
/* ── GAME SCREEN ── */
function GameScreen({ps,onGameEnd,isMobile}) {
const canvasRef=useRef(null);
const engineRef=useRef(null);
const moveJoy=useFloatJoy();
const aimJoy=useFloatJoy();
const [hud,setHud]=useState({hp:100,maxHp:100,ammo:8,maxAmmo:8,reload:false,reloadT:0,score:0,kills:0,wave:1,timeLeft:150,combo:0,shielded:false,speedy:false});
const [paused,setPaused]=useState(false);
const [,forceUpdate]=useState(0); // for joystick visual re-renders
// Feed joystick into engine each frame
useEffect(()=>{
let raf;
const loop=()=>{
if(engineRef.current){
engineRef.current.joyMove=moveJoy.output.current;
engineRef.current.joyAim=aimJoy.output.current;
}
forceUpdate(n=>n+1);
raf=requestAnimationFrame(loop);
};
raf=requestAnimationFrame(loop);
return()=>cancelAnimationFrame(raf);
},[]);
useEffect(()=>{
const canvas=canvasRef.current; if(!canvas) return;
const resize=()=>{canvas.width=canvas.offsetWidth;canvas.height=canvas.offsetHeight;};
resize();
const eng=new GameEngine(canvas,ps,onGameEnd,setHud);
engineRef.current=eng;
eng.start();
const ro=new ResizeObserver(resize); ro.observe(canvas);
return()=>{ eng.running=false; eng.destroy(); cancelAnimationFrame(eng.raf); ro.disconnect(); };
},[]);
const togglePause=()=>{
const eng=engineRef.current; if(!eng) return;
if(paused){eng.running=true;eng.start();setPaused(false);}
else{eng.running=false;cancelAnimationFrame(eng.raf);setPaused(true);}
};
const weap=WEAPONS.find(w=>w.id===ps.weapon)||WEAPONS[0];
const m=Math.floor(hud.timeLeft/60),s=Math.floor(hud.timeLeft%60);
const comboMult=hud.combo>0?Math.floor(hud.combo/3)+1:1;
return (
⭐ {hud.score}
{m}:{s.toString().padStart(2,"0")}
🌊 {hud.wave}
💀 {hud.kills}
{hud.combo>=3&&(
🔥 {hud.combo}x COMBO · x{comboMult}
)}
{hud.shielded?"🛡️":"❤️"}
.4?"#22c55e":"#ef4444",borderRadius:4,width:`${(hud.hp/hud.maxHp)*100}%`,transition:"width .1s"}}/>
{hud.hp}
{hud.reload
?
:
{weap.emoji}{Array.from({length:hud.maxAmmo}).map((_,i)=>
)}
}
{(hud.shielded||hud.speedy)&&(
{hud.shielded&&🛡️}
{hud.speedy&&⚡}
)}
{isMobile&&(
<>
)}
{!isMobile&&
WASD: Move · Mouse: Aim · Click / Space: Shoot · F: Shoot
}
{paused&&(
⏸ PAUSED
)}
);
}
/* ── GAME OVER ── */
function GameOverScreen({result,ps,onBack,isMobile}) {
const newHigh=result.score>(ps.highScore||0);
return (
{newHigh&&
🎉 NEW HIGH SCORE!
}
{result.survived<10?"💀 DEFEATED!":"🏆 TIME'S UP!"}
{[["⭐","Score",result.score],["💀","Kills",result.kills],["🌊","Wave",result.wave],["✨","XP",result.xp],["🍎","Food",result.food],["🔥","Best Combo",result.maxCombo||0]].map(([e,l,v])=>(
))}
Season XP · Pass Level {ps.passLevel}
{ps.xp} XP total
);
}
/* ══════════════════════════════════════════════════════════════════════════
MAIN APP
══════════════════════════════════════════════════════════════════════════ */
export default function FoodArena() {
const [screen,setScreen]=useState("loading");
const [result,setResult]=useState(null);
const [isMobile,setMobile]=useState(false);
useEffect(()=>{
const check=()=>setMobile(window.innerWidth<700||'ontouchstart' in window);
check(); window.addEventListener("resize",check);
return()=>window.removeEventListener("resize",check);
},[]);
const [ps,setPs]=useState({
name:"Chef Player", level:7,
skin:"default", weapon:"ketchup",
coins:850, trophies:142, xp:650, passLevel:2,
gamesPlayed:24, totalKills:87, bestWave:1, highScore:0, bestCombo:0,
unlockedSkins: ["default","burger"],
unlockedWeapons: ["ketchup","mustard","icecream","pizza"],
sfx:true, music:true, haptics:true, autoAim:false,
dailyProgress:{ kills5:2, score500:180, food10:7, survive90:45, waves3:1, combo10:0 },
});
const handleGameEnd=useCallback(res=>{
setPs(p=>{
const dp={...p.dailyProgress};
dp.kills5 =Math.min(5, (dp.kills5||0)+res.kills);
dp.score500=Math.min(500,(dp.score500||0)+res.score);
dp.food10 =Math.min(10, (dp.food10||0)+(res.food||0));
dp.survive90=Math.min(90,(dp.survive90||0)+(res.survived||0));
dp.waves3 =Math.min(3, (dp.waves3||0)+(res.wave>1?1:0));
dp.combo10 =Math.min(10, (dp.combo10||0)+(res.maxCombo||0));
return {
...p, xp:p.xp+res.xp,
trophies:p.trophies+Math.floor(res.score/50),
gamesPlayed:p.gamesPlayed+1,
totalKills:p.totalKills+res.kills,
bestWave:Math.max(p.bestWave||1,res.wave||1),
highScore:Math.max(p.highScore||0,res.score),
bestCombo:Math.max(p.bestCombo||0,res.maxCombo||0),
dailyProgress:dp,
};
});
setResult(res); setScreen("gameover");
},[]);
return (
{screen==="loading" && }
{screen==="lobby" && }
{screen==="game" && }
{screen==="gameover" && }
);
}q