@vnejs/plugins.views.screens.mainmenu 0.1.6 → 0.1.7

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.mainmenu.contract";
+import { MainMenuController } from "./modules/controller.js";
+import { MainMenu } from "./modules/mainmenu.js";
+import { MainMenuView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [MainMenuController, MainMenu, MainMenuView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,29 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { MainMenuItem } from "@vnejs/plugins.views.screens.mainmenu.contract";
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+import type { MainMenuClickPayload, MainMenuPluginState } from "../utils/mainmenu.js";
+export declare class MainMenuController extends ModuleController<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams, MainMenuPluginState> {
+    name: string;
+    emitAccept: () => undefined;
+    bgName: string;
+    bgTimeout: ReturnType<typeof setTimeout> | null;
+    bgIndex: number;
+    updateEvent: "vne:mainmenu:update";
+    controls: {
+        abstract_arrow_up: () => undefined;
+        abstract_arrow_bottom: () => undefined;
+        abstract_accept: () => undefined;
+        abstract_interact: () => undefined;
+    };
+    controlsIndex: number;
+    subscribe: () => void;
+    beforeShow: () => Promise<void>;
+    afterShow: () => void;
+    afterHide: () => void;
+    onAccept: () => Promise<undefined>;
+    onClick: ({ index }?: MainMenuClickPayload) => Promise<undefined>;
+    updateBg: () => Promise<unknown[] | undefined>;
+    intervalTickFunc: () => Promise<void>;
+    recalcNewBgIndex: (oldIndex?: number) => void;
+    click: (items: MainMenuItem[], index: number | null) => false | undefined;
+}

package/dist/modules/controller.js

@@ -0,0 +1,67 @@
+import { isNotDisabledNotHided, omitOnClick } from "@vnejs/helpers";
+import { ModuleController } from "@vnejs/module.components";
+const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+export class MainMenuController extends ModuleController {
+    name = "mainmenu.controller";
+    emitAccept = () => void this.emit(this.EVENTS.MAINMENU.ACCEPT);
+    bgName = this.PARAMS.MAINMENU.BACKGROUND;
+    bgTimeout = null;
+    bgIndex = -1;
+    updateEvent = this.EVENTS.MAINMENU.UPDATE;
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decCurrentItem(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incCurrentItem(),
+        [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.emitAccept(),
+        [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.emitAccept(),
+    };
+    controlsIndex = this.PARAMS.MAINMENU.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
+        this.on(this.EVENTS.MAINMENU.HIDE, this.onHide);
+        this.on(this.EVENTS.MAINMENU.CLICK, this.onClick);
+        this.on(this.EVENTS.MAINMENU.ACCEPT, this.onAccept);
+        this.on(this.EVENTS.LOCS.CHANGED, this.updateView);
+        this.on(this.EVENTS.STATE.SET, this.onHideForce);
+        this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
+        this.on(this.EVENTS.STATE.CLEAR, this.loadBgMedia);
+        this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+        this.on(this.EVENTS.MEMORY.CLEARED, this.updateBg);
+    };
+    beforeShow = async () => {
+        const items = (await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).map(omitOnClick);
+        this.updateState({
+            items,
+            realItems: items.filter((item) => isNotDisabledNotHided(item)),
+            bgSrc: (await this.loadBgMedia()).src,
+        });
+        this.maxCurrentItem = this.state.realItems.length - 1;
+    };
+    afterShow = () => {
+        if (this.PARAMS.MAINMENU.BACKGROUNDS.length && this.PARAMS.MAINMENU.BACKGROUNDS_INTERVAL) {
+            this.recalcNewBgIndex();
+            this.bgTimeout = setTimeout(this.intervalTickFunc, this.PARAMS.MAINMENU.BACKGROUNDS_INTERVAL);
+        }
+    };
+    afterHide = () => {
+        this.setDefaultState();
+        clearTimeout(this.bgTimeout ?? undefined);
+    };
+    onAccept = async () => void this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)), this.currentItem);
+    onClick = async ({ index } = {}) => void this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)), index ?? null);
+    updateBg = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
+    intervalTickFunc = async () => {
+        if (!this.state.isShow)
+            return;
+        this.recalcNewBgIndex(this.bgIndex);
+        this.bgName = this.PARAMS.MAINMENU.BACKGROUNDS[this.bgIndex];
+        await this.waitRerender();
+        await this.updateBg();
+        this.bgTimeout = setTimeout(this.intervalTickFunc, this.PARAMS.MAINMENU.BACKGROUNDS_INTERVAL);
+    };
+    recalcNewBgIndex = (oldIndex) => {
+        do
+            this.bgIndex = getRandomInt(0, this.PARAMS.MAINMENU.BACKGROUNDS.length - 1);
+        while (this.bgIndex === oldIndex);
+    };
+    click = (items, index) => index !== null && void items[index]?.onClick?.();
+}

