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

package/const/params.js

@@ -0,0 +1,14 @@
+export const BACKGROUND = "Menu/loading";
+
+export const VIEW_PROPS = {
+  background: { withDark: false, withBlur: false },
+
+  controls: {
+    position: { bottom: 240, left: 240 },
+    props: { textSize: 96, flexGap: 60, flexDirection: "column" },
+  },
+};
+
+export const TRANSITION = 500;
+export const ZINDEX = 3000;
+export const LOC_LABEL = "mainMenu";

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 { MainMenuController } from "./modules/controller";
 import { MainMenuView } from "./modules/view";
 
-regPlugin("MAINMENU_VIEW", { events: SUBSCRIBE_EVENTS }, [MainMenuController, MainMenuView]);
+regPlugin("MAINMENU_VIEW", { events: SUBSCRIBE_EVENTS, params }, [MainMenuController, MainMenuView]);

package/modules/controller.js

@@ -1,18 +1,23 @@
-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 MainMenuController extends Module.Controller {
+export class MainMenuController extends ModuleController {
   name = "mainmenu.controller";
 
+  emitAccept = () => this.emit(this.EVENTS.MAINMENU_VIEW.ACCEPT);
+
+  bgName = this.PARAMS.MAINMENU_VIEW.BACKGROUND;
+
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
   controls = {
     [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.MAINMENU_VIEW.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitAccept,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.emitAccept,
   };
-  controlsIndex = 2000;
+  controlsIndex = this.PARAMS.MAINMENU_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
@@ -23,28 +28,22 @@ export class MainMenuController extends Module.Controller {
 
     this.on(this.EVENTS.LOCS.LANG_CHANGED, this.updateView);
 
-    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
     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);
   };
 
   beforeShow = async () => {
-    const items = (await this.getItems()).map(toStateItem);
+    const items = (await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).map(toStateItem);
 
-    this.updateState({ items, realItems: items.filter(onRealItems) });
+    this.updateState({ items, realItems: items.filter(onRealItems), bgSrc: (await this.loadBgMedia()).src });
 
-    this.currentItem = null;
     this.maxCurrentItem = this.state.realItems.length - 1;
   };
 
-  onAccept = async () => this.click(await this.getRealItems(), this.currentItem);
-  onClick = async ({ index } = {}) => this.click(await this.getItems(), index);
+  onAccept = async () => this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).filter(onRealItems), this.currentItem);
+  onClick = async ({ index } = {}) => this.click(await this.emitOne(this.EVENTS.MAINMENU.ITEMS), index);
 
