refactor: 移动鼠标定点查看

public/libs/control.js

@@ -3013,7 +3013,7 @@ control.prototype.removeSwitch = function (x, y, floorId, name) {
 control.prototype.lockControl = function () {
     core.status.lockControl = true;
     if (!main.replayChecking) {
-        mota.plugin.fixed.showFixed.value = false;
+        // mota.plugin.fixed.showFixed.value = false;
     }
 };
 

public/project/functions.js

@@ -405,16 +405,16 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
                     break;
                 case 67: // C：怪物临界
                     if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                        mota.plugin.fixed.showFixed.value = false;
-                        mota.ui.main.open('fixedDetail', void 0, {
+                        // mota.plugin.fixed.showFixed.value = false;
+                        mota.ui.main.open('fixedDetail', {
                             panel: 'critical'
                         });
                     }
                     break;
                 case 69: // E：怪物属性
                     if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                        mota.plugin.fixed.showFixed.value = false;
-                        mota.ui.main.open('fixedDetail', void 0, {
+                        // mota.plugin.fixed.showFixed.value = false;
+                        mota.ui.main.open('fixedDetail', {
                             panel: 'special'
                         });
                     }

src/core/index.ts

@@ -8,6 +8,7 @@ import { GameEvent, hook } from './main/game';
 import { fixedUi, mainUi } from './main/init/ui';
 import { GameStorage } from './main/storage';
 import { resolvePlugin } from './plugin';
+import './main/init/';
 
 interface AncTePlugin {
     pop: ReturnType<typeof import('../plugin/pop').default>;

src/core/main/custom/hotkey.ts

@@ -302,8 +302,8 @@ hotkey
             const [x, y] = flags.mouseLoc ?? [];
             const [mx, my] = getLocFromMouseLoc(x, y);
             if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                mota.plugin.fixed.showFixed.value = false;
-                mota.ui.main.open('fixedDetail', void 0, {
+                // mota.plugin.fixed.showFixed.value = false;
+                mota.ui.main.open('fixedDetail', {
                     panel: 'special'
                 });
             }
@@ -315,8 +315,8 @@ hotkey
             const [x, y] = flags.mouseLoc ?? [];
             const [mx, my] = getLocFromMouseLoc(x, y);
             if (core.getBlockCls(mx, my)?.startsWith('enemy')) {
-                mota.plugin.fixed.showFixed.value = false;
-                mota.ui.main.open('fixedDetail', void 0, {
+                // mota.plugin.fixed.showFixed.value = false;
+                mota.ui.main.open('fixedDetail', {
                     panel: 'critical'
                 });
             }

src/core/main/custom/ui.ts

@@ -150,7 +150,7 @@ export class GameUi extends EventEmitter<GameUiEvent> {
      * @param vOn 监听的事件
      * @param vBind 绑定的数据
      */
-    with(vOn?: UiVOn, vBind?: UiVBind): ShowableGameUi {
+    with(vBind?: UiVBind, vOn?: UiVOn): ShowableGameUi {
         return { ui: this, vOn, vBind };
     }
 }
@@ -257,15 +257,16 @@ export class UiController extends Focus<IndexedGameUi> {
      * @param vBind 绑定的数据
      * @returns ui的唯一标识符
      */
-    open(id: string, vOn?: UiVOn, vBind?: UiVBind) {
+    open(id: string, vBind?: UiVBind, vOn?: UiVOn) {
         const ui = this.get(id);
         if (!ui) return -1;
         const num = this.num++;
-        const sui = ui.with(vOn, {
+        const bind = {
             num,
             ui,
             ...(vBind ?? {})
-        });
+        };
+        const sui = ui.with(bind, vOn);
         this.add({
             num,
             ...sui

src/core/main/game.ts

@@ -11,9 +11,12 @@ export interface GameEvent extends EmitableEvent {
 export const hook = new EventEmitter<GameEvent>();
 
 interface ListenerEvent extends EmitableEvent {
-    hoverBlock: (block: Block) => void;
-    leaveBlock: (block: Block) => void;
-    clickBlock: (block: Block) => void;
+    // block
+    hoverBlock: (block: Block, ev: MouseEvent) => void;
+    leaveBlock: (block: Block, ev: MouseEvent, leaveGame: boolean) => void;
+    clickBlock: (block: Block, ev: MouseEvent) => void;
+    // mouse
+    mouseMove: (ev: MouseEvent) => void;
 }
 
 class GameListener extends EventEmitter<ListenerEvent> {
@@ -24,38 +27,48 @@ class GameListener extends EventEmitter<ListenerEvent> {
     constructor() {
         super();
 
+        if (!!window.core) {
+            this.init();
+        } else {
             loading.once('coreInit', () => {
                 this.init();
             });
         }
+    }
 
     private init() {
-        // block
+        // ----- block
         let lastHoverX = -1;
         let lastHoverY = -1;
 
-        const getBlockLoc = (px: number, py: number) => {
+        const data = core.canvas.data.canvas;
+
+        const getBlockLoc = (px: number, py: number, size: number) => {
             return [
-                Math.floor((px - core.bigmap.offsetX) / 32),
-                Math.floor((py - core.bigmap.offsetY) / 32)
+                Math.floor(((px * 32) / size - core.bigmap.offsetX) / 32),
+                Math.floor(((py * 32) / size - core.bigmap.offsetY) / 32)
             ];
         };
 
-        core.registerAction(
-            'onmove',
-            `@GameListener_${this.num}_block`,
-            (x, y, px, py) => {
-                if (core.status.lockControl || !core.isPlaying()) return false;
-                const [bx, by] = getBlockLoc(px, py);
+        // hover & leave
+        data.addEventListener('mousemove', e => {
+            if (core.status.lockControl || !core.isPlaying()) return;
+            this.emit('mouseMove', e);
+            const {
+                x: px,
+                y: py,
+                size
+            } = core.actions._getClickLoc(e.clientX, e.clientY);
+            const [bx, by] = getBlockLoc(px, py, size);
             const blocks = core.getMapBlocksObj();
             if (lastHoverX !== bx || lastHoverY !== by) {
                 const lastBlock = blocks[`${lastHoverX},${lastHoverY}`];
                 const block = blocks[`${bx},${by}`];
                 if (!!lastBlock) {
-                        this.emit('leaveBlock', lastBlock);
+                    this.emit('leaveBlock', lastBlock, e, false);
                 }
                 if (!!block) {
-                        this.emit('hoverBlock', block);
+                    this.emit('hoverBlock', block, e);
                     lastHoverX = bx;
                     lastHoverY = by;
                 } else {
@@ -63,35 +76,34 @@ class GameListener extends EventEmitter<ListenerEvent> {
                     lastHoverY = -1;
                 }
             }
-                return false;
-            },
-            50
-        );
-        core.canvas.data.canvas.addEventListener('mouseleave', () => {
+        });
+        data.addEventListener('mouseleave', e => {
             if (core.status.lockControl || !core.isPlaying()) return;
             const blocks = core.getMapBlocksObj();
             const lastBlock = blocks[`${lastHoverX},${lastHoverY}`];
             if (!!lastBlock) {
-                this.emit('leaveBlock', lastBlock);
+                this.emit('leaveBlock', lastBlock, e, true);
             }
             lastHoverX = -1;
             lastHoverY = -1;
         });
-        core.registerAction(
-            'onup',
-            `@GameListener_${this.num}_block`,
-            (x, y, px, py) => {
-                if (core.status.lockControl || !core.isPlaying()) return false;
-                const [bx, by] = getBlockLoc(px, py);
+        // click
+        data.addEventListener('click', e => {
+            if (core.status.lockControl || !core.isPlaying()) return;
+            const {
+                x: px,
+                y: py,
+                size
+            } = core.actions._getClickLoc(e.clientX, e.clientY);
+            const [bx, by] = getBlockLoc(px, py, size);
             const blocks = core.getMapBlocksObj();
             const block = blocks[`${bx},${by}`];
             if (!!block) {
-                    this.emit('clickBlock', block);
+                this.emit('clickBlock', block, e);
             }
-                return false;
-            },
-            50
-        );
+        });
+
+        // ----- mouse
     }
 }
 

src/core/main/init/fixed.ts

@@ -0,0 +1,55 @@
+import { debounce } from 'lodash-es';
+import { gameListener } from '../game';
+import { fixedUi } from './ui';
+import { ref } from 'vue';
+import { sleep } from 'mutate-animate';
+
+const close = ref(false);
+
+let cx = 0;
+let cy = 0;
+
+/**
+ * 显示定点查看
+ */
+const showFixed = debounce((block: Block) => {
+    const e = core.material.enemys[block.event.id as EnemyIds];
+    if (!e) return;
+    const enemy = core.status.thisMap.enemy.get(block.x, block.y);
+    fixedUi.open(
+        'fixed',
+        { enemy, close, loc: [cx, cy] },
+        { close: closeFixed }
+    );
+}, 200);
+
+/**
+ * 关闭定点查看
+ */
+const closeFixed = () => {
+    close.value = true;
+    sleep(200).then(() => {
+        fixedUi.closeByName('fixed');
+        close.value = false;
+    });
+};
+
+let hovered: Block | null;
+
+gameListener.on('hoverBlock', block => {
+    closeFixed();
+    hovered = block;
+});
+gameListener.on('leaveBlock', (_, __, leaveGame) => {
+    showFixed.cancel();
+    if (!leaveGame) closeFixed();
+    hovered = null;
+});
+gameListener.on('mouseMove', e => {
+    cx = e.clientX;
+    cy = e.clientY;
+    showFixed.cancel();
+    if (hovered) {
+        showFixed(hovered);
+    }
+});

src/core/main/init/index.ts

@@ -0,0 +1 @@
+import './fixed';

src/core/plugin.ts

@@ -8,7 +8,6 @@ import mark from '@/plugin/mark';
 import chapter from '@/plugin/ui/chapter';
 import fly from '@/plugin/ui/fly';
 import chase from '@/plugin/chase/chase';
-import fixed from '@/plugin/ui/fixed';
 import webglUtils from '@/plugin/webgl/utils';
 import shadow from '@/plugin/shadow/shadow';
 import gameShadow from '@/plugin/shadow/gameShadow';
@@ -33,7 +32,6 @@ export function resolvePlugin() {
         ['chapter', chapter()],
         ['fly', fly()],
         ['chase', chase()],
-        ['fixed', fixed()],
         ['webglUtils', webglUtils()],
         ['shadow', shadow()],
         ['gameShadow', gameShadow()],

src/plugin/game/enemy/damage.ts

@@ -74,6 +74,10 @@ export class EnemyCollection implements RangeCollection<DamageEnemy> {
         this.extract();
     }
 
+    get(x: number, y: number) {
+        return this.list.find(v => v.x === x && v.y === y);
+    }
+
     /**
      * 解析本地图的怪物信息
      */

src/plugin/game/ui.js

@@ -11,7 +11,7 @@ export {};
 
     function openItemShop(itemShopId) {
         if (!core.isReplaying()) {
-            mota.ui.main.open('shop', void 0, {
+            mota.ui.main.open('shop', {
                 shopId: itemShopId
             });
         }

src/plugin/ui/fixed.ts

@@ -5,46 +5,46 @@ import { ToShowEnemy, detailInfo } from './book';
 import { DamageEnemy } from '../game/enemy/damage';
 import { isMobile } from '../use';
 
-export const showFixed = ref(false);
+// export const showFixed = ref(false);
 
-let lastId: EnemyIds;
+// let lastId: EnemyIds;
 
-const show = debounce((ev: MouseEvent) => {
-    if (!window.flags) return;
-    if (!flags.mouseLoc) return;
-    flags.clientLoc = [ev.clientX, ev.clientY];
-    const [mx, my] = getLocFromMouseLoc(...flags.mouseLoc);
+// const show = debounce((ev: MouseEvent) => {
+//     if (!window.flags) return;
+//     if (!flags.mouseLoc) return;
+//     flags.clientLoc = [ev.clientX, ev.clientY];
+//     const [mx, my] = getLocFromMouseLoc(...flags.mouseLoc);
 
-    const e = core.status.thisMap.enemy.list.find(v => {
-        return v.x === mx && v.y === my;
-    });
+//     const e = core.status.thisMap.enemy.list.find(v => {
+//         return v.x === mx && v.y === my;
+//     });
 
-    if (!e) return;
+//     if (!e) return;
 
-    lastId = e.id;
-    const detail = getDetailedEnemy(e);
-    detailInfo.enemy = detail;
-    showFixed.value = true;
-}, 200);
+//     lastId = e.id;
+//     const detail = getDetailedEnemy(e);
+//     detailInfo.enemy = detail;
+//     showFixed.value = true;
+// }, 200);
 
-export default function init() {
-    const data = core.canvas.data.canvas;
-    data.addEventListener('mousemove', ev => {
-        if (!core.isPlaying() || core.status.lockControl) return;
-        const [mx, my] = getLocFromMouseLoc(...flags.mouseLoc);
-        const e = core.getBlockId(mx, my);
-        if (e !== lastId) showFixed.value = false;
-        if (!e) return;
-        show(ev);
-    });
-    data.addEventListener('mousedown', ev => {
-        showFixed.value = false;
-    });
+// export default function init() {
+//     const data = core.canvas.data.canvas;
+//     data.addEventListener('mousemove', ev => {
+//         if (!core.isPlaying() || core.status.lockControl) return;
+//         const [mx, my] = getLocFromMouseLoc(...flags.mouseLoc);
+//         const e = core.getBlockId(mx, my);
+//         if (e !== lastId) showFixed.value = false;
+//         if (!e) return;
+//         show(ev);
+//     });
+//     data.addEventListener('mousedown', ev => {
+//         showFixed.value = false;
+//     });
 
-    return {
-        showFixed
-    };
-}
+//     return {
+//         showFixed
+//     };
+// }
 
 export function getLocFromMouseLoc(x: number, y: number): LocArr {
     const mx = Math.round(x + core.bigmap.offsetX / 32);

src/types/action.d.ts

@@ -136,6 +136,15 @@ interface Actions extends VoidedActionFuncs {
     _getNextFlyFloor(delta: number, index: number): number;
 
     _clickGameInfo_openComments();
+
+    _getClickLoc(
+        x: number,
+        y: number
+    ): {
+        x: number;
+        y: number;
+        size: number;
+    };
 }
 
 declare const actions: new () => Actions;

src/types/plugin.d.ts

@@ -177,9 +177,6 @@ interface PluginUis {
     /** 是否展示标记的怪物 */
     readonly showMarkedEnemy: Ref<boolean>;
 
-    /** 是否展示移动鼠标显示怪物信息的盒子 */
-    readonly showFixed: Ref<boolean>;
-
     /**
      * 显示章节
      * @param chapter 显示的文字

src/ui/fixed.vue

@@ -1,23 +1,21 @@
 <template>
     <div id="fixed">
-        <Transition>
         <Box
-                v-if="showFixed"
             v-model:height="height"
             v-model:left="left"
             v-model:top="top"
             v-model:width="width"
         >
             <div id="enemy-fixed">
-                    <span id="enemy-name">{{ enemy.enemy.enemy.name }}</span>
+                <span id="enemy-name">{{ enemy.enemy.name }}</span>
                 <div id="enemy-special">
                     <span
-                            v-for="(text, i) of enemy.showSpecial"
-                            :style="{ color: text[2] }"
+                        v-for="(text, i) of special"
+                        :style="{ color: text[1] }"
                         >{{ text[0] }}</span
                     >
                 </div>
-                    <div class="enemy-attr" v-for="(a, i) of toShowAttrs">
+                <div class="enemy-attr" v-for="(a, i) of detail">
                     <span class="attr-name" :style="{ color: a[2] }">{{
                         a[1]
                     }}</span>
@@ -27,37 +25,70 @@
                 </div>
             </div>
         </Box>
-        </Transition>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, computed, onMounted, onUpdated, ref, watch } from 'vue';
+import { onMounted, onUpdated, ref, watch } from 'vue';
 import Box from '../components/box.vue';
-import { showFixed } from '../plugin/ui/fixed';
-import { ToShowEnemy, detailInfo } from '../plugin/ui/book';
+import { GameUi } from '@/core/main/custom/ui';
+import type { DamageEnemy } from '@/plugin/game/enemy/damage';
+import { nextFrame } from '@/plugin/utils';
 
-watch(showFixed, n => {
-    if (n) calHeight();
+const props = defineProps<{
+    num: number;
+    ui: GameUi;
+    enemy: DamageEnemy;
+    close: Ref<boolean>;
+    loc: [x: number, y: number];
+}>();
+const emits = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+watch(props.close, n => {
+    if (n) {
+        fixed.style.opacity = '0';
+    }
 });
 
 let main: HTMLDivElement;
+let fixed: HTMLDivElement;
 
 const format = core.formatBigNumber;
-const enemy = ref(detailInfo.enemy!);
+const enemy = props.enemy;
+const detail = ((): [number, string, string][] => {
+    const info = enemy.info;
+    const data = enemy.calCritical()[0];
+    const ratio = core.status.thisMap?.ratio ?? 1;
+    return [
+        [info.hp, '生命', 'lightgreen'],
+        [info.atk, '攻击', 'lightcoral'],
+        [info.def, '防御', 'lightblue'],
+        [enemy.enemy.money, '金币', 'lightyellow'],
+        [enemy.enemy.exp, '经验', 'lawgreen'],
+        [data?.atkDelta ?? 0, '临界', 'lightsalmon'],
+        [data?.delta ?? 0, '临界减伤', 'lightpink'],
+        [enemy.calDefDamage(ratio).delta, `${ratio}防`, 'cyan']
+    ];
+})();
+const special = (() => {
+    const s = enemy.info.special;
 
-const toShowAttrs: ComputedRef<[number | string, string, string][]> = computed(
-    () => [
-        [enemy.value.enemy.info.hp, '生命', 'lightgreen'],
-        [enemy.value.enemy.info.atk, '攻击', 'lightcoral'],
-        [enemy.value.enemy.info.def, '防御', 'lightblue'],
-        [enemy.value.enemy.enemy.money, '金币', 'lightyellow'],
-        [enemy.value.enemy.enemy.exp, '经验', 'lawgreen'],
-        [enemy.value.critical, '临界', 'lightsalmon'],
-        [enemy.value.criticalDam, '临界减伤', 'lightpink'],
-        [enemy.value.defDam, `${core.status.thisMap?.ratio ?? 1}防`, 'cyan']
-    ]
-);
+    const fromFunc = (
+        func: string | ((enemy: Enemy) => string),
+        enemy: Enemy
+    ) => {
+        return typeof func === 'string' ? func : func(enemy);
+    };
+
+    const show = s.slice(0, 2).map(v => {
+        const s = core.plugin.special[v];
+        return [fromFunc(s.name, enemy.enemy), s.color];
+    });
+    if (s.length > 2) show.push(['...', 'white']);
+    return show;
+})();
 
 const left = ref(0);
 const top = ref(0);
@@ -67,19 +98,15 @@ let vh = window.innerHeight;
 let vw = window.innerWidth;
 
 async function calHeight() {
-    enemy.value = detailInfo.enemy!;
     vh = window.innerHeight;
     vw = window.innerWidth;
     width.value = vh * 0.28;
     await new Promise(res => requestAnimationFrame(res));
-    if (mota.ui.main.hasName('fixedDetail')) {
-        showFixed.value = false;
-    }
     updateMain();
     if (!main) return;
     const style = getComputedStyle(main);
     const h = parseFloat(style.height);
-    const [cx, cy] = flags.clientLoc;
+    const [cx, cy] = props.loc;
     if (cy + h + 10 > vh - 10) top.value = vh - h - 10;
     else top.value = cy + 10;
     if (cx + width.value + 10 > vw - 10) left.value = vw - width.value - 10;
@@ -89,11 +116,13 @@ async function calHeight() {
 
 function updateMain() {
     main = document.getElementById('enemy-fixed') as HTMLDivElement;
+    fixed = document.getElementById('fixed') as HTMLDivElement;
     if (main) {
-        main.addEventListener('mouseleave', () => {
-            showFixed.value = false;
-        });
+        main.addEventListener('mouseleave', () => emits('close'));
     }
+    nextFrame(() => {
+        fixed.style.opacity = '1';
+    });
 }
 
 onUpdated(calHeight);
@@ -108,16 +137,8 @@ onMounted(() => {
 #fixed {
     font-family: 'normal';
     font-size: 2.5vh;
-}
-
-.v-enter-active,
-.v-leave-active {
-    transition: opacity 0.2s linear;
-}
-
-.v-enter-from,
-.v-leave-to {
     opacity: 0;
+    transition: opacity 0.2s linear;
 }
 
 #enemy-fixed {