monster/GODSIGH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: HUD hide/unhide tab + click-to-live chip

Browse Source 
The side panel covered Cesium's clock dial, so a scrubbed clock was easy
to get stuck in with no visible way back — live-only layers (aircraft,
AIS ships) then look broken. Two escape hatches: a collapse tab riding
the panel edge (docks top-left when hidden, revealing the dial), and the
LIVE/SCRUBBED chip is now a button that snaps the clock straight back to
now from anywhere.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
type-two 2026-07-30 12:31:00 +10:00
parent 59775718f3
commit 092fe5254a
4 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@ -86,6 +86,35 @@ html, body {
background: rgba(255, 207, 80, 0.1);
font-size: 9px;
}
/* The chip is a button now: click snaps the clock back to live. */
#live-chip { cursor: pointer; }
#live-chip[data-state="scrub"]:hover { background: rgba(255, 207, 80, 0.25); }
/* ---- HUD hide/unhide tab ---- */
#hud-toggle {
position: absolute;
top: 20px;
left: 306px; /* rides the panel's right edge */
z-index: 11;
width: 22px;
height: 30px;
padding: 0;
font: 11px ui-monospace, monospace;
color: var(--dim);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0 8px 8px 0;
border-left: none;
cursor: pointer;
transition: left 0.15s;
}
#hud-toggle:hover { color: var(--accent); }
body.hud-hidden #hud { display: none; }
body.hud-hidden #hud-toggle {
left: 14px;
border-radius: 8px;
border-left: 1px solid var(--border);
}
.modes {
display: flex;

3
index.html
View File

@ -32,6 +32,9 @@
</footer>
</aside>
<!-- HUD collapse tab: rides the panel's edge; when hidden it docks top-left. -->
<button id="hud-toggle" type="button" title="Hide panel">◀</button>
<div id="pick-overlay" hidden></div>
<script type="module" src="js/main.js"></script>

13
js/main.js
View File

@ -77,6 +77,19 @@ function setMode(mode) {
document.getElementById('mode-data').addEventListener('click', () => setMode('data'));
document.getElementById('mode-photo').addEventListener('click', () => setMode('photo'));
// ---- HUD hide/unhide + snap-to-live chip ----
const hudToggle = document.getElementById('hud-toggle');
hudToggle.addEventListener('click', () => {
const hidden = document.body.classList.toggle('hud-hidden');
hudToggle.textContent = hidden ? '▶' : '◀';
hudToggle.title = hidden ? 'Show panel' : 'Hide panel';
});
// Clicking LIVE/SCRUBBED snaps the clock back to now — the panel can cover the
// Cesium clock dial, so this is the always-visible escape hatch from scrub mode.
document.getElementById('live-chip').addEventListener('click', () => {
viewer.clock.currentTime = clampToWindow(Cesium.JulianDate.now());
});
// ---- portal to SOLARGOD (sibling orrery) ----
// Deep-links to the solar-system app at GODSIGH's current sim moment via its
// shared `#t=@<unixMs>` convention; the href is rebuilt fresh at click time.

2
js/ui.js
View File

@ -109,7 +109,7 @@ export function setLiveChip(isLive) {
const chip = document.getElementById('live-chip');
if (!chip) return;
chip.textContent = isLive ? 'LIVE' : 'SCRUBBED';
chip.title = isLive ? 'Clock is at wall-clock now' : 'Live layers paused — scrubbed off now';
chip.title = isLive ? 'Clock is at wall-clock now' : 'Scrubbed off now — click to snap back to live';
chip.dataset.state = isLive ? 'live' : 'scrub';
}