feat(canvas): gate debug status overlay

This commit is contained in:
Peter Steinberger
2025-12-21 14:20:01 +01:00
parent db89be4106
commit 264c91e620
2 changed files with 70 additions and 13 deletions

View File

@@ -80,7 +80,7 @@
#clawdis-status { #clawdis-status {
position: fixed; position: fixed;
inset: 0; inset: 0;
display: grid; display: none;
place-items: center; place-items: center;
pointer-events: none; pointer-events: none;
z-index: 3; z-index: 3;
@@ -123,6 +123,18 @@
const statusEl = document.getElementById('clawdis-status'); const statusEl = document.getElementById('clawdis-status');
const titleEl = document.getElementById('clawdis-status-title'); const titleEl = document.getElementById('clawdis-status-title');
const subtitleEl = document.getElementById('clawdis-status-subtitle'); const subtitleEl = document.getElementById('clawdis-status-subtitle');
const debugStatusEnabledByQuery = (() => {
try {
const params = new URLSearchParams(window.location.search);
const raw = params.get('debugStatus') ?? params.get('debug');
if (!raw) return false;
const normalized = String(raw).trim().toLowerCase();
return normalized === '1' || normalized === 'true' || normalized === 'yes';
} catch (_) {
return false;
}
})();
let debugStatusEnabled = debugStatusEnabledByQuery;
function resize() { function resize() {
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
@@ -136,11 +148,24 @@
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
const setDebugStatusEnabled = (enabled) => {
debugStatusEnabled = !!enabled;
if (!statusEl) return;
if (!debugStatusEnabled) {
statusEl.style.display = 'none';
}
};
if (statusEl && !debugStatusEnabled) {
statusEl.style.display = 'none';
}
window.__clawdis = { window.__clawdis = {
canvas, canvas,
ctx, ctx,
setDebugStatusEnabled,
setStatus: (title, subtitle) => { setStatus: (title, subtitle) => {
if (!statusEl) return; if (!statusEl || !debugStatusEnabled) return;
if (!title && !subtitle) { if (!title && !subtitle) {
statusEl.style.display = 'none'; statusEl.style.display = 'none';
return; return;
@@ -148,11 +173,14 @@
statusEl.style.display = 'grid'; statusEl.style.display = 'grid';
if (titleEl && typeof title === 'string') titleEl.textContent = title; if (titleEl && typeof title === 'string') titleEl.textContent = title;
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle; if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
// Auto-hide after 3 seconds. if (!debugStatusEnabled) {
clearTimeout(window.__statusTimeout); clearTimeout(window.__statusTimeout);
window.__statusTimeout = setTimeout(() => { window.__statusTimeout = setTimeout(() => {
statusEl.style.display = 'none'; statusEl.style.display = 'none';
}, 3000); }, 3000);
} else {
clearTimeout(window.__statusTimeout);
}
} }
}; };
})(); })();

View File

@@ -82,7 +82,7 @@
#clawdis-status { #clawdis-status {
position: fixed; position: fixed;
inset: 0; inset: 0;
display: grid; display: none;
place-items: center; place-items: center;
pointer-events: none; pointer-events: none;
z-index: 3; z-index: 3;
@@ -139,6 +139,18 @@
const statusEl = document.getElementById('clawdis-status'); const statusEl = document.getElementById('clawdis-status');
const titleEl = document.getElementById('clawdis-status-title'); const titleEl = document.getElementById('clawdis-status-title');
const subtitleEl = document.getElementById('clawdis-status-subtitle'); const subtitleEl = document.getElementById('clawdis-status-subtitle');
const debugStatusEnabledByQuery = (() => {
try {
const params = new URLSearchParams(window.location.search);
const raw = params.get('debugStatus') ?? params.get('debug');
if (!raw) return false;
const normalized = String(raw).trim().toLowerCase();
return normalized === '1' || normalized === 'true' || normalized === 'yes';
} catch (_) {
return false;
}
})();
let debugStatusEnabled = debugStatusEnabledByQuery;
function resize() { function resize() {
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
@@ -152,11 +164,24 @@
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
const setDebugStatusEnabled = (enabled) => {
debugStatusEnabled = !!enabled;
if (!statusEl) return;
if (!debugStatusEnabled) {
statusEl.style.display = 'none';
}
};
if (statusEl && !debugStatusEnabled) {
statusEl.style.display = 'none';
}
window.__clawdis = { window.__clawdis = {
canvas, canvas,
ctx, ctx,
setDebugStatusEnabled,
setStatus: (title, subtitle) => { setStatus: (title, subtitle) => {
if (!statusEl) return; if (!statusEl || !debugStatusEnabled) return;
if (!title && !subtitle) { if (!title && !subtitle) {
statusEl.style.display = 'none'; statusEl.style.display = 'none';
return; return;
@@ -164,10 +189,14 @@
statusEl.style.display = 'grid'; statusEl.style.display = 'grid';
if (titleEl && typeof title === 'string') titleEl.textContent = title; if (titleEl && typeof title === 'string') titleEl.textContent = title;
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle; if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
clearTimeout(window.__statusTimeout); if (!debugStatusEnabled) {
window.__statusTimeout = setTimeout(() => { clearTimeout(window.__statusTimeout);
statusEl.style.display = 'none'; window.__statusTimeout = setTimeout(() => {
}, 3000); statusEl.style.display = 'none';
}, 3000);
} else {
clearTimeout(window.__statusTimeout);
}
} }
}; };
})(); })();