@vnejs/plugins.view.coralina.gamemenu 0.0.1 → 0.1.1

package/const/params.js

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

package/index.js

@@ -1,8 +1,9 @@
 import { regPlugin } from "@vnejs/shared";
 
 import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
 
 import { GameMenuController } from "./modules/controller";
 import { GameMenuView } from "./modules/view";
 
-regPlugin("GAMEMENU_VIEW", { events: SUBSCRIBE_EVENTS }, [GameMenuController, GameMenuView]);
+regPlugin("GAMEMENU_VIEW", { events: SUBSCRIBE_EVENTS, params }, [GameMenuController, GameMenuView]);

package/modules/controller.js

@@ -1,9 +1,9 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
 const toStateItem = ({ onClick, ...item }) => item;
 const onRealItems = (item) => !item.isDisabled && !item.isHide;
 
-export class GameMenuController extends Module.Controller {
+export class GameMenuController extends ModuleController {
   name = "gameMenu.controller";
 
   updateEvent = this.EVENTS.GAMEMENU_VIEW.UPDATE;
@@ -15,7 +15,7 @@ export class GameMenuController extends Module.Controller {
     [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
   };
-  controlsIndex = 3000;
+  controlsIndex = this.PARAMS.GAMEMENU_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.GAMEMENU_VIEW.CLICK, this.onClick);
@@ -33,7 +33,6 @@ export class GameMenuController extends Module.Controller {
   beforeShow = async () => {
     await this.updateStateItems();
 
-    this.currentItem = null;
     this.maxCurrentItem = this.state.realItems.length - 1;
   };
 
@@ -44,11 +43,7 @@ export class GameMenuController extends Module.Controller {
 
   click = (items, index) => index !== null && items[index] && items[index].onClick && items[index].onClick();
 
-  getItems = async () => {
-    const [items] = await this.emit(this.EVENTS.GAMEMENU.ITEMS);
-
-    return items;
-  };
+  getItems = () => this.emitOne(this.EVENTS.GAMEMENU.ITEMS);
 
   updateStateItems = async () => {
     const items = (await this.getItems()).map(toStateItem);

package/modules/view.js

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

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.gamemenu",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "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": "",
-  "peerDependencies": {
-    "@vnejs/shared": "*",
-    "@vnejs/module": "*"
-  }
+  "description": ""
 }

package/view/index.jsx

@@ -1,44 +1,33 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-import "./index.styl";
+const EMPTY_ARRAY = [];
+const EMPTY_OBJ = {};
 
-const b = cn("GameMenu");
+const GameMenu = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, items = EMPTY_ARRAY, locs = EMPTY_OBJ, currentItem: selectedIndex = null }, setState] = useState({});
+  const [texts, setTexts] = useState([]);
 
-class GameMenu extends React.Component {
-  state = {};
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
 
-  onClick = ({ currentTarget: { dataset: { index = 0 } = {} } = {} }) =>
-    this.props.emit(this.props.EVENTS.GAMEMENU_VIEW.CLICK, { index });
+  const onClick = useCallback((index) => props.emit(props.EVENTS.GAMEMENU_VIEW.CLICK, { index }), []);
+  const mapItemsToText = useCallback(({ locKey, isDisabled, isHide }, i) => ({ isDisabled, isNotRender: isHide, value: i, text: locs[locKey] }), [locs]);
 
-  renderItem = ({ locKey, isDisabled, isHide }, i) => {
-    const { currentItem = null, locs = {}, realItems = [] } = this.state;
-    const isCurrent = currentItem !== null && realItems[currentItem].locKey === locKey;
+  useEffect(() => void setTexts(items.map(mapItemsToText)), [items, mapItemsToText]);
 
-    if (isHide) return;
-    return (
-      <div
-        className={b("button", { isCurrent, isDisabled }, ["textWrap_72"])}
-        onClick={isDisabled ? undefined : this.onClick}
-        data-index={i}
-        key={locKey}
-      >
-        <span className="text">{locs[locKey]}</span>
-      </div>
-    );
-  };
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.GAMEMENU_VIEW.VIEW_PROPS.screen, isShow, isForce, isDisableAutoread: isShow }), [isShow, isForce]);
+  const propsControls = useMemo(() => ({ ...props.PARAMS.GAMEMENU_VIEW.VIEW_PROPS.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
 
-  render() {
-    const { isShow = false, isForce = false, items = [] } = this.state;
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...props.PARAMS.GAMEMENU_VIEW.VIEW_PROPS.position}>
+        <TextControls {...propsControls} />
+      </PositionBox>
+    </Screen>
+  );
+};
 
-    return (
-      <div className={b({ isShow, isForce })} data-html2canvas-ignore="1" vne-autoread-disable={isShow ? "1" : ""}>
-        <div className={b("menu")}>{items.map(this.renderItem)}</div>
-      </div>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<GameMenu {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<GameMenu {...props} />, root);

package/view/index.styl

@@ -1,44 +0,0 @@
-.GameMenu
-    display: flex
-    justify-content: center
-    align-items: center
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    backdrop-filter: blur(5px) brightness(0.5)
-    opacity: 0
-    z-index: 4000
-    pointer-events: none
-    font-family: 'Montserrat'
-
-    &-menu
-        display: flex
-        flex-direction: column
-        justify-content: center
-        align-items: center
-        height: 100%
-        gap: 2.5%
-
-    &-button
-        cursor: pointer
-        text-align: center
-        box-sizing: border-box
-        color: rgba(255,255,255,0.6)
-        width: 100%
-        font-weight: 400
-        transition: transform 300ms, text-shadow 300ms, color 300ms
-
-        &_isCurrent,
-        &:hover
-            transform: scale(1.5)
-            color: rgba(255,255,255,0.85)
-            text-shadow: 0px 5px 25px rgba(255,255,255,0.75)
-
-    &_isShow
-        opacity: 1
-        pointer-events: all
-
-    &:not(&_isForce)
-        transition: opacity 500ms