package/dist/modules/mainmenu.d.ts

@@ -0,0 +1,20 @@
+import type { MainMenuItemFactory } from "@vnejs/plugins.views.screens.mainmenu.contract";
+import { Module } from "@vnejs/module";
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+export declare class MainMenu extends Module<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams> {
+    name: string;
+    isShow: boolean;
+    subscribe: () => void;
+    init: () => Promise<[unknown[] | undefined, unknown[] | undefined]>;
+    onLineExec: () => Promise<unknown[]> | undefined;
+    onLineLoad: () => Promise<(unknown[] | undefined)[]>;
+    onShow: () => void;
+    onHide: () => void;
+    onItems: () => Promise<import("@vnejs/plugins.views.screens.mainmenu.contract").MainMenuItem[]>;
+    onMemoryCleared: () => false | undefined;
+    preload: () => Promise<(unknown[] | undefined)[]>;
+    getItemByFunc: (func: MainMenuItemFactory) => import("@vnejs/plugins.views.screens.mainmenu.contract").MainMenuItem;
+    emitNext: () => undefined;
+    emitLabelGet: (label: string) => Promise<unknown[]> | undefined;
+    emitEvent: (event: string) => Promise<unknown[]> | undefined;
+}

package/dist/modules/mainmenu.js

@@ -0,0 +1,37 @@
+import { Module } from "@vnejs/module";
+export class MainMenu extends Module {
+    name = "mainmenu";
+    isShow = false;
+    subscribe = () => {
+        this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
+        this.on(this.EVENTS.MAINMENU.HIDE, this.onHide);
+        this.on(this.EVENTS.MAINMENU.ITEMS, this.onItems);
+        this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+    };
+    init = () => Promise.all([
+        this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec }),
+        this.emit(this.EVENTS.SCENARIO.LINE_LOAD_REG, { module: this.name, handler: this.onLineLoad }),
+    ]);
+    onLineExec = () => this.emit(this.EVENTS.MAINMENU.SHOW);
+    onLineLoad = () => this.preload();
+    onShow = () => {
+        this.isShow = true;
+        this.preload();
+    };
+    onHide = () => {
+        this.isShow = false;
+    };
+    onItems = async () => {
+        await this.waitIsReady();
+        return Promise.all(this.PARAMS.MAINMENU.ITEMS.map(this.getItemByFunc));
+    };
+    onMemoryCleared = () => this.isShow && void this.preload();
+    preload = () => Promise.all([
+        ...this.PARAMS.MAINMENU.PRELOAD_LABELS.map(this.emitLabelGet),
+        ...this.PARAMS.MAINMENU.PRELOAD_EVENTS.map(this.emitEvent),
+    ]);
+    getItemByFunc = (func) => func(this);
+    emitNext = () => void this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+    emitLabelGet = (label) => this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label });
+    emitEvent = (event) => this.emit(event);
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+import type { MainMenuPluginState } from "../utils/mainmenu.js";
+export declare class MainMenuView extends ModuleView<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams, MainMenuPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:mainmenu:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<MainMenuPluginState>;
+    updateHandler: (state?: MainMenuPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class MainMenuView extends ModuleView {
+    name = "mainmenu.view";
+    locLabel = this.PARAMS.MAINMENU.LOC_LABEL;
+    animationTime = this.PARAMS.MAINMENU.TRANSITION;
+    updateEvent = this.EVENTS.MAINMENU.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as LocsPluginName, SubscribeEvents as LocsSubscribeEvents } from "@vnejs/plugins.text.locs.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.mainmenu.contract";
+export type MainMenuPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<ScenarioPluginName, ScenarioSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents> & Record<SystemPluginName, SystemSubscribeEvents> & Record<MemoryPluginName, MemorySubscribeEvents> & Record<LocsPluginName, LocsSubscribeEvents>;
+export type MainMenuPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type MainMenuPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+export type MainMenuPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/mainmenu.d.ts

@@ -0,0 +1,21 @@
+import type { Module } from "@vnejs/module";
+import type { MainMenuItem } from "@vnejs/plugins.views.screens.mainmenu.contract";
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+export type MainMenuViewItem = Omit<MainMenuItem, "onClick">;
+export type MainMenuPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    items?: MainMenuViewItem[];
+    realItems?: MainMenuViewItem[];
+    locs?: Record<string, string>;
+    bgSrc?: string;
+    currentItem?: number | null;
+};
+export type MainMenuClickPayload = {
+    index?: number;
+};
+export type MainMenuViewContext = {
+    emit: Module<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams, MainMenuPluginState>["emit"];
+    EVENTS: MainMenuPluginEvents;
+    PARAMS: MainMenuPluginParams;
+};

