@vnejs/plugins.view.coralina.interface.controls 0.0.1

package/const/events.js

@@ -0,0 +1,5 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:interface_controls:show",
+  HIDE: "vne:interface_controls:hide",
+  UPDATE: "vne:interface_controls:update",
+};

package/index.js

@@ -0,0 +1,8 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+
+import { InterfaceControlsController } from "./modules/controller";
+import { InterfaceControlsView } from "./modules/view";
+
+regPlugin("INTERFACE_CONTROLS", { events: SUBSCRIBE_EVENTS }, [InterfaceControlsController, InterfaceControlsView]);

package/modules/controller.js

@@ -0,0 +1,48 @@
+import { Module } from "@vnejs/module";
+
+export class InterfaceControlsController extends Module.Controller {
+  name = "interface.controls.controller";
+
+  emitGameMenu = () => this.emit(this.EVENTS.INTERFACE.GAMEMENU);
+
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitGameMenu,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitGameMenu,
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => this.emit(this.EVENTS.INTERFACE.HISTORY),
+    [this.CONST.CONTROLS.BUTTONS.INTERFACE_HIDE]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => this.emit(this.EVENTS.INTERFACE.INTERACT),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => this.emit(this.EVENTS.INTERFACE.HISTORY_BACK),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => this.emit(this.EVENTS.INTERFACE.HISTORY),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE),
+  };
+  controlsUnvisible = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE) };
+  controlsIndex = 1100;
+  controlsCheckNext = true;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE_CONTROLS.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_CONTROLS.HIDE, this.onHide);
+
+    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisible);
+  };
+
+  onShowChanged = ({ force = false } = {}) => {
+    const { isShow = false } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE_CONTROLS.SHOW : this.EVENTS.INTERFACE_CONTROLS.HIDE;
+
+    if (this.state.isShow !== isShow) return this.emit(event, { force });
+  };
+  onVisible = async ({ force = false } = {}) => {
+    const { isVisible = false } = this.globalState.interface;
+
+    if (this.state.isVisible === isVisible) return;
+
+    const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+    await this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
+    await this.updateStateAndView({ isVisible }, force, !force);
+  };
+
+  getDefaultState = () => ({ isShow: false, isVisible: false });
+}

package/modules/view.js

@@ -0,0 +1,11 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class InterfaceControlsView extends Module.View {
+  name = "interface.controls.view";
+  animationTime = 500;
+  renderFunc = render;
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.interface.controls",
+  "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,38 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("InterfaceControls");
+
+class InterfaceControls extends React.Component {
+  state = {};
+  onInterfaceClick = () => this.props.emit(this.props.EVENTS.INTERFACE.INTERACT);
+  emitEvent = (e, event) => {
+    e.stopPropagation();
+    this.props.emit(event);
+  };
+  onHistoryClick = (e) => this.emitEvent(e, this.props.EVENTS.INTERFACE.HISTORY);
+  onGameMenuClick = (e) => this.emitEvent(e, this.props.EVENTS.INTERFACE.GAMEMENU);
+  onHideClick = (e) => this.emitEvent(e, this.props.EVENTS.INTERFACE.VISIBLE);
+  render() {
+    const { isShow = false, isVisible = false, isForce = false } = this.state;
+
+    return (
+      <div
+        className={b({ isShow, isVisible, isForce })}
+        id="InterfaceControls"
+        vne-autoread-allow={isShow && isVisible ? "1" : ""}
+        onClick={this.onInterfaceClick}
+      >
+        <div className={b("control", { settings: true })} onClick={this.onGameMenuClick} />
+        <div className={b("control", { history: true })} onClick={this.onHistoryClick} />
+        <div className={b("control", { hide: true })} onClick={this.onHideClick} />
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<InterfaceControls {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,54 @@
+.InterfaceControls
+    position: absolute
+    right: 15%
+    bottom: 1%
+    left: 15%
+    font-family: "Montserrat"
+    pointer-events: none
+    opacity: 0
+    z-index: 1100
+
+    display: flex
+    align-items: center
+    flex-shrink: 0
+    gap: calc(50 / 2688 * 100%);
+
+    &-control
+        width: calc(120 / 2688 * 100%)
+        aspect-ratio: 12/10
+        transition: box-shadow 300ms, background-image 300ms
+        cursor: pointer
+        background-position: center
+        background-repeat: no-repeat
+        background-size: contain
+
+        &_settings
+            background-image: url("./images/Settings.png")
+
+            &:hover
+                background-image: url("./images/Settings_H.png")
+
+        &_history
+            background-image: url("./images/History.png")
+
+            &:hover
+                background-image: url("./images/History_H.png")
+
+        &_hide
+            background-image: url("./images/Hide.png")
+
+            &:hover
+                background-image: url("./images/Hide_H.png")
+
+        &-control ~ &-control
+            margin-left: calc(50 / 2688 * 100%)
+
+    &_isShow
+        pointer-events: all
+        opacity: 1
+
+    &:not(&_isVisible)
+        opacity: 0
+
+    &:not(&_isForce)
+        transition: opacity 500ms