planet/frontend/public/earth/js/ui.js

// ui.js - UI update functions

let statusTimeoutId = null;
let statusHideTimeoutId = null;
let statusReplayTimeoutId = null;

// Show status message
export function showStatusMessage(message, type = "info") {
  const statusEl = document.getElementById("status-message");
  if (!statusEl) return;

  if (statusTimeoutId) {
    clearTimeout(statusTimeoutId);
    statusTimeoutId = null;
  }

  if (statusHideTimeoutId) {
    clearTimeout(statusHideTimeoutId);
    statusHideTimeoutId = null;
  }

  if (statusReplayTimeoutId) {
    clearTimeout(statusReplayTimeoutId);
    statusReplayTimeoutId = null;
  }

  const startShow = () => {
    statusEl.textContent = message;
    statusEl.className = `status-message ${type}`;
    statusEl.style.display = "block";
    statusEl.offsetHeight;
    statusEl.classList.add("visible");

    statusTimeoutId = setTimeout(() => {
      statusEl.classList.remove("visible");
      statusHideTimeoutId = setTimeout(() => {
        statusEl.style.display = "none";
        statusEl.textContent = "";
        statusHideTimeoutId = null;
      }, 280);
      statusTimeoutId = null;
    }, 3000);
  };

  if (statusEl.classList.contains("visible")) {
    statusEl.classList.remove("visible");
    statusReplayTimeoutId = setTimeout(() => {
      startShow();
      statusReplayTimeoutId = null;
    }, 180);
    return;
  }

  startShow();
}

// 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");

  if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
  if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
  if (mouseCoordsEl) {
    mouseCoordsEl.textContent = `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
  }
}

// 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");

  if (zoomValueEl) zoomValueEl.textContent = percent + "%";
  if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
  if (slider) slider.value = zoomLevel;
  if (cameraDistanceEl) cameraDistanceEl.textContent = distance + " km";
}

// Update earth stats
export function updateEarthStats(stats) {
  const cableCountEl = document.getElementById("cable-count");
  const landingPointCountEl = document.getElementById("landing-point-count");
  const terrainStatusEl = document.getElementById("terrain-status");
  const textureQualityEl = document.getElementById("texture-quality");

  if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
  if (landingPointCountEl)
    landingPointCountEl.textContent = stats.landingPointCount || 0;
  if (terrainStatusEl)
    terrainStatusEl.textContent = stats.terrainOn ? "开启" : "关闭";
  if (textureQualityEl)
    textureQualityEl.textContent = stats.textureQuality || "8K 卫星图";
}

// Show/hide loading
export function setLoading(loading) {
  const loadingEl = document.getElementById("loading");
  if (!loadingEl) return;
  loadingEl.style.display = loading ? "block" : "none";
}

export function setLoadingMessage(title, subtitle = "") {
  const titleEl = document.getElementById("loading-title");
  const subtitleEl = document.getElementById("loading-subtitle");

  if (titleEl) {
    titleEl.textContent = title;
  }

  if (subtitleEl) {
    subtitleEl.textContent = subtitle;
  }
}

// Show tooltip
export function showTooltip(x, y, content) {
  const tooltip = document.getElementById("tooltip");
  if (!tooltip) return;
  tooltip.innerHTML = content;
  tooltip.style.left = x + "px";
  tooltip.style.top = y + "px";
  tooltip.style.display = "block";
}

// Hide tooltip
export function hideTooltip() {
  const tooltip = document.getElementById("tooltip");
  if (tooltip) {
    tooltip.style.display = "none";
  }
}

// Show error message
export function showError(message) {
  const errorEl = document.getElementById("error-message");
  if (!errorEl) return;
  errorEl.textContent = message;
  errorEl.style.display = "block";
}

// Hide error message
export function hideError() {
  const errorEl = document.getElementById("error-message");
  if (errorEl) {
    errorEl.style.display = "none";
    errorEl.textContent = "";
  }
}

export function clearUiState() {
  if (statusTimeoutId) {
    clearTimeout(statusTimeoutId);
    statusTimeoutId = null;
  }

  const statusEl = document.getElementById("status-message");
  if (statusEl) {
    statusEl.style.display = "none";
    statusEl.textContent = "";
  }

  hideTooltip();
  hideError();
}