-  click = (items, index) => index !== null && items[index] && items[index].onClick && items[index].onClick();
-
-  getItems = async () => {
-    const [items] = await this.emit(this.EVENTS.MAINMENU.ITEMS);
-
-    return items;
-  };
-  getRealItems = async () => (await this.getItems()).filter(onRealItems);
+  click = (items, index) => index !== null && items[index]?.onClick?.();
 }

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 MainMenuView extends Module.View {
+export class MainMenuView extends ModuleView {
   name = "mainmenu.view";
-  locLabel = "mainMenu";
-  animationTime = 500;
-  renderFunc = render;
+
+  locLabel = this.PARAMS.MAINMENU_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.MAINMENU_VIEW.TRANSITION;
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
+
+  renderFunc = render;
   updateHandler = this.onUpdateReactComponent;
 }

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.mainmenu",
-  "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,43 +1,65 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-import "./index.styl";
+class MainMenuControls extends React.Component {
+  state = {};
 
-const b = cn("MainMenu");
+  componentDidUpdate(props) {
+    const { items = [] } = this.props;
 
-class MainMenu extends React.Component {
-  state = {};
+    if (items !== props.items || this.props.realItems !== props.realItems || this.props.locs !== props.locs) this.setState({ texts: items.map(this.mapItems) });
+    if (this.props.currentItem !== props.currentItem) this.setState({ selectedIndex: items.findIndex(this.findSelectedIndex) });
+  }
+  componentDidMount() {
+    this.setState({ texts: this.props.items.map(this.mapItems), selectedIndex: this.props.items.findIndex(this.findSelectedIndex) });
+  }
+
+  mapItems = ({ locKey, isDisabled, isHide }, i) => ({ text: this.props.locs[locKey], isDisabled, isNotRender: isHide, value: i });
+  findSelectedIndex = (value) => this.props.realItems[this.props.currentItem]?.locKey === value?.locKey;
 
-  onClick = ({ currentTarget: { dataset: { index = 0 } = {} } = {} }) =>
-    this.props.emit(this.props.EVENTS.MAINMENU_VIEW.CLICK, { index });
+  onClick = (index) => this.props.emit(this.props.EVENTS.MAINMENU_VIEW.CLICK, { index });
 
-  renderOneButton = ({ locKey, isDisabled, isHide }, i) => {
-    const { currentItem = null, locs = {}, realItems = [] } = this.state;
-    const isCurrent = currentItem !== null && realItems[currentItem].locKey === locKey;
+  render() {
+    const { texts = [], selectedIndex = null } = this.state;
 
     return (
-      !isHide && (
-        <div
-          className={`${b("button", { isDisabled, isCurrent })} textWrap_96`}
-          onClick={isDisabled ? undefined : this.onClick}
-          data-index={i}
-          key={locKey}
-        >
-          <span className="text">{locs[locKey]}</span>
-        </div>
-      )
+      <TextControls
+        selectedIndex={selectedIndex}
+        texts={texts}
+        onClick={this.onClick}
+        {...this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.props}
+      />
     );
-  };
+  }
+}
+
+class MainMenu extends React.Component {
+  state = {};
 
   render() {
-    const { isShow = false, items = [] } = this.state;
+    const { isShow = false, items = [], bgSrc = "", currentItem = null, realItems = [], locs = {} } = this.state;
 
     return (
-      <div className={b({ isShow })} data-html2canvas-ignore="1">
-        <div className={b("menu")}>{items.map(this.renderOneButton)}</div>
-      </div>
+      <Screen
+        isShow={isShow}
+        bgSrc={bgSrc}
+        zIndex={this.props.PARAMS.MAINMENU_VIEW.ZINDEX}
+        transition={this.props.PARAMS.MAINMENU_VIEW.TRANSITION}
+        withBackgroundDark={this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withDark}
+        withBackgroundBlur={this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withBlur}
+      >
+        <PositionBox {...this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.position}>
+          <MainMenuControls
+            {...this.props}
+            items={items}
+            realItems={realItems}
+            currentItem={currentItem}
+            locs={locs}
+          />
+        </PositionBox>
+      </Screen>
     );
   }
 }

package/view/index.styl

@@ -1,46 +0,0 @@
-.MainMenu
-    position: absolute
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-    opacity: 0
-    pointer-events: none
-    transition: opacity 500ms
-    z-index: 3000
-
-    &_isShow
-        opacity: 1
-        pointer-events: all
-
-    &-menu
-        position: absolute
-        bottom: 6.25%
-        left: 6.25%
-        display: flex
-        align-items: flex-start
-        justify-content: flex-end
-        flex-direction: column
-        overflow: auto
-        gap: calc(50 / 2160 * 100%)
-        height: 100%
-        z-index: 3100
-
-    &-button
-        line-height: 125%
-        opacity: 0.5
-        color: white
-        text-align: center
-        font-family: 'Montserrat'
-        transition: color 300ms, text-shadow 300ms
-        color: rgba(255,255,255,0.6)
-        text-shadow: initial
-
-        &:not(&_isDisabled)
-            cursor: pointer
-            opacity: 1
-
-        &_isCurrent,
-        &:not(&_isDisabled):hover
-            color: rgba(255,255,255,0.85)
-            text-shadow: 0px 5px 25px rgba(255,255,255,0.75)

package/view/media/triangle.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="3840" height="2160" viewBox="0 0 3840 2160" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="clip_path_1">
-      <rect width="3840" height="2160" />
-    </clipPath>
-  </defs>
-  <g clip-path="url(#clip_path_1)">
-    <rect width="3840" height="2160" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0" />
-    <g fill="#512DA8" fill-rule="evenodd" fill-opacity="0" transform="translate(734 -423)">
-      <path id="Треугольник" d="M0 0L2257.32 753.47L753.469 2257.32L0 0Z" />
-      <path d="M0.395996 1.1864L753.116 2256.26L753.469 2257.32L754.26 2256.53L2256.53 754.261L2257.32 753.47L2256.26 753.116L1.1864 0.396027L0 0L0.395996 1.1864ZM1.5824 1.58243L753.906 2255.47L2255.47 753.907L1.5824 1.58243Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.251" />
-    </g>
-    <g fill="#512DA8" fill-rule="evenodd" fill-opacity="0" transform="translate(734 327)">
-      <path id="Треугольник" d="M2257.32 0L0 753.47L1503.85 2257.32L2257.32 0Z" />
-      <path d="M2257.32 0L2256.14 0.395996L1.0603 753.116L0 753.47L0.790466 754.261L1503.06 2256.53L1503.85 2257.32L1504.21 2256.26L2256.93 1.18643L2257.32 0ZM2255.74 1.58243L1503.42 2255.47L1.85077 753.907L2255.74 1.58243Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.251" />
-    </g>
-    <g fill="#512DA8" fill-rule="evenodd" fill-opacity="0" transform="translate(0 415)">
-      <path id="Треугольник" d="M0 1063.38L3840 2126.77L3840 0L0 1063.38Z" />
-      <path d="M1.87353 1063.9L0 1063.38L1.87353 1062.87L3839 0.276917L3840 0L3840 2126.77L3839 2126.49L1.87353 1063.9ZM3.74707 1063.38L3839 2125.45L3839 1.31458L3.74707 1063.38Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.251" />
-    </g>
-  </g>
-</svg>