packages-user/client-modules/src/render/elements/damage.ts

@@ -19,7 +19,6 @@ import {
     Layer,
     calNeedRenderOf
 } from './layer';
-import { MAP_BLOCK_WIDTH, MAP_HEIGHT, MAP_WIDTH } from '../shared';
 
 /**
  * 根据伤害大小获取颜色
@@ -168,9 +167,9 @@ export class Damage extends RenderItem<EDamageEvent> {
     constructor() {
         super('absolute', false, true);
 
-        this.block = new BlockCacher(0, 0, MAP_BLOCK_WIDTH, 1);
+        this.block = new BlockCacher(0, 0, core._WIDTH_, 1);
         this.type = 'absolute';
-        this.size(MAP_WIDTH, MAP_HEIGHT);
+        this.size(core._PX_, core._PY_);
         this.setHD(true);
         this.setAntiAliasing(true);
     }

packages-user/client-modules/src/render/elements/viewport.ts

@@ -3,12 +3,6 @@ import { HeroRenderer } from './hero';
 import { ILayerGroupRenderExtends, LayerGroup } from './layer';
 import { LayerGroupFloorBinder } from './layer';
 import { hyper, TimingFn } from 'mutate-animate';
-import {
-    MAP_BLOCK_HEIGHT,
-    MAP_BLOCK_WIDTH,
-    MAP_HEIGHT,
-    MAP_WIDTH
-} from '../shared';
 
 export class FloorViewport implements ILayerGroupRenderExtends {
     id: string = 'viewport';
@@ -68,8 +62,8 @@ export class FloorViewport implements ILayerGroupRenderExtends {
         this.enabled = true;
         const { x, y } = core.status.hero.loc;
         const { x: nx, y: ny } = this.group.camera;
-        const halfWidth = MAP_WIDTH / 2;
+        const halfWidth = core._PX_ / 2;
-        const halfHeight = MAP_HEIGHT / 2;
+        const halfHeight = core._PY_ / 2;
         const cell = this.group.cellSize;
         const half = cell / 2;
         this.applyPosition(
@@ -100,8 +94,8 @@ export class FloorViewport implements ILayerGroupRenderExtends {
     getBoundedPosition(x: number, y: number) {
         if (!this.checkDependency()) return { x, y };
         if (!this.boundX && !this.boundY) return { x, y };
-        const width = MAP_BLOCK_WIDTH;
+        const width = core._WIDTH_;
-        const height = MAP_BLOCK_HEIGHT;
+        const height = core._HEIGHT_;
         const minX = (width - 1) / 2;
         const minY = (height - 1) / 2;
         const floor = core.status.maps[this.binder!.getFloor()];
@@ -207,7 +201,7 @@ export class FloorViewport implements ILayerGroupRenderExtends {
             this.applyPosition(nx, ny);
 
             if (ending) {
-                if (this.ox === xTarget && this.oy === yTarget) {
+                if (this.ox === xTarget && this.oy == yTarget) {
                     this.hero!.off('moveTick', this.movingFramer);
                     return;
                 }
@@ -282,8 +276,8 @@ export class FloorViewport implements ILayerGroupRenderExtends {
     private applyPosition(x: number, y: number) {
         if (!this.enabled) return;
         if (x === this.nx && y === this.ny) return;
-        const halfWidth = MAP_WIDTH / 2;
+        const halfWidth = core._PX_ / 2;
-        const halfHeight = MAP_HEIGHT / 2;
+        const halfHeight = core._PY_ / 2;
         const cell = this.group.cellSize;
         const half = cell / 2;
         this.nx = x;

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

@@ -9,7 +9,6 @@ import {
     LayerGroupFloorBinder,
     FloorViewport
 } from './elements';
-import { MAP_WIDTH } from './shared';
 
 const loopMaps = MiscData.loopMaps;
 
@@ -72,13 +71,13 @@ function enableLoopMapElement(floorId: FloorIds) {
             // 这个是计算循环地图应该显示在哪
             const [, y2] = transform.transformed(x1 - testPos, 0);
             camera.reset();
-            camera.translate(MAP_WIDTH - testPos, y2);
+            camera.translate(core._PX_ - testPos, y2);
-            loopLayer.pos(transform.x - MAP_WIDTH, 0);
+            loopLayer.pos(transform.x - core._PX_, 0);
             loopLayer.show();
             loopLayer.update(loopLayer);
         } else {
             const [x2, y2] = transform.transformed(testPos, 0);
-            if (x2 < MAP_WIDTH) {
+            if (x2 < core._PX_) {
                 // 这个不用做其他运算，可以直接显示
                 camera.reset();
                 camera.translate(0, y2);

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

@@ -8,9 +8,9 @@ import { Font } from '@motajs/render-style';
 /** 每个格子的宽高 */
 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;
 /** 地图像素高度 */
