refactor: UI 挪到 src

packages-user/client-base/src/index.ts

@@ -1,9 +1,10 @@
+export * from './components';
+export * from './elements';
+export * from './layout';
+export * from './map';
 export * from './material';
 export * from './save';
 
-export * from './types';
-export * from './layout';
 export * from './shared';
-export * from './components';
-export * from './elements';
-export * from './map';
+export * from './types';
+export * from './utils';

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

@@ -42,7 +42,7 @@ import {
 import { IRendererUsing, RendererUsing } from '@motajs/render-vue';
 import { IUIController, UIController } from '@motajs/system';
 import { createApp } from './render';
-import { LoadSceneUI } from './ui/load';
+import { LoadSceneUI } from '../../../src/client/ui/load';
 import { createUIPropsBase } from './ui/func';
 
 export class ClientCore extends CoreState implements IClientCore {

packages-user/client-modules/src/index.ts

@@ -10,6 +10,4 @@ export * from './ui';
 
 export * from './client';
 export * from './common';
-export * from './core';
-export * from './shared';
 export * from './types';

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

@@ -1,38 +0,0 @@
-import { gameKey } from '@motajs/system';
-import { POP_BOX_WIDTH, CENTER_LOC, FULL_LOC } from '../shared';
-import {
-    saveSave,
-    mainUIController,
-    saveLoad,
-    openSettings,
-    openViewMap,
-    openReplay,
-    openStatistics
-} from '../ui';
-import { ElementLocator } from '@motajs/render';
-
-export function createAction() {
-    gameKey
-        .realize('save', () => {
-            saveSave(mainUIController, FULL_LOC);
-        })
-        .realize('statistics', () => {
-            openStatistics(mainUIController);
-        })
-        .realize('load', () => {
-            saveLoad(mainUIController, FULL_LOC);
-        })
-        .realize('menu', () => {
-            const loc = CENTER_LOC.slice() as ElementLocator;
-            loc[2] = POP_BOX_WIDTH;
-            openSettings(mainUIController, loc);
-        })
-        .realize('replay', () => {
-            const loc = CENTER_LOC.slice() as ElementLocator;
-            loc[2] = POP_BOX_WIDTH;
-            openReplay(mainUIController, loc);
-        })
-        .realize('viewMap', () => {
-            openViewMap(mainUIController, FULL_LOC);
-        });
-}

packages-user/client-modules/src/render/index.tsx

@@ -1,38 +1,7 @@
-import { Font } from '@motajs/render';
-import { defineComponent } from 'vue';
-import { DEFAULT_FONT, MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
 import { createElements } from '@user/client-base';
-import { mainRenderer } from './renderer';
-import { createUI } from '../ui';
-import { createAction } from './action';
-import { sceneController } from './scene';
-import { createWeather } from './weather';
-import { createApp } from './renderer';
-import { LoadSceneUI } from '../ui/load';
-
-export function createGameRenderer() {
-    const App = defineComponent(_props => {
-        return () => (
-            <container width={MAIN_WIDTH} height={MAIN_HEIGHT}>
-                {sceneController.render()}
-            </container>
-        );
-    });
-
-    mainRenderer.hide();
-    createApp(App).mount(mainRenderer);
-
-    sceneController.open(LoadSceneUI, {});
-    mainRenderer.show();
-}
 
 export function createRender() {
     createElements();
-    createUI();
-    createAction();
-    createWeather();
-
-    Font.setDefaults(DEFAULT_FONT);
 }
 
 export * from './fx';

packages-user/client-modules/src/render/weather/index.ts

@@ -1,20 +1,3 @@
-import { WeatherController } from './controller';
-import {
-    CloudWeather,
-    FogWeather,
-    RainWeather,
-    SnowWeather,
-    SunWeather
-} from './presets';
-
-export function createWeather() {
-    WeatherController.register('cloud', CloudWeather);
-    WeatherController.register('rain', RainWeather);
-    WeatherController.register('snow', SnowWeather);
-    WeatherController.register('sun', SunWeather);
-    WeatherController.register('fog', FogWeather);
-}
-
 export * from './presets';
 export * from './controller';
 export * from './types';

packages-user/client-modules/src/types.ts

@@ -77,3 +77,8 @@ export interface IClientCore extends IClientSystem {
         id: string
     ): Readonly<IClientPlugin<T>> | null;
 }
+
+export interface IClientCoreExtended {
+    /** 渲染端主对象 */
+    readonly state: IClientCore;
+}

packages-user/client-modules/src/ui/func.ts

@@ -5,6 +5,7 @@ import {
     UIPropsBaseCreator
 } from '@motajs/system';
 import { IClientBase, IGameUIPropsBase } from '@user/client-base';
+import { markRaw } from 'vue';
 
 /**
  * 创建游戏 UI 基础参数的构造函数
@@ -20,7 +21,7 @@ export function createUIPropsBase(
         return {
             instance,
             controller,
-            state
+            state: markRaw(state)
         };
     };
 }

packages-user/client-modules/src/ui/index.ts

@@ -1,17 +1,2 @@
-import { createMainController } from './controller';
-
-export function createUI() {
-    createMainController();
-}
-
 export * from './types';
-export * from './save';
-export * from './statistics';
-export * from './viewmap';
-export * from './controller';
-export * from './background';
 export * from './func';
-export * from './main';
-export * from './settings';
-export * from './statusBar';
-export * from './toolbar';

src/bootstrap.ts

@@ -1,7 +1,7 @@
 import { WebLoadStarter } from '@motajs/loader';
 import { createClientCore } from './client/entry';
 import { IClientCore } from '@user/client-modules';
-import { LoadSceneUI } from '../packages-user/client-modules/src/ui/load';
+import { LoadSceneUI } from './client/ui/load';
 
 declare global {
     interface Window {

src/client/constant.ts

@@ -1,17 +1,8 @@
-import { FaceGroup } from '@user/data-common';
+import { MAIN_HEIGHT, MAIN_WIDTH } from './ui';
 
 // 本文件是游戏的底层核心配置，如果不懂的话千万不要动
 
-//#region 数据端配置
-
-/** 数据端核心配置对象，不懂的话就不要动 */
-export const CORE_URL = 'content/core.jsonc';
-/** 勇士的默认朝向组，用于控制勇士的移动，不懂的话就不要动 */
-export const HERO_FACE = FaceGroup.Dir8;
-
-//#endregion
-
-//#region 渲染端配置
+//#region 常规配置
 
 /** 渲染端的渲染画布，不懂的话就不要动 */
 export const RENDER_CANVAS = '#render-main';
@@ -22,16 +13,16 @@ export const TILESET_RESERVE = 100000;
 /** 一个 Tileset 的图块数量单位，例如 10000 时表示一个 Tileset 会占用 10000 或 10000 的倍数个图块，不懂的话不要动 */
 export const TILESET_UNIT = 10000;
 
-// 关于渲染的其他配置可在 ./client/ui/config.ts 中修改，
+// 关于渲染的其他配置可在 ./ui/constant.ts 中修改，
 // 关于高级渲染设置，请参考样板使用文档，那里会进行更详细的讲解。
-/** 渲染器的渲染宽度，默认为地图宽度 416 + 左侧状态栏宽度 180 */
-export const RENDER_WIDTH = 416 + 180;
-/** 渲染器的渲染高度，默认为地图高度 416 */
-export const RENDER_HEIGHT = 416;
+/** 渲染器的渲染宽度，默认为 UI 配置中的整体宽度 */
+export const RENDER_WIDTH = MAIN_WIDTH;
+/** 渲染器的渲染高度，默认为 UI 配置中的整体高度 */
+export const RENDER_HEIGHT = MAIN_HEIGHT;
 
 //#endregion
 
-//#region 渲染端调试配置
+//#region 调试配置
 
 /**
  * 渲染器的激励源是否使用变速器，使用后可以通过 {@link VARIATOR_DEBUG_SPEED} 调整激励源速度，

src/client/entry.ts

@@ -11,7 +11,7 @@ import {
     RENDER_WIDTH,
     TILESET_RESERVE,
     TILESET_UNIT
-} from '../constant';
+} from './constant';
 import { createCoreStateConfig } from '../data/entry';
 import { MainClientPlugin } from './initialize';
 import { clientPlugins } from './plugin';

src/client/index.ts

@@ -0,0 +1,3 @@
+export * from './constant';
+export * from './entry';
+export * from './initialize';

src/client/ui/background.tsx

@@ -5,7 +5,7 @@ import {
 } from '@motajs/system';
 import { DefaultProps } from '@motajs/render-vue';
 import { defineComponent } from 'vue';
-import { MAIN_WIDTH, MAIN_HEIGHT } from '../shared';
+import { MAIN_HEIGHT, MAIN_WIDTH } from './constant';
 
 export interface MainBackgroundProps
     extends DefaultProps, IUIDefaultPropsBase {}

src/client/ui/book.tsx

@@ -7,8 +7,8 @@ import { IEnemyView } from '@user/data-system';
 import { IReadonlyEnemy } from '@user/data-base';
 import { IEnemyAttr } from '@user/data-common';
 import { BookDetailUI } from './bookDetail';
-import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
-import { IUIPropsBase } from './types';
+import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
+import { IUIPropsBase } from '@user/client-modules';
 
 export interface BookProps extends IUIPropsBase {}
 

src/client/ui/bookDetail.tsx

@@ -6,8 +6,8 @@ import { Scroll, TextContent } from '@user/client-base';
 import { IEnemyCritical, IEnemyView, EnemyView } from '@user/data-system';
 import { IEnemy, IReadonlyEnemy } from '@user/data-base';
 import { IEnemyAttr } from '@user/data-common';
-import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
-import { IUIPropsBase } from './types';
+import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
+import { IUIPropsBase } from '@user/client-modules';
 
 /** 详情当前展示的属性模式 */
 const enum DetailMode {

src/client/ui/constant.ts

@@ -2,22 +2,20 @@ import { ElementLocator, Font } from '@motajs/render';
 
 // 本文件为 UI 配置文件，你可以修改下面的每个常量来控制 UI 的显示参数，每个常量都有注释说明
 
-//#region 地图
+//#region 地图配置
 
-/** 每个格子的默认宽度，现阶段用处不大 */
+/** 每个格子的宽度 */
 export const CELL_WIDTH = 32;
-/** 每个格子的默认高度，现阶段用处不大 */
+/** 每个格子的高度 */
 export const CELL_HEIGHT = 32;
-/** 每个格子的宽高 */
-export const CELL_SIZE = 32;
 /** 地图格子宽度，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改 */
 export const MAP_BLOCK_WIDTH = 13;
 /** 地图格子高度，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改 */
 export const MAP_BLOCK_HEIGHT = 13;
 /** 地图像素宽度 */
-export const MAP_WIDTH = CELL_SIZE * MAP_BLOCK_WIDTH;
+export const MAP_WIDTH = CELL_WIDTH * MAP_BLOCK_WIDTH;
 /** 地图像素高度 */
-export const MAP_HEIGHT = CELL_SIZE * MAP_BLOCK_HEIGHT;
+export const MAP_HEIGHT = CELL_HEIGHT * MAP_BLOCK_HEIGHT;
 /** 地图宽度的一半 */
 export const HALF_MAP_WIDTH = MAP_WIDTH / 2;
 /** 地图高度的一半 */
@@ -37,7 +35,7 @@ export const DOOR_ANIMATE_INTERVAL = 50;
 
 //#endregion
 
-//#region 状态栏
+//#region 状态栏配置
 
 /** 状态栏像素宽度 */
 export const STATUS_BAR_WIDTH = 180;
@@ -86,72 +84,3 @@ export const POP_BOX_WIDTH = MAP_WIDTH / 2;
 export const DEFAULT_FONT = new Font('Verdana', 16);
 
 //#endregion
-
-//#region 加载界面
-
-/** 加载界面的任务进度条半径 */
-export const LOAD_TASK_RADIUS = Math.min(MAIN_WIDTH, MAIN_HEIGHT) / 6;
-/** 加载界面的字节进度条纵轴位置 */
-export const LOAD_BYTE_HEIGHT = MAIN_HEIGHT / 2 + MAIN_HEIGHT / 4;
-/** 加载界面任务进度条的纵轴位置 */
-export const LOAD_TASK_CENTER_HEIGHT = MAIN_HEIGHT / 2 - MAIN_HEIGHT / 8;
-/** 加载界面字节进度条的长度 */
-export const LOAD_BYTE_LENGTH = MAIN_WIDTH - MAIN_WIDTH / 12;
-/** 加载界面任务进度条的粗细 */
-export const LOAD_TASK_LINE_WIDTH = 6;
-/** 加载界面字节进度条的粗细 */
-export const LOAD_BYTE_LINE_WIDTH = 6;
-/** 已加载部分进度条的颜色 */
-export const LOAD_LOADED_COLOR = '#57ff78';
-/** 未加载部分进度条的颜色 */
-export const LOAD_UNLOADED_COLOR = '#ccc';
-/** 加载界面的文字颜色 */
-export const LOAD_FONT_COLOR = '#fff';
-
-//#endregion
-
-//#region 存档界面
-
-/** 存档缩略图尺寸 */
-export const SAVE_ITEM_SIZE = MAP_BLOCK_WIDTH * 10;
-/** 单个存档上方显示第几号存档的高度 */
-export const SAVE_ITEM_TOP = 24;
-/** 单个存档下方显示这个存档信息的高度 */
-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_DOWN_PAD = 30;
-/** 存档页码数，调高并不会影响性能，但是如果玩家存档太多的话会导致存档体积很大 */
-export const SAVE_PAGES = 1000;
-
-//#endregion
-
-//#region 标题界面
-
-/** 标题图 */
-export const TITLE_BACKGROUND_IMAGE = 'bg.jpg';
-
-/** 标题文字中心横坐标 */
-export const TITLE_X = HALF_WIDTH;
-/** 标题文字中心纵坐标 */
-export const TITLE_Y = 100;
-/** 标题文字的填充颜色 */
-export const TITLE_FILL = 'white';
-/** 标题文字的描边颜色 */
-export const TITLE_STROKE = 'black';
-/** 标题文字的描边宽度 */
-export const TITLE_STROKE_WIDTH = 2;
-
-/** 标题界面按钮宽度，如果文字被裁剪可以考虑扩大此值 */
-export const BUTTONS_WIDTH = 160;
-/** 标题界面按钮高度，如果文字被裁剪可以考虑扩大此值 */
-export const BUTTONS_HEIGHT = 200;
-/** 标题界面按钮中心横坐标 */
-export const BUTTONS_X = HALF_WIDTH;
-/** 标题界面按钮左上角纵坐标 */
-export const BUTTONS_Y = MAIN_HEIGHT - BUTTONS_HEIGHT;
-
-//#endregion

src/client/ui/equipbox.tsx

@@ -5,8 +5,8 @@ import { Font } from '@motajs/render';
 import { Scroll, TextContent } from '@user/client-base';
 import { EquipStatus, IHeroState } from '@user/data-base';
 import { IHeroAttr } from '@user/data-common';
-import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
-import { IUIPropsBase } from './types';
+import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
+import { IUIPropsBase } from '@user/client-modules';
 
 interface IHeroAttrItem {
     /** 勇士属性的键名 */

src/client/ui/index.ts

@@ -0,0 +1,16 @@
+export * from './background';
+export * from './book';
+export * from './bookDetail';
+export * from './equipbox';
+export * from './load';
+export * from './main';
+export * from './save';
+export * from './settings';
+export * from './statistics';
+export * from './statusBar';
+export * from './title';
+export * from './toolbar';
+export * from './toolbox';
+export * from './viewmap';
+
+export * from './constant';

src/client/ui/load.tsx

@@ -1,26 +1,33 @@
 import { DefaultProps } from '@motajs/render-vue';
 import { GameUI, SetupComponentOptions } from '@motajs/system';
 import { defineComponent } from 'vue';
-import {
-    FULL_LOC,
-    LOAD_BYTE_HEIGHT,
-    LOAD_BYTE_LENGTH,
-    LOAD_BYTE_LINE_WIDTH,
-    LOAD_FONT_COLOR,
-    LOAD_LOADED_COLOR,
-    LOAD_TASK_CENTER_HEIGHT,
-    LOAD_TASK_LINE_WIDTH,
-    LOAD_TASK_RADIUS,
-    LOAD_UNLOADED_COLOR,
-    MAIN_WIDTH
-} from '../shared';
+import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
 import { ElementLocator, Font, MotaOffscreenCanvas2D } from '@motajs/render';
-import { transitioned } from '../render/use';
+import { transitioned } from '../../../packages-user/client-modules/src/render/use';
 import { cosh, CurveMode, linear } from '@motajs/animate';
 import { clamp } from 'lodash-es';
 import { sleep } from '@motajs/common';
 import { GameTitleUI } from './title';
-import { IUIPropsBase } from './types';
+import { IUIPropsBase } from '@user/client-modules';
+
+/** 加载界面的任务进度条半径 */
+export const LOAD_TASK_RADIUS = Math.min(MAIN_WIDTH, MAIN_HEIGHT) / 6;
+/** 加载界面的字节进度条纵轴位置 */
+export const LOAD_BYTE_HEIGHT = MAIN_HEIGHT / 2 + MAIN_HEIGHT / 4;
+/** 加载界面任务进度条的纵轴位置 */
+export const LOAD_TASK_CENTER_HEIGHT = MAIN_HEIGHT / 2 - MAIN_HEIGHT / 8;
+/** 加载界面字节进度条的长度 */
+export const LOAD_BYTE_LENGTH = MAIN_WIDTH - MAIN_WIDTH / 12;
+/** 加载界面任务进度条的粗细 */
+export const LOAD_TASK_LINE_WIDTH = 6;
+/** 加载界面字节进度条的粗细 */
+export const LOAD_BYTE_LINE_WIDTH = 6;
+/** 已加载部分进度条的颜色 */
+export const LOAD_LOADED_COLOR = '#57ff78';
+/** 未加载部分进度条的颜色 */
+export const LOAD_UNLOADED_COLOR = '#ccc';
+/** 加载界面的文字颜色 */
+export const LOAD_FONT_COLOR = '#fff';
 
 export interface ILoadProps extends IUIPropsBase, DefaultProps {}
 

src/client/ui/main.tsx

@@ -1,9 +1,4 @@
-import {
-    Font,
-    IActionEvent,
-    MotaOffscreenCanvas2D,
-    CustomRenderItem
-} from '@motajs/render';
+import { Font, MotaOffscreenCanvas2D, CustomRenderItem } from '@motajs/render';
 // import { WeatherController } from '../weather';
 import { defineComponent, ref } from 'vue';
 import { Textbox, TextboxProps, Tip } from '@user/client-base';
@@ -17,13 +12,10 @@ import {
     RIGHT_STATUS_POS,
     STATUS_BAR_HEIGHT,
     STATUS_BAR_WIDTH
-} from '../shared';
+} from './constant';
 import { LeftStatusBar, RightStatusBar } from './statusBar';
-import { state } from '@user/data-state';
-import { mainUIController } from './controller';
 import { isNil } from 'lodash-es';
-import { using } from '../render/renderer';
-import { IUIPropsBase } from './types';
+import { IUIPropsBase, using } from '@user/client-modules';
 
 interface MainSceneProps extends IUIPropsBase {}
 
@@ -98,35 +90,6 @@ const MainScene = defineComponent<MainSceneProps>(props => {
         });
     };
 
-    //#region 交互监听
-
-    /**
-     * 对于 registerAction 的 fallback
-     */
-    const clickMap = (ev: IActionEvent) => {
-        const bx = Math.floor(ev.offsetX / 32);
-        const by = Math.floor(ev.offsetY / 32);
-        core.doRegisteredAction('onup', bx, by, ev.offsetX, ev.offsetY);
-    };
-
-    /**
-     * 对于 registerAction 的 fallback
-     */
-    const downMap = (ev: IActionEvent) => {
-        const bx = Math.floor(ev.offsetX / 32);
-        const by = Math.floor(ev.offsetY / 32);
-        core.doRegisteredAction('ondown', bx, by, ev.offsetX, ev.offsetY);
-    };
-
-    /**
-     * 对于 registerAction 的 fallback
-     */
-    const moveMap = (ev: IActionEvent) => {
-        const bx = Math.floor(ev.offsetX / 32);
-        const by = Math.floor(ev.offsetY / 32);
-        core.doRegisteredAction('onmove', bx, by, ev.offsetX, ev.offsetY);
-    };
-
     return () => (
         <container
             id="main-scene"
@@ -148,9 +111,6 @@ const MainScene = defineComponent<MainSceneProps>(props => {
                 id="map-draw"
                 loc={[STATUS_BAR_WIDTH, 0, MAP_WIDTH, MAP_HEIGHT]}
                 zIndex={10}
-                onClick={clickMap}
-                onDown={downMap}
-                onMove={moveMap}
                 noanti
             >
                 <map-render
@@ -188,10 +148,10 @@ const MainScene = defineComponent<MainSceneProps>(props => {
             ></RightStatusBar>
             <container
                 loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]}
-                hidden={!mainUIController.active.value}
+                hidden={!props.state.mainUIController.active.value}
                 zIndex={200}
             >
-                {mainUIController.render()}
+                {props.state.mainUIController.render()}
             </container>
             <g-rect
                 loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]}

src/client/ui/save.tsx

@@ -1,11 +1,6 @@
 import { ElementLocator, IWheelEvent, Font } from '@motajs/render';
 import { DefaultProps } from '@motajs/render-vue';
-import {
-    GameUI,
-    IUIController,
-    SetupComponentOptions,
-    IUIDefaultPropsBase
-} from '@motajs/system';
+import { GameUI, IUIController, SetupComponentOptions } from '@motajs/system';
 import {
     defineComponent,
     ref,
@@ -19,32 +14,35 @@ import {
     PageExpose,
     Thumbnail,
     TipStore,
-    IGameUIPropsBase
+    IGameUIPropsBase,
+    MAP_BLOCK_WIDTH
 } from '@user/client-base';
-import { useKey } from '../render/use';
-import {
-    HALF_HEIGHT,
-    HALF_WIDTH,
-    MAP_WIDTH,
-    POP_BOX_WIDTH,
-    SAVE_DOWN_PAD,
-    SAVE_INTERVAL,
-    SAVE_ITEM_DOWN,
-    SAVE_ITEM_HEIGHT,
-    SAVE_ITEM_SIZE,
-    SAVE_ITEM_TOP,
-    SAVE_PAGES
-} from '../shared';
+import { HALF_HEIGHT, HALF_WIDTH, MAP_WIDTH, POP_BOX_WIDTH } from './constant';
 import { adjustGrid, IGridLayoutData } from '@user/client-base';
-import { getSave, SaveData } from '../render/utils';
+import { getSave, IUIPropsBase, SaveData, useKey } from '@user/client-modules';
 
-export const enum SaveMode {
+/** 存档缩略图尺寸 */
+export const SAVE_ITEM_SIZE = MAP_BLOCK_WIDTH * 10;
+/** 单个存档上方显示第几号存档的高度 */
+export const SAVE_ITEM_TOP = 24;
+/** 单个存档下方显示这个存档信息的高度 */
+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_DOWN_PAD = 30;
+/** 存档页码数，调高并不会影响性能，但是如果玩家存档太多的话会导致存档体积很大 */
+export const SAVE_PAGES = 1000;
+
+const enum SaveMode {
     Save,
     Load,
     Other
 }
 
-export interface SaveProps extends IUIDefaultPropsBase, DefaultProps {
+export interface SaveProps extends IUIPropsBase, DefaultProps {
     loc: ElementLocator;
     mode: SaveMode;
 }

src/client/ui/settings.tsx

@@ -10,18 +10,14 @@ import {
     waitbox,
     IGameUIPropsBase
 } from '@user/client-base';
-import { mainUi } from '@motajs/legacy-ui';
 import { gameKey, generateKeyboardEvent } from '@motajs/system';
-import { getVitualKeyOnce } from '@motajs/legacy-ui';
-import { getAllSavesData, getSaveData, syncFromServer } from '../render/utils';
 import { getInput } from '@user/client-base';
 import { openStatistics } from './statistics';
 import { saveWithExist } from './save';
 import { compressToBase64 } from 'lz-string';
 import { ViewMapUI } from './viewmap';
-import { CENTER_LOC, FULL_LOC, MAIN_HEIGHT, POP_BOX_WIDTH } from '../shared';
-import { useKey } from '../render/use';
-import { IUIPropsBase } from './types';
+import { CENTER_LOC, FULL_LOC, MAIN_HEIGHT, POP_BOX_WIDTH } from './constant';
+import { IUIPropsBase, useKey } from '@user/client-modules';
 
 export interface MainSettingsProps extends Partial<ChoicesProps>, IUIPropsBase {
     loc: ElementLocator;

src/client/ui/statusBar.tsx

@@ -7,17 +7,17 @@ import {
     reactive,
     shallowReactive
 } from 'vue';
-import { TextContent, IClientBaseExtended } from '@user/client-base';
+import { TextContent } from '@user/client-base';
 import { ElementLocator, Font, ITexture } from '@motajs/render';
 import { MixedToolbar, ReplayingStatus } from './toolbar';
 import { openViewMap } from './viewmap';
-import { mainUIController } from './controller';
 import {
     MAIN_HEIGHT,
     MAIN_WIDTH,
     STATUS_BAR_HEIGHT,
     STATUS_BAR_WIDTH
-} from '../shared';
+} from './constant';
+import { IUIPropsBase } from '@user/client-modules';
 import { DefaultProps } from '@motajs/render-vue';
 
 export interface ILeftHeroStatus {
@@ -99,7 +99,7 @@ interface KeyLikeInfo {
     readonly items: KeyLikeItem[];
 }
 
-interface StatusBarProps extends DefaultProps, IClientBaseExtended {
+interface StatusBarProps extends IUIPropsBase, DefaultProps {
     loc: ElementLocator;
     hidden: boolean;
 }
@@ -446,7 +446,7 @@ export const LeftStatusBar = defineComponent<StatusBarProps>(p => {
      * 点击楼层名打开浏览地图
      */
     const viewMap = () => {
-        openViewMap(mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
+        openViewMap(p.state.mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
     };
 
     return () => (

src/client/ui/title.tsx

@@ -1,37 +1,49 @@
 import { DefaultProps } from '@motajs/render-vue';
 import { GameUI, SetupComponentOptions } from '@motajs/system';
 import { defineComponent, nextTick, onMounted, ref } from 'vue';
-import {
-    BUTTONS_HEIGHT,
-    BUTTONS_WIDTH,
-    BUTTONS_X,
-    BUTTONS_Y,
-    HALF_HEIGHT,
-    HALF_WIDTH,
-    MAIN_HEIGHT,
-    MAIN_WIDTH,
-    TITLE_BACKGROUND_IMAGE,
-    TITLE_FILL,
-    TITLE_STROKE,
-    TITLE_STROKE_WIDTH,
-    TITLE_X,
-    TITLE_Y
-} from '../shared';
+import { HALF_HEIGHT, HALF_WIDTH, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
 import { ElementLocator, Font } from '@motajs/render';
 import {
-    ITransitionedController,
-    transitioned,
-    transitionedColor,
-    useKey
-} from '../render/use';
-import { ExitFullscreen, Fullscreen, SoundVolume } from '@user/client-base';
-import { mainSetting, triggerFullscreen } from '@motajs/legacy-ui';
+    ExitFullscreen,
+    Fullscreen,
+    SoundVolume,
+    triggerFullscreen
+} from '@user/client-base';
 import { saveLoad } from './save';
 import { MainSceneUI } from './main';
 import { adjustCover } from '@user/client-base';
 import { cosh, CurveMode, linear } from '@motajs/animate';
 import { sleep } from '@motajs/common';
-import { IUIPropsBase } from './types';
+import {
+    ITransitionedController,
+    IUIPropsBase,
+    transitioned,
+    transitionedColor,
+    useKey
+} from '@user/client-modules';
+
+/** 标题图 */
+export const TITLE_BACKGROUND_IMAGE = 'bg.jpg';
+
+/** 标题文字中心横坐标 */
+export const TITLE_X = HALF_WIDTH;
+/** 标题文字中心纵坐标 */
+export const TITLE_Y = 100;
+/** 标题文字的填充颜色 */
+export const TITLE_FILL = 'white';
+/** 标题文字的描边颜色 */
+export const TITLE_STROKE = 'black';
+/** 标题文字的描边宽度 */
+export const TITLE_STROKE_WIDTH = 2;
+
+/** 标题界面按钮宽度，如果文字被裁剪可以考虑扩大此值 */
+export const BUTTONS_WIDTH = 160;
+/** 标题界面按钮高度，如果文字被裁剪可以考虑扩大此值 */
+export const BUTTONS_HEIGHT = 200;
+/** 标题界面按钮中心横坐标 */
+export const BUTTONS_X = HALF_WIDTH;
+/** 标题界面按钮左上角纵坐标 */
+export const BUTTONS_Y = MAIN_HEIGHT - BUTTONS_HEIGHT;
 
 const enum TitleButton {
     StartGame,

src/client/ui/toolbar.tsx

@@ -11,22 +11,20 @@ import {
     StepForward,
     ViewMapIcon
 } from '@user/client-base';
-import { getVitualKeyOnce } from '@motajs/legacy-ui';
 import { gameKey, generateKeyboardEvent } from '@motajs/system';
-import { transitioned } from '../render/use';
 import { linear } from 'mutate-animate';
 import { KeyCode } from '@motajs/client-base';
-import { IClientBaseExtended, Progress } from '@user/client-base';
+import { Progress } from '@user/client-base';
 import { generateBinary } from '@motajs/legacy-common';
 import { SetupComponentOptions } from '@motajs/system';
 import { saveSave, saveLoad } from './save';
-import { mainUIController } from './controller';
-import { MAIN_HEIGHT, FULL_LOC, POP_BOX_WIDTH, CENTER_LOC } from '../shared';
+import { MAIN_HEIGHT, FULL_LOC, POP_BOX_WIDTH, CENTER_LOC } from './constant';
 import { openReplay, openSettings } from './settings';
 import { openViewMap } from './viewmap';
 import { DefaultProps } from '@motajs/render-vue';
+import { IClientCoreExtended, transitioned } from '@user/client-modules';
 
-interface ToolbarProps extends DefaultProps, IClientBaseExtended {
+interface ToolbarProps extends DefaultProps, IClientCoreExtended {
     loc?: ElementLocator;
 }
 
@@ -90,10 +88,10 @@ export const PlayingToolbar = defineComponent<
     const tool = () => core.openToolbox(true);
     const fly = () => core.useFly(true);
     const save = () => {
-        saveSave(mainUIController, FULL_LOC);
+        saveSave(props.state.mainUIController, FULL_LOC);
     };
     const load = () => {
-        saveLoad(mainUIController, FULL_LOC);
+        saveLoad(props.state.mainUIController, FULL_LOC);
     };
     const equip = () => core.openEquipbox(true);
     const shop = () => core.openQuickShop(true);
@@ -111,18 +109,18 @@ export const PlayingToolbar = defineComponent<
     const redo = () => core.doSL('autoSave', 'reload');
     const numpad = () => emit('numpad');
     const view = () => {
-        openViewMap(mainUIController, FULL_LOC);
+        openViewMap(props.state.mainUIController, FULL_LOC);
     };
     const replay = () => {
         const loc = CENTER_LOC.slice() as ElementLocator;
         loc[2] = POP_BOX_WIDTH;
-        openReplay(mainUIController, loc);
+        openReplay(props.state.mainUIController, loc);
     };
     const settings = () => {
         const loc = CENTER_LOC.slice() as ElementLocator;
         loc[2] = POP_BOX_WIDTH;
         loc[3] = MAIN_HEIGHT - 72;
-        openSettings(mainUIController, loc);
+        openSettings(props.state.mainUIController, loc);
     };
 
     return () => (
@@ -191,7 +189,7 @@ export const ReplayingToolbar = defineComponent<ReplayingProps>(props => {
     const speedUp = () => core.speedUpReplay();
     const book = () => core.openBook(true);
     const save = () => {
-        saveSave(mainUIController, FULL_LOC);
+        saveSave(props.state.mainUIController, FULL_LOC);
     };
     const view = () => {
         if (core.isPlaying() && !core.isMoving() && !core.status.lockControl) {

src/client/ui/toolbox.tsx

@@ -4,8 +4,8 @@ import { Font } from '@motajs/render';
 import { Scroll, TextContent } from '@user/client-base';
 import { IHeroItemState, IHeroState } from '@user/data-base';
 import { IHeroAttr } from '@user/data-common';
-import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from '../shared';
-import { IUIPropsBase } from './types';
+import { FULL_LOC, MAIN_HEIGHT, MAIN_WIDTH } from './constant';
+import { IUIPropsBase } from '@user/client-modules';
 
 export interface ToolBoxProps extends IUIPropsBase {
     /** 勇士状态对象 */

src/client/ui/viewmap.tsx

@@ -27,7 +27,6 @@ import { FloorSelector } from '@user/client-base';
 import { clamp, mean } from 'lodash-es';
 import { StatisticsDataOneFloor } from './statistics';
 import { Tip, TipExpose, IGameUIPropsBase } from '@user/client-base';
-import { useKey } from '../render/use';
 import {
     ENABLE_RIGHT_STATUS_BAR,
     FULL_LOC,
@@ -39,7 +38,8 @@ import {
     RIGHT_STATUS_POS,
     STATUS_BAR_HEIGHT,
     STATUS_BAR_WIDTH
-} from '../shared';
+} from './constant';
+import { useKey } from '@user/client-modules';
 
 export interface ViewMapProps extends IUIDefaultPropsBase, BaseProps {
     loc: ElementLocator;

src/data.ts

@@ -1,5 +1 @@
-import { createData } from '@user/entry-data';
-
-// 逻辑端入口，仅在录像验证时运行
-
-createData();
+export { createCoreState } from './data/entry';

src/data/constant.ts

@@ -0,0 +1,8 @@
+import { FaceGroup } from '@user/data-common';
+
+// 本文件是游戏的底层核心配置，如果不懂的话千万不要动
+
+/** 数据端核心配置对象，不懂的话就不要动 */
+export const CORE_URL = 'content/core.jsonc';
+/** 勇士的默认朝向组，用于控制勇士的移动，不懂的话就不要动 */
+export const HERO_FACE = FaceGroup.Dir8;

src/data/entry.ts

@@ -1,5 +1,5 @@
 import { CoreState, ICoreState, ICoreStateConfig } from '@user/data-state';
-import { CORE_URL, HERO_FACE } from '../constant';
+import { CORE_URL, HERO_FACE } from './constant';
 import { ILoadTaskStarter } from '@motajs/loader';
 import { MainDataPlugin } from './initialize';
 import { dataPlugins } from './plugin';

src/data/index.ts

@@ -0,0 +1,4 @@
+export * from './constant';
+export * from './entry';
+export * from './initialize';
+export * from './types';

src/main.ts

@@ -1,13 +0,0 @@
-import { createApp } from 'vue';
-import './styles.less';
-import { createGame } from '@user/entry-client';
-import App from './App.vue';
-
-// 客户端入口，在玩家游玩时运行
-
-// 创建游戏实例
-createGame();
-createApp(App).mount('#root');
-
-main.init('play');
-main.listen();

src/package.json

@@ -2,8 +2,6 @@
     "name": "@user/main",
     "dependencies": {
         "@user/data-common": "workspace:*",
-        "@user/data-state": "workspace:*",
-        "@user/entry-client": "workspace:*",
-        "@user/entry-data": "workspace:*"
+        "@user/data-state": "workspace:*"
     }
 }