mini-prog/tools/mock-gps-sim/public/simulator.js

(function () {
  const DEFAULT_CENTER = [31.2304, 121.4737]
  const DEFAULT_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/wxmini/test/game.json'
  const DEFAULT_TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  const PROXY_BASE_URL = `${location.origin}/proxy?url=`
  const WS_URL = `ws://${location.hostname}:17865/mock-gps`

  const map = L.map('map').setView(DEFAULT_CENTER, 16)
  let tileLayer = createTileLayer(DEFAULT_TILE_URL, {
    maxZoom: 20,
    attribution: '© OpenStreetMap',
  }).addTo(map)

  const liveMarker = L.circleMarker(DEFAULT_CENTER, {
    radius: 11,
    color: '#ffffff',
    weight: 3,
    fillColor: '#ff2f92',
    fillOpacity: 0.94,
  }).addTo(map)

  const pathLine = L.polyline([], {
    color: '#0ea5a4',
    weight: 4,
    opacity: 0.9,
  }).addTo(map)

  const courseLayer = L.layerGroup().addTo(map)
  const pathMarkers = []
  const pathPoints = []
  const state = {
    socket: null,
    connected: false,
    socketConnecting: false,
    streaming: false,
    pathEditMode: false,
    playbackRunning: false,
    playbackTimer: 0,
    streamTimer: 0,
    lastSentText: '--',
    lastResourceDetailText: '尚未载入资源',
    lastTrackSourceText: '路径待命',
    currentLatLng: L.latLng(DEFAULT_CENTER[0], DEFAULT_CENTER[1]),
    headingDeg: 0,
    currentSegmentIndex: 0,
    currentSegmentProgress: 0,
    lastPlaybackAt: 0,
    loadedCourse: null,
    resourceLoading: false,
  }

  const elements = {
    socketStatus: document.getElementById('socketStatus'),
    configUrlInput: document.getElementById('configUrlInput'),
    loadConfigBtn: document.getElementById('loadConfigBtn'),
    fitCourseBtn: document.getElementById('fitCourseBtn'),
    tileUrlInput: document.getElementById('tileUrlInput'),
    applyTilesBtn: document.getElementById('applyTilesBtn'),
    resetTilesBtn: document.getElementById('resetTilesBtn'),
    courseUrlInput: document.getElementById('courseUrlInput'),
    loadCourseBtn: document.getElementById('loadCourseBtn'),
    clearCourseBtn: document.getElementById('clearCourseBtn'),
    resourceStatus: document.getElementById('resourceStatus'),
    resourceDetail: document.getElementById('resourceDetail'),
    courseJumpList: document.getElementById('courseJumpList'),
    realtimeStatus: document.getElementById('realtimeStatus'),
    lastSendStatus: document.getElementById('lastSendStatus'),
    playbackStatus: document.getElementById('playbackStatus'),
    trackFileInput: document.getElementById('trackFileInput'),
    importTrackBtn: document.getElementById('importTrackBtn'),
    connectBtn: document.getElementById('connectBtn'),
    sendOnceBtn: document.getElementById('sendOnceBtn'),
    streamBtn: document.getElementById('streamBtn'),
    stopStreamBtn: document.getElementById('stopStreamBtn'),
    togglePathModeBtn: document.getElementById('togglePathModeBtn'),
    clearPathBtn: document.getElementById('clearPathBtn'),
    fitPathBtn: document.getElementById('fitPathBtn'),
    playPathBtn: document.getElementById('playPathBtn'),
    pausePathBtn: document.getElementById('pausePathBtn'),
    hzSelect: document.getElementById('hzSelect'),
    accuracyInput: document.getElementById('accuracyInput'),
    speedInput: document.getElementById('speedInput'),
    loopPathInput: document.getElementById('loopPathInput'),
    pathHint: document.getElementById('pathHint'),
    latText: document.getElementById('latText'),
    lonText: document.getElementById('lonText'),
    headingText: document.getElementById('headingText'),
    pathCountText: document.getElementById('pathCountText'),
    log: document.getElementById('log'),
  }

  elements.configUrlInput.value = DEFAULT_CONFIG_URL

  function createTileLayer(urlTemplate, extraOptions) {
    return L.tileLayer(urlTemplate, Object.assign({
      maxZoom: 20,
      attribution: 'Custom Map',
    }, extraOptions || {}))
  }

  function log(message) {
    const time = new Date().toLocaleTimeString()
    elements.log.textContent = `[${time}] ${message}\n` + elements.log.textContent
  }

  function setResourceStatus(message, tone) {
    elements.resourceStatus.textContent = message
    elements.resourceStatus.className = 'hint'
    if (tone === 'ok') {
      elements.resourceStatus.classList.add('hint--ok')
    } else if (tone === 'warn') {
      elements.resourceStatus.classList.add('hint--warn')
    }
  }

  function updateReadout() {
    elements.latText.textContent = state.currentLatLng.lat.toFixed(6)
    elements.lonText.textContent = state.currentLatLng.lng.toFixed(6)
    elements.headingText.textContent = `${Math.round(state.headingDeg)}°`
    elements.pathCountText.textContent = String(pathPoints.length)
    liveMarker.setLatLng(state.currentLatLng)
  }

  function setSocketBadge(connected) {
    elements.socketStatus.textContent = connected ? '已连接' : '未连接'
    elements.socketStatus.className = connected ? 'badge badge--ok' : 'badge badge--muted'
  }

  function formatClockTime(timestamp) {
    if (!timestamp) {
      return '--'
    }

    return new Date(timestamp).toLocaleTimeString()
  }

  function updateUiState() {
    elements.connectBtn.textContent = state.connected ? '桥接已连接' : state.socketConnecting ? '连接中...' : '连接桥接'
    elements.connectBtn.classList.toggle('is-active', state.connected)
    elements.connectBtn.disabled = state.connected || state.socketConnecting

    elements.sendOnceBtn.disabled = !state.connected
    elements.streamBtn.textContent = state.streaming ? '发送中' : '开始连续发送'
    elements.streamBtn.classList.toggle('is-active', state.streaming)
    elements.streamBtn.disabled = !state.connected || state.streaming
    elements.stopStreamBtn.disabled = !state.streaming

    elements.togglePathModeBtn.textContent = state.pathEditMode ? '关闭路径编辑' : '开启路径编辑'
    elements.togglePathModeBtn.classList.toggle('is-active', state.pathEditMode)
    elements.importTrackBtn.disabled = state.resourceLoading
    elements.clearPathBtn.textContent = pathPoints.length ? `清空路径 (${pathPoints.length})` : '清空路径'
    elements.clearPathBtn.disabled = pathPoints.length === 0
    elements.fitPathBtn.disabled = pathPoints.length < 2

    elements.playPathBtn.textContent = state.playbackRunning ? '回放中' : '开始回放'
    elements.playPathBtn.classList.toggle('is-active', state.playbackRunning)
    elements.playPathBtn.disabled = pathPoints.length < 2 || state.playbackRunning
    elements.pausePathBtn.disabled = !state.playbackRunning

    elements.fitCourseBtn.disabled = !state.loadedCourse
    elements.clearCourseBtn.disabled = !state.loadedCourse
    elements.loadConfigBtn.textContent = state.resourceLoading ? '载入中...' : '载入配置'
    elements.loadConfigBtn.disabled = state.resourceLoading
    elements.loadCourseBtn.textContent = state.resourceLoading ? '载入中...' : '载入控制点'
    elements.loadCourseBtn.disabled = state.resourceLoading
    elements.applyTilesBtn.disabled = state.resourceLoading
    elements.resetTilesBtn.disabled = state.resourceLoading
    elements.lastSendStatus.textContent = `最近发送: ${state.lastSentText}`
    elements.resourceDetail.textContent = state.lastResourceDetailText

    if (state.connected && state.streaming) {
      elements.realtimeStatus.textContent = `桥接已连接，正在以 ${elements.hzSelect.value} Hz 连续发送`
    } else if (state.connected) {
      elements.realtimeStatus.textContent = '桥接已连接，待命中'
    } else if (state.socketConnecting) {
      elements.realtimeStatus.textContent = '桥接连接中'
    } else {
      elements.realtimeStatus.textContent = '桥接未连接'
    }

    if (state.playbackRunning) {
      elements.playbackStatus.textContent = `路径回放中，速度 ${elements.speedInput.value} km/h`
    } else if (state.pathEditMode) {
      elements.playbackStatus.textContent = '路径编辑中，点击地图追加路径点'
    } else if (pathPoints.length >= 2) {
      elements.playbackStatus.textContent = `${state.lastTrackSourceText}，共 ${pathPoints.length} 个路径点`
    } else {
      elements.playbackStatus.textContent = '路径待命'
    }
  }

  function connectSocket() {
    if (state.socket && (state.socket.readyState === WebSocket.OPEN || state.socket.readyState === WebSocket.CONNECTING)) {
      return
    }

    const socket = new WebSocket(WS_URL)
    state.socket = socket
    state.socketConnecting = true
    setSocketBadge(false)
    updateUiState()
    log(`连接 ${WS_URL}`)

    socket.addEventListener('open', () => {
      state.connected = true
      state.socketConnecting = false
      setSocketBadge(true)
      updateUiState()
      log('桥接已连接')
    })

    socket.addEventListener('close', () => {
      state.connected = false
      state.socketConnecting = false
      setSocketBadge(false)
      updateUiState()
      log('桥接已断开')
    })

    socket.addEventListener('error', () => {
      state.connected = false
      state.socketConnecting = false
      setSocketBadge(false)
      updateUiState()
      log('桥接连接失败')
    })
  }

  function proxyUrl(targetUrl) {
    return `${PROXY_BASE_URL}${encodeURIComponent(targetUrl)}`
  }

  async function fetchJson(targetUrl) {
    const response = await fetch(proxyUrl(targetUrl), { cache: 'no-store' })
    if (!response.ok) {
      throw new Error(`载入失败: ${response.status} ${targetUrl}`)
    }

    const text = await response.text()
    return parseJsonWithFallback(text)
  }

  async function fetchText(targetUrl) {
    const response = await fetch(proxyUrl(targetUrl), { cache: 'no-store' })
    if (!response.ok) {
      throw new Error(`载入失败: ${response.status} ${targetUrl}`)
    }
    return response.text()
  }

  function parseJsonWithFallback(text) {
    try {
      return JSON.parse(text)
    } catch (_error) {
      const sanitized = text
        .replace(/,\s*"center"\s*:\s*\[[^\]]*\]\s*(?=[}\r\n])/g, '')
        .replace(/"center"\s*:\s*\[[^\]]*\]\s*,/g, '')
        .replace(/,\s*([}\]])/g, '$1')
      return JSON.parse(sanitized)
    }
  }

  function resolveUrl(baseUrl, relativePath) {
    const trimmed = String(relativePath || '').trim()
    if (!trimmed) {
      return ''
    }

    if (/^https?:\/\//i.test(trimmed)) {
      return trimmed
    }

    const url = new URL(baseUrl)
    if (trimmed.startsWith('/')) {
      return `${url.origin}${trimmed}`
    }

    const baseDir = baseUrl.slice(0, baseUrl.lastIndexOf('/') + 1)
    return `${baseDir}${trimmed.replace(/^\.\//, '')}`
  }

  function joinUrl(rootUrl, relativePath) {
    const normalizedRoot = String(rootUrl || '').replace(/\/+$/, '')
    const normalizedPath = String(relativePath || '').replace(/^\/+/, '')
    return `${normalizedRoot}/${normalizedPath}`
  }

  function webMercatorToLatLng(x, y) {
    const lon = x / 20037508.34 * 180
    let lat = y / 20037508.34 * 180
    lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2)
    return L.latLng(lat, lon)
  }

  function applyTileTemplate(tileUrl, options) {
    const trimmed = String(tileUrl || '').trim()
    if (!trimmed) {
      throw new Error('瓦片模板不能为空')
    }

    if (tileLayer) {
      map.removeLayer(tileLayer)
    }

    tileLayer = createTileLayer(trimmed, options || {}).addTo(map)
    elements.tileUrlInput.value = trimmed
  }

  function fitBoundsFromMercator(bounds) {
    if (!Array.isArray(bounds) || bounds.length !== 4) {
      return
    }

    const southWest = webMercatorToLatLng(Number(bounds[0]), Number(bounds[1]))
    const northEast = webMercatorToLatLng(Number(bounds[2]), Number(bounds[3]))
    map.fitBounds(L.latLngBounds(southWest, northEast), { padding: [24, 24] })
  }

  function parseCoordinateTuple(rawValue) {
    const parts = rawValue.trim().split(',')
    if (parts.length < 2) {
      return null
    }

    const lon = Number(parts[0])
    const lat = Number(parts[1])
    if (!Number.isFinite(lon) || !Number.isFinite(lat)) {
      return null
    }

    return { lat, lon }
  }

  function extractPointCoordinates(block) {
    const pointMatch = block.match(/<Point\b[\s\S]*?<coordinates>([\s\S]*?)<\/coordinates>[\s\S]*?<\/Point>/i)
    if (!pointMatch) {
      return null
    }

    const coordinateMatch = pointMatch[1].trim().match(/-?\d+(?:\.\d+)?,-?\d+(?:\.\d+)?(?:,-?\d+(?:\.\d+)?)?/)
    return coordinateMatch ? parseCoordinateTuple(coordinateMatch[0]) : null
  }

  function decodeXmlEntities(text) {
    return text
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&quot;/g, '"')
      .replace(/&#39;/g, "'")
      .replace(/&apos;/g, "'")
      .replace(/&amp;/g, '&')
  }

  function stripXml(text) {
    return decodeXmlEntities(String(text || '').replace(/<[^>]+>/g, ' ')).replace(/\s+/g, ' ').trim()
  }

  function extractTagText(block, tagName) {
    const match = block.match(new RegExp(`<${tagName}\\b[^>]*>([\\s\\S]*?)<\\/${tagName}>`, 'i'))
    return match ? stripXml(match[1]) : ''
  }

  function normalizeCourseLabel(label) {
    return String(label || '').trim().replace(/\s+/g, ' ')
  }

  function inferExplicitKind(label, placemarkBlock) {
    const normalized = normalizeCourseLabel(label).toUpperCase().replace(/[^A-Z0-9]/g, '')
    const styleHint = String(placemarkBlock || '').toUpperCase()

    if (
      normalized === 'S'
      || normalized.startsWith('START')
      || /^S\d+$/.test(normalized)
      || styleHint.includes('START')
      || styleHint.includes('TRIANGLE')
    ) {
      return 'start'
    }

    if (
      normalized === 'F'
      || normalized === 'M'
      || normalized.startsWith('FINISH')
      || normalized.startsWith('GOAL')
      || /^F\d+$/.test(normalized)
      || styleHint.includes('FINISH')
      || styleHint.includes('GOAL')
    ) {
      return 'finish'
    }

    return null
  }

  function extractPlacemarkPoints(kmlText) {
    const placemarkBlocks = kmlText.match(/<Placemark\b[\s\S]*?<\/Placemark>/gi) || []
    const points = []

    placemarkBlocks.forEach((placemarkBlock) => {
      const point = extractPointCoordinates(placemarkBlock)
      if (!point) {
        return
      }

      const label = normalizeCourseLabel(extractTagText(placemarkBlock, 'name'))
      points.push({
        label,
        point,
        explicitKind: inferExplicitKind(label, placemarkBlock),
      })
    })

    return points
  }

  function classifyOrderedNodes(points) {
    if (!points.length) {
      return []
    }

    const startIndex = points.findIndex((point) => point.explicitKind === 'start')
    let finishIndex = -1
    for (let index = points.length - 1; index >= 0; index -= 1) {
      if (points[index].explicitKind === 'finish') {
        finishIndex = index
        break
      }
    }

    return points.map((point, index) => {
      let kind = point.explicitKind
      if (!kind) {
        if (startIndex === -1 && index === 0) {
          kind = 'start'
        } else if (finishIndex === -1 && points.length > 1 && index === points.length - 1) {
          kind = 'finish'
        } else {
          kind = 'control'
        }
      }

      return {
        label: point.label,
        point: point.point,
        kind,
      }
    })
  }

  function parseCourseKml(kmlText) {
    const points = extractPlacemarkPoints(kmlText)
    if (!points.length) {
      throw new Error('KML 中没有可用的 Point 控制点')
    }

    const nodes = classifyOrderedNodes(points)
    const starts = []
    const controls = []
    const finishes = []
    let controlSequence = 1

    nodes.forEach((node) => {
      if (node.kind === 'start') {
        starts.push({
          label: node.label || 'Start',
          point: node.point,
        })
        return
      }

      if (node.kind === 'finish') {
        finishes.push({
          label: node.label || 'Finish',
          point: node.point,
        })
        return
      }

      controls.push({
        label: node.label || String(controlSequence),
        sequence: controlSequence,
        point: node.point,
      })
      controlSequence += 1
    })

    return {
      title: extractTagText(kmlText, 'name') || 'Orienteering Course',
      starts,
      controls,
      finishes,
    }
  }

  function buildDivIcon(className, html, size) {
    return L.divIcon({
      className,
      html,
      iconSize: size,
      iconAnchor: [size[0] / 2, size[1] / 2],
    })
  }

  function setCurrentPosition(lat, lon) {
    state.currentLatLng = L.latLng(lat, lon)
    updateReadout()
  }

  function jumpToPoint(lat, lon, zoom) {
    setCurrentPosition(lat, lon)
    map.flyTo([lat, lon], zoom || Math.max(map.getZoom(), 18), {
      duration: 0.6,
    })
  }

  function buildJumpChip(label, point, className) {
    const button = document.createElement('button')
    button.type = 'button'
    button.className = `jump-chip ${className || ''}`.trim()
    button.textContent = label
    button.addEventListener('click', () => {
      jumpToPoint(point.lat, point.lon, 19)
      log(`跳转到 ${label}`)
    })
    return button
  }

  function refreshCourseJumpList(course) {
    elements.courseJumpList.innerHTML = ''
    if (!course) {
      return
    }

    course.starts.forEach((item) => {
      elements.courseJumpList.appendChild(buildJumpChip('开始点', item.point, 'jump-chip--start'))
    })
    course.controls.forEach((item) => {
      elements.courseJumpList.appendChild(buildJumpChip(String(item.sequence), item.point, ''))
    })
    course.finishes.forEach((item) => {
      elements.courseJumpList.appendChild(buildJumpChip('结束点', item.point, 'jump-chip--finish'))
    })
  }

  function renderCourse(course) {
    courseLayer.clearLayers()
    state.loadedCourse = course
    refreshCourseJumpList(course)

    course.starts.forEach((item) => {
      const marker = L.marker([item.point.lat, item.point.lon], {
        icon: buildDivIcon('course-marker', '<div class="course-marker__start"></div>', [36, 36]),
      })
      marker.on('click', () => jumpToPoint(item.point.lat, item.point.lon, 19))
      marker.addTo(courseLayer)
    })

    course.controls.forEach((item) => {
      const marker = L.marker([item.point.lat, item.point.lon], {
        icon: buildDivIcon(
          'course-marker',
          `<div class="course-marker__control">${item.sequence}</div>`,
          [40, 40],
        ),
      })
      marker.on('click', () => jumpToPoint(item.point.lat, item.point.lon, 19))
      marker.addTo(courseLayer)
    })

    course.finishes.forEach((item) => {
      const marker = L.marker([item.point.lat, item.point.lon], {
        icon: buildDivIcon('course-marker', '<div class="course-marker__finish"></div>', [40, 40]),
      })
      marker.on('click', () => jumpToPoint(item.point.lat, item.point.lon, 19))
      marker.addTo(courseLayer)
    })

    fitCourseBounds()
    updateUiState()
  }

  function clearCourse() {
    state.loadedCourse = null
    courseLayer.clearLayers()
    refreshCourseJumpList(null)
    setResourceStatus('已清空控制点', 'warn')
    state.lastResourceDetailText = '已清空控制点'
    updateUiState()
  }

  function fitCourseBounds() {
    if (!state.loadedCourse) {
      return
    }

    const latLngs = []
    state.loadedCourse.starts.forEach((item) => latLngs.push([item.point.lat, item.point.lon]))
    state.loadedCourse.controls.forEach((item) => latLngs.push([item.point.lat, item.point.lon]))
    state.loadedCourse.finishes.forEach((item) => latLngs.push([item.point.lat, item.point.lon]))
    if (!latLngs.length) {
      return
    }

    map.fitBounds(L.latLngBounds(latLngs), { padding: [30, 30] })
  }

  async function loadCourseFromUrl(courseUrl, shouldFit) {
    const trimmed = String(courseUrl || '').trim()
    if (!trimmed) {
      throw new Error('KML 地址不能为空')
    }

    const kmlText = await fetchText(trimmed)
    const course = parseCourseKml(kmlText)
    renderCourse(course)
    elements.courseUrlInput.value = trimmed
    if (shouldFit !== false) {
      fitCourseBounds()
    }
    setResourceStatus(`已载入控制点: ${course.title}`, 'ok')
    state.lastResourceDetailText = `最近资源: 控制点 ${course.title} (${formatClockTime(Date.now())})`
    log(`已载入 KML: ${trimmed}`)
    updateUiState()
  }

  async function loadConfigResources() {
    const configUrl = String(elements.configUrlInput.value || '').trim()
    if (!configUrl) {
      setResourceStatus('请先填写 game.json 地址', 'warn')
      return
    }

    state.resourceLoading = true
    updateUiState()
    setResourceStatus('正在载入配置...', null)
    try {
      const config = await fetchJson(configUrl)
      let mapStatus = '未找到瓦片配置'
      if (config.map && config.mapmeta) {
        const mapRootUrl = resolveUrl(configUrl, config.map)
        const mapMetaUrl = resolveUrl(configUrl, config.mapmeta)
        const mapMeta = await fetchJson(mapMetaUrl)
        const tilePathTemplate = mapMeta.tilePathTemplate || `{z}/{x}/{y}.${mapMeta.tileFormat || 'png'}`
        const tileTemplateUrl = /^https?:\/\//i.test(tilePathTemplate)
          ? tilePathTemplate
          : joinUrl(mapRootUrl, tilePathTemplate)
        applyTileTemplate(tileTemplateUrl, {
          minZoom: Number.isFinite(mapMeta.minZoom) ? mapMeta.minZoom : 16,
          maxZoom: Number.isFinite(mapMeta.maxZoom) ? mapMeta.maxZoom : 20,
          attribution: 'Custom Map',
        })
        mapStatus = '已载入瓦片'
        if (Array.isArray(mapMeta.bounds) && mapMeta.bounds.length === 4) {
          fitBoundsFromMercator(mapMeta.bounds)
        }
      }

      let courseStatus = '未找到 KML 配置'
      if (config.course) {
        const courseUrl = resolveUrl(configUrl, config.course)
        elements.courseUrlInput.value = courseUrl
        await loadCourseFromUrl(courseUrl, false)
        courseStatus = '已载入控制点'
      }

      setResourceStatus(`配置已载入: ${mapStatus} / ${courseStatus}`, 'ok')
      state.lastResourceDetailText = `最近资源: 配置 ${formatClockTime(Date.now())}`
      log(`已载入配置: ${configUrl}`)
    } catch (error) {
      const message = error && error.message ? error.message : '未知错误'
      setResourceStatus(`配置载入失败: ${message}`, 'warn')
      log(`配置载入失败: ${message}`)
    } finally {
      state.resourceLoading = false
      updateUiState()
    }
  }

  function getAccuracy() {
    return Math.max(1, Number(elements.accuracyInput.value) || 6)
  }

  function getSpeedMps() {
    return Math.max(0.2, (Number(elements.speedInput.value) || 6) / 3.6)
  }

  function sendCurrentPoint() {
    if (!state.socket || state.socket.readyState !== WebSocket.OPEN) {
      log('未连接桥接，无法发送')
      return
    }

    const payload = {
      type: 'mock_gps',
      timestamp: Date.now(),
      lat: Number(state.currentLatLng.lat.toFixed(6)),
      lon: Number(state.currentLatLng.lng.toFixed(6)),
      accuracyMeters: getAccuracy(),
      speedMps: Number(getSpeedMps().toFixed(2)),
      headingDeg: Number(state.headingDeg.toFixed(1)),
    }
    state.socket.send(JSON.stringify(payload))
    state.lastSentText = `${formatClockTime(payload.timestamp)} @ ${payload.lat.toFixed(6)}, ${payload.lon.toFixed(6)}`
    updateUiState()
  }

  function startStream() {
    stopStream()
    state.streaming = true
    const intervalMs = Math.max(80, 1000 / (Number(elements.hzSelect.value) || 5))
    sendCurrentPoint()
    state.streamTimer = window.setInterval(sendCurrentPoint, intervalMs)
    updateUiState()
    log(`开始连续发送 (${Math.round(1000 / intervalMs)} Hz)`)
  }

  function stopStream() {
    state.streaming = false
    if (state.streamTimer) {
      window.clearInterval(state.streamTimer)
      state.streamTimer = 0
      log('已停止连续发送')
    }
    updateUiState()
  }

  function syncPathLine() {
    pathLine.setLatLngs(pathPoints)
    elements.pathCountText.textContent = String(pathPoints.length)
    updateUiState()
  }

  function clearPathMarkers() {
    while (pathMarkers.length) {
      map.removeLayer(pathMarkers.pop())
    }
  }

  function refreshPathMarkers() {
    clearPathMarkers()
    pathPoints.forEach((point, index) => {
      const marker = L.circleMarker(point, {
        radius: 5,
        color: '#ffffff',
        weight: 2,
        fillColor: index === 0 ? '#0ea5a4' : '#0b625b',
        fillOpacity: 0.95,
      }).addTo(map)
      pathMarkers.push(marker)
    })
  }

  function addPathPoint(latlng) {
    pathPoints.push(L.latLng(latlng.lat, latlng.lng))
    state.lastTrackSourceText = '手工路径'
    syncPathLine()
    refreshPathMarkers()
  }

  function fitPathBounds() {
    if (pathPoints.length < 2) {
      return
    }

    map.fitBounds(L.latLngBounds(pathPoints), { padding: [30, 30] })
  }

  function replacePathPoints(nextPoints, sourceLabel) {
    pathPoints.splice(0, pathPoints.length)
    nextPoints.forEach((point) => {
      pathPoints.push(L.latLng(point.lat, point.lng))
    })
    state.lastTrackSourceText = sourceLabel
    stopPlayback()
    syncPathLine()
    refreshPathMarkers()
    if (pathPoints.length) {
      state.currentLatLng = L.latLng(pathPoints[0].lat, pathPoints[0].lng)
      updateReadout()
    }
    if (pathPoints.length >= 2) {
      fitPathBounds()
    }
  }

  function parseGeoJsonTrack(rawValue) {
    const latLngs = []

    function pushLngLat(coords) {
      if (!Array.isArray(coords) || coords.length < 2) {
        return
      }
      const lng = Number(coords[0])
      const lat = Number(coords[1])
      if (Number.isFinite(lat) && Number.isFinite(lng)) {
        latLngs.push({ lat, lng })
      }
    }

    function walk(node) {
      if (!node || typeof node !== 'object') {
        return
      }

      if (node.type === 'FeatureCollection' && Array.isArray(node.features)) {
        node.features.forEach(walk)
        return
      }

      if (node.type === 'Feature' && node.geometry) {
        walk(node.geometry)
        return
      }

      if (node.type === 'LineString' && Array.isArray(node.coordinates)) {
        node.coordinates.forEach(pushLngLat)
        return
      }

      if (node.type === 'MultiLineString' && Array.isArray(node.coordinates)) {
        node.coordinates.forEach((line) => {
          if (Array.isArray(line)) {
            line.forEach(pushLngLat)
          }
        })
      }
    }

    if (Array.isArray(rawValue)) {
      rawValue.forEach((item) => {
        if (Array.isArray(item)) {
          pushLngLat(item)
          return
        }

        if (item && typeof item === 'object') {
          const lat = Number(item.lat)
          const lng = Number(item.lng !== undefined ? item.lng : item.lon)
          if (Number.isFinite(lat) && Number.isFinite(lng)) {
            latLngs.push({ lat, lng })
          }
        }
      })
      return latLngs
    }

    walk(rawValue)
    return latLngs
  }

  function parseGpxTrack(text) {
    const xml = new DOMParser().parseFromString(text, 'application/xml')
    const latLngs = []
    const trackPoints = Array.from(xml.querySelectorAll('trkpt'))
    const routePoints = trackPoints.length ? [] : Array.from(xml.querySelectorAll('rtept'))
    const nodes = trackPoints.length ? trackPoints : routePoints

    nodes.forEach((node) => {
      const lat = Number(node.getAttribute('lat'))
      const lng = Number(node.getAttribute('lon'))
      if (Number.isFinite(lat) && Number.isFinite(lng)) {
        latLngs.push({ lat, lng })
      }
    })

    return latLngs
  }

  function parseKmlTrack(text) {
    const xml = new DOMParser().parseFromString(text, 'application/xml')
    const latLngs = []
    const lineStrings = Array.from(xml.querySelectorAll('LineString coordinates'))

    lineStrings.forEach((node) => {
      String(node.textContent || '')
        .trim()
        .split(/\s+/)
        .forEach((tuple) => {
          const parsed = parseCoordinateTuple(tuple)
          if (parsed) {
            latLngs.push({ lat: parsed.lat, lng: parsed.lon })
          }
        })
    })

    return latLngs
  }

  function parseTrackFile(fileName, text) {
    const lowerName = String(fileName || '').toLowerCase()
    if (lowerName.endsWith('.gpx')) {
      return parseGpxTrack(text)
    }
    if (lowerName.endsWith('.kml')) {
      return parseKmlTrack(text)
    }
    if (lowerName.endsWith('.geojson') || lowerName.endsWith('.json')) {
      return parseGeoJsonTrack(parseJsonWithFallback(text))
    }
    if (text.includes('<gpx')) {
      return parseGpxTrack(text)
    }
    if (text.includes('<kml') || text.includes('<LineString')) {
      return parseKmlTrack(text)
    }
    return parseGeoJsonTrack(parseJsonWithFallback(text))
  }

  async function handleTrackFileSelected(file) {
    if (!file) {
      return
    }

    try {
      const text = await file.text()
      const latLngs = parseTrackFile(file.name, text)
      if (!latLngs || latLngs.length < 2) {
        throw new Error('轨迹文件中没有可回放的路径点')
      }

      replacePathPoints(latLngs, `轨迹文件 ${file.name}`)
      log(`已导入轨迹文件: ${file.name} (${latLngs.length} 点)`)
    } catch (error) {
      const message = error && error.message ? error.message : '轨迹文件导入失败'
      log(message)
      alert(message)
    } finally {
      elements.trackFileInput.value = ''
    }
  }

  function toRad(value) {
    return value * Math.PI / 180
  }

  function toDeg(value) {
    return value * 180 / Math.PI
  }

  function getDistanceMeters(from, to) {
    const earth = 6371000
    const lat1 = toRad(from.lat)
    const lat2 = toRad(to.lat)
    const dLat = lat2 - lat1
    const dLon = toRad(to.lng - from.lng)
    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2)
      + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
    return earth * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  }

  function getHeadingDeg(from, to) {
    const lat1 = toRad(from.lat)
    const lat2 = toRad(to.lat)
    const dLon = toRad(to.lng - from.lng)
    const y = Math.sin(dLon) * Math.cos(lat2)
    const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon)
    const bearing = (toDeg(Math.atan2(y, x)) + 360) % 360
    return bearing
  }

  function interpolateLatLng(from, to, t) {
    return L.latLng(
      from.lat + (to.lat - from.lat) * t,
      from.lng + (to.lng - from.lng) * t,
    )
  }

  function tickPlayback() {
    if (!state.playbackRunning || pathPoints.length < 2) {
      return
    }

    const now = performance.now()
    if (!state.lastPlaybackAt) {
      state.lastPlaybackAt = now
    }
    const deltaSeconds = (now - state.lastPlaybackAt) / 1000
    state.lastPlaybackAt = now

    let remainingTravel = getSpeedMps() * deltaSeconds
    while (remainingTravel > 0 && state.currentSegmentIndex < pathPoints.length - 1) {
      const from = pathPoints[state.currentSegmentIndex]
      const to = pathPoints[state.currentSegmentIndex + 1]
      const segmentDistance = getDistanceMeters(from, to)
      if (!segmentDistance) {
        state.currentSegmentIndex += 1
        state.currentSegmentProgress = 0
        continue
      }

      const remainingSegment = segmentDistance * (1 - state.currentSegmentProgress)
      if (remainingTravel >= remainingSegment) {
        remainingTravel -= remainingSegment
        state.currentSegmentIndex += 1
        state.currentSegmentProgress = 0
        state.currentLatLng = L.latLng(to.lat, to.lng)
        state.headingDeg = getHeadingDeg(from, to)
      } else {
        state.currentSegmentProgress += remainingTravel / segmentDistance
        state.currentLatLng = interpolateLatLng(from, to, state.currentSegmentProgress)
        state.headingDeg = getHeadingDeg(from, to)
        remainingTravel = 0
      }
    }

    if (state.currentSegmentIndex >= pathPoints.length - 1) {
      if (elements.loopPathInput.checked) {
        state.currentSegmentIndex = 0
        state.currentSegmentProgress = 0
        state.currentLatLng = L.latLng(pathPoints[0].lat, pathPoints[0].lng)
      } else {
        stopPlayback()
      }
    }

    updateReadout()
    if (state.streaming) {
      sendCurrentPoint()
    }

    if (state.playbackRunning) {
      state.playbackTimer = window.requestAnimationFrame(tickPlayback)
    }
  }

  function startPlayback() {
    if (pathPoints.length < 2) {
      log('至少需要两个路径点')
      return
    }

    stopPlayback()
    state.playbackRunning = true
    state.currentSegmentIndex = 0
    state.currentSegmentProgress = 0
    state.currentLatLng = L.latLng(pathPoints[0].lat, pathPoints[0].lng)
    state.lastPlaybackAt = 0
    updateReadout()
    updateUiState()
    log('开始路径回放')
    state.playbackTimer = window.requestAnimationFrame(tickPlayback)
  }

  function stopPlayback() {
    state.playbackRunning = false
    state.lastPlaybackAt = 0
    if (state.playbackTimer) {
      window.cancelAnimationFrame(state.playbackTimer)
      state.playbackTimer = 0
    }
    updateUiState()
  }

  map.on('click', (event) => {
    if (state.pathEditMode) {
      addPathPoint(event.latlng)
      return
    }

    setCurrentPosition(event.latlng.lat, event.latlng.lng)
  })

  liveMarker.on('mousedown', () => {
    map.dragging.disable()
  })

  map.on('mousemove', (event) => {
    if (event.originalEvent.buttons !== 1) {
      return
    }

    if (state.pathEditMode) {
      return
    }

    setCurrentPosition(event.latlng.lat, event.latlng.lng)
  })

  map.on('mouseup', () => {
    map.dragging.enable()
  })

  elements.connectBtn.addEventListener('click', connectSocket)
  elements.importTrackBtn.addEventListener('click', () => {
    elements.trackFileInput.click()
  })
  elements.trackFileInput.addEventListener('change', (event) => {
    const input = event.target
    const file = input && input.files && input.files[0] ? input.files[0] : null
    handleTrackFileSelected(file)
  })
  elements.loadConfigBtn.addEventListener('click', loadConfigResources)
  elements.fitCourseBtn.addEventListener('click', fitCourseBounds)
  elements.applyTilesBtn.addEventListener('click', () => {
    try {
      applyTileTemplate(elements.tileUrlInput.value, { attribution: 'Custom Map' })
      setResourceStatus('已应用自定义瓦片', 'ok')
      state.lastResourceDetailText = `最近资源: 自定义瓦片 ${formatClockTime(Date.now())}`
      updateUiState()
    } catch (error) {
      setResourceStatus(error && error.message ? error.message : '瓦片应用失败', 'warn')
    }
  })
  elements.resetTilesBtn.addEventListener('click', () => {
    applyTileTemplate(DEFAULT_TILE_URL, {
      maxZoom: 20,
      attribution: '&copy; OpenStreetMap',
    })
    setResourceStatus('已恢复 OSM 底图', 'ok')
    state.lastResourceDetailText = `最近资源: OSM 底图 ${formatClockTime(Date.now())}`
    updateUiState()
  })
  elements.loadCourseBtn.addEventListener('click', async () => {
    try {
      await loadCourseFromUrl(elements.courseUrlInput.value, true)
    } catch (error) {
      const message = error && error.message ? error.message : 'KML 载入失败'
      setResourceStatus(message, 'warn')
      log(message)
    }
  })
  elements.clearCourseBtn.addEventListener('click', clearCourse)
  elements.fitPathBtn.addEventListener('click', fitPathBounds)
  elements.sendOnceBtn.addEventListener('click', () => {
    sendCurrentPoint()
    log('已发送当前位置')
  })
  elements.streamBtn.addEventListener('click', startStream)
  elements.stopStreamBtn.addEventListener('click', stopStream)
  elements.togglePathModeBtn.addEventListener('click', () => {
    state.pathEditMode = !state.pathEditMode
    elements.pathHint.textContent = state.pathEditMode
      ? '地图点击将按顺序追加路径点。'
      : '点击“开启路径编辑”后，在地图上逐点添加路径。'
    updateUiState()
  })
  elements.clearPathBtn.addEventListener('click', () => {
    pathPoints.splice(0, pathPoints.length)
    state.lastTrackSourceText = '路径待命'
    syncPathLine()
    clearPathMarkers()
    stopPlayback()
    log('已清空路径')
  })
  elements.playPathBtn.addEventListener('click', startPlayback)
  elements.pausePathBtn.addEventListener('click', () => {
    stopPlayback()
    log('已暂停回放')
  })

  updateReadout()
  setSocketBadge(false)
  setResourceStatus('支持直接载入 game.json，也支持单独填瓦片模板和 KML 地址。', null)
  updateUiState()
  connectSocket()
})()