@@ -29,7 +29,7 @@ export const STATUS_BAR_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
 /** 右侧状态栏的横坐标 */
 export const RIGHT_STATUS_POS = STATUS_BAR_WIDTH + MAP_WIDTH;
 /** 是否启用右侧状态栏 */
-export const ENABLE_RIGHT_STATUS_BAR = false;
+export const ENABLE_RIGHT_STATUS_BAR = true;
 /** 状态栏数量，启用右侧状态栏为两个，不启用为一个 */
 export const STATUS_BAR_COUNT = ENABLE_RIGHT_STATUS_BAR ? 2 : 1;
 /** 状态栏宽度的一半 */
@@ -75,7 +75,7 @@ export const SAVE_ITEM_DOWN = 24;
 /** 单个存档高度，包括存档下方的信息 */
 export const SAVE_ITEM_HEIGHT = SAVE_ITEM_SIZE + SAVE_ITEM_TOP + SAVE_ITEM_DOWN;
 /** 存档间距 */
-export const SAVE_INTERVAL = 20;
+export const SAVE_INTERVAL = 30;
 /** 存档下巴高度，即下方显示页码和返回按钮的高度 */
 export const SAVE_DOWN_PAD = 30;
 /** 存档页码数，调高并不会影响性能，但是如果玩家存档太多的话会导致存档体积很大 */

packages-user/client-modules/src/render/ui/main.tsx

