feat: 浏览地图可以按 Esc 退出

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

@@ -7,13 +7,17 @@ import { ElementLocator } from '@motajs/render-core';
 /** 每个格子的宽高 */
 export const CELL_SIZE = 32;
 /** 地图格子宽度，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改 */
-export const MAP_BLOCK_WIDTH = 13;
+export const MAP_BLOCK_WIDTH = 15;
 /** 地图格子高度，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改 */
-export const MAP_BLOCK_HEIGHT = 13;
+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(
@@ -105,7 +112,13 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         .realize('@viewMap_book', () => openBook())
         .realize('@viewMap_fly', () => fly())
         .realize('@viewMap_reset', () => resetCamera())
-        .realize('confirm', () => close());
+        .realize('confirm', () => close())
+        .realize('exit', (_, code, assist) => {
+            // 如果按键不能触发怪物手册，则关闭界面，因为怪物手册和退出默认使用同一个按键，需要特判
+            if (!key.willEmit(code, assist, 'book')) {
+                props.controller.close(props.instance);
+            }
+        });
 
     //#region 功能函数
 
@@ -213,6 +226,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 +429,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 +439,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 +540,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}

packages/system-action/src/hotkey.ts

@@ -52,6 +52,7 @@ export interface HotkeyData extends Required<RegisterHotkeyData> {
 type HotkeyFunc = (
     id: string,
     code: KeyCode,
+    assist: number,
     ev: KeyboardEvent
 ) => void | '@void';
 
@@ -223,6 +224,30 @@ export class Hotkey extends EventEmitter<HotkeyEvent> {
         if (emit) this.emit('set', id, key, assist);
     }
 
+    /**
+     * 判断指定按键和辅助按键是否可能会触发给定 id 的按键操作
+     * @param key 按键
+     * @param assist 辅助按键
+     * @param id 注册的按键操作 id
+     */
+    willEmit(key: KeyCode, assist: number, id: string) {
+        const emittable = this.keyMap.get(key);
+        if (!emittable) return false;
+        const { ctrl, shift, alt } = unwarpBinary(assist);
+        return emittable.some(v => {
+            if (
+                v.id === id &&
+                v.ctrl === ctrl &&
+                v.shift === shift &&
+                v.alt === alt
+            ) {
+                return true;
+            } else {
+                return false;
+            }
+        });
+    }
+
     /**
      * 触发一个按键
      * @param key 要触发的按键
@@ -256,12 +281,12 @@ export class Hotkey extends EventEmitter<HotkeyEvent> {
                 if (!data) return;
 
                 if (type === 'up' && data.onUp) {
-                    data.onUp(v.id, key, ev);
+                    data.onUp(v.id, key, assist, ev);
                     emitted = true;
                     return;
                 }
                 if (!this.canEmit(v.id, key, type, data)) return;
-                const res = data.func(v.id, key, ev);
+                const res = data.func(v.id, key, assist, ev);
                 if (res !== '@void') emitted = true;
             }
         });
@@ -453,12 +478,12 @@ document.addEventListener('keyup', e => {
         }
     } else {
         // polyfill样板
-        if (main.dom.inputDiv.style.display == 'block') {
+        if (main.dom.inputDiv.style.display === 'block') {
-            if (e.keyCode == 13) {
+            if (e.keyCode === 13) {
                 setTimeout(function () {
                     main.dom.inputYes.click();
                 }, 50);
-            } else if (e.keyCode == 27) {
+            } else if (e.keyCode === 27) {
                 setTimeout(function () {
                     main.dom.inputNo.click();
                 }, 50);