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

package/const/events.js

@@ -2,4 +2,5 @@ export const SUBSCRIBE_EVENTS = {
   SHOW: "vne:interface_controls:show",
   HIDE: "vne:interface_controls:hide",
   UPDATE: "vne:interface_controls:update",
+  CLICK: "vne:interface_controls:click",
 };

package/const/params.js

@@ -0,0 +1,23 @@
+export const VIEW_PROPS = {
+  adv: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 360, bottom: 24, translateX: "calc(1px * var(--vne-length-240))" },
+    flex: { gap: 36 },
+  },
+  line: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 360, bottom: 24 },
+    flex: { gap: 36 },
+  },
+  wall: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 360, bottom: 24 },
+    flex: { gap: 36 },
+  },
+};
+
+export const ITEMS = [
+  { icon: "menu", onClick: ({ emit, EVENTS = {} } = {}) => emit(EVENTS.INTERFACE.GAMEMENU) },
+  { icon: "history", onClick: ({ emit, EVENTS = {} } = {}) => emit(EVENTS.INTERFACE.HISTORY) },
+  { icon: "hide", onClick: ({ emit, EVENTS = {} } = {}) => emit(EVENTS.INTERFACE.VISIBLE) },
+];

package/index.js

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

package/modules/controller.js

@@ -1,13 +1,11 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 export class InterfaceControlsController extends ModuleController {
   name = "interface.controls.controller";
 
   emitGameMenu = () => this.emit(this.EVENTS.INTERFACE.GAMEMENU);
 
-  updateEvent = this.EVENTS.INTERFACE_CONTROLS.UPDATE;
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS_VIEW.UPDATE;
   controls = {
     [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitGameMenu,
     [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitGameMenu,
@@ -19,22 +17,28 @@ export class InterfaceControlsController extends ModuleController {
     [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 = ZINDEX;
+  controlsIndex = this.PARAMS.INTERFACE_VIEW.ZINDEX + 100;
   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_CONTROLS_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, this.onClick);
 
     this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
     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);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.getIconsSrcs);
+    this.on(this.EVENTS.MEMORY.CLEARED, this.getIconsSrcs);
   };
 
+  beforeShow = async () => this.updateState({ icons: await this.getIconsSrcs() });
+
   onShowChanged = ({ isForce = false } = {}) => {
     const { isShow = false } = this.globalState.interface;
-    const event = isShow ? this.EVENTS.INTERFACE_CONTROLS.SHOW : this.EVENTS.INTERFACE_CONTROLS.HIDE;
+    const event = isShow ? this.EVENTS.INTERFACE_CONTROLS_VIEW.SHOW : this.EVENTS.INTERFACE_CONTROLS_VIEW.HIDE;
 
     if (this.state.isShow !== isShow) return this.emit(event, { isForce });
   };
@@ -51,6 +55,8 @@ export class InterfaceControlsController extends ModuleController {
     if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
   };
 
+  onClick = ({ index = 0 } = {}) => this.PARAMS.INTERFACE_CONTROLS_VIEW.ITEMS?.[index]?.onClick(this);
+
   onStateChanged = () => {
     const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
 
@@ -61,8 +67,20 @@ export class InterfaceControlsController extends ModuleController {
 
   toggleUnvisibleControls = (isVisible) => {
     const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+
     return this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
   };
 
   getDefaultState = () => ({ isShow: false, isVisible: false, view: "" });
+
+  getIconsSrcs = () => Promise.all(this.PARAMS.INTERFACE_CONTROLS_VIEW.ITEMS.map(this.getOneIconSrcs));
+
+  getOneIconSrcs = async ({ icon = "", iconHover = "" } = {}) => {
+    const [result, quality] = [{}, this.shared.settings[this.SETTINGS.CANVAS.QUALITY]];
+
+    if (icon) result.src = (await this.loadImageMedia(`interface/${icon}`, "icons", quality, false, false)).src;
+    if (iconHover) result.srcHover = (await this.loadImageMedia(`interface/${iconHover}`, "icons", quality, false, false)).src;
+
+    return result;
+  };
 }

package/modules/view.js

@@ -1,11 +1,13 @@
 import { ModuleView } from "@vnejs/module.components";
 
-import { render, TRANSITION } from "../view";
+import { render } from "../view";
 
 export class InterfaceControlsView extends ModuleView {
   name = "interface.controls.view";
-  animationTime = TRANSITION;
+
+  animationTime = this.PARAMS.INTERFACE_VIEW.TRANSITION;
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS_VIEW.UPDATE;
+
   renderFunc = render;
-  updateEvent = this.EVENTS.INTERFACE_CONTROLS.UPDATE;
-  updateHandler = this.onUpdateReactComponent;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.interface.controls",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,61 +1,48 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { Flex, Icon, View } from "@vnejs/uis.base";
 
-import settingsSrc from "./images/Settings.png";
-import historySrc from "./images/History.png";
-import hideSrc from "./images/Hide.png";
-
-export const TRANSITION = 500;
-export const ZINDEX = 1100;
-
-const ICON_COMMON_PROPS = { width: 96, height: 96, isOpacityOnHover: true };
-
-class InterfaceControls extends React.Component {
-  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, view = "" } = this.state;
-
-    const left = view === "adv" ? 600 : 360;
-
-    return (
-      <View
-        isShow={isShow}
-        isForce={isForce}
-        isHidden={!isVisible}
-        transition={TRANSITION}
-        zIndex={ZINDEX}
-        left={left}
-        bottom={24}
-      >
-        <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>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<InterfaceControls {...props} />, root, resolve);
+const InterfaceControls = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isVisible = false, isForce = false, view = "", icons = [] }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onItemClick = useCallback((index = 0) => props.emit(props.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), []);
+
+  const transition = isForce ? 0 : props.PARAMS.INTERFACE_VIEW.TRANSITION;
+
+  const propsByView = useMemo(() => props.PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS[view] || {}, [view]);
+  const propsIcon = useMemo(() => ({ ...propsByView.icon, transition }), [propsByView, transition]);
+
+  const renderedIcons = useMemo(
+    () =>
+      icons.map(({ src, srcHover }, i) => (
+        <Icon
+          {...propsIcon}
+          srcHover={srcHover}
+          src={src}
+          onClick={onItemClick}
+          value={i}
+          key={i}
+        />
+      )),
+    [propsIcon, icons],
+  );
+
+  return (
+    <View
+      {...propsByView.view}
+      isShow={isShow}
+      isForce={isForce}
+      isHidden={!isVisible}
+      transition={transition}
+      zIndex={props.PARAMS.INTERFACE_VIEW.ZINDEX + 100}
+    >
+      <Flex {...propsByView.flex}>{renderedIcons}</Flex>
+    </View>
+  );
+};
+
+export const render = (props, root) => ReactDOM.render(<InterfaceControls {...props} />, root);