@vnejs/plugins.view.coralina.choose 0.0.1

package/index.js

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { ChooseController } from "./modules/controller";
+import { ChooseView } from "./modules/view";
+
+regPlugin("CHOOSE_VIEW", {}, [ChooseController, ChooseView]);

package/modules/controller.js

@@ -0,0 +1,34 @@
+import { Module } from "@vnejs/module";
+
+export class ChooseController extends Module.Controller {
+  name = "choose.controller";
+
+  maxCurrentItem = 0;
+  updateEvent = this.EVENTS.CHOOSE.UPDATE;
+
+  emitGameMenu = () => this.emit(this.EVENTS.INTERFACE.GAMEMENU);
+
+  controls = {
+    [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 }),
+  };
+  controlsIndex = 2000;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHOOSE.SHOW, this.onShow);
+    this.on(this.EVENTS.CHOOSE.HIDE, this.onHide);
+  };
+
+  beforeShow = async () => {
+    this.updateState({ ...this.globalState.choose });
+    this.currentItem = null;
+    this.maxCurrentItem = this.state.options.length - 1;
+  };
+
+  getDefaultState = () => ({ options: [], args: {} });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.choose",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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": "*"
+  }
+}

package/view/index.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("Choose");
+
+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, isCurrent }, index) =>
+    !hided && (
+      <div
+        className={b("option", { disabled, isCurrent: index === this.state.currentItem }, ["textWrap_60"])}
+        data-index={index}
+        key={index}
+        onClick={disabled ? undefined : this.onOptionClick}
+      >
+        <span className="text"> {text}</span>
+      </div>
+    );
+
+  render() {
+    const { isShow = false, options = [], isForce = false } = this.state || {};
+
+    return (
+      <div className={b({ isShow, isForce })} vne-autoread-disable={isShow ? "1" : ""}>
+        <div className={b("options")}>{options.map(this.renderOption)}</div>
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<Choose {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,39 @@
+.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
+
+        &:hover,
+        &_isCurrent
+            text-shadow: 0px 5px 25px rgba(255,255,255,0.75);
+            transform: scale(1.5)
+
+    &_isShow
+        opacity: 1    
+        pointer-events: all
+
+    &:not(&_isForce)
+        transition: opacity 300ms