feat: 浏览地图界面在地图上显示三个功能按钮

packages-user/client-modules/src/render/shared.ts

@@ -14,6 +14,10 @@ export const MAP_BLOCK_HEIGHT = 15;
 export const MAP_WIDTH = CELL_SIZE * MAP_BLOCK_WIDTH;
 /** 地图像素高度 */
 export const MAP_HEIGHT = CELL_SIZE * MAP_BLOCK_HEIGHT;
+/** 地图宽度的一半 */
+export const HALF_MAP_WIDTH = MAP_WIDTH / 2;
+/** 地图高度的一半 */
+export const HALF_MAP_HEIGHT = MAP_HEIGHT / 2;
 
 //#region 状态栏
 

packages-user/client-modules/src/render/ui/viewmap.tsx

@@ -41,7 +41,8 @@ import { useKey } from '../use';
 import {
     ENABLE_RIGHT_STATUS_BAR,
     FULL_LOC,
-    HALF_WIDTH,
+    HALF_MAP_WIDTH,
+    HALF_STATUS_WIDTH,
     MAIN_HEIGHT,
     MAP_HEIGHT,
     MAP_WIDTH,
@@ -70,6 +71,12 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         new LayerGroupAnimate()
     ];
 
+    const restHeight = STATUS_BAR_HEIGHT - 292;
+    const col = restHeight / 4;
+    const loc1: ElementLocator = [HALF_STATUS_WIDTH, col * 1 + 292];
+    const loc2: ElementLocator = [HALF_STATUS_WIDTH, col * 2 + 292];
+    const loc3: ElementLocator = [HALF_STATUS_WIDTH, col * 3 + 292];
+
     const rightFont = new Font(Font.defaultFamily, 15);
 
     const viewableFloor = markRaw(
@@ -213,6 +220,28 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         group.value?.update();
     };
 
+    //#region 事件监听
+
+    const clickTop = (ev: IActionEvent) => {
+        const col = MAP_WIDTH / 3;
+        if (ev.offsetX < col * 2) {
+            changeFloor(1);
+        } else {
+            resetCamera();
+        }
+    };
+
+    const clickBottom = (ev: IActionEvent) => {
+        const col = MAP_WIDTH / 3;
+        if (ev.offsetX < col) {
+            openBook();
+        } else if (ev.offsetX < col * 2) {
+            changeFloor(-1);
+        } else {
+            fly();
+        }
+    };
+
     //#region 地图交互
 
     let mouseDown = false;
@@ -394,7 +423,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 cursor="pointer"
                 onEnter={enterTop}
                 onLeave={leaveTop}
-                onClick={() => changeFloor(1)}
+                onClick={clickTop}
             />
             <sprite
                 loc={[STATUS_BAR_WIDTH, MAP_HEIGHT - 64, MAP_WIDTH, 64]}
@@ -404,22 +433,43 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 cursor="pointer"
                 onEnter={enterBottom}
                 onLeave={leaveBottom}
-                onClick={() => changeFloor(-1)}
+                onClick={clickBottom}
             />
             <text
                 text="上移地图"
-                loc={[HALF_WIDTH, 24]}
+                loc={[HALF_MAP_WIDTH + STATUS_BAR_WIDTH, 24]}
                 anc={[0.5, 0.5]}
                 zIndex={20}
                 noevent
             />
             <text
                 text="下移地图"
-                loc={[HALF_WIDTH, MAP_HEIGHT - 24]}
+                loc={[HALF_MAP_WIDTH + STATUS_BAR_WIDTH, MAP_HEIGHT - 24]}
                 anc={[0.5, 0.5]}
                 zIndex={20}
                 noevent
             />
+            <text
+                text="「 怪物手册 」"
+                loc={[32 + STATUS_BAR_WIDTH, MAP_HEIGHT - 24]}
+                anc={[0, 0.5]}
+                zIndex={20}
+                noevent
+            />
+            <text
+                text="「 传送至此 」"
+                loc={[RIGHT_STATUS_POS - 32, MAP_HEIGHT - 24]}
+                anc={[1, 0.5]}
+                zIndex={20}
+                noevent
+            />
+            <text
+                text="「 重置视角 」"
+                loc={[RIGHT_STATUS_POS - 32, 24]}
+                anc={[1, 0.5]}
+                zIndex={20}
+                noevent
+            />
             <container
                 loc={[RIGHT_STATUS_POS, 0, STATUS_BAR_WIDTH, STATUS_BAR_HEIGHT]}
                 hidden={!ENABLE_RIGHT_STATUS_BAR}
@@ -484,21 +534,21 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 <g-line line={[12, 292, 168, 292]} lineWidth={1} />
                 <text
                     text="「 怪物手册 」"
-                    loc={[90, 330]}
+                    loc={loc1}
                     anc={[0.5, 0.5]}
                     cursor="pointer"
                     onClick={openBook}
                 />
                 <text
                     text="「 传送至此 」"
-                    loc={[90, 380]}
+                    loc={loc2}
                     anc={[0.5, 0.5]}
                     cursor="pointer"
                     onClick={fly}
                 />
                 <text
                     text="「 重置视角 」"
-                    loc={[90, 430]}
+                    loc={loc3}
                     anc={[0.5, 0.5]}
                     cursor="pointer"
                     onClick={resetCamera}