优化ui控制器

idea.md

@@ -99,4 +99,6 @@ dam4.png ---- 存档 59
 [] 弹幕系统
 [] 优化各种 ui
 [] 怪物脚下加入阴影
-[] 着色器特效
+[x] 着色器特效
+[] 完全删除 core.plugin?（待定）
+[] 通用 Addon 接口

package.json

@@ -17,46 +17,46 @@
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.20",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
-    "chart.js": "^4.3.2",
+    "chart.js": "^4.4.0",
     "jszip": "^3.10.1",
     "lodash-es": "^4.17.21",
     "lz-string": "^1.5.0",
-    "mutate-animate": "^1.3.1",
+    "mutate-animate": "^1.3.2",
     "three": "^0.149.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@babel/cli": "^7.22.15",
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.22.15",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.22.15",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@types/babel__core": "^7.20.1",
     "@types/fontmin": "^0.9.0",
     "@types/fs-extra": "^9.0.13",
-    "@types/lodash-es": "^4.17.8",
+    "@types/lodash-es": "^4.17.9",
-    "@types/node": "^18.17.1",
+    "@types/node": "^18.17.14",
     "@types/ws": "^8.5.5",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "chokidar": "^3.5.3",
-    "compressing": "^1.9.0",
+    "compressing": "^1.10.0",
     "fontmin": "^0.9.9",
     "form-data": "^4.0.0",
     "fs-extra": "^10.1.0",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
-    "rollup": "^3.27.0",
+    "rollup": "^3.28.1",
-    "terser": "^5.19.2",
+    "terser": "^5.19.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
     "vue-tsc": "^1.8.8",
     "ws": "^8.13.0"
   }

src/core/main/custom/hotkey.ts

@@ -5,7 +5,7 @@ import { EmitableEvent, EventEmitter } from '../../common/eventEmitter';
 import { GameStorage } from '../storage';
 
 interface HotkeyEvent extends EmitableEvent {
-    emit: (key: KeyCode, e: KeyboardEvent) => void;
+    emit: (key: KeyCode, e: KeyboardEvent, ...params: any[]) => void;
     keyChange: (data: HotkeyData, before: KeyCode, after: KeyCode) => void;
 }
 
