/* widget: Dobbelstenen */
/* =========================================================
   Dice widget
==========================================================*/
function mountDice(root, initState){
  let count = (initState && initState.count) || 2, rolling = false;
  const PIPS = {1:[4],2:[0,8],3:[0,4,8],4:[0,2,6,8],5:[0,2,4,6,8],6:[0,2,3,5,6,8]};
  root.innerHTML = `
    <div class="dc">
      <div class="mt-top" style="width:100%;">
        <div class="tseg dc-seg">
          <button data-n="1">1</button><button data-n="2">2</button><button data-n="3">3</button>
        </div>
        <div class="mt-score dc-sumlbl"></div>
      </div>
      <div class="dc-row"></div>
      <div class="dc-sum"></div>
      <button class="tbtn dc-roll"></button>
    </div>`;
  const row = root.querySelector(".dc-row"),
        sumEl = root.querySelector(".dc-sum"),
        rollBtn = root.querySelector(".dc-roll");
  function face(die, v){
    die.querySelectorAll("i").forEach((p,i)=>p.classList.toggle("on", PIPS[v].includes(i)));
    die.dataset.v = v;
  }
  function build(){
    row.innerHTML = "";
    for(let i=0;i<count;i++){
      const d = document.createElement("div");
      d.className = "die";
      for(let j=0;j<9;j++) d.appendChild(document.createElement("i"));
      face(d, 1+Math.floor(Math.random()*6));
      row.appendChild(d);
    }
    sumEl.textContent = "";
  }
  function roll(){
    if(rolling) return;
    rolling = true;
    sumEl.textContent = "";
    const dice = [...row.querySelectorAll(".die")];
    dice.forEach(d=>d.classList.add("rolling"));
    let n = 0;
    const iv = setInterval(()=>{
      dice.forEach(d=>face(d, 1+Math.floor(Math.random()*6)));
      tone(300+Math.random()*250, 0.04, 0, "square", 0.05);
      if(++n >= 9){
        clearInterval(iv);
        dice.forEach(d=>d.classList.remove("rolling"));
        const total = dice.reduce((s,d)=>s + +d.dataset.v, 0);
        if(count>1) sumEl.textContent = `${T("diceSum")}: ${total}`;
        rolling = false;
      }
    }, 90);
  }
  row.addEventListener("click", roll);
  rollBtn.addEventListener("click", roll);
  root.querySelectorAll(".dc-seg button").forEach(b=>{
    b.addEventListener("click", ()=>{
      count = +b.dataset.n;
      root.querySelectorAll(".dc-seg button").forEach(x=>x.classList.toggle("on", x===b));
      build();
    });
  });
  function labels(){
    rollBtn.textContent = T("diceRoll");
    root.querySelectorAll(".dc-seg button").forEach(x=>x.classList.toggle("on", +x.dataset.n===count));
  }
  document.addEventListener("langchange", labels);
  labels(); build();
  return { getState: ()=>({count}) };
}