package/dist/utils/mainmenu.js

@@ -0,0 +1 @@
+export {};

package/dist/view/components/MainMenuControls.d.ts

@@ -0,0 +1,9 @@
+import type { MainMenuViewContext, MainMenuViewItem } from "../../utils/mainmenu.js";
+type MainMenuControlsProps = MainMenuViewContext & {
+    locs?: Record<string, string>;
+    currentItem?: number | null;
+    realItems?: MainMenuViewItem[];
+    items?: MainMenuViewItem[];
+};
+export declare const MainMenuControls: ({ locs, currentItem, realItems, items, emit, EVENTS, PARAMS }: MainMenuControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/MainMenuControls.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { TextControls } from "@vnejs/uis.react";
+export const MainMenuControls = ({ locs = {}, currentItem = null, realItems = [], items = [], emit, EVENTS, PARAMS }) => {
+    const mapItems = useCallback(({ locKey, isDisabled, isHided }, i) => ({ text: locs[locKey], isDisabled, isNotRender: isHided, value: i }), [locs]);
+    const findSelectedIndex = useCallback((value) => realItems[currentItem ?? -1]?.locKey === value?.locKey, [realItems, currentItem]);
+    const onClick = useCallback((index) => void emit(EVENTS.MAINMENU.CLICK, { index: Number(index) }), [emit, EVENTS.MAINMENU.CLICK]);
+    const texts = useMemo(() => items.map(mapItems), [items, mapItems]);
+    const selectedIndex = useMemo(() => items.findIndex(findSelectedIndex), [items, findSelectedIndex]);
+    const propsControls = useMemo(() => ({ ...PARAMS.MAINMENU.VIEW_PROPS.controls.props, texts, onClick, selectedIndex }), [PARAMS.MAINMENU.VIEW_PROPS.controls.props, texts, onClick, selectedIndex]);
+    return _jsx(TextControls, { ...propsControls });
+};

package/dist/view/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./MainMenuControls.js";

package/dist/view/components/index.js

@@ -0,0 +1 @@
+export * from "./MainMenuControls.js";

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { MainMenuPluginState } from "../utils/mainmenu.js";
+export declare const render: ViewRenderFunc<MainMenuPluginState>;

package/dist/view/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PositionBox, Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+import { MainMenuControls } from "./components/index.js";
+const MainMenu = ({ store, onMount, PARAMS, emit, EVENTS }) => {
+    const { isShow = false, isForce = false, items = [], bgSrc = "", currentItem = null, realItems = [], locs = {}, } = useStoreState(store, onMount);
+    const viewProps = useMemo(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+    const propsScreen = useMemo(() => ({ ...PARAMS.MAINMENU.VIEW_PROPS.screen, bgSrc, isShow, isForce }), [bgSrc, isShow, isForce, PARAMS.MAINMENU.VIEW_PROPS.screen]);
+    const propsControls = useMemo(() => ({ ...viewProps, items, realItems, currentItem, locs }), [viewProps, items, realItems, currentItem, locs]);
+    return (_jsx(Screen, { ...propsScreen, children: _jsx(PositionBox, { ...PARAMS.MAINMENU.VIEW_PROPS.controls.position, children: _jsx(MainMenuControls, { ...propsControls }) }) }));
+};
+export const render = createRenderFunc(MainMenu);

package/package.json

@@ -1,17 +1,52 @@
 {
   "name": "@vnejs/plugins.views.screens.mainmenu",
-  "version": "0.1.6",
-  "main": "index.js",
+  "version": "0.1.7",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "publish:major:plugin": "npm run publish:major",
     "publish:minor:plugin": "npm run publish:minor",
     "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm version major && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public",
-    "publish:patch": "npm version patch && npm publish --access public"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.screens.mainmenu.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/plugins.core.scenario.contract": "~0.0.1",
+    "@vnejs/plugins.core.state.contract": "~0.0.1",
+    "@vnejs/plugins.core.system.contract": "~0.0.1",
+    "@vnejs/plugins.text.locs.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,8 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.mainmenu.contract";
+
+import { MainMenuController } from "./modules/controller.js";
+import { MainMenu } from "./modules/mainmenu.js";
+import { MainMenuView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [MainMenuController, MainMenu, MainMenuView]);

package/{modules/controller.js → src/modules/controller.ts}

@@ -1,24 +1,34 @@
-import { ModuleController } from "@vnejs/module.components";
 import { isNotDisabledNotHided, omitOnClick } from "@vnejs/helpers";
+import { ModuleController } from "@vnejs/module.components";
+import type { MainMenuItem } from "@vnejs/plugins.views.screens.mainmenu.contract";
+
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+import type { MainMenuClickPayload, MainMenuPluginState } from "../utils/mainmenu.js";
 
-const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+const getRandomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
 
-export class MainMenuController extends ModuleController {
+export class MainMenuController extends ModuleController<
+  MainMenuPluginEvents,
+  MainMenuPluginConstants,
+  MainMenuPluginSettings,
+  MainMenuPluginParams,
+  MainMenuPluginState
+> {
   name = "mainmenu.controller";
 
-  emitAccept = () => this.emit(this.EVENTS.MAINMENU.ACCEPT);
+  emitAccept = () => void this.emit(this.EVENTS.MAINMENU.ACCEPT);
 
   bgName = this.PARAMS.MAINMENU.BACKGROUND;
 
-  bgTimeout = null;
+  bgTimeout: ReturnType<typeof setTimeout> | null = null;
   bgIndex = -1;
 
   updateEvent = this.EVENTS.MAINMENU.UPDATE;
   controls = {
-    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitAccept,
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.emitAccept,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decCurrentItem(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incCurrentItem(),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.emitAccept(),
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.emitAccept(),
   };
   controlsIndex = this.PARAMS.MAINMENU.ZINDEX;
 
@@ -41,11 +51,15 @@ export class MainMenuController extends ModuleController {
   };
 
   beforeShow = async () => {
-    const items = (await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).map(omitOnClick);
+    const items = ((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)) as MainMenuItem[]).map(omitOnClick);
 
-    this.updateState({ items, realItems: items.filter(isNotDisabledNotHided), bgSrc: (await this.loadBgMedia()).src });
+    this.updateState({
+      items,
+      realItems: items.filter((item) => isNotDisabledNotHided(item)),
+      bgSrc: (await this.loadBgMedia()).src,
+    });
 
-    this.maxCurrentItem = this.state.realItems.length - 1;
+    this.maxCurrentItem = this.state.realItems!.length - 1;
   };
   afterShow = () => {
     if (this.PARAMS.MAINMENU.BACKGROUNDS.length && this.PARAMS.MAINMENU.BACKGROUNDS_INTERVAL) {
@@ -56,11 +70,11 @@ export class MainMenuController extends ModuleController {
   afterHide = () => {
     this.setDefaultState();
 
-    clearTimeout(this.bgTimeout);
+    clearTimeout(this.bgTimeout ?? undefined);
   };
 
-  onAccept = async () => this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).filter(isNotDisabledNotHided), this.currentItem);
-  onClick = async ({ index } = {}) => this.click(await this.emitOne(this.EVENTS.MAINMENU.ITEMS), index);
+  onAccept = async () => void this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)) as MainMenuItem[], this.currentItem);
+  onClick = async ({ index }: MainMenuClickPayload = {}) => void this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)) as MainMenuItem[], index ?? null);
 
   updateBg = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
 
