@vnejs/plugins.views.screens.mainmenu 0.1.6

package/const/events.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,10 @@
+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/controller.js

@@ -0,0 +1,85 @@
+import { ModuleController } from "@vnejs/module.components";
+import { isNotDisabledNotHided, omitOnClick } from "@vnejs/helpers";
+
+const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export class MainMenuController extends ModuleController {
+  name = "mainmenu.controller";
+
+  emitAccept = () => 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]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitAccept,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: 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(isNotDisabledNotHided), 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);
+  };
+
+  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);
+
+  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 && items[index]?.onClick?.();
+}

package/modules/mainmenu.js

@@ -0,0 +1,44 @@
+import { Module } from "@vnejs/module";
+
+export class MainMenu extends Module {
+  name = "mainmenu";
+
+  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 && 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/modules/view.js

@@ -0,0 +1,14 @@
+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/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.mainmenu",
+  "version": "0.1.6",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/view/index.jsx

@@ -0,0 +1,42 @@
+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} />);