@@ -108,25 +108,14 @@ const MainScene = defineComponent(() => {
     });
     const leftStatus: ILeftHeroStatus = reactive({
         hp: 0,
-        hpmax: 0,
-        mana: 0,
-        manamax: 0,
         atk: 0,
         def: 0,
         mdef: 0,
         money: 0,
         exp: 0,
-        up: 0,
         yellowKey: 0,
         blueKey: 0,
         redKey: 0,
-        greenKey: 0,
-        pickaxe: 0,
-        bomb: 0,
-        centerFly: 0,
-        poison: false,
-        weak: false,
-        curse: false,
         floor: 'MT0',
         lv: '',
         replay: replayStatus
@@ -143,24 +132,13 @@ const MainScene = defineComponent(() => {
         const hero = core.status.hero;
         leftStatus.atk = getHeroStatusOn('atk');
         leftStatus.hp = getHeroStatusOn('hp');
-        leftStatus.hpmax = getHeroStatusOn('hpmax');
-        leftStatus.mana = getHeroStatusOn('mana');
-        leftStatus.manamax = getHeroStatusOn('manamax');
         leftStatus.def = getHeroStatusOn('def');
         leftStatus.mdef = getHeroStatusOn('mdef');
         leftStatus.money = getHeroStatusOn('money');
-        leftStatus.exp = getHeroStatusOn('exp');
+        leftStatus.exp = core.getNextLvUpNeed() ?? 0;
-        leftStatus.up = core.getNextLvUpNeed() ?? 0;
         leftStatus.yellowKey = core.itemCount('yellowKey');
         leftStatus.blueKey = core.itemCount('blueKey');
         leftStatus.redKey = core.itemCount('redKey');
-        leftStatus.greenKey = core.itemCount('greenKey');
-        leftStatus.pickaxe = core.itemCount('pickaxe');
-        leftStatus.bomb = core.itemCount('bomb');
-        leftStatus.centerFly = core.itemCount('centerFly');
-        leftStatus.poison = core.getFlag('poison', true);
-        leftStatus.weak = core.getFlag('weak', true);
-        leftStatus.curse = core.getFlag('curse', true);
         leftStatus.floor = core.status.floorId;
         leftStatus.lv = core.getLvName(hero.lv);
 

packages-user/client-modules/src/render/ui/statusBar.tsx

@@ -1,68 +1,29 @@
 import { GameUI, SetupComponentOptions } from '@motajs/system-ui';
-import { computed, ComputedRef, defineComponent, shallowReactive } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { TextContent } from '../components';
+import { DefaultProps, ElementLocator, Font } from '@motajs/render';
 import {
-    DefaultProps,
+    NumpadToolbar,
-    ElementLocator,
+    PlayingToolbar,
-    Font,
+    ReplayingStatus,
-    SizedCanvasImageSource
+    ReplayingToolbar
-} from '@motajs/render';
+} from './toolbar';
-import { MixedToolbar, ReplayingStatus } from './toolbar';
 import { openViewMap } from './viewmap';
 import { mainUIController } from './controller';
-import {
+import { MAIN_HEIGHT, STATUS_BAR_WIDTH } from '../shared';
-    MAIN_HEIGHT,
-    MAIN_WIDTH,
-    STATUS_BAR_HEIGHT,
-    STATUS_BAR_WIDTH
-} from '../shared';
 
 export interface ILeftHeroStatus {
-    /** 楼层 id */
-    floor: FloorIds;
-    /** 等级名称 */
-    lv: string;
-    /** 生命值 */
     hp: number;
-    /** 生命上限 */
-    hpmax: number;
-    /** 魔力值 */
-    mana: number;
-    /** 魔力上限 */
-    manamax: number;
-    /** 攻击力 */
     atk: number;
-    /** 防御力 */
     def: number;
-    /** 魔防（护盾） */
     mdef: number;
-    /** 金币 */
     money: number;
-    /** 经验值 */
     exp: number;
-    /** 距离升级剩余经验 */
-    up: number;
-    /** 黄钥匙数量 */
     yellowKey: number;
-    /** 蓝钥匙数量 */
     blueKey: number;
-    /** 红钥匙数量 */
     redKey: number;
-    /** 绿钥匙数量 */
+    floor: FloorIds;
-    greenKey: number;
+    lv: string;
-    /** 破数量 */
-    pickaxe: number;
-    /** 炸数量 */
-    bomb: number;
-    /** 飞数量 */
-    centerFly: number;
-    /** 是否中毒 */
-    poison: boolean;
-    /** 是否中衰 */
-    weak: boolean;
-    /** 是否中咒 */
-    curse: boolean;
-    /** 录像状态 */
     replay: ReplayingStatus;
 }
 
@@ -71,31 +32,6 @@ export interface IRightHeroStatus {
     exampleHard: number;
 }
 
-interface StatusInfo {
-    /** 图标 */
-    icon: SizedCanvasImageSource;
-    /** 属性值，经过格式化 */
-    value: ComputedRef<string>;
-    /** 字体 */
-    font: Font;
-    /** 文字颜色 */
-    color: CanvasStyle;
-}
-
-interface KeyLikeItem {
-    /** 属性值，经过格式化 */
-    value: ComputedRef<string>;
-    /** 字体 */
-    font: Font;
-    /** 文字颜色 */
-    color: CanvasStyle;
-}
-
-interface KeyLikeInfo {
-    /** 这一行包含的内容 */
-    items: KeyLikeItem[];
-}
-
 interface StatusBarProps<T> extends DefaultProps {
     loc: ElementLocator;
     status: T;
@@ -108,336 +44,96 @@ const statusBarProps = {
 
 export const LeftStatusBar = defineComponent<StatusBarProps<ILeftHeroStatus>>(
     p => {
-        //#region 参数定义
+        const hpIcon = core.material.images.images['hp.png'];
-
+        const atkIcon = core.material.images.images['atk.png'];
-        /** 属性文字的横坐标 */
+        const defIcon = core.material.images.images['def.png'];
-        const TEXT_X = 54;
+        const mdefIcon = core.material.images.images['IQ.png'];
-        /** 图标的横坐标 */
+        const moneyIcon = core.material.images.images['money.png'];
-        const STATUS_PAD = 8;
+        const expIcon = core.material.images.images['exp.png'];
-        /** 楼层名称的高度 */
-        const TITLE_HEIGHT = 36;
-        /** 状态属性的开始纵坐标 */
-        const STATUS_Y = TITLE_HEIGHT + STATUS_PAD;
-
-        // 可以换成 core.material.images.images['xxx.png'] 来使用全塔属性注册的图片
-        const hpIcon = core.statusBar.icons.hp;
-        const atkIcon = core.statusBar.icons.atk;
-        const defIcon = core.statusBar.icons.def;
-        const mdefIcon = core.statusBar.icons.mdef;
-        const moneyIcon = core.statusBar.icons.money;
-        const expIcon = core.statusBar.icons.exp;
-        const manaIcon = core.statusBar.icons.mana;
-        const lvIcon = core.statusBar.icons.lv;
 
         const s = p.status;
+        const f = core.formatBigNumber;
 
-        /** 常规字体 */
+        const inNumpad = ref(false);
-        const font1 = Font.defaults({ size: 18 });
-        /** 加粗字体 */
-        const font2 = Font.defaults({ size: 18, weight: 700 });
 
-        /** 楼层名 */
         const floorName = computed(() => core.floors[s.floor]?.title ?? '');
 
-        /** 钥匙显示文字 */
         const key = (num: number) => {
             return num.toString().padStart(2, '0');
         };
 
-        //#region 属性显示
+        const onNumpad = () => {
+            inNumpad.value = !inNumpad.value;
+        };
 
-        /** 一般属性 */
+        const font1 = Font.defaults({ size: 18 });
-        const statusInfo: StatusInfo[] = shallowReactive([]);
+        const font2 = Font.defaults({ size: 18, weight: 700 });
-        /** 钥匙属性 */
-        const keyLike: KeyLikeInfo[] = shallowReactive([]);
 
-        // 根据全塔属性配置显示属性
+        const iconLoc = (n: number): ElementLocator => {
-        // 如果你想修改状态栏显示，不建议修改这里的内容，而建议直接新增标签
+            return [16, 76 + 44 * n, 32, 32];
-        // 这里的内容是为使用样板默认状态栏的人准备的，对于新增属性来说过于复杂，而且功能有限，对于新手来说也难以理解
+        };
-        // 可以参考说明文档中的常见需求指南中的新增状态教程
 
-        const list = core.flags.statusBarItems;
+        const textLoc = (n: number): ElementLocator => {
+            return [60, 92 + 44 * n, void 0, void 0, 0, 0.5];
+        };
 
-        // 等级
-        if (list.includes('enableLv')) {
-            statusInfo.push({
-                icon: lvIcon,
-                value: computed(() => s.lv),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 生命值
-        if (list.includes('enableHP')) {
-            if (list.includes('enableHPMax')) {
-                // 如果启用血限
-                statusInfo.push({
-                    icon: hpIcon,
-                    value: computed(() => {
-                        const hp = core.formatBigNumber(s.hp);
-                        const hpmax = core.formatBigNumber(s.hpmax);
-                        return `${hp} / ${hpmax}`;
-                    }),
-                    font: font1,
-                    color: '#fff'
-                });
-            } else {
-                // 如果禁用血限
-                statusInfo.push({
-                    icon: hpIcon,
-                    value: computed(() => core.formatBigNumber(s.hp)),
-                    font: font1,
-                    color: '#fff'
-                });
-            }
-        }
-
-        // 魔力
-        if (list.includes('enableMana')) {
-            statusInfo.push({
-                icon: manaIcon,
-                value: computed(() => {
-                    const mana = core.formatBigNumber(s.mana);
-                    const manamax = core.formatBigNumber(s.manamax);
-                    if (s.manamax > 0) {
-                        // 如果启用魔力上限
-                        return `${mana} / ${manamax}`;
-                    } else {
-                        // 如果禁用魔力上限
-                        return mana;
-                    }
-                }),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 攻击力
-        if (list.includes('enableAtk')) {
-            statusInfo.push({
-                icon: atkIcon,
-                value: computed(() => core.formatBigNumber(s.atk)),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 防御力
-        if (list.includes('enableDef')) {
-            statusInfo.push({
-                icon: defIcon,
-                value: computed(() => core.formatBigNumber(s.def)),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 魔防（护盾）
-        if (list.includes('enableMdef')) {
-            statusInfo.push({
-                icon: mdefIcon,
-                value: computed(() => core.formatBigNumber(s.mdef)),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 金币
-        if (list.includes('enableMoney')) {
-            statusInfo.push({
-                icon: moneyIcon,
-                value: computed(() => core.formatBigNumber(s.money)),
-                font: font1,
-                color: '#fff'
-            });
-        }
-
-        // 经验值
-        if (list.includes('enableExp')) {
-            if (list.includes('enableLevelUp')) {
-                // 升级模式
-                statusInfo.push({
-                    icon: expIcon,
-                    value: computed(() => core.formatBigNumber(s.up)),
-                    font: font1,
-                    color: '#fff'
-                });
-            } else {
-                // 非升级模式
-                statusInfo.push({
-                    icon: expIcon,
-                    value: computed(() => core.formatBigNumber(s.exp)),
-                    font: font1,
-                    color: '#fff'
-                });
-            }
-        }
-
-        // 钥匙
-        if (list.includes('enableKeys')) {
-            const keys: KeyLikeItem[] = [];
-            keyLike.push({ items: keys });
-            // 黄钥匙
-            keys.push({
-                value: computed(() => key(s.yellowKey)),
-                font: font2,
-                color: '#fca'
-            });
-            // 蓝钥匙
-            keys.push({
-                value: computed(() => key(s.blueKey)),
-                font: font2,
-                color: '#aad'
-            });
-            // 红钥匙
-            keys.push({
-                value: computed(() => key(s.redKey)),
-                font: font2,
-                color: '#f88'
-            });
-            // 绿钥匙
-            if (list.includes('enableGreenKey')) {
-                keys.push({
-                    value: computed(() => key(s.greenKey)),
-                    font: font2,
-                    color: '#8f8'
-                });
-            }
-        }
-
-        // 破炸飞
-        if (list.includes('enablePZF')) {
-            const items: KeyLikeItem[] = [];
-            keyLike.push({ items });
-            items.push({
-                value: computed(() => `破 ${s.pickaxe}`),
-                font: font1,
-                color: '#bc6e27'
-            });
-            items.push({
-                value: computed(() => `炸 ${s.bomb}`),
-                font: font1,
-                color: '#fa14b9'
-            });
-            items.push({
-                value: computed(() => `飞 ${s.centerFly}`),
-                font: font1,
-                color: '#8db600'
-            });
-        }
-
-        // 毒衰咒
-        if (list.includes('enableDebuff')) {
-            const debuffs: KeyLikeItem[] = [];
-            keyLike.push({ items: debuffs });
-            debuffs.push({
-                value: computed(() => (s.poison ? '毒' : '')),
-                font: font1,
-                color: '#affca8'
-            });
-            debuffs.push({
-                value: computed(() => (s.weak ? '衰' : '')),
-                font: font1,
-                color: '#feccd0'
-            });
-            debuffs.push({
-                value: computed(() => (s.curse ? '咒' : '')),
-                font: font1,
-                color: '#c2f4e7'
-            });
-        }
-
-        //#region 布局控制
-
-        /** 用于显示状态的高度，高度=状态栏高度-工具栏高度-楼层名高度-填充高度 */
-        const statusHeight =
-            STATUS_BAR_HEIGHT - 113 - TITLE_HEIGHT - STATUS_PAD * 2;
-
-        /** 每一行的高度 */
-        const rowHeight = computed(() => {
-            const length = statusInfo.length + keyLike.length;
-            return statusHeight / length;
-        });
-        /** 钥匙、破炸飞、毒衰咒开始显示的纵坐标 */
-        const keyStart = computed(() => {
-            const statusHeight = statusInfo.length * rowHeight.value;
-            return STATUS_Y + statusHeight;
-        });
-
-        /**
-         * 左右居中布局
-         * @param y 纵坐标
-         */
         const central = (y: number): ElementLocator => {
             const width = p.loc[2] ?? 200;
             return [width / 2, y, void 0, void 0, 0.5, 0.5];
         };
 
-        /**
+        const keyCount = 3;
-         * 点击楼层名打开浏览地图
+        const keyY = 92 + 44 * 6;
-         */
+        const keyLoc = (n: number): ElementLocator => {
+            const width = p.loc[2] ?? 200;
+            const per = width / (keyCount + 1);
+            return [per * (n + 1), keyY, void 0, void 0, 0.5, 0.5];
+        };
+
         const viewMap = () => {
-            openViewMap(mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
+            openViewMap(mainUIController, [0, 0, 840, 480]);
         };
 
         return () => (
             <container loc={p.loc} hidden={p.hidden}>
                 <text
                     text={floorName.value}
-                    loc={central(18)}
+                    loc={central(24)}
                     font={font1}
                     cursor="pointer"
                     onClick={viewMap}
                 ></text>
-                <g-line
+                <text text={s.lv} loc={central(54)} font={font1}></text>
-                    lineWidth={1}
+                <image image={hpIcon} loc={iconLoc(0)}></image>
-                    strokeStyle="#888"
+                <text text={f(s.hp)} loc={textLoc(0)} font={font1}></text>
-                    line={[0, TITLE_HEIGHT, STATUS_BAR_WIDTH, TITLE_HEIGHT]}
+                <image image={atkIcon} loc={iconLoc(1)}></image>
-                />
+                <text text={f(s.atk)} loc={textLoc(1)} font={font1}></text>
-                {statusInfo
+                <image image={defIcon} loc={iconLoc(2)}></image>
-                    .map((v, i) => {
+                <text text={f(s.def)} loc={textLoc(2)} font={font1}></text>
-                        const h = rowHeight.value;
+                <image image={mdefIcon} loc={iconLoc(3)}></image>
-                        const y = STATUS_Y + i * h;
+                <text text={f(s.mdef)} loc={textLoc(3)} font={font1}></text>
-                        const cy = y + h / 2;
+                <image image={moneyIcon} loc={iconLoc(4)}></image>
-                        const iconSize = Math.min(32, h * 0.8);
+                <text text={f(s.money)} loc={textLoc(4)} font={font1} />
-                        const pad = (h - iconSize) / 2;
+                <image image={expIcon} loc={iconLoc(5)}></image>
-                        return [
+                <text text={f(s.exp)} loc={textLoc(5)} font={font1}></text>
-                            <image
-                                loc={[STATUS_PAD, y + pad, iconSize, iconSize]}
-                                image={v.icon}
-                                noanti // 取消抗锯齿
-                            />,
                 <text
-                                loc={[TEXT_X, cy]}
+                    text={key(s.yellowKey)}
-                                anc={[0, 0.5]}
+                    loc={keyLoc(0)}
-                                text={v.value.value}
+                    font={font2}
-                                fillStyle={v.color}
+                    fillStyle="#fca"
-                                font={v.font}
+                ></text>
-                            />
-                        ];
-                    })
-                    .flat()}
-                {keyLike
-                    .map(({ items }, i) => {
-                        const h = rowHeight.value;
-                        const y = keyStart.value + i * h;
-                        const cy = y + h / 2;
-                        const rw = STATUS_BAR_WIDTH / (items.length + 1);
-                        return items.map((v, i) => {
-                            const x = rw * (i + 1);
-                            return (
                 <text
-                                    loc={[x, cy]}
+                    text={key(s.blueKey)}
-                                    anc={[0.5, 0.5]}
+                    loc={keyLoc(1)}
-                                    text={v.value.value}
+                    font={font2}
-                                    font={v.font}
+                    fillStyle="#aad"
-                                    fillStyle={v.color}
+                ></text>
-                                />
+                <text
-                            );
+                    text={key(s.redKey)}
-                        });
+                    loc={keyLoc(2)}
-                    })
+                    font={font2}
-                    .flat()}
+                    fillStyle="#f88"
+                ></text>
                 <g-line
                     lineWidth={1}
                     strokeStyle="#888"
@@ -448,10 +144,22 @@ export const LeftStatusBar = defineComponent<StatusBarProps<ILeftHeroStatus>>(
                         MAIN_HEIGHT - 113
                     ]}
                 />
-                <MixedToolbar
+                {inNumpad.value ? (
+                    <NumpadToolbar
+                        loc={[0, MAIN_HEIGHT - 113, STATUS_BAR_WIDTH, 113]}
+                        onNumpad={onNumpad}
+                    />
+                ) : s.replay.replaying ? (
+                    <ReplayingToolbar
                         loc={[0, MAIN_HEIGHT - 113, STATUS_BAR_WIDTH, 113]}
                         status={s.replay}
                     />
+                ) : (
+                    <PlayingToolbar
+                        loc={[0, MAIN_HEIGHT - 113, STATUS_BAR_WIDTH, 113]}
+                        onNumpad={onNumpad}
+                    />
+                )}
             </container>
         );
     },

packages-user/client-modules/src/render/ui/toolbar.tsx

@@ -1,6 +1,7 @@
 import { DefaultProps, ElementLocator, Font } from '@motajs/render';
 import { computed, defineComponent, ref } from 'vue';
 import {
+    DanmakuIcon,
     DoubleArrow,
     NumpadIcon,
     PauseIcon,
@@ -11,7 +12,7 @@ import {
     StepForward,
     ViewMapIcon
 } from '../components/icons';
-import { getVitualKeyOnce } from '@motajs/legacy-ui';
+import { getVitualKeyOnce, openDanmakuPoster } from '@motajs/legacy-ui';
 import { gameKey } from '@motajs/system-action';
 import { generateKeyboardEvent } from '@motajs/system-action';
 import { transitioned } from '../use';
@@ -112,6 +113,7 @@ export const PlayingToolbar = defineComponent<
     const view = () => {
         openViewMap(mainUIController, FULL_LOC);
     };
+    const danmaku = () => requestAnimationFrame(openDanmakuPoster);
     const replay = () => core.ui._drawReplay();
     const settings = () => {
         const loc = CENTER_LOC.slice() as ElementLocator;
@@ -134,6 +136,7 @@ export const PlayingToolbar = defineComponent<
             <RetweetIcon loc={ic(4, 1)} strokeStyle="#eee" onClick={redo} />
             <NumpadIcon loc={ic(0, 2)} strokeStyle="#eee" onClick={numpad} />
             <ViewMapIcon loc={ic(1, 2)} strokeStyle="#eee" onClick={view} />
+            <DanmakuIcon loc={ic(2, 2)} strokeStyle="#eee" onClick={danmaku} />
             <ReplayIcon loc={ic(3, 2)} strokeStyle="#eee" onClick={replay} />
             <text text="R" loc={middle(3, 2)} font={iconFont} noevent />
             <image image={setIcon} loc={im(4, 2)} noanti onClick={settings} />
@@ -152,6 +155,8 @@ export interface ReplayingStatus {
     played: number;
     /** 总长度 */
     total: number;
+    /** 是否是录像模式 */
+    replaying: boolean;
 }
 
 export interface ReplayingProps extends ToolbarProps {

public/_server/table/data.comment.js

@@ -528,7 +528,9 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
 					"_type": "checkboxSet",
 					"_checkboxSet": {
 						"prefix": [
-							"等级",
+							"楼层",
+							"名字",
+							"<br>等级",
 							"血限",
 							"<br>生命",
 							"魔力",
@@ -538,12 +540,16 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
 							"金币",
 							"<br>经验",
 							"升级",
+							"<br>升级扣除模式",
 							"<br>钥匙",
 							"绿钥",
 							"<br>破炸",
-							"负面"
+							"负面",
+							"<br>技能"
 						],
 						"key": [
+							"enableFloor",
+							"enableName",
 							"enableLv",
 							"enableHPMax",
 							"enableHP",
@@ -554,10 +560,12 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
 							"enableMoney",
 							"enableExp",
 							"enableLevelUp",
+							"levelUpLeftMode",
 							"enableKeys",
 							"enableGreenKey",
 							"enablePZF",
-							"enableDebuff"
+							"enableDebuff",
+							"enableSkill"
 						]
 					},
 					"_data": "状态栏显示项"

public/project/data.js

@@ -803,12 +803,16 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
 	},
 	"flags": {
 		"statusBarItems": [
+			"enableFloor",
+			"enableLv",
 			"enableHP",
 			"enableAtk",
 			"enableDef",
 			"enableMDef",
 			"enableMoney",
 			"enableExp",
+			"enableLevelUp",
+			"levelUpLeftMode",
 			"enableKeys"
 		],
 		"flyNearStair": false,
@@ -832,7 +836,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
 		"enableRouteFolding": true,
 		"disableShopOnDamage": false,
 		"blurFg": true,
-		"extendToolbar": false,
+		"extendToolbar": true,
 		"enableEnemyPoint": null,
 		"autoScale": true
 	}