felt/static/util.js

const defaultTheme = [ "#000000cc", "#ccccccff", "#1f9b92ff", "#002b36ff", "#DC143Cff" ];

const saveData = {
  username: "",
  theme: defaultTheme,
}

function $(id) {
  return document.getElementById(id);
}

function setErr(x) {
  const errDiv = $("err_div");
  const errWrapper = $("err_wrapper");
  if (errDiv) {
    errDiv.innerHTML = x;
  }
  if (errWrapper) {
    errWrapper.style.display = "block";
  }
}

function closeErr() {
  const errWrapper = $("err_wrapper");
  if (errWrapper) {
    errWrapper.style.display = "none";
  }
}

function loadStorage() {
  saveData.username = localStorage.getItem("username");
  savedTheme =  JSON.parse(localStorage.getItem("theme"));
  saveData.theme = savedTheme || defaultTheme;
  const username = $("name_entry");
  if (username) {
    username.value = saveData.username;
  }
}

function saveName() {
  const username = $("name_entry");
  if (username) {
    saveData.username = username.value;
    localStorage.setItem("username", saveData.username);
  }
}

function setupDiceAutoScroll() {
  const diceWin = $("dice_win");
  
  if (diceWin) {
    diceWin.addEventListener("toggle", e => {
      if (diceWin.open) {
        const diceLog = $("dice_log");
        if (diceLog && diceLog.children.length > 0) {
          diceLog.children[diceLog.children.length - 1].scrollIntoView();
        }
      }
    });
  }
}

function hexToBytes(hex) {
  let bytes = [];
  for (let c = 0; c < hex.length; c += 2) {
    bytes.push(parseInt(hex.substr(c, 2), 16));
  }
  return bytes;
}

function toByte(v) {
  return ('0' + 
    Math.min(Math.max(parseInt(v), 0), 255).toString(16)
  ).slice(-2);
}

function resetTheme(theme) {
  try{
    let bg_col = theme[0];
    let fg_col = theme[1];
    let main_col = theme[2];
    let sub_col = theme[3];
    let err_col = theme[4];
  
    let fg_opacity = hexToBytes(fg_col.substr(7));
    fg_col = fg_col.substr(0,7);
    let bg_opacity = hexToBytes(bg_col.substr(7));
    bg_col = bg_col.substr(0,7);
    let main_opacity = hexToBytes(main_col.substr(7));
    main_col = main_col.substr(0,7);
    let sub_opacity = hexToBytes(sub_col.substr(7));
    sub_col = sub_col.substr(0,7);
    let err_opacity = hexToBytes(err_col.substr(7));
    err_col = err_col.substr(0,7);
  
    $("bg_col_input").value = bg_col;
    $("bg_col_opacity").value = bg_opacity;
    $("fg_col_input").value = fg_col;
    $("fg_col_opacity").value = fg_opacity;
    $("main_col_input").value = main_col;
    $("main_col_opacity").value = main_opacity;
    $("sub_col_input").value = sub_col;
    $("sub_col_opacity").value = sub_opacity;
    $("err_col_input").value = err_col;
    $("err_col_opacity").value = err_opacity;
  } catch {}
}

function setTheme() {
  try {
    let bg_col = $("bg_col_input").value
    let bg_opacity = toByte($("bg_col_opacity").value);
    let fg_col = $("fg_col_input").value;
    let fg_opacity = (toByte($("fg_col_opacity").value));
    let main_col = $("main_col_input").value;
    let main_opacity = (toByte($("main_col_opacity").value));
    let sub_col = $("sub_col_input").value;
    let sub_opacity = (toByte($("sub_col_opacity").value));
    let err_col = $("err_col_input").value;
    let err_opacity = (toByte($("err_col_opacity").value));
  
    saveData.theme[0] = bg_col + bg_opacity;
    saveData.theme[1] = fg_col + fg_opacity;
    saveData.theme[2] = main_col + main_opacity;
    saveData.theme[3] = sub_col + sub_opacity;
    saveData.theme[4] = err_col + err_opacity;
  
    localStorage.setItem("theme", JSON.stringify(saveData.theme));
  } catch {} finally {
    document.body.style.setProperty("--bg_color", saveData.theme[0]);
    document.body.style.setProperty("--fg_color", saveData.theme[1]);
    document.body.style.setProperty("--main_color", saveData.theme[2]);
    document.body.style.setProperty("--sub_color", saveData.theme[3]);
    document.body.style.setProperty("--err_color", saveData.theme[4]);
  }
}

setupDiceAutoScroll();
loadStorage();
resetTheme(saveData.theme);
setTheme();