refactor: fixedUi迁移

idea.md

@@ -82,7 +82,7 @@ dam4.png ---- 存档 59
 [] 优化 Scroll 组件
 [] 重写技能控制系统
 [] 自定义快捷键
-[] 优化 ui 控制系统
+[x] 优化 ui 控制系统
 [] 优化游戏进程与渲染进程间的通讯
 [] 优化资源分离，音乐放到 bgm 目录下
 [] 一次性道具拾取与清怪

public/project/functions.js

@@ -638,14 +638,14 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
             if (main.replayChecking) return;
 
             // 已学习的技能
-            if (
-                core.plugin.skillTree.getSkillLevel(11) > 0 &&
-                (core.status.hero.special?.num ?? []).length > 0
-            ) {
-                mota.plugin.ui.showStudiedSkill.value = true;
-            } else {
-                mota.plugin.ui.showStudiedSkill.value = false;
-            }
+            // if (
+            //     core.plugin.skillTree.getSkillLevel(11) > 0 &&
+            //     (core.status.hero.special?.num ?? []).length > 0
+            // ) {
+            //     mota.plugin.ui.showStudiedSkill.value = true;
+            // } else {
+            //     mota.plugin.ui.showStudiedSkill.value = false;
+            // }
         },
         moveOneStep: function (callback) {
             // 勇士每走一步后执行的操作。callback为行走完毕后的回调

src/components/colomn.vue

@@ -68,7 +68,7 @@ onMounted(async () => {
     resize();
 
     await sleep(50);
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
     document.addEventListener('keyup', key);
 });
 onUpdated(resize);

src/core/main/setting.ts

@@ -1,6 +1,5 @@
 import { reactive } from 'vue';
 import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
-import { transition } from '@/plugin/uiController';
 import { loading } from '../loader/load';
 import { hook } from './game';
 import { GameStorage } from './storage';
@@ -297,7 +296,7 @@ function handleScreenSetting<T extends number | boolean>(
     } else if (key === 'transition') {
         // 界面动画
         core.setLocalStorage('transition', n);
-        transition.value = n as boolean;
+        // transition.value = n as boolean;
     } else if (key === 'antiAlias') {
         // 抗锯齿
         core.setLocalStorage('antiAlias', n);

src/plugin/game/ui.js

@@ -56,7 +56,9 @@ export {};
     control.prototype.showStatusBar = function () {
         if (main.mode == 'editor') return;
         core.removeFlag('hideStatusBar');
-        mota.plugin.ui.showStatusBar.value = true;
+        if (!mota.ui.fixed.hasName('statusBar')) {
+            mota.ui.fixed.open('statusBar');
+        }
         core.dom.tools.hard.style.display = 'block';
         core.dom.toolBar.style.display = 'block';
     };
@@ -67,7 +69,7 @@ export {};
         // 如果原本就是隐藏的，则先显示
         if (!core.domStyle.showStatusBar) this.showStatusBar();
         if (core.isReplaying()) showToolbox = true;
-        mota.plugin.ui.showStatusBar.value = false;
+        mota.ui.fixed.closeByName('statusBar');
 
         var toolItems = core.dom.tools;
         core.setFlag('hideStatusBar', true);

src/plugin/uiController.ts

@@ -2,20 +2,6 @@ import { ref } from 'vue';
 
 // todo: 优化开启控制器
 
-export const showStatusBar = ref(false);
-export const showStudiedSkill = ref(false);
-export const startOpened = ref(true);
-
-export const transition = ref(true);
-export const noClosePanel = ref(false);
-
-export const startAnimationEnded = ref(false);
-
 export default function init() {
-    return {
-        transition,
-        showStatusBar,
-        showStudiedSkill,
-        startAnimationEnded
-    };
+    return {};
 }

src/types/plugin.d.ts

@@ -168,12 +168,6 @@ interface PluginUtils {
 }
 
 interface PluginUis {
-    /** ui是否使用渐变 */
-    readonly transition: Ref<boolean>;
-
-    /** 是否显示状态栏 */
-    readonly showStatusBar: Ref<boolean>;
-
     /** 是否正在进行章节显示 */
     readonly chapterShowed: Ref<boolean>;
 
@@ -183,9 +177,6 @@ interface PluginUis {
     /** 是否展示标记的怪物 */
     readonly showMarkedEnemy: Ref<boolean>;
 
-    /** 是否展示已学习的技能 */
-    readonly showStudiedSkill: Ref<boolean>;
-
     /** 是否展示移动鼠标显示怪物信息的盒子 */
     readonly showFixed: Ref<boolean>;
 

src/ui/achievement.vue

@@ -98,7 +98,6 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { noClosePanel } from '../plugin/uiController';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import list from '../data/achievement.json';
 import {
@@ -177,12 +176,6 @@ function getAllAchievements(type: AchievementType): ResolvedAchievement[] {
 }
 
 function exit() {
-    // ???
-    try {
-        core.closePanel();
-    } catch {
-        noClosePanel.value = true;
-    }
     mota.ui.main.close(props.num);
 }
 </script>

src/ui/book.vue

@@ -46,7 +46,6 @@ import { getDamageColor, has, keycode } from '../plugin/utils';
 import BookDetail from './bookDetail.vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import { KeyCode } from '../plugin/keyCodes';
-import { noClosePanel } from '../plugin/uiController';
 import { ToShowEnemy, detailInfo } from '../plugin/ui/book';
 import { getDetailedEnemy } from '../plugin/ui/fixed';
 import { GameUi } from '@/core/main/custom/ui';
@@ -118,17 +117,17 @@ async function show() {
  * 退出怪物手册
  */
 async function exit() {
-    noClosePanel.value = true;
+    const hold = mota.ui.main.holdOn();
     mota.ui.main.close(props.num);
-    if (mota.plugin.ui.transition.value) await sleep(650);
-    else await sleep(100);
+    // if (mota.plugin.ui.transition.value) await sleep(650);
+    // else await sleep(100);
     if (core.events.recoverEvents(core.status.event.interval)) {
         return;
     } else if (has(core.status.event.ui)) {
         core.status.boxAnimateObjs = [];
         // @ts-ignore
         core.ui._drawViewMaps(core.status.event.ui);
-    } else core.ui.closePanel();
+    } else hold.end();
 }
 
 function checkScroll() {
@@ -197,8 +196,8 @@ function keydown(e: KeyboardEvent) {
 }
 
 onMounted(async () => {
-    if (mota.plugin.ui.transition.value) await sleep(600);
-    else await sleep(50);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
+    await sleep(50);
     document.addEventListener('keyup', keyup);
     document.addEventListener('keydown', keydown);
 });

src/ui/equipbox.vue

@@ -435,7 +435,6 @@ function dragout(e: Event) {
 }
 
 function toTool() {
-    mota.plugin.ui.transition.value = false;
     mota.ui.main.holdOn();
     exit();
     mota.ui.main.open('toolbox');

src/ui/fly.vue

@@ -614,7 +614,7 @@ onMounted(async () => {
     });
 
     await sleep(50);
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
 
     document.addEventListener('keyup', keyup);
     map.addEventListener('touchstart', touchdown);

src/ui/settings.vue

@@ -182,7 +182,7 @@ function key(e: KeyboardEvent) {
 
 onMounted(async () => {
     await sleep(50);
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
     document.addEventListener('keyup', key);
 });
 

src/ui/shop.vue

@@ -313,7 +313,7 @@ function exit() {
 
 onMounted(async () => {
     await sleep(50);
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
     document.addEventListener('keyup', keyup);
     document.addEventListener('keydown', keydown);
     core.status.route.push(`openShop:${id}`);

src/ui/skillTree.vue

@@ -278,7 +278,7 @@ onMounted(async () => {
     draw();
 
     await sleep(50);
-    if (mota.plugin.ui.transition.value) await sleep(600);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
     canvas.addEventListener('click', click);
     document.addEventListener('keyup', key);
 });

src/ui/toolbox.vue

@@ -172,16 +172,16 @@ function exit() {
     mota.ui.main.close(props.num);
 }
 
-async function use(id: ShowItemIds) {
+function use(id: ShowItemIds) {
     if (id === 'none') return;
     if (core.canUseItem(id)) {
-        // 应该暂时把动画去掉
-        const before = mota.plugin.ui.transition.value;
-        mota.plugin.ui.transition.value = false;
+        const hold = mota.ui.main.holdOn();
         exit();
-        await sleep(50);
-        core.useItem(id);
-        mota.plugin.ui.transition.value = before;
+        core.useItem(id, false, () => {
+            if (mota.ui.main.stack.length === 0) {
+                hold.end();
+            }
+        });
     } else {
         message.warn({
             content: '当前无法使用该道具！',
@@ -240,8 +240,8 @@ function keydown(e: KeyboardEvent) {
 }
 
 onMounted(async () => {
-    if (mota.plugin.ui.transition.value) await sleep(600);
-    else await sleep(50);
+    // if (mota.plugin.ui.transition.value) await sleep(600);
+    await sleep(50);
     document.addEventListener('keyup', keyup);
     document.addEventListener('keydown', keydown);
 });