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

package/modules/controller.js

@@ -1,11 +1,15 @@
-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 {
+window.VneMainMenuBg = "Menu/loading";
+
+export class MainMenuController extends ModuleController {
   name = "mainmenu.controller";
 
+  bgName = window.VneMainMenuBg;
+
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
   controls = {
     [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
@@ -25,14 +29,16 @@ export class MainMenuController extends Module.Controller {
 
     this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
     this.on(this.EVENTS.STATE.SET, this.onHideForce);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+    this.on(this.EVENTS.STATE.CLEAR, this.loadBgMedia);
   };
 
   beforeShow = async () => {
     const items = (await this.getItems()).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;
   };
 
@@ -41,10 +47,6 @@ export class MainMenuController 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.MAINMENU.ITEMS);
-
-    return items;
-  };
+  getItems = () => this.emitOne(this.EVENTS.MAINMENU.ITEMS);
   getRealItems = async () => (await this.getItems()).filter(onRealItems);
 }

package/modules/view.js

@@ -1,11 +1,11 @@
-import { Module } from "@vnejs/module";
+import { ModuleView } from "@vnejs/module.components";
 
-import { render } from "../view";
+import { render, TRANSITION } from "../view";
 
-export class MainMenuView extends Module.View {
+export class MainMenuView extends ModuleView {
   name = "mainmenu.view";
   locLabel = "mainMenu";
-  animationTime = 500;
+  animationTime = TRANSITION;
   renderFunc = render;
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
   updateHandler = this.onUpdateReactComponent;

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.mainmenu",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "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,44 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Flex, PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-import "./index.styl";
-
-const b = cn("MainMenu");
+export const TRANSITION = 500;
 
 class MainMenu extends React.Component {
-  state = {};
-
-  onClick = ({ currentTarget: { dataset: { index = 0 } = {} } = {} }) =>
-    this.props.emit(this.props.EVENTS.MAINMENU_VIEW.CLICK, { index });
+  state = { isShow: false, items: [], bgSrc: "" };
 
-  renderOneButton = ({ locKey, isDisabled, isHide }, i) => {
-    const { currentItem = null, locs = {}, realItems = [] } = this.state;
-    const isCurrent = currentItem !== null && realItems[currentItem].locKey === locKey;
-
-    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>
-      )
-    );
-  };
+  onClick = (index) => this.props.emit(this.props.EVENTS.MAINMENU_VIEW.CLICK, { index });
+  mapItems = ({ locKey, isDisabled, isHide }, i) => ({ text: this.state.locs[locKey], isDisabled, isNotRender: isHide, value: i });
+  findSelectedIndex = (value) => this.state.realItems[this.state.currentItem]?.locKey === value?.locKey;
 
   render() {
-    const { isShow = false, items = [] } = this.state;
+    const { isShow = false, items = [], bgSrc } = this.state;
+
+    const selectedIndex = items.findIndex(this.findSelectedIndex);
+    const texts = items.map(this.mapItems);
 
     return (
-      <div className={b({ isShow })} data-html2canvas-ignore="1">
-        <div className={b("menu")}>{items.map(this.renderOneButton)}</div>
-      </div>
+      <Screen
+        zIndex={3000}
+        isShow={isShow}
+        bgSrc={bgSrc}
+        transition={TRANSITION}
+      >
+        <PositionBox
+          bottom={240}
+          left={240}
+        >
+          <TextControls
+            selectedIndex={selectedIndex}
+            texts={texts}
+            onClick={this.onClick}
+            textSize={96}
+            flexGap={60}
+            flexDirection={Flex.DIRECTION.COLUMN}
+          />
+        </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>