@vnejs/plugins.view.coralina.point-and-click 0.0.1 → 0.1.1

package/modules/controller.js

@@ -1,6 +1,8 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class PointAndClickController extends Module.Controller {
+import { ZINDEX } from "../view";
+
+export class PointAndClickController extends ModuleController {
   name = "point-and-click.controller";
 
   maxCurrentItem = 0;
@@ -13,7 +15,7 @@ export class PointAndClickController extends Module.Controller {
     [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitGameMenu,
     [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => this.emit(this.EVENTS.INTERFACE.HISTORY_BACK),
   };
-  controlsIndex = 2000;
+  controlsIndex = ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.POINT_AND_CLICK.SHOW, this.onShow);
@@ -22,7 +24,6 @@ export class PointAndClickController extends Module.Controller {
 
   beforeShow = async () => {
     this.updateState({ ...this.globalState["point-and-click"] });
-    this.currentItem = null;
     this.maxCurrentItem = this.state.options.length - 1;
 
     await this.emit(this.EVENTS.INTERFACE.HIDE);

package/modules/view.js

@@ -1,11 +1,13 @@
-import { Module } from "@vnejs/module";
+import { ModuleView } from "@vnejs/module.components";
 
-import { render } from "../view";
+import { render, TRANSITION } from "../view";
 
-export class PointAndClickView extends Module.View {
+export class PointAndClickView extends ModuleView {
   name = "point-and-click.view";
-  animationTime = 300;
-  renderFunc = render;
+
+  animationTime = TRANSITION;
   updateEvent = this.EVENTS.POINT_AND_CLICK.UPDATE;
+
+  renderFunc = render;
   updateHandler = this.onUpdateReactComponent;
 }

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.point-and-click",
-  "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

@@ -3,38 +3,48 @@ import ReactDOM from "react-dom";
 
 import { cn } from "@bem-react/classname";
 
+import { PositionBox, Screen } from "@vnejs/uis.base";
+
 import "./index.styl";
 
 const b = cn("PointAndClick");
 
+export const ZINDEX = 1200;
+export const TRANSITION = 300;
+
 class PointAndClick extends React.Component {
-  onOptionClick = (e) =>
-    this.props.emit(this.props.EVENTS.POINT_AND_CLICK.OPTION, { index: Number(e.currentTarget.dataset.index) });
-
-  renderOption = ({ disabled, hided, coords: [x, y] }, index) =>
-    !hided && (
-      <div
-        className={b("option", {
-          disabled,
-          isCurrent: index === this.state.currentItem,
-          coords: Boolean(x) && Boolean(y),
-        })}
-        style={{ left: `${x}%`, top: `${y}%` }}
-        data-index={index}
-        key={index}
-        onClick={disabled ? undefined : this.onOptionClick}
-      />
-    );
+  state = { isShow: false, isForce: false, options: [] };
+
+  onClick = (index) => this.props.emit(this.props.EVENTS.POINT_AND_CLICK.OPTION, { index });
+
+  renderOption = ({ disabled, hided, coords: [x, y], icon }, index) => (
+    <PositionBox
+      left={`${x}%`}
+      top={`${y}%`}
+      translateX={"-50%"}
+      translateY={"-50%"}
+      isNotRender={hided}
+      key={index}
+      onClick={disabled ? undefined : this.onClick}
+      value={index}
+    >
+      <div className={b("option", { icon, disabled, isCurrent: index === this.state.currentItem, coords: Boolean(x) && Boolean(y) })} />
+    </PositionBox>
+  );
 
   render() {
-    const { isShow = false, options = [], isForce = false } = this.state || {};
-
-    console.log(99999999999, isShow, options);
+    const { isShow = false, isForce = false, options = [] } = this.state;
 
     return (
-      <div className={b({ isShow, isForce })} vne-autoread-disable={isShow ? "1" : ""}>
+      <Screen
+        isShow={isShow}
+        isForce={isForce}
+        zIndex={ZINDEX}
+        transition={TRANSITION}
+        isDisableAutoread={isShow}
+      >
         {options.map(this.renderOption)}
-      </div>
+      </Screen>
     );
   }
 }

package/view/index.styl

@@ -1,45 +1,17 @@
 .PointAndClick
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    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
-        transition: transform 300ms
-
-        width: 3%
-        aspect-ratio: 1
+        transition: 300ms
 
-        background: black
-        border-radius: 50%
+        background-repeat: no-repeat
+        background-size: contain
+        background-position: center
 
-        &_coords
-            position: absolute
-            transform: translate(-50%, -50%)
+        position: absolute
+        transform: translate(-50%, -50%)
 
         &:not(&_disabled):hover,
         &_isCurrent:not(&_disabled)
             opacity: 0.85
-            transform: scale(1.25)
-
-        &_coords:hover:not(&_disabled)
-        &_coords&_isCurrent:not(&_disabled)
             transform: translate(-50%, -50%) scale(1.25)
 
         &:not(&_disabled)
@@ -47,10 +19,3 @@
 
         &_disabled
             opacity: 0.5
-
-    &_isShow
-        opacity: 1    
-        pointer-events: all
-
-    &:not(&_isForce)
-        transition: opacity 300ms