/* ===== Right players panel ===== */

function Avatar({hero, lvl, team}){
  const H = window.RD.HEROES[hero]||{};
  const h = H.hue || 220;
  const abbr = H.abbr || '??';
  const bg = `radial-gradient(120% 95% at 50% 22%, hsl(${h} 52% 34%), hsl(${h} 48% 17%) 60%, hsl(${h} 42% 9%))`;
  return (
    <div className="av" style={{background:bg}}>
      {lvl!=null && <div className="lvl">{lvl}</div>}
      {H.icon
        ? <img className="heroimg" src={H.icon} alt={H.name} draggable="false"/>
        : <div className="mono">{abbr}</div>}
    </div>
  );
}

function Ability({a, team}){
  const cd = Math.ceil(a.cd);
  const ready = a.cd<=0.001;
  const cls = "ab"+(a.ult?" ult":"")+(ready?` ready ${team}`:"");
  return (
    <div className={cls}>
      <span className="g">{a.ult?'R':a.g}</span>
      {!ready && <div className="cd">{cd}</div>}
      {!ready && <div className="sweep" style={{height:`${Math.min(100,(a.cd/a.max)*100)}%`}}></div>}
    </div>
  );
}

function PlayerCard({p, team}){
  const cls = "pc "+team+(p.alive?"":" dead");
  const fill = p.alive ? p.hp : 0;
  return (
    <div className={cls}>
      <Avatar hero={p.hero} lvl={p.lvl} team={team}/>
      <div className="mid">
        <div className="nameline">
          <span className="nick">{p.nick}</span>
          <span className="kd">{p.kda}</span>
        </div>
        <div className="souls">
          <SoulIcon/>
          <span>{p.souls.toLocaleString()}</span>
          <span className="sub">· NW {p.net}</span>
        </div>
        <div className="hp">
          <div className="fill" style={{width:fill+'%'}}></div>
          <div className="txt">{p.alive? 'HP '+p.hp+'%' : 'RESPAWN '+Math.ceil(p.respawn)+'s'}</div>
        </div>
      </div>
      <div className="rcol">
        <div className="abils">
          {p.abils.map((a,i)=><Ability key={i} a={a} team={team}/>)}
        </div>
        <div className="items">
          {p.its.map((it,i)=>(
            it ? <div className="it" key={i}><div className="ic" style={{background:window.RD.ITEM_CATS[it.cat],color:window.RD.ITEM_CATS[it.cat]}}></div></div>
               : <div className="it empty" key={i}></div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SoulIcon(){
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
      <path d="M6 1 C8 3 9 5 9 7 A3 3 0 0 1 3 7 C3 5 4 3 6 1 Z" fill="#cdbb7e"/>
    </svg>
  );
}

function TeamDivider({team, name, alive, total}){
  return (
    <div className={"team-div "+team}>
      <span className="bar"></span>
      <span className="nm">{name}</span>
      <span className="ln"></span>
      <span className="cnt">{alive}/{total} ALIVE</span>
    </div>
  );
}

function RightPanel({allies, enemies}){
  const aAlive = allies.filter(p=>p.alive).length;
  const eAlive = enemies.filter(p=>p.alive).length;
  return (
    <aside className="panel right">
      <div className="cards">
        <TeamDivider team="ally" name="THE SAPPHIRE FLAME" alive={aAlive} total={6}/>
        {allies.map(p=><PlayerCard key={p.id} p={p} team="ally"/>)}
        <TeamDivider team="enemy" name="THE AMBER HAND" alive={eAlive} total={6}/>
        {enemies.map(p=><PlayerCard key={p.id} p={p} team="enemy"/>)}
      </div>
    </aside>
  );
}

Object.assign(window, { Avatar, Ability, PlayerCard, RightPanel, TeamDivider, SoulIcon });