@@ -86,8 +86,8 @@ export class Hotkey extends EventEmitter<HotkeyEvent> {
      * 执行一个按键操作
      * @param key 按下的按键
      */
-    emitKey(key: KeyCode, e: KeyboardEvent): any[] {
+    emitKey(key: KeyCode, e: KeyboardEvent, ...params: any[]): any[] {
-        this.emit('emit', key, e);
+        this.emit('emit', key, e, ...params);
         return this.getData(key).map(v => {
             const assist = generateBinary([e.ctrlKey, e.altKey, e.shiftKey]);
             const need = generateBinary([!!v.ctrl, !!v.alt, !!v.shift]);

src/core/main/custom/ui.ts

@@ -14,7 +14,6 @@ interface FocusEvent<T> extends EmitableEvent {
 }
 
 export class Focus<T = any> extends EventEmitter<FocusEvent<T>> {
-    targets: Set<T> = new Set();
     /** 显示列表 */
     stack: T[];
     focused: T | null = null;
@@ -67,13 +66,6 @@ export class Focus<T = any> extends EventEmitter<FocusEvent<T>> {
      * @param item 添加的物品
      */
     add(item: T) {
-        if (!this.targets.has(item)) {
-            console.warn(
-                `向显示列表里面添加了不在物品集合里面的物品`,
-                `添加的物品：${item}`
-            );
-            return;
-        }
         this.stack.push(item);
         this.emit('add', item);
     }
@@ -96,6 +88,14 @@ export class Focus<T = any> extends EventEmitter<FocusEvent<T>> {
      */
     splice(item: T) {
         const index = this.stack.indexOf(item);
+        this.spliceIndex(index);
+    }
+
+    /**
+     * 根据索引在显示列表中删除一项
+     * @param index 要删除的项的索引
+     */
+    spliceIndex(index: number) {
         if (index === -1) {
             this.emit('splice', []);
             return;
@@ -108,30 +108,6 @@ export class Focus<T = any> extends EventEmitter<FocusEvent<T>> {
             this.stack.splice(index, this.equal ? 1 : Infinity)
         );
     }
-
-    /**
-     * 注册物品
-     * @param item 要注册的物品
-     */
-    register(...item: T[]) {
-        item.forEach(v => {
-            this.targets.add(v);
-        });
-        this.emit('register', item);
-        return this;
-    }
-
-    /**
-     * 取消注册物品
-     * @param item 要取消注册的物品
-     */
-    unregister(...item: T[]) {
-        item.forEach(v => {
-            this.targets.delete(v);
-        });
-        this.emit('unregister', item);
-        return this;
-    }
 }
 
 interface GameUiEvent extends EmitableEvent {
@@ -139,6 +115,15 @@ interface GameUiEvent extends EmitableEvent {
     open: () => void;
 }
 
+interface ShowableGameUi {
+    ui: GameUi;
+    vOn?: UiVOn;
+    vBind?: UiVBind;
+}
+
+type UiVOn = Record<string, (param?: any) => void>;
+type UiVBind = Record<string, any>;
+
 export class GameUi extends EventEmitter<GameUiEvent> {
     static uiList: GameUi[] = [];
 
@@ -146,9 +131,6 @@ export class GameUi extends EventEmitter<GameUiEvent> {
     hotkey?: Hotkey;
     id: string;
 
-    vBind: any = {};
-    vOn: Record<string, (...params: any[]) => any> = {};
-
     constructor(id: string, component: Component, hotkey?: Hotkey) {
         super();
         this.component = component;
@@ -158,41 +140,30 @@ export class GameUi extends EventEmitter<GameUiEvent> {
     }
 
     /**
-     * 双向数据绑定，即 vue 内的 v-bind
+     * 根据 v-on 和 v-bind 创建可以显示的 ui 组件
-     * @param data 要绑定的数据
+     * @param vOn 监听的事件
+     * @param vBind 绑定的数据
      */
-    vbind(data: any) {
+    with(vOn?: UiVOn, vBind?: UiVBind): ShowableGameUi {
-        this.vBind = data;
+        return { ui: this, vOn, vBind };
-    }
-
-    /**
-     * 监听这个ui组件所触发的某种事件
-     * @param event 要监听的事件
-     * @param fn 事件触发时执行的函数
-     */
-    von(event: string, fn: (...params: any[]) => any) {
-        this.vOn[event] = fn;
-    }
-
-    /**
-     * 取消监听这个ui组件所触发的某种事件
-     * @param event 要取消监听的事件
-     */
-    voff(event: string) {
-        delete this.vOn[event];
     }
 }
 
-export class UiController extends Focus<GameUi> {
+interface IndexedGameUi extends ShowableGameUi {
+    num: number;
+}
+
+export class UiController extends Focus<IndexedGameUi> {
     static list: UiController[] = [];
     list: Record<string, GameUi> = {};
+    num: number = 0;
 
     constructor(equal?: boolean) {
         super(true, equal);
         UiController.list.push(this);
         this.on('splice', spliced => {
             spliced.forEach(v => {
-                v.emit('close');
+                v.ui.emit('close');
                 if (this.stack.length === 0) {
                     this.emit('end');
                 }
@@ -202,7 +173,7 @@ export class UiController extends Focus<GameUi> {
             if (this.stack.length === 1) {
                 this.emit('start');
             }
-            item.emit('open');
+            item.ui.emit('open');
         });
     }
 
@@ -212,7 +183,7 @@ export class UiController extends Focus<GameUi> {
      * @param e 按键操作事件
      */
     emitKey(key: KeyCode, e: KeyboardEvent) {
-        this.focused?.hotkey?.emitKey(key, e);
+        this.focused?.ui.hotkey?.emitKey(key, e, this.focused);
     }
 
     /**
@@ -225,39 +196,45 @@ export class UiController extends Focus<GameUi> {
 
     /**
      * 关闭一个ui，注意如果不是平等模式，在其之后的ui都会同时关闭掉
-     * @param id 要关闭的ui的id
+     * @param num 要关闭的ui的唯一标识符
      */
-    close(id: string) {
+    close(num: number) {
-        const ui = this.get(id);
+        const ui = this.stack.findIndex(v => v.num === num);
-        if (!ui) return;
+        this.spliceIndex(ui);
-        this.splice(ui);
     }
 
     /**
      * 打开一个新的ui
      * @param id 要打开的ui的id
+     * @param vOn 监听的事件
+     * @param vBind 绑定的数据
+     * @returns ui的唯一标识符
      */
-    open(id: string) {
+    open(id: string, vOn?: UiVOn, vBind?: UiVBind) {
         const ui = this.get(id);
         if (!ui) return;
-        this.add(ui);
+        const num = this.num++;
+        this.add({ num, ...ui.with(vOn, vBind) });
+        return num;
     }
 
-    override register(...item: GameUi[]): this {
+    /**
-        super.register(...item);
+     * 注册一个ui
-        item.forEach(v => {
+     * @param id ui的id
-            this.list[v.id] = v;
+     * @param ui 对应的GameUi实例
-        });
+     */
-
+    resgister(id: string, ui: GameUi) {
-        return this;
+        if (id in this.list) {
+            console.warn(`已存在id为'${id}'的ui，已将其覆盖`);
+        }
+        this.list[id] = ui;
     }
 
-    override unregister(...item: GameUi[]): this {
+    /**
-        super.unregister(...item);
+     * 取消注册一个ui
-        item.forEach(v => {
+     * @param id 要取消注册的ui的id
-            delete this.list[v.id];
+     */
-        });
+    unregister(id: string) {
-
+        delete this.list[id];
-        return this;
     }
 }