felt/static/util.js

const errDiv = document.getElementById("errDiv");
const errWrapper = document.getElementById("errWrapper");

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

const bgCol_input = document.getElementById("bg_col_input");
const fgCol_input = document.getElementById("fg_col_input");
const mainCol_input = document.getElementById("main_col_input");
const subCol_input = document.getElementById("sub_col_input");
const errCol_input = document.getElementById("err_col_input");

const bgOp_input = document.getElementById("bg_col_opacity");
const fgOp_input = document.getElementById("fg_col_opacity");
const mainOp_input = document.getElementById("main_col_opacity");
const subOp_input = document.getElementById("sub_col_opacity");
const errOp_input = document.getElementById("err_col_opacity");

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

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

function closeErr() {
  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 = document.getElementById("name_entry");
  if (username) {
    username.value = saveData.username;
  }
}

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

function setupDiceAutoScroll() {
  const diceWin = document.getElementById("dice_win");
  if (diceWin) {
    diceWin.addEventListener("toggle", e => {
      if (diceWin.open) {
        const diceLog = document.getElementById("dice_log");
        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);
  
    bgCol_input.value = bg_col;
    bgOp_input.value = bg_opacity;
    fgCol_input.value = fg_col;
    fgOp_input.value = fg_opacity;
    mainCol_input.value = main_col;
    mainOp_input.value = main_opacity;
    subCol_input.value = sub_col;
    subOp_input.value = sub_opacity;
    errCol_input.value = err_col;
    errOp_input.value = err_opacity;
  } catch {}
}

function setTheme() {
  try{
    let bg_col = bgCol_input.value;
    let bg_opacity = toByte(bgOp_input.value);
    let fg_col = fgCol_input.value;
    let fg_opacity =(toByte(fgOp_input.value));
    let main_col = mainCol_input.value;
    let main_opacity = (toByte(mainOp_input.value));
    let sub_col = subCol_input.value;
    let sub_opacity = (toByte(subOp_input.value));
    let err_col = errCol_input.value;
    let err_opacity = (toByte(errOp_input.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();