refactor: 完全修改dom结构

src/plugin/fallback.ts

@@ -0,0 +1,108 @@
+import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
+import { RenderItem, RenderItemPosition } from '@/core/render/item';
+import { Transform } from '@/core/render/transform';
+
+// 渲染端的向后兼容用，会充当两个版本间过渡的作用
+export class FloorChange extends RenderItem {
+    private tips: string[] = [];
+    /** 当前小贴士 */
+    private usingTip: string = '';
+    /** 透明度 */
+    private alpha: number = 0;
+    private title: string = '';
+
+    constructor(type: RenderItemPosition) {
+        super(type, false);
+    }
+
+    /**
+     * 设置楼传过程中的小贴士
+     */
+    setTips(tip: string[]) {
+        this.tips = tip;
+    }
+
+    /**
+     * 设置标题
+     */
+    setTitle(title: string) {
+        this.title = title;
+    }
+
+    /**
+     * 显示楼层切换的从透明变黑的动画
+     * @param time 动画时长
+     */
+    showChange(time: number) {
+        const length = this.tips.length;
+        const tip = this.tips[Math.floor(Math.random() * length)] ?? '';
+        this.usingTip = tip;
+
+        return new Promise<void>(res => {
+            const start = Date.now();
+            const id = this.delegateTicker(
+                () => {
+                    const dt = Date.now() - start;
+                    const progress = dt / time;
+                    if (progress > 1) {
+                        this.alpha = 1;
+                        this.removeTicker(id);
+                    } else {
+                        this.alpha = progress;
+                    }
+                    this.update();
+                },
+                10000,
+                res
+            );
+        });
+    }
+
+    /**
+     * 显示楼层切换从黑到透明的动画
+     * @param time 动画时长
+     */
+    async hideChange(time: number) {
+        return new Promise<void>(res => {
+            const start = Date.now();
+            const id = this.delegateTicker(
+                () => {
+                    const dt = Date.now() - start;
+                    const progress = dt / time;
+                    if (progress > 1) {
+                        this.removeTicker(id);
+                        this.alpha = 0;
+                    } else {
+                        this.alpha = 1 - progress;
+                    }
+                    this.update();
+                },
+                10000,
+                res
+            );
+        });
+    }
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        transform: Transform
+    ): void {
+        if (this.alpha === 0) return;
+        const ctx = canvas.ctx;
+        ctx.globalAlpha = this.alpha;
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.textAlign = 'center';
+        ctx.fillStyle = '#fff';
+        ctx.font = '32px "normal"';
+        ctx.fillText(this.title, canvas.width / 2, canvas.height * 0.4);
+        ctx.font = '16px "normal"';
+        if (this.usingTip.length > 0) {
+            ctx.fillText(
+                '小贴士:' + this.usingTip,
+                canvas.width / 2,
+                canvas.height * 0.75
+            );
+        }
+    }
+}

src/plugin/game/fiveLayer.ts

@@ -17,22 +17,23 @@ function createCanvas(name, zIndex) {
 }
 
 export function init() {
-    var bg2Canvas = createCanvas('bg2', 20);
-    var fg2Canvas = createCanvas('fg2', 63);
     // 大地图适配
-    core.bigmap.canvas = [
-        'bg2',
-        'fg2',
-        'bg',
-        'event',
-        'event2',
-        'fg',
-        'damage'
-    ];
+
     core.initStatus.bg2maps = {};
     core.initStatus.fg2maps = {};
 
     if (main.mode == 'editor') {
+        var bg2Canvas = createCanvas('bg2', 20);
+        var fg2Canvas = createCanvas('fg2', 63);
+        core.bigmap.canvas = [
+            'bg2',
+            'fg2',
+            'bg',
+            'event',
+            'event2',
+            'fg',
+            'damage'
+        ];
         /*插入编辑器的图层 不做此步新增图层无法在编辑器显示*/
         // 编辑器图层覆盖优先级 eui > efg > fg(前景层) > event2(48*32图块的事件层) > event(事件层) > bg(背景层)
         // 背景层2(bg2) 插入事件层(event)之前(即bg与event之间)

src/plugin/game/ui.ts

@@ -35,30 +35,30 @@ export function init() {
     // todo: 多个状态栏分离与控制
     control.prototype.showStatusBar = function () {
         if (main.mode == 'editor') return;
+        const CustomToolbar = Mota.require('class', 'CustomToolbar');
+        const defaultsTool = CustomToolbar.get('@defaults');
         core.removeFlag('hideStatusBar');
         if (!fixedUi.hasName('statusBar')) {
             fixedUi.open('statusBar');
         }
+        defaultsTool?.show();
     };
 
     control.prototype.hideStatusBar = function (showToolbox) {
         if (main.mode == 'editor') return;
+        const CustomToolbar = Mota.require('class', 'CustomToolbar');
+        const defaultsTool = CustomToolbar.get('@defaults');
 
         // 如果原本就是隐藏的，则先显示
         if (!core.domStyle.showStatusBar) this.showStatusBar();
         if (core.isReplaying()) showToolbox = true;
         fixedUi.closeByName('statusBar');
+        if (!showToolbox) {
+            defaultsTool?.closeAll();
+        }
 
-        var toolItems = core.dom.tools;
         core.setFlag('hideStatusBar', true);
         core.setFlag('showToolbox', showToolbox || null);
-        if (
-            (!core.domStyle.isVertical && !core.flags.extendToolbar) ||
-            !showToolbox
-        ) {
-            for (var i = 0; i < toolItems.length; ++i)
-                toolItems[i].style.display = 'none';
-        }
     };
 }
 

src/plugin/index.ts

@@ -2,7 +2,6 @@ import * as fly from './ui/fly';
 import * as chase from './chase';
 import * as completion from './completion';
 import * as pop from './pop';
-import * as frag from './fx/frag';
 import * as use from './use';
 import * as gameCanvas from './fx/gameCanvas';
 import * as animateController from './animateController';
@@ -14,7 +13,6 @@ Mota.Plugin.register('fly_r', fly);
 Mota.Plugin.register('chase_r', chase);
 Mota.Plugin.register('completion_r', completion, completion.init);
 Mota.Plugin.register('pop_r', pop, pop.init);
-Mota.Plugin.register('frag_r', frag, frag.init);
 Mota.Plugin.register('use_r', use);
 Mota.Plugin.register('gameCanvas_r', gameCanvas);
 Mota.Plugin.register(