/* ===== Deadlock map — real game layers + diamond towers + camps + hero avatars ===== */
const GM='assets/gmap/';

// player positions on lanes (percent of square)
const MAPPOS={
  a1:[26,68],a2:[50,62],a3:[42,81],a4:[74,68],a5:[22,58],a6:[58,84],
  e1:[50,44],e2:[29,28],e3:[71,28],e4:[60,23],e5:[42,25],e6:[50,15],
};

// towers / guardians as diamonds on the lanes
const COLT={Y:'#e6a52c',B:'#3d97e0',G:'#56b04f',R:'#dc4a40'};
const TOWERS=[
  // friendly (bottom) — lane-coloured
  {x:20,y:69,c:'Y',big:true},{x:37,y:80,c:'Y'},
  {x:47,y:66,c:'B',big:true},{x:50,y:81,c:'B'},
  {x:80,y:69,c:'G',big:true},{x:63,y:80,c:'G'},
  // enemy (top) — red
  {x:20,y:31,c:'R',big:true},{x:37,y:20,c:'R'},
  {x:47,y:34,c:'R',big:true},{x:50,y:19,c:'R'},
  {x:80,y:31,c:'R',big:true},{x:63,y:20,c:'R'},
];

// neutral camps: [size, x, y]
const CAMPS=[
  ['l',30,55],['l',70,55],
  ['m',16,53],['m',84,53],
  ['m',38,62],['m',62,62],
  ['s',38,43],['s',62,43],
  ['s',27,47],['s',73,47],
  ['s',45,58],['s',55,58],
];

function Tower({x,y,c,big}){
  const s=big?4.6:3.3;
  return (
    <svg className="mk" viewBox="0 0 100 100" style={{left:x+'%',top:y+'%',width:s+'%',transform:'translate(-50%,-50%)'}}>
      <polygon points="50,5 95,50 50,95 5,50" fill={COLT[c]} stroke="#141414" strokeWidth="11" strokeLinejoin="round"/>
      {big && <polygon points="50,29 71,50 50,71 29,50" fill="#141414"/>}
    </svg>
  );
}

function Camp({size,x,y}){
  const s = size==='l'?4.2 : size==='m'?3.6 : 3.0;
  return <img className="mk" src={GM+'camp_'+size+'.png'} alt="" draggable="false"
    style={{left:x+'%',top:y+'%',width:s+'%',transform:'translate(-50%,-50%)'}}/>;
}

function HeroDot({p,team}){
  if(!p.alive) return null;
  const fb=MAPPOS[p.id]||[50,50];
  const x=(p.x!=null?p.x:fb[0]), y=(p.y!=null?p.y:fb[1]);
  const H=window.RD.HEROES[p.hero]||{};
  return (
    <div className={"hdot "+team} style={{left:x+'%',top:y+'%'}}>
      <img src={H.icon} alt="" draggable="false"/>
    </div>
  );
}

function MapView({size, allies, enemies}){
  return (
    <div className="map gamemap" style={{width:size,height:size}}>
      <img className="layer" src={GM+'bg.png'} alt=""/>
      <img className="layer" src={GM+'lanes.png'} alt=""/>
      {/* base cores */}
      <img className="mk" src={GM+'core_enemy.png'} alt="" style={{left:'50%',top:'12%',width:'9%',transform:'translate(-50%,-50%)'}}/>
      <img className="mk" src={GM+'core_friend.png'} alt="" style={{left:'50%',top:'88%',width:'9%',transform:'translate(-50%,-50%)'}}/>
      {/* towers */}
      {TOWERS.map((t,i)=><Tower key={i} {...t}/>)}
      {/* neutral camps */}
      {CAMPS.map((m,i)=><Camp key={i} size={m[0]} x={m[1]} y={m[2]}/>)}
      {/* patron / mid boss */}
      <img className="mk patron" src={GM+'rejuv.png'} alt=""
        style={{left:'50%',top:'50%',width:'7.8%',transform:'translate(-50%,-50%)'}}/>
      {/* players */}
      {allies.map(p=><HeroDot key={p.id} p={p} team="ally"/>)}
      {enemies.map(p=><HeroDot key={p.id} p={p} team="enemy"/>)}
    </div>
  );
}

Object.assign(window, { MapView, MAPPOS });