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

package/index.js

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

package/modules/controller.js

@@ -0,0 +1,32 @@
+import { Module } from "@vnejs/module";
+
+export class PointAndClickController extends Module.Controller {
+  name = "point-and-click.controller";
+
+  maxCurrentItem = 0;
+  updateEvent = this.EVENTS.POINT_AND_CLICK.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),
+  };
+  controlsIndex = 2000;
+
+  subscribe = () => {
+    this.on(this.EVENTS.POINT_AND_CLICK.SHOW, this.onShow);
+    this.on(this.EVENTS.POINT_AND_CLICK.HIDE, this.onHide);
+  };
+
+  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);
+  };
+
+  getDefaultState = () => ({ options: [], args: {} });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.point-and-click",
+  "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,42 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("PointAndClick");
+
+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}
+      />
+    );
+
+  render() {
+    const { isShow = false, options = [], isForce = false } = this.state || {};
+
+    console.log(99999999999, isShow, options);
+
+    return (
+      <div className={b({ isShow, isForce })} vne-autoread-disable={isShow ? "1" : ""}>
+        {options.map(this.renderOption)}
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<PointAndClick {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,56 @@
+.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
+
+        background: black
+        border-radius: 50%
+
+        &_coords
+            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)
+            cursor: pointer
+
+        &_disabled
+            opacity: 0.5
+
+    &_isShow
+        opacity: 1    
+        pointer-events: all
+
+    &:not(&_isForce)
+        transition: opacity 300ms