@@ -76,10 +90,10 @@ export class MainMenuController extends ModuleController {
     this.bgTimeout = setTimeout(this.intervalTickFunc, this.PARAMS.MAINMENU.BACKGROUNDS_INTERVAL);
   };
 
-  recalcNewBgIndex = (oldIndex) => {
+  recalcNewBgIndex = (oldIndex?: number) => {
     do this.bgIndex = getRandomInt(0, this.PARAMS.MAINMENU.BACKGROUNDS.length - 1);
     while (this.bgIndex === oldIndex);
   };
 
-  click = (items, index) => index !== null && items[index]?.onClick?.();
+  click = (items: MainMenuItem[], index: number | null) => index !== null && void items[index]?.onClick?.();
 }

package/{modules/mainmenu.js → src/modules/mainmenu.ts}

@@ -1,8 +1,13 @@
+import type { MainMenuItemFactory } from "@vnejs/plugins.views.screens.mainmenu.contract";
 import { Module } from "@vnejs/module";
 
-export class MainMenu extends Module {
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+
+export class MainMenu extends Module<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams> {
   name = "mainmenu";
 
+  isShow = false;
+
   subscribe = () => {
     this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
     this.on(this.EVENTS.MAINMENU.HIDE, this.onHide);
@@ -32,13 +37,17 @@ export class MainMenu extends Module {
 
     return Promise.all(this.PARAMS.MAINMENU.ITEMS.map(this.getItemByFunc));
   };
-  onMemoryCleared = () => this.isShow && this.preload();
+  onMemoryCleared = () => this.isShow && void this.preload();
 
-  preload = () => Promise.all([...this.PARAMS.MAINMENU.PRELOAD_LABELS.map(this.emitLabelGet), ...this.PARAMS.MAINMENU.PRELOAD_EVENTS.map(this.emitEvent)]);
+  preload = () =>
+    Promise.all([
+      ...this.PARAMS.MAINMENU.PRELOAD_LABELS.map(this.emitLabelGet),
+      ...this.PARAMS.MAINMENU.PRELOAD_EVENTS.map(this.emitEvent),
+    ]);
 
-  getItemByFunc = (func) => func(this);
+  getItemByFunc = (func: MainMenuItemFactory) => func(this);
 
   emitNext = () => void this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
-  emitLabelGet = (label) => this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label });
-  emitEvent = (event) => this.emit(event);
+  emitLabelGet = (label: string) => this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label });
+  emitEvent = (event: string) => this.emit(event);
 }

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+import type { MainMenuPluginState } from "../utils/mainmenu.js";
+
+export class MainMenuView extends ModuleView<
+  MainMenuPluginEvents,
+  MainMenuPluginConstants,
+  MainMenuPluginSettings,
+  MainMenuPluginParams,
+  MainMenuPluginState
+> {
+  name = "mainmenu.view";
+
+  locLabel = this.PARAMS.MAINMENU.LOC_LABEL;
+  animationTime = this.PARAMS.MAINMENU.TRANSITION;
+  updateEvent = this.EVENTS.MAINMENU.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,23 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as LocsPluginName, SubscribeEvents as LocsSubscribeEvents } from "@vnejs/plugins.text.locs.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.mainmenu.contract";
+
+export type MainMenuPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<ScenarioPluginName, ScenarioSubscribeEvents> &
+  Record<StatePluginName, StateSubscribeEvents> &
+  Record<SystemPluginName, SystemSubscribeEvents> &
+  Record<MemoryPluginName, MemorySubscribeEvents> &
+  Record<LocsPluginName, LocsSubscribeEvents>;
+
+export type MainMenuPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type MainMenuPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+
+export type MainMenuPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/src/utils/mainmenu.ts

