@vnejs/plugins.views.screens.gamemenu 0.1.4

package/const/events.js

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

package/const/params.js

@@ -0,0 +1,11 @@
+export const ITEMS = [];
+
+export const TRANSITION = 500;
+export const ZINDEX = 3000;
+export const LOC_LABEL = "gameMenu";
+
+export const VIEW_PROPS = {
+  screen: { isIgnoreOnScreenshot: true, withBlur: true, withDark: true, zIndex: ZINDEX, transition: TRANSITION },
+  position: { isCentered: true },
+  controls: { flexDirection: "column", flexGap: 60, textSize: 96, textAlign: "center" },
+};

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 { GameMenuController } from "./modules/controller";
+import { GameMenu } from "./modules/gamemenu";
+import { GameMenuView } from "./modules/view";
+
+regPlugin("GAMEMENU", { events: SUBSCRIBE_EVENTS, params }, [GameMenuController, GameMenu, GameMenuView]);

package/modules/controller.js

@@ -0,0 +1,49 @@
+import { ModuleController } from "@vnejs/module.components";
+import { isNotDisabledNotHided, omitOnClick } from "@vnejs/helpers";
+
+export class GameMenuController extends ModuleController {
+  name = "gameMenu.controller";
+
+  updateEvent = this.EVENTS.GAMEMENU.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.MENU]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.GAMEMENU.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+  };
+  controlsIndex = this.PARAMS.GAMEMENU.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.GAMEMENU.SHOW, this.onShow);
+    this.on(this.EVENTS.GAMEMENU.HIDE, this.onHide);
+    this.on(this.EVENTS.GAMEMENU.ACCEPT, this.onAccept);
+
+    this.on(this.EVENTS.LOCS.CHANGED, this.onLangChanged);
+
+    this.on(this.EVENTS.STATE.SET, this.onHideForce);
+    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
+  };
+
+  beforeShow = async () => {
+    this.updateStateItems();
+
+    this.maxCurrentItem = this.state.realItems.length - 1;
+  };
+  afterHide = () => this.setDefaultState();
+
+  onAccept = () => this.emit(this.EVENTS.GAMEMENU.CLICK, { index: this.currentItem });
+
+  onLangChanged = async () => {
+    this.updateStateItems();
+
+    return this.updateViewFast();
+  };
+
+  updateStateItems = () => {
+    const items = this.PARAMS.GAMEMENU.ITEMS.map(omitOnClick);
+
+    this.updateState({ items, realItems: items.filter(isNotDisabledNotHided) });
+  };
+}

package/modules/gamemenu.js

@@ -0,0 +1,11 @@
+import { Module } from "@vnejs/module";
+
+export class GameMenu extends Module {
+  name = "gameMenu";
+
+  subscribe = () => {
+    this.on(this.EVENTS.GAMEMENU.CLICK, this.onClick);
+  };
+
+  onClick = ({ index = 0 } = {}) => this.PARAMS.GAMEMENU.ITEMS[index].onClick(this);
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.gamemenu",
+  "version": "0.1.4",
+  "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,31 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { PositionBox, Screen, TextControls } from "@vnejs/uis.react";
+
+const GameMenu = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, items = [], locs = {}, currentItem: selectedIndex = null }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback((index) => props.emit(props.EVENTS.GAMEMENU.CLICK, { index }), []);
+  const mapItemsToText = useCallback(({ locKey }, i) => ({ value: i, text: locs[locKey] }), [locs]);
+
+  const texts = useMemo(() => items.map(mapItemsToText), [items, mapItemsToText]);
+
+  const propsView = props.PARAMS.GAMEMENU.VIEW_PROPS;
+
+  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow, isForce, isDisableAutoread: isShow }), [isShow, isForce]);
+  const propsControls = useMemo(() => ({ ...propsView.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.position}>
+        <TextControls {...propsControls} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<GameMenu {...props} />);