(function () {
function syrup() {
// CONFIG: ------------------------------
const SYRUP_DURATION = 300000; // 5 minutes
const DOES_SIGN_FLASH = false;
// END CONFIG ---------------------------
function addBtn() {
let panelToolbar = document.getElementById("switch");
let addPanelBtn = document.querySelector(".addwebpanel-wrapper");
let oldBtn = document.getElementById("pancake");
// check if already exists and elements are valid
if (oldBtn || !(panelToolbar && addPanelBtn)) return;
// create the button
var pancakeBtn = document.createElement("button");
pancakeBtn.title = "Syrup Level";
pancakeBtn.tabindex = "-1";
pancakeBtn.draggable = "true";
pancakeBtn.id = "pancake";
pancakeBtn.setAttribute("class", "panelbtn webviewbtn");
pancakeBtn.innerHTML = `
`;
panelToolbar.insertBefore(pancakeBtn, addPanelBtn);
pancakeBtn.addEventListener("click", toggleMeter);
}
function addMeter() {
let webContainer = document.getElementById("webview-container");
let oldMeter = document.getElementById("syrup-meter");
let oldSign = document.getElementById("syrup-sign");
// check if already exists and elements are valid
if (oldMeter || oldSign || !webContainer) return;
// create the sign
let sign = document.createElement("div");
sign.id = "syrup-sign";
sign.style = `
position: absolute;
left: 60px;
height: 20%;
z-index: 1;
display: none;
`;
sign.innerHTML = `
`;
webContainer.prepend(sign);
// create the meter
let meter = document.createElement("div");
meter.id = "syrup-meter";
meter.style = `
position: absolute;
left: 0;
height: 100%;
z-index: 1;
display: none;
`;
meter.innerHTML = `
`;
webContainer.prepend(meter);
}
function toggleMeter() {
let pancakeBtn = this;
let meter = document.getElementById("syrup-meter");
let sign = document.getElementById("syrup-sign");
if (pancakeBtn.classList.contains("active")) {
// change pancake button appearance
pancakeBtn.setAttribute("class", "panelbtn webviewbtn");
meter.style.display = "none";
sign.style.display = "none";
} else {
// change pancake button appearance
pancakeBtn.setAttribute("class", "panelbtn uifocusstop webviewbtn active");
meter.style.display = "unset";
sign.style.display = "unset";
}
}
// Never thought I would name a function like this...
function handleSyrupDrain() {
let syrup1 = document.getElementById("syrup-1");
let syrup2 = document.getElementById("syrup-2");
let panelSyrup = document.getElementById("panel-syrup");
let progress = document.getElementById("syrup-progress");
let refillBtn = document.getElementById("refill-button");
let intervalIDs = { fill: "", drain: "" };
let syrupTranslateLowestLevel = 191;
let syrupLevel = 1;
function drain() {
syrupLevel = syrupLevel - 0.001;
showSyrupDisplay(syrupLevel);
progress.style.transform = `scaleX(${syrupLevel})`;
// Couldn't move a group, so separate for each part
syrup1.setAttribute(
"transform",
`translate(0,${syrupTranslateLowestLevel - syrupTranslateLowestLevel * syrupLevel})`
);
syrup2.setAttribute(
"transform",
`translate(0,${syrupTranslateLowestLevel - syrupTranslateLowestLevel * syrupLevel})`
);
panelSyrup.setAttribute("opacity", syrupLevel + 0.2); // add 0.2 because opacity visibility decreases too much
if (syrupLevel <= 0) {
clearInterval(intervalIDs["drain"]);
}
}
function fill() {
syrupLevel = syrupLevel + 0.001;
showSyrupDisplay(syrupLevel);
progress.style.transform = `scaleX(${syrupLevel})`;
syrup1.setAttribute(
"transform",
`translate(0,${syrupTranslateLowestLevel - syrupTranslateLowestLevel * syrupLevel})`
);
syrup2.setAttribute(
"transform",
`translate(0,${syrupTranslateLowestLevel - syrupTranslateLowestLevel * syrupLevel})`
);
panelSyrup.setAttribute("opacity", syrupLevel + 0.2);
if (syrupLevel >= 1) {
clearInterval(intervalIDs["fill"]);
intervalIDs["drain"] = setInterval(drain, SYRUP_DURATION / 1000);
}
}
intervalIDs["drain"] = setInterval(drain, SYRUP_DURATION / 1000);
refillBtn.addEventListener("click", () => {
// stop lowering syrup level
clearInterval(intervalIDs["drain"]);
intervalIDs["fill"] = setInterval(fill, 5);
});
}
function showSyrupDisplay(syrupLevel) {
let full = document.getElementById("sign-full");
let low = document.getElementById("sign-low");
// convert to more usable range for mod math
syrupLevel = syrupLevel.toPrecision(3) * 1000;
if (syrupLevel > 910) {
full.setAttribute("opacity", "1");
} else if (DOES_SIGN_FLASH && syrupLevel >= 850) {
if (syrupLevel % 8 == 0) full.setAttribute("opacity", "0");
else full.setAttribute("opacity", "1");
} else if (DOES_SIGN_FLASH && syrupLevel >= 800) {
if (syrupLevel % 4 == 0) full.setAttribute("opacity", "0");
else full.setAttribute("opacity", "1");
} else if (syrupLevel >= 400) {
full.setAttribute("opacity", "0");
low.setAttribute("opacity", "0");
} else if (DOES_SIGN_FLASH && syrupLevel >= 300) {
if (syrupLevel % 8 == 0) low.setAttribute("opacity", "1");
else low.setAttribute("opacity", "0");
} else if (DOES_SIGN_FLASH && syrupLevel >= 200) {
if (syrupLevel % 8 == 0) low.setAttribute("opacity", "0");
else low.setAttribute("opacity", "1");
} else {
low.setAttribute("opacity", "1");
}
}
addBtn();
addMeter();
handleSyrupDrain();
}
let intervalID = setInterval(() => {
const browser = document.getElementById("browser");
if (browser) {
clearInterval(intervalID);
syrup();
}
}, 300);
})();