Revamp map page layout and compass while removing GPS demo

miniprogram/pages/map/map.ts

@@ -1,39 +1,107 @@
 import { MapEngine, type MapEngineStageRect, type MapEngineViewState } from '../../engine/map/mapEngine'
 import { loadRemoteMapConfig } from '../../utils/remoteMapConfig'
-
+type CompassTickData = {
+  angle: number
+  long: boolean
+  major: boolean
+}
+type CompassLabelData = {
+  text: string
+  angle: number
+  rotateBack: number
+  radius: number
+  className: string
+}
 type MapPageData = MapEngineViewState & {
   showDebugPanel: boolean
+  statusBarHeight: number
+  topInsetHeight: number
+  panelTimerText: string
+  panelMileageText: string
+  panelDistanceValueText: string
+  panelProgressText: string
+  panelSpeedValueText: string
+  compassTicks: CompassTickData[]
+  compassLabels: CompassLabelData[]
 }
-
-const INTERNAL_BUILD_VERSION = 'map-build-99'
+const INTERNAL_BUILD_VERSION = 'map-build-106'
 const REMOTE_GAME_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/wxmini/test/game.json'
-
 let mapEngine: MapEngine | null = null
-
+function buildCompassTicks(): CompassTickData[] {
+  const ticks: CompassTickData[] = []
+  for (let angle = 0; angle < 360; angle += 5) {
+    ticks.push({
+      angle,
+      long: angle % 15 === 0,
+      major: angle % 45 === 0,
+    })
+  }
+  return ticks
+}
+function buildCompassLabels(): CompassLabelData[] {
+  return [
+    { text: '\u5317', angle: 0, rotateBack: 0, radius: 68, className: 'compass-widget__mark--cardinal compass-widget__mark--north' },
+    { text: '\u4e1c\u5317', angle: 45, rotateBack: 0, radius: 58, className: 'compass-widget__mark--intermediate compass-widget__mark--northeast' },
+    { text: '\u4e1c', angle: 90, rotateBack: 0, radius: 68, className: 'compass-widget__mark--cardinal' },
+    { text: '\u4e1c\u5357', angle: 135, rotateBack: 0, radius: 58, className: 'compass-widget__mark--intermediate' },
+    { text: '\u5357', angle: 180, rotateBack: 0, radius: 68, className: 'compass-widget__mark--cardinal' },
+    { text: '\u897f\u5357', angle: 225, rotateBack: 0, radius: 58, className: 'compass-widget__mark--intermediate' },
+    { text: '\u897f', angle: 270, rotateBack: 0, radius: 68, className: 'compass-widget__mark--cardinal' },
+    { text: '\u897f\u5317', angle: 315, rotateBack: 0, radius: 58, className: 'compass-widget__mark--intermediate compass-widget__mark--northwest' },
+  ]
+}
 function getFallbackStageRect(): MapEngineStageRect {
   const systemInfo = wx.getSystemInfoSync()
-  const width = Math.max(320, systemInfo.windowWidth - 20)
-  const height = Math.max(280, Math.floor(systemInfo.windowHeight * 0.66))
+  const width = Math.max(320, systemInfo.windowWidth)
+  const height = Math.max(280, systemInfo.windowHeight)
 
   return {
     width,
     height,
-    left: 10,
+    left: 0,
     top: 0,
   }
 }
 
 Page({
-  data: { showDebugPanel: false } as MapPageData,
+  data: {
+    showDebugPanel: false,
+    statusBarHeight: 0,
+    topInsetHeight: 12,
+    panelTimerText: '00:00:00',
+    panelMileageText: '0m',
+    panelDistanceValueText: '108',
+    panelProgressText: '0/14',
+    panelSpeedValueText: '0',
+    compassTicks: buildCompassTicks(),
+    compassLabels: buildCompassLabels(),
+  } as MapPageData,
 
   onLoad() {
+    const systemInfo = wx.getSystemInfoSync()
+    const statusBarHeight = systemInfo.statusBarHeight || 0
+    const menuButtonRect = wx.getMenuButtonBoundingClientRect()
+    const menuButtonBottom = menuButtonRect && typeof menuButtonRect.bottom === 'number' ? menuButtonRect.bottom : statusBarHeight
+
     mapEngine = new MapEngine(INTERNAL_BUILD_VERSION, {
       onData: (patch) => {
         this.setData(patch)
       },
     })
 
-    this.setData({ ...mapEngine.getInitialData(), showDebugPanel: false })
+    this.setData({
+      ...mapEngine.getInitialData(),
+      showDebugPanel: false,
+      statusBarHeight,
+      topInsetHeight: Math.max(statusBarHeight + 12, menuButtonBottom + 20),
+      panelTimerText: '00:00:00',
+      panelMileageText: '0m',
+      panelDistanceValueText: '108',
+      panelProgressText: '0/14',
+      panelSpeedValueText: '0',
+    compassTicks: buildCompassTicks(),
+    compassLabels: buildCompassLabels(),
+    })
   },
 
   onReady() {
@@ -67,10 +135,10 @@ Page({
           return
         }
 
-        const errorMessage = error && error.message ? error.message : '未知错误'
+        const errorMessage = error && error.message ? error.message : '鏈煡閿欒'
         this.setData({
-          configStatusText: `载入失败: ${errorMessage}`,
-          statusText: `远程地图配置载入失败: ${errorMessage} (${INTERNAL_BUILD_VERSION})`,
+          configStatusText: `杞藉叆澶辫触: ${errorMessage}`,
+          statusText: `杩滅▼鍦板浘閰嶇疆杞藉叆澶辫触: ${errorMessage} (${INTERNAL_BUILD_VERSION})`,
         })
       })
   },
@@ -99,7 +167,7 @@ Page({
         const canvasRef = canvasRes[0] as any
         if (!canvasRef || !canvasRef.node) {
           page.setData({
-            statusText: `WebGL 引擎初始化失败 (${INTERNAL_BUILD_VERSION})`,
+            statusText: `WebGL 寮曟搸鍒濆鍖栧け璐?(${INTERNAL_BUILD_VERSION})`,
           })
           return
         }
@@ -109,7 +177,7 @@ Page({
           currentEngine.attachCanvas(canvasRef.node, rect.width, rect.height, dpr)
         } catch (error) {
           page.setData({
-            statusText: `WebGL 初始化失败 (${INTERNAL_BUILD_VERSION})`,
+            statusText: `WebGL 鍒濆鍖栧け璐?(${INTERNAL_BUILD_VERSION})`,
           })
         }
       })
@@ -212,6 +280,14 @@ Page({
       showDebugPanel: !this.data.showDebugPanel,
     })
   },
+
+  handleCloseDebugPanel() {
+    this.setData({
+      showDebugPanel: false,
+    })
+  },
+
+  handleDebugPanelTap() {},
 })
 
 
@@ -223,29 +299,3 @@ Page({
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-