from pathlib import Path
import base64, zipfile

img_path = Path("/mnt/data/1000120142.jpg")
out_dir = Path("/mnt/data/endless_highway_game")
out_dir.mkdir(exist_ok=True)

img_b64 = base64.b64encode(img_path.read_bytes()).decode("utf-8")

html = r"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Endless Highway</title>
<style>
*{box-sizing:border-box} body{margin:0;background:#111;font-family:Arial,sans-serif;overflow:hidden;touch-action:none}
#game{position:relative;width:100vw;height:100vh;max-width:480px;margin:auto;overflow:hidden;background:#65a64b}
#road{position:absolute;left:10%;width:80%;height:100%;background:#444;overflow:hidden;border-left:7px solid #ddd;border-right:7px solid #ddd}
.lane{position:absolute;top:-120px;width:7px;height:100px;background:#fff;animation:road 0.65s linear infinite}
@keyframes road{to{transform:translateY(720px)}}
#car{position:absolute;z-index:5;width:82px;height:125px;bottom:55px;left:calc(50% - 41px);border-radius:16px;background:#e51d2a;border:4px solid #111;box-shadow:0 5px 10px #0008;overflow:hidden}
#car img{width:100%;height:100%;object-fit:cover}
#car:after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 3px #ffffff44}
.enemy{position:absolute;z-index:4;width:68px;height:105px;border-radius:13px;border:4px solid #222;box-shadow:0 5px 10px #0008}
#score{position:absolute;z-index:10;top:15px;left:15px;color:#fff;font-size:22px;font-weight:bold;text-shadow:2px 2px #000}
#start{position:absolute;z-index:20;inset:0;background:#000b;color:white;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#start h1{font-size:34px;margin:0 0 10px} #start p{margin:5px 20px 20px}
button{font-size:20px;padding:12px 25px;border:0;border-radius:12px;font-weight:bold}
.controls{position:absolute;z-index:15;bottom:8px;left:0;right:0;display:flex;justify-content:space-between;padding:0 25px}
.ctrl{width:95px;height:60px;background:#ffffffcc}
</style>
</head>
<body>
<div id="game">
  <div id="road"></div>
  <div id="score">Score: 0</div>
  <div id="car"><img src="data:image/jpeg;base64,IMGDATA"></div>
  <div class="controls">
    <button class="ctrl" id="left">⬅️</button>
    <button class="ctrl" id="right">➡️</button>
  </div>
  <div id="start">
    <h1>🚗 Endless Highway</h1>
    <p>Apni car ko left/right chalao aur traffic se bacho!</p>
    <button id="play">START GAME</button>
  </div>
</div>
<script>
const game=document.getElementById('game'), road=document.getElementById('road'), car=document.getElementById('car');
const scoreEl=document.getElementById('score'), start=document.getElementById('start');
let x=0, score=0, running=false, enemies=[], last=0, spawnTimer=0;

function makeRoad(){
  road.innerHTML='';
  for(let i=0;i<8;i++){
    let l=document.createElement('div'); l.className='lane';
    l.style.left=(33.33+i%2*33.33)+'%'; l.style.animationDelay=(-i*0.16)+'s'; road.appendChild(l);
  }
}
function reset(){
  enemies.forEach(e=>e.remove()); enemies=[];
  x=0; score=0; scoreEl.textContent='Score: 0';
  car.style.left='calc(50% - 41px)';
  spawnTimer=0;
}
function move(dir){
  if(!running)return;
  x += dir*32;
  const min=road.offsetLeft+8, max=road.offsetLeft+road.clientWidth-car.offsetWidth-8;
  const current=car.offsetLeft;
  const next=Math.max(min,Math.min(max,current+dir*32));
  car.style.left=next+'px';
}
function spawn(){
  const e=document.createElement('div'); e.className='enemy';
  const colors=['#1677ff','#ffd21a','#22aa55','#ff7a18','#9b45d6'];
  e.style.background=colors[Math.floor(Math.random()*colors.length)];
  const lanes=[0.17,0.40,0.63];
  e.style.left=(road.offsetLeft+road.clientWidth*lanes[Math.floor(Math.random()*3)])+'px';
  e.style.top='-120px';
  game.appendChild(e); enemies.push(e);
}
function hit(a,b){
  const A=a.getBoundingClientRect(),B=b.getBoundingClientRect();
  return A.left<B.right-8&&A.right>B.left+8&&A.top<B.bottom-8&&A.bottom>B.top+8;
}
function loop(t){
  if(!running)return;
  const dt=Math.min(40,t-last||16); last=t; spawnTimer+=dt;
  if(spawnTimer>850){spawn();spawnTimer=0}
  enemies.forEach((e,i)=>{
    e.style.top=(e.offsetTop+dt*0.42)+'px';
    if(hit(car,e)){gameOver();return}
    if(e.offsetTop>game.clientHeight){e.remove();enemies.splice(i,1);score++;scoreEl.textContent='Score: '+score}
  });
  requestAnimationFrame(loop);
}
function gameOver(){
  running=false;
  start.style.display='flex';
  start.innerHTML='<h1>💥 Game Over</h1><p>Score: '+score+'</p><button id="play">PLAY AGAIN</button>';
  document.getElementById('play').onclick=startGame;
}
function startGame(){
  reset(); start.style.display='none'; running=true; last=performance.now(); requestAnimationFrame(loop);
}
document.getElementById('play').onclick=startGame;
document.getElementById('left').ontouchstart=e=>{e.preventDefault();move(-1)};
document.getElementById('right').ontouchstart=e=>{e.preventDefault();move(1)};
document.getElementById('left').onclick=()=>move(-1);
document.getElementById('right').onclick=()=>move(1);
document.addEventListener('keydown',e=>{if(e.key==='ArrowLeft')move(-1);if(e.key==='ArrowRight')move(1)});
makeRoad();
</script>
</body>
</html>""".replace("IMGDATA", img_b64)

html_path = out_dir / "index.html"
html_path.write_text(html, encoding="utf-8")

zip_path = Path("/mnt/data/endless_highway_game.zip")
with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as z:
    z.write(html_path, "index.html")

print(f"Game ready: {html_path}")
print(f"ZIP ready: {zip_path}")