@@ -0,0 +1,27 @@
+import type { Module } from "@vnejs/module";
+
+import type { MainMenuItem } from "@vnejs/plugins.views.screens.mainmenu.contract";
+
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+
+export type MainMenuViewItem = Omit<MainMenuItem, "onClick">;
+
+export type MainMenuPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  items?: MainMenuViewItem[];
+  realItems?: MainMenuViewItem[];
+  locs?: Record<string, string>;
+  bgSrc?: string;
+  currentItem?: number | null;
+};
+
+export type MainMenuClickPayload = {
+  index?: number;
+};
+
+export type MainMenuViewContext = {
+  emit: Module<MainMenuPluginEvents, MainMenuPluginConstants, MainMenuPluginSettings, MainMenuPluginParams, MainMenuPluginState>["emit"];
+  EVENTS: MainMenuPluginEvents;
+  PARAMS: MainMenuPluginParams;
+};

package/src/view/components/MainMenuControls.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useMemo } from "react";
+
+import { TextControls } from "@vnejs/uis.react";
+
+import type { MainMenuViewContext, MainMenuViewItem } from "../../utils/mainmenu.js";
+
+type MainMenuControlsProps = MainMenuViewContext & {
+  locs?: Record<string, string>;
+  currentItem?: number | null;
+  realItems?: MainMenuViewItem[];
+  items?: MainMenuViewItem[];
+};
+
+export const MainMenuControls = ({ locs = {}, currentItem = null, realItems = [], items = [], emit, EVENTS, PARAMS }: MainMenuControlsProps) => {
+  const mapItems = useCallback(
+    ({ locKey, isDisabled, isHided }: MainMenuViewItem, i: number) => ({ text: locs[locKey], isDisabled, isNotRender: isHided, value: i }),
+    [locs],
+  );
+  const findSelectedIndex = useCallback((value: MainMenuViewItem) => realItems[currentItem ?? -1]?.locKey === value?.locKey, [realItems, currentItem]);
+  const onClick = useCallback((index?: unknown) => void emit(EVENTS.MAINMENU.CLICK, { index: Number(index) }), [emit, EVENTS.MAINMENU.CLICK]);
+
+  const texts = useMemo(() => items.map(mapItems), [items, mapItems]);
+  const selectedIndex = useMemo(() => items.findIndex(findSelectedIndex), [items, findSelectedIndex]);
+
+  const propsControls = useMemo(
+    () => ({ ...PARAMS.MAINMENU.VIEW_PROPS.controls.props, texts, onClick, selectedIndex }),
+    [PARAMS.MAINMENU.VIEW_PROPS.controls.props, texts, onClick, selectedIndex],
+  );
+
+  return <TextControls {...propsControls} />;
+};

