<div class="random-row-card" style=" max-width: 100%; min-height: 400px; margin: 32px auto; padding: 12px 24px; color: #111; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: column; "
> <table style=" width: 100%; border-collapse: collapse; vertical-align: top; margin-bottom: 4px; " > <tbody> <tr> <td style="padding: 0;"> <h2 class="rr-action" style="margin: 0;">...</h2> </td> <td align="right" style="padding: 6px 0; vertical-align: top;"> <span class="rr-number">...</span> </td> </tr> </tbody> </table> <p class="rr-description" style="margin: 0 0 24px 0;">...</p> <div style="margin-top: auto; display: flex; align-items: center; justify-content: flex-start;"> <a href="#" class="button-black button-translucent rr-reload" style="display: inline-block; text-decoration: none;" > Load another </a> <div class="rr-error" style="color: crimson; display: none; margin-left: 12px;" ></div> </div>
</div> <script> (function () { const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxaVFnxBmWWT6k5cU_yVjjo1pIfKfubxElgkY2I-qwHwN8ZSjr_MxW5LHo6wkpv-ra7Lg/exec"; const SHEET_NAME = "access_sheet"; const BUFFER_TARGET = 30; const BUFFER_MIN = 9; const root = document.currentScript.previousElementSibling; if (!root || !root.classList.contains("random-row-card")) return; const els = { number: root.querySelector(".rr-number"), action: root.querySelector(".rr-action"), description: root.querySelector(".rr-description"), button: root.querySelector(".rr-reload"), error: root.querySelector(".rr-error"), }; const buffer = []; let inFlight = 0; function showError(msg) { els.error.textContent = msg || "Unknown error"; els.error.style.display = "block"; } function clearError() { els.error.style.display = "none"; els.error.textContent = ""; } function renderItem(item) { els.number.textContent = item.number ?? ""; els.action.textContent = item.action ?? ""; els.description.textContent = item.description ?? ""; } function setBusy(isBusy) { els.button.setAttribute("aria-busy", isBusy ? "true" : "false"); els.button.style.pointerEvents = isBusy ? "none" : ""; } function jsonpFetchOnce() { return new Promise((resolve, reject) => { const cbName = "__rr_cb_" + Math.random().toString(36).slice(2); const url = new URL(WEB_APP_URL); url.searchParams.set("sheet", SHEET_NAME); url.searchParams.set("callback", cbName); url.searchParams.set("_ts", Date.now().toString()); const script = document.createElement("script"); window[cbName] = function (data) { cleanup(); if (!data) return reject(new Error("Empty response")); if (data.error) return reject(new Error(data.error)); resolve(data); }; function cleanup() { try { delete window[cbName]; } catch (e) {} if (script && script.parentNode) { script.parentNode.removeChild(script); } } script.src = url.toString(); script.onerror = function () { cleanup(); reject(new Error("JSONP load failed")); }; document.head.appendChild(script); }); } function topUpBuffer() { while (buffer.length + inFlight < BUFFER_TARGET) { inFlight += 1; jsonpFetchOnce() .then((item) => { buffer.push(item); }) .catch((err) => { showError(err && err.message ? err.message : "Load failed"); }) .finally(() => { inFlight -= 1; }); } } function nextFromCacheOrWait() { clearError(); if (buffer.length > 0) { const item = buffer.shift(); renderItem(item); if (buffer.length < BUFFER_MIN) { topUpBuffer(); } return; } setBusy(true); jsonpFetchOnce() .then((item) => { renderItem(item); }) .catch((err) => { showError(err && err.message ? err.message : "Load failed"); }) .finally(() => { setBusy(false); topUpBuffer(); }); } els.button.addEventListener("click", function (e) { e.preventDefault(); nextFromCacheOrWait(); }); setBusy(true); jsonpFetchOnce() .then((item) => { renderItem(item); }) .catch((err) => { showError(err && err.message ? err.message : "Load failed"); }) .finally(() => { setBusy(false); topUpBuffer(); }); })();
</script>
