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

package/modules/controller.js

@@ -1,6 +1,8 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class InterfaceControlsController extends Module.Controller {
+import { ZINDEX } from "../view";
+
+export class InterfaceControlsController extends ModuleController {
   name = "interface.controls.controller";
 
   emitGameMenu = () => this.emit(this.EVENTS.INTERFACE.GAMEMENU);
@@ -17,7 +19,7 @@ export class InterfaceControlsController extends Module.Controller {
     [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;
+  controlsIndex = ZINDEX;
   controlsCheckNext = true;
 
   subscribe = () => {
@@ -25,24 +27,42 @@ export class InterfaceControlsController extends Module.Controller {
     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);
+    this.on(this.EVENTS.INTERFACE.VIEW_CHANGED, this.onViewChanged);
+    this.on(this.EVENTS.INTERFACE.STATE_CHANGED, this.onStateChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisibleChanged);
   };
 
-  onShowChanged = ({ force = false } = {}) => {
+  onShowChanged = ({ isForce = 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 });
+    if (this.state.isShow !== isShow) return this.emit(event, { isForce });
+  };
+  onViewChanged = ({ isForce = false } = {}) => {
+    const { view = "" } = this.globalState.interface;
+
+    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
   };
-  onVisible = async ({ force = false } = {}) => {
+  onVisibleChanged = async ({ isForce = false } = {}) => {
     const { isVisible = false } = this.globalState.interface;
 
-    if (this.state.isVisible === isVisible) return;
+    this.toggleUnvisibleControls(isVisible);
+
+    if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
+  };
+
+  onStateChanged = () => {
+    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    return this.updateStateAndViewForce({ isVisible, isShow, view });
+  };
 
+  toggleUnvisibleControls = (isVisible) => {
     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);
+    return this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
   };
 
-  getDefaultState = () => ({ isShow: false, isVisible: false });
+  getDefaultState = () => ({ isShow: false, isVisible: false, view: "" });
 }

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 InterfaceControlsView extends Module.View {
+export class InterfaceControlsView extends ModuleView {
   name = "interface.controls.view";
-  animationTime = 500;
+  animationTime = TRANSITION;
   renderFunc = render;
   updateEvent = this.EVENTS.INTERFACE_CONTROLS.UPDATE;
   updateHandler = this.onUpdateReactComponent;

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.interface.controls",
-  "version": "0.0.1",
+  "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,36 +1,59 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Flex, Icon, View } from "@vnejs/uis.base";
 
-import "./index.styl";
+import settingsSrc from "./images/Settings.png";
+import historySrc from "./images/History.png";
+import hideSrc from "./images/Hide.png";
 
-const b = cn("InterfaceControls");
+export const TRANSITION = 500;
+export const ZINDEX = 1100;
+
+const ICON_COMMON_PROPS = { width: 96, height: 96, isOpacityOnHover: true };
 
 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);
+  state = { isShow: false, isVisible: false, isForce: false, view: "" };
+
+  onHistoryClick = () => this.props.emit(this.props.EVENTS.INTERFACE.HISTORY);
+  onGameMenuClick = () => this.props.emit(this.props.EVENTS.INTERFACE.GAMEMENU);
+  onHideClick = () => this.props.emit(this.props.EVENTS.INTERFACE.VISIBLE);
   render() {
-    const { isShow = false, isVisible = false, isForce = false } = this.state;
+    const { isShow = false, isVisible = false, isForce = false, view = "" } = this.state;
+
+    const left = view === "adv" ? 600 : 360;
 
     return (
-      <div
-        className={b({ isShow, isVisible, isForce })}
-        id="InterfaceControls"
-        vne-autoread-allow={isShow && isVisible ? "1" : ""}
-        onClick={this.onInterfaceClick}
+      <View
+        isShow={isShow}
+        isForce={isForce}
+        isHidden={!isVisible}
+        transition={TRANSITION}
+        zIndex={ZINDEX}
+        left={left}
+        bottom={24}
       >
-        <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>
+        <Flex gap={36}>
+          <Icon
+            {...ICON_COMMON_PROPS}
+            transition={isForce ? 0 : TRANSITION}
+            src={settingsSrc}
+            onClick={this.onGameMenuClick}
+          />
+          <Icon
+            {...ICON_COMMON_PROPS}
+            transition={isForce ? 0 : TRANSITION}
+            src={historySrc}
+            onClick={this.onHistoryClick}
+          />
+          <Icon
+            {...ICON_COMMON_PROPS}
+            transition={isForce ? 0 : TRANSITION}
+            src={hideSrc}
+            onClick={this.onHideClick}
+          />
+        </Flex>
+      </View>
     );
   }
 }

package/view/index.styl

@@ -1,54 +0,0 @@
-.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