@vnejs/plugins.view.coralina.gamemenu 0.1.0 → 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,7 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 const toStateItem = ({ onClick, ...item }) => item;
 const onRealItems = (item) => !item.isDisabled && !item.isHide;
 
@@ -17,7 +15,7 @@ export class GameMenuController extends ModuleController {
     [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
   };
-  controlsIndex = ZINDEX;
+  controlsIndex = this.PARAMS.GAMEMENU_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.GAMEMENU_VIEW.CLICK, this.onClick);

package/modules/view.js

@@ -1,12 +1,14 @@
 import { ModuleView } from "@vnejs/module.components";
 
-import { render, TRANSITION } from "../view";
+import { render } from "../view";
 
 export class GameMenuView extends ModuleView {
   name = "gameMenu.view";
-  locLabel = "gameMenu";
-  animationTime = TRANSITION;
-  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,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.gamemenu",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,57 +1,33 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
-import { Flex, PositionBox, Screen, Text, TextControls } from "@vnejs/uis.base";
-
-export const TRANSITION = 500;
-export const ZINDEX = 3000;
-
-class GameMenu extends React.Component {
-  state = { isShow: false, isForce: false, items: [], texts: [], currentItem: null, locs: {} };
-
-  componentDidUpdate(props, state) {
-    if (state.items !== this.state.items || state.locs !== this.state.locs) {
-      this.setState({
-        texts: this.state.items.map(({ locKey, isDisabled, isHide }, i) => ({
-          isDisabled,
-          isNotRender: isHide,
-          value: i,
-          text: this.state.locs[locKey],
-        })),
-      });
-    }
-  }
-
-  onClick = (index) => this.props.emit(this.props.EVENTS.GAMEMENU_VIEW.CLICK, { index });
-
-  render() {
-    const { isShow = false, isForce = false, texts = [], currentItem = null } = this.state;
-
-    return (
-      <Screen
-        isShow={isShow}
-        isForce={isForce}
-        zIndex={ZINDEX}
-        transition={TRANSITION}
-        isDisableAutoread={isShow}
-        isIgnoreOnScreenshot={true}
-        withBlur={true}
-        withDark={true}
-      >
-        <PositionBox isCentered={true}>
-          <TextControls
-            selectedIndex={currentItem}
-            flexDirection={Flex.DIRECTION.COLUMN}
-            flexGap={60}
-            textSize={96}
-            textAlign={Text.ALIGNS.CENTER}
-            texts={texts}
-            onClick={this.onClick}
-          />
-        </PositionBox>
-      </Screen>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<GameMenu {...props} />, root, resolve);
+import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
+
+const EMPTY_ARRAY = [];
+const EMPTY_OBJ = {};
+
+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([]);
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  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]);
+
+  useEffect(() => void setTexts(items.map(mapItemsToText)), [items, mapItemsToText]);
+
+  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]);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...props.PARAMS.GAMEMENU_VIEW.VIEW_PROPS.position}>
+        <TextControls {...propsControls} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => ReactDOM.render(<GameMenu {...props} />, root);