package/src/view/components/index.ts

@@ -0,0 +1 @@
+export * from "./MainMenuControls.js";

package/src/view/index.tsx

@@ -0,0 +1,47 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { PositionBox, Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { MainMenuPluginConstants, MainMenuPluginEvents, MainMenuPluginParams, MainMenuPluginSettings } from "../types.js";
+import type { MainMenuPluginState, MainMenuViewContext } from "../utils/mainmenu.js";
+import { MainMenuControls } from "./components/index.js";
+
+type MainMenuComponentProps = ReactComponentProps<
+  MainMenuPluginEvents,
+  MainMenuPluginConstants,
+  MainMenuPluginSettings,
+  MainMenuPluginParams,
+  MainMenuPluginState
+>;
+
+const MainMenu = ({ store, onMount, PARAMS, emit, EVENTS }: MainMenuComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    items = [],
+    bgSrc = "",
+    currentItem = null,
+    realItems = [],
+    locs = {},
+  } = useStoreState<MainMenuPluginState>(store, onMount);
+
+  const viewProps = useMemo<MainMenuViewContext>(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+  const propsScreen = useMemo(
+    () => ({ ...PARAMS.MAINMENU.VIEW_PROPS.screen, bgSrc, isShow, isForce }),
+    [bgSrc, isShow, isForce, PARAMS.MAINMENU.VIEW_PROPS.screen],
+  );
+  const propsControls = useMemo(
+    () => ({ ...viewProps, items, realItems, currentItem, locs }),
+    [viewProps, items, realItems, currentItem, locs],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...PARAMS.MAINMENU.VIEW_PROPS.controls.position}>
+        <MainMenuControls {...propsControls} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<MainMenuPluginState> = createRenderFunc(MainMenu);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,9 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  HIDE: "vne:mainmenu:hide",
-  SHOW: "vne:mainmenu:show",
-  ITEMS: "vne:mainmenu:items",
-
-  CLICK: "vne:mainmenu:click",
-  ACCEPT: "vne:mainmenu:accept",
-  UPDATE: "vne:mainmenu:update",
-};

package/const/params.js

@@ -1,18 +0,0 @@
-export const PRELOAD_LABELS = [];
-export const PRELOAD_EVENTS = [];
-
-export const ITEMS = [];
-
-export const BACKGROUND = "loading";
-
-export const BACKGROUNDS = [];
-export const BACKGROUNDS_INTERVAL = 0;
-
-export const TRANSITION = 500;
-export const ZINDEX = 3000;
-export const LOC_LABEL = "mainMenu";
-
-export const VIEW_PROPS = {
-  screen: { withBackgroundDark: false, withBackgroundBlur: false, zIndex: ZINDEX, transition: TRANSITION },
-  controls: { position: { bottom: 240, left: 240 }, props: { textSize: 96, flexGap: 60, flexDirection: "column" } },
-};

package/index.js

@@ -1,10 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { MainMenuController } from "./modules/controller";
-import { MainMenu } from "./modules/mainmenu";
-import { MainMenuView } from "./modules/view";
-
-regPlugin("MAINMENU", { events: SUBSCRIBE_EVENTS, params }, [MainMenuController, MainMenu, MainMenuView]);

package/modules/view.js

@@ -1,14 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class MainMenuView extends ModuleView {
-  name = "mainmenu.view";
-
-  locLabel = this.PARAMS.MAINMENU.LOC_LABEL;
-  animationTime = this.PARAMS.MAINMENU.TRANSITION;
-  updateEvent = this.EVENTS.MAINMENU.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/index.jsx

@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { PositionBox, Screen, TextControls } from "@vnejs/uis.react";
-
-const EMPTY_ARRAY = [];
-const EMPTY_OBJ = {};
-
-const MainMenuControls = ({ locs = EMPTY_OBJ, currentItem = null, realItems = EMPTY_ARRAY, items = EMPTY_ARRAY, ...props } = EMPTY_OBJ) => {
-  const mapItems = useCallback(({ locKey, isDisabled, isHided }, i) => ({ text: locs[locKey], isDisabled, isNotRender: isHided, value: i }), [locs]);
-  const findSelectedIndex = useCallback((value) => realItems[currentItem]?.locKey === value?.locKey, [realItems, currentItem]);
-  const onClick = useCallback((index) => props.emit(props.EVENTS.MAINMENU.CLICK, { index }), EMPTY_ARRAY);
-
-  const texts = useMemo(() => items.map(mapItems), [items, mapItems]);
-  const selectedIndex = useMemo(() => items.findIndex(findSelectedIndex), [items, findSelectedIndex]);
-
-  const propsControls = useMemo(() => ({ ...props.PARAMS.MAINMENU.VIEW_PROPS.controls.props, texts, onClick, selectedIndex }), [texts, selectedIndex]);
-
-  return <TextControls {...propsControls} />;
-};
-
-const MainMenu = ({ store, onMount, ...props } = EMPTY_OBJ) => {
-  const [state, setState] = useState(EMPTY_OBJ);
-
-  const { isShow = false, isForce = false, items = EMPTY_ARRAY, bgSrc = "", currentItem = null, realItems = EMPTY_ARRAY, locs = EMPTY_OBJ } = state;
-
-  useEffect(() => store.subscribe(setState), EMPTY_ARRAY);
-  useEffect(() => void onMount(), EMPTY_ARRAY);
-
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.MAINMENU.VIEW_PROPS.screen, bgSrc, isShow, isForce }), [bgSrc, isShow, isForce]);
-  const propsControls = useMemo(() => ({ ...props, items, realItems, currentItem, locs }), [items, realItems, currentItem, locs]);
-
-  return (
-    <Screen {...propsScreen}>
-      <PositionBox {...props.PARAMS.MAINMENU.VIEW_PROPS.controls.position}>
-        <MainMenuControls {...propsControls} />
-      </PositionBox>
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<MainMenu {...props} />);