refactor: UI 系统及其在渲染端的初始化

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

@@ -1,13 +1,23 @@
 import { IExcitation, IExcitationDivider } from '@motajs/animate';
 import { IRenderTreeRoot } from '@motajs/render';
 import { IRendererUsing } from '@motajs/render-vue';
-import { UIController } from '@motajs/system';
+import {
+    IUIController,
+    IUIDefaultPropsBase,
+    UIComponent
+} from '@motajs/system';
 import { IBGMPlayer, IMotaAudioContext, ISoundPlayer } from '@motajs/audio';
 import { ICoreState } from '@user/data-state';
 import { ISaveSystem } from './save';
 import { ITextureManager } from './material';
 import { IMapRenderer, IMapExtensionManager } from './map';
 
+export interface IGameUIPropsBase<
+    T extends UIComponent = UIComponent
+> extends IUIDefaultPropsBase<T> {
+    readonly state: IClientBase;
+}
+
 export interface IClientBase extends ICoreState {
     /** 存档系统 */
     readonly save: ISaveSystem;
@@ -34,9 +44,9 @@ export interface IClientBase extends ICoreState {
     /** 渲染器使用对象，供组件内注册渲染激励与事件监听 */
     readonly using: IRendererUsing;
     /** 主场景的 UI 控制器，管理游戏主场景的 UI 显示 */
-    readonly sceneController: UIController;
+    readonly sceneController: IUIController<IGameUIPropsBase>;
     /** 主界面的 UI 控制器，管理游戏主界面的 UI 显示 */
-    readonly mainUIController: UIController;
+    readonly mainUIController: IUIController<IGameUIPropsBase>;
 }
 
 export interface IClientBaseExtended {

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

@@ -13,7 +13,8 @@ import {
     ITextureManager,
     TextureManager,
     ISaveSystem,
-    SaveSystem
+    SaveSystem,
+    IGameUIPropsBase
 } from '@user/client-base';
 import {
     IMapRenderer,
@@ -38,9 +39,10 @@ import {
 } from './shared';
 import { WebLoadStarter } from '@motajs/loader';
 import { IRendererUsing, RendererUsing } from '@motajs/render-vue';
-import { UIController } from '@motajs/system';
+import { IUIController, UIController } from '@motajs/system';
 import { createApp } from './render';
 import { LoadSceneUI } from './render/ui/load';
+import { createUIPropsBase } from './ui/func';
 
 export class ClientCore extends CoreState implements IClientCore {
     // Layer 4 渲染基础层
@@ -56,8 +58,8 @@ export class ClientCore extends CoreState implements IClientCore {
     readonly mainMapRenderer: IMapRenderer;
     readonly expandMapRenderer: IMapRenderer;
     readonly mainMapExtension: IMapExtensionManager;
-    readonly sceneController: UIController;
-    readonly mainUIController: UIController;
+    readonly sceneController: IUIController<IGameUIPropsBase>;
+    readonly mainUIController: IUIController<IGameUIPropsBase>;
 
     // Layer 5 渲染顶层
 
@@ -121,8 +123,11 @@ export class ClientCore extends CoreState implements IClientCore {
         this.mainMapRenderer = new MapRenderer(this.materials);
         this.mainMapExtension = new MapExtensionManager(this.mainMapRenderer);
         this.expandMapRenderer = new MapRenderer(this.materials);
-        this.sceneController = new UIController('main-scene');
-        this.mainUIController = new UIController('main-ui');
+        this.sceneController = new UIController<IGameUIPropsBase>();
+        this.mainUIController = new UIController<IGameUIPropsBase>();
+        const pbCreator = createUIPropsBase(this);
+        this.sceneController.setPropsBaseCreator(pbCreator);
+        this.mainUIController.setPropsBaseCreator(pbCreator);
 
         //#endregion
 
@@ -131,6 +136,9 @@ export class ClientCore extends CoreState implements IClientCore {
         this.init();
     }
 
+    /**
+     * 初始化渲染端主对象
+     */
     private async init() {
         createApp(this.sceneController.render()).mount(this.renderer);
         this.sceneController.open(LoadSceneUI, {});

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

@@ -0,0 +1,26 @@
+import {
+    IUIController,
+    IUIInstance,
+    UIComponent,
+    UIPropsBaseCreator
+} from '@motajs/system';
+import { IClientBase, IGameUIPropsBase } from '@user/client-base';
+
+/**
+ * 创建游戏 UI 基础参数的构造函数
+ * @param state 游戏状态对象
+ */
+export function createUIPropsBase(
+    state: IClientBase
+): UIPropsBaseCreator<IGameUIPropsBase> {
+    return (
+        instance: IUIInstance<UIComponent, IGameUIPropsBase>,
+        controller: IUIController<IGameUIPropsBase>
+    ): IGameUIPropsBase => {
+        return {
+            instance,
+            controller,
+            state
+        };
+    };
+}