fix: refine earth hud structure and bun startup flow
- refactor the /earth HUD into class-first CSS layers with dedicated base, hud, and toolbar responsibilities - clean up Earth markup and runtime DOM hooks so shared panel, toolbar, tooltip, and status classes stay consistent after dynamic updates - keep HUD scaling configurable through extracted constants and remove leftover legacy panel/toolbar styling paths - make planet.sh self-bootstrap Bun and uv by prepending local runtime bins to PATH and auto-installing missing tools in fresh environments - document Bun as the frontend package manager of record and sync repository version metadata to 0.24.1
This commit is contained in:
rayd1o
@@ -3,12 +3,18 @@
|
||||
let statusTimeoutId = null;
|
||||
let statusHideTimeoutId = null;
|
||||
let statusReplayTimeoutId = null;
|
||||
const STATUS_BASE_CLASS = "earth-status-message";
|
||||
|
||||
// Show status message
|
||||
export function showStatusMessage(message, type = "info") {
|
||||
const statusEl = document.getElementById("status-message");
|
||||
if (!statusEl) return;
|
||||
function getElement(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function setElementDisplay(element, visible, displayValue = "block") {
|
||||
if (!element) return;
|
||||
element.style.display = visible ? displayValue : "none";
|
||||
}
|
||||
|
||||
function clearStatusTimers() {
|
||||
if (statusTimeoutId) {
|
||||
clearTimeout(statusTimeoutId);
|
||||
statusTimeoutId = null;
|
||||
@@ -23,18 +29,26 @@ export function showStatusMessage(message, type = "info") {
|
||||
clearTimeout(statusReplayTimeoutId);
|
||||
statusReplayTimeoutId = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Show status message
|
||||
export function showStatusMessage(message, type = "info") {
|
||||
const statusEl = getElement("status-message");
|
||||
if (!statusEl) return;
|
||||
|
||||
clearStatusTimers();
|
||||
|
||||
const startShow = () => {
|
||||
statusEl.textContent = message;
|
||||
statusEl.className = `status-message ${type}`;
|
||||
statusEl.style.display = "block";
|
||||
statusEl.className = `${STATUS_BASE_CLASS} ${type}`;
|
||||
setElementDisplay(statusEl, true);
|
||||
statusEl.offsetHeight;
|
||||
statusEl.classList.add("visible");
|
||||
|
||||
statusTimeoutId = setTimeout(() => {
|
||||
statusEl.classList.remove("visible");
|
||||
statusHideTimeoutId = setTimeout(() => {
|
||||
statusEl.style.display = "none";
|
||||
setElementDisplay(statusEl, false);
|
||||
statusEl.textContent = "";
|
||||
statusHideTimeoutId = null;
|
||||
}, 280);
|
||||
@@ -56,9 +70,9 @@ export function showStatusMessage(message, type = "info") {
|
||||
|
||||
// Update coordinates display
|
||||
export function updateCoordinatesDisplay(lat, lon, alt = 0) {
|
||||
const longitudeEl = document.getElementById("longitude-value");
|
||||
const latitudeEl = document.getElementById("latitude-value");
|
||||
const mouseCoordsEl = document.getElementById("mouse-coords");
|
||||
const longitudeEl = getElement("longitude-value");
|
||||
const latitudeEl = getElement("latitude-value");
|
||||
const mouseCoordsEl = getElement("mouse-coords");
|
||||
|
||||
if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
|
||||
if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
|
||||
@@ -70,10 +84,10 @@ export function updateCoordinatesDisplay(lat, lon, alt = 0) {
|
||||
// Update zoom display
|
||||
export function updateZoomDisplay(zoomLevel, distance) {
|
||||
const percent = Math.round(zoomLevel * 100);
|
||||
const zoomValueEl = document.getElementById("zoom-value");
|
||||
const zoomLevelEl = document.getElementById("zoom-level");
|
||||
const slider = document.getElementById("zoom-slider");
|
||||
const cameraDistanceEl = document.getElementById("camera-distance");
|
||||
const zoomValueEl = getElement("zoom-value");
|
||||
const zoomLevelEl = getElement("zoom-level");
|
||||
const slider = getElement("zoom-slider");
|
||||
const cameraDistanceEl = getElement("camera-distance");
|
||||
|
||||
if (zoomValueEl) zoomValueEl.textContent = percent + "%";
|
||||
if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
|
||||
@@ -83,13 +97,13 @@ export function updateZoomDisplay(zoomLevel, distance) {
|
||||
|
||||
// Update earth stats
|
||||
export function updateEarthStats(stats) {
|
||||
const cableCountEl = document.getElementById("cable-count");
|
||||
const landingPointCountEl = document.getElementById("landing-point-count");
|
||||
const bgpAnomalyCountEl = document.getElementById("bgp-anomaly-count");
|
||||
const bgpCollectorCountEl = document.getElementById("bgp-collector-count");
|
||||
const bgpStatusSummaryEl = document.getElementById("bgp-status-summary");
|
||||
const terrainStatusEl = document.getElementById("terrain-status");
|
||||
const textureQualityEl = document.getElementById("texture-quality");
|
||||
const cableCountEl = getElement("cable-count");
|
||||
const landingPointCountEl = getElement("landing-point-count");
|
||||
const bgpAnomalyCountEl = getElement("bgp-anomaly-count");
|
||||
const bgpCollectorCountEl = getElement("bgp-collector-count");
|
||||
const bgpStatusSummaryEl = getElement("bgp-status-summary");
|
||||
const terrainStatusEl = getElement("terrain-status");
|
||||
const textureQualityEl = getElement("texture-quality");
|
||||
|
||||
if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
|
||||
if (landingPointCountEl)
|
||||
@@ -108,14 +122,14 @@ export function updateEarthStats(stats) {
|
||||
|
||||
// Show/hide loading
|
||||
export function setLoading(loading) {
|
||||
const loadingEl = document.getElementById("loading");
|
||||
const loadingEl = getElement("loading");
|
||||
if (!loadingEl) return;
|
||||
loadingEl.style.display = loading ? "block" : "none";
|
||||
setElementDisplay(loadingEl, loading);
|
||||
}
|
||||
|
||||
export function setLoadingMessage(title, subtitle = "") {
|
||||
const titleEl = document.getElementById("loading-title");
|
||||
const subtitleEl = document.getElementById("loading-subtitle");
|
||||
const titleEl = getElement("loading-title");
|
||||
const subtitleEl = getElement("loading-subtitle");
|
||||
|
||||
if (titleEl) {
|
||||
titleEl.textContent = title;
|
||||
@@ -128,48 +142,46 @@ export function setLoadingMessage(title, subtitle = "") {
|
||||
|
||||
// Show tooltip
|
||||
export function showTooltip(x, y, content) {
|
||||
const tooltip = document.getElementById("tooltip");
|
||||
const tooltip = getElement("tooltip");
|
||||
if (!tooltip) return;
|
||||
tooltip.innerHTML = content;
|
||||
tooltip.style.left = x + "px";
|
||||
tooltip.style.top = y + "px";
|
||||
tooltip.style.display = "block";
|
||||
setElementDisplay(tooltip, true);
|
||||
}
|
||||
|
||||
// Hide tooltip
|
||||
export function hideTooltip() {
|
||||
const tooltip = document.getElementById("tooltip");
|
||||
const tooltip = getElement("tooltip");
|
||||
if (tooltip) {
|
||||
tooltip.style.display = "none";
|
||||
setElementDisplay(tooltip, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
export function showError(message) {
|
||||
const errorEl = document.getElementById("error-message");
|
||||
const errorEl = getElement("error-message");
|
||||
if (!errorEl) return;
|
||||
errorEl.textContent = message;
|
||||
errorEl.style.display = "block";
|
||||
setElementDisplay(errorEl, true);
|
||||
}
|
||||
|
||||
// Hide error message
|
||||
export function hideError() {
|
||||
const errorEl = document.getElementById("error-message");
|
||||
const errorEl = getElement("error-message");
|
||||
if (errorEl) {
|
||||
errorEl.style.display = "none";
|
||||
setElementDisplay(errorEl, false);
|
||||
errorEl.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
export function clearUiState() {
|
||||
if (statusTimeoutId) {
|
||||
clearTimeout(statusTimeoutId);
|
||||
statusTimeoutId = null;
|
||||
}
|
||||
clearStatusTimers();
|
||||
|
||||
const statusEl = document.getElementById("status-message");
|
||||
const statusEl = getElement("status-message");
|
||||
if (statusEl) {
|
||||
statusEl.style.display = "none";
|
||||
statusEl.className = STATUS_BASE_CLASS;
|
||||
setElementDisplay(statusEl, false);
|
||||
statusEl.textContent = "";
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user