@vnejs/plugins.view.coralina.choose 0.0.2 → 0.1.0

package/modules/controller.js

@@ -1,6 +1,8 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class ChooseController extends Module.Controller {
+import { ZINDEX } from "../view";
+
+export class ChooseController extends ModuleController {
   name = "choose.controller";
 
   maxCurrentItem = 0;
@@ -12,12 +14,11 @@ export class ChooseController extends Module.Controller {
     [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitGameMenu,
     [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitGameMenu,
     [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => this.emit(this.EVENTS.INTERFACE.HISTORY_BACK),
-    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () =>
-      this.currentItem !== null && this.emit(this.EVENTS.CHOOSE.OPTION, { index: this.currentItem }),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => this.onArrow(this.decCurrentItem),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => this.onArrow(this.incCurrentItem),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.currentItem !== null && this.emit(this.EVENTS.CHOOSE.OPTION, { index: this.currentItem }),
   };
-  controlsIndex = 2000;
+  controlsIndex = ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.CHOOSE.SHOW, this.onShow);
@@ -26,8 +27,14 @@ export class ChooseController extends Module.Controller {
 
   beforeShow = async () => {
     this.updateState({ ...this.globalState.choose });
-    this.currentItem = null;
     this.maxCurrentItem = this.state.options.length - 1;
+
+    await this.emit(this.EVENTS.INTERFACE.HIDE);
+  };
+
+  onArrow = (cb) => {
+    cb();
+    while (this.state.options?.[this.currentItem].hided) cb();
   };
 
   getDefaultState = () => ({ options: [], args: {} });

package/modules/view.js

@@ -1,10 +1,10 @@
-import { Module } from "@vnejs/module";
+import { ModuleView } from "@vnejs/module.components";
 
-import { render } from "../view";
+import { render, TRANSITION } from "../view";
 
-export class ChooseView extends Module.View {
+export class ChooseView extends ModuleView {
   name = "choose.view";
-  animationTime = 300;
+  animationTime = TRANSITION;
   renderFunc = render;
   updateEvent = this.EVENTS.CHOOSE.UPDATE;
   updateHandler = this.onUpdateReactComponent;

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.choose",
-  "version": "0.0.2",
+  "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,40 +1,79 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Flex, PositionBox, Screen, Text, TextControls } from "@vnejs/uis.base";
 
-import "./index.styl";
-
-const b = cn("Choose");
+export const TRANSITION = 300;
+export const ZINDEX = 1200;
 
 class Choose extends React.Component {
-  onOptionClick = (e) =>
-    this.props.emit(this.props.EVENTS.CHOOSE.OPTION, { index: Number(e.currentTarget.dataset.index) });
-
-  renderOption = ({ text, disabled, hided, coords: [x, y] }, index) =>
-    !hided && (
-      <div
-        className={b(
-          "option",
-          { disabled, isCurrent: index === this.state.currentItem, coords: Boolean(x) && Boolean(y) },
-          ["textWrap_60"]
-        )}
-        style={{ left: `${x}%`, top: `${y}%` }}
-        data-index={index}
-        key={index}
-        onClick={disabled ? undefined : this.onOptionClick}
-      >
-        <span className="text"> {text}</span>
-      </div>
-    );
+  state = { isShow: false, isForce: false, options: [], optionsRegular: [], optionsWithCoords: [] };
+
+  onClick = (index) => this.props.emit(this.props.EVENTS.CHOOSE.OPTION, { index });
+
+  componentDidUpdate(props, state) {
+    if (state.options !== this.state.options || state.currentItem !== this.state.currentItem) {
+      const { options = [], currentItem = null } = this.state;
+
+      const textsInfo = options.map(({ text, hided, coords, disabled }, i) => ({
+        text,
+        isNotRender: Boolean(hided),
+        value: i,
+        isDisabled: Boolean(disabled),
+        isSelected: currentItem === i,
+        coords,
+      }));
+
+      this.setState({ optionsRegular: textsInfo.filter((e) => !e.coords), optionsWithCoords: textsInfo.filter((e) => e.coords) });
+    }
+  }
+
+  renderOptionWithCoords = ({ text, isDisabled, isNotRender, value, coords: [x, y] } = {}) => (
+    <PositionBox
+      left={`${x}%`}
+      top={`${y}%`}
+      translateX={-50}
+      translateY={-50}
+      isNotRender={isNotRender}
+      key={value}
+    >
+      <Text
+        isSelected={this.state.currentItem === value}
+        isDisabled={isDisabled}
+        textSize={96}
+        text={text}
+        onClick={this.onClick}
+        value={value}
+      />
+    </PositionBox>
+  );
 
   render() {
-    const { isShow = false, options = [], isForce = false } = this.state || {};
+    const { isShow = false, isForce = false, optionsRegular = [], optionsWithCoords = [] } = this.state;
 
     return (
-      <div className={b({ isShow, isForce })} vne-autoread-disable={isShow ? "1" : ""}>
-        <div className={b("options")}>{options.map(this.renderOption)}</div>
-      </div>
+      <Screen
+        isShow={isShow}
+        isForce={isForce}
+        zIndex={ZINDEX}
+        withBlur={true}
+        withDark={true}
+        transition={TRANSITION}
+        isDisableAutoread={true}
+        isIgnoreOnScreenshot={false}
+      >
+        {optionsWithCoords.map(this.renderOptionWithCoords)}
+        <PositionBox isCentered={true}>
+          <TextControls
+            flexDirection={Flex.DIRECTION.COLUMN}
+            flexGap={60}
+            textSize={96}
+            textAlign={Text.ALIGNS.CENTER}
+            texts={optionsRegular}
+            onClick={this.onClick}
+          />
+        </PositionBox>
+      </Screen>
     );
   }
 }

package/view/index.styl

@@ -1,47 +0,0 @@
-.Choose
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 14.04%, rgba(0,0,0,0.45) 27.9%, rgba(0,0,0,0.55) 45.51%, rgba(0,0,0,0.7) 66.85%, rgba(0,0,0,0.85) 100%);
-    display: flex
-    justify-content: center
-    align-items: center
-    z-index: 3000
-    opacity: 0
-    pointer-events: none
-    font-family: Montserrat
-
-    &-options
-        display: flex
-        flex-direction: column
-        justify-content: center
-        align-items: center
-        height: 100%
-        gap: calc(50 / 2160 * 100%)
-
-    &-option
-        cursor: pointer
-        color: rgba(255,255,255,0.6)
-        transition: text-shadow 300ms, transform 300ms
-
-        &_coords
-            position: absolute
-            transform: translate(-50%, -50%)
-
-        &:hover,
-        &_isCurrent
-            text-shadow: 0px 5px 25px rgba(255,255,255,0.75);
-            transform: scale(1.2)
-
-        &_coords:hover
-        &_coords&_isCurrent
-            transform: translate(-50%, -50%) scale(1.2)
-
-    &_isShow
-        opacity: 1    
-        pointer-events: all
-
-    &:not(&_isForce)
-        transition: opacity 300ms