@vnejs/plugins.view.coralina.gamemenu 0.0.1

package/const/events.js

@@ -0,0 +1,7 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:gamemenu_view:show",
+  HIDE: "vne:gamemenu_view:hide",
+  CLICK: "vne:gamemenu_view:click",
+  ACCEPT: "vne:gamemenu_view:accept",
+  UPDATE: "vne:gamemenu_view:update",
+};

package/index.js

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

package/modules/controller.js

@@ -0,0 +1,58 @@
+import { Module } from "@vnejs/module";
+
+const toStateItem = ({ onClick, ...item }) => item;
+const onRealItems = (item) => !item.isDisabled && !item.isHide;
+
+export class GameMenuController extends Module.Controller {
+  name = "gameMenu.controller";
+
+  updateEvent = this.EVENTS.GAMEMENU_VIEW.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.MENU]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => this.emit(this.EVENTS.GAMEMENU.HIDE),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.GAMEMENU_VIEW.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+  };
+  controlsIndex = 3000;
+
+  subscribe = () => {
+    this.on(this.EVENTS.GAMEMENU_VIEW.CLICK, this.onClick);
+    this.on(this.EVENTS.GAMEMENU_VIEW.ACCEPT, this.onAccept);
+
+    this.on(this.EVENTS.GAMEMENU.SHOW, this.onShow);
+    this.on(this.EVENTS.GAMEMENU.HIDE, this.onHide);
+
+    this.on(this.EVENTS.LOCS.LANG_CHANGED, this.onLangChanged);
+
+    this.on(this.EVENTS.STATE.SET, this.onHideForce);
+    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
+  };
+
+  beforeShow = async () => {
+    await this.updateStateItems();
+
+    this.currentItem = null;
+    this.maxCurrentItem = this.state.realItems.length - 1;
+  };
+
+  onLangChanged = () => this.updateStateItems().then(this.updateViewFast);
+
+  onAccept = async () => this.click((await this.getItems()).filter(onRealItems), this.currentItem);
+  onClick = async ({ index } = {}) => this.click(await this.getItems(), index);
+
+  click = (items, index) => index !== null && items[index] && items[index].onClick && items[index].onClick();
+
+  getItems = async () => {
+    const [items] = await this.emit(this.EVENTS.GAMEMENU.ITEMS);
+
+    return items;
+  };
+
+  updateStateItems = async () => {
+    const items = (await this.getItems()).map(toStateItem);
+
+    this.updateState({ items, realItems: items.filter(onRealItems) });
+  };
+}

package/modules/view.js

@@ -0,0 +1,12 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class GameMenuView extends Module.View {
+  name = "gameMenu.view";
+  locLabel = "gameMenu";
+  animationTime = 300;
+  renderFunc = render;
+  updateEvent = this.EVENTS.GAMEMENU_VIEW.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.gamemenu",
+  "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,44 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("GameMenu");
+
+class GameMenu extends React.Component {
+  state = {};
+
+  onClick = ({ currentTarget: { dataset: { index = 0 } = {} } = {} }) =>
+    this.props.emit(this.props.EVENTS.GAMEMENU_VIEW.CLICK, { index });
+
+  renderItem = ({ locKey, isDisabled, isHide }, i) => {
+    const { currentItem = null, locs = {}, realItems = [] } = this.state;
+    const isCurrent = currentItem !== null && realItems[currentItem].locKey === locKey;
+
+    if (isHide) return;
+    return (
+      <div
+        className={b("button", { isCurrent, isDisabled }, ["textWrap_72"])}
+        onClick={isDisabled ? undefined : this.onClick}
+        data-index={i}
+        key={locKey}
+      >
+        <span className="text">{locs[locKey]}</span>
+      </div>
+    );
+  };
+
+  render() {
+    const { isShow = false, isForce = false, items = [] } = this.state;
+
+    return (
+      <div className={b({ isShow, isForce })} data-html2canvas-ignore="1" vne-autoread-disable={isShow ? "1" : ""}>
+        <div className={b("menu")}>{items.map(this.renderItem)}</div>
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<GameMenu {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,44 @@
+.GameMenu
+    display: flex
+    justify-content: center
+    align-items: center
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    backdrop-filter: blur(5px) brightness(0.5)
+    opacity: 0
+    z-index: 4000
+    pointer-events: none
+    font-family: 'Montserrat'
+
+    &-menu
+        display: flex
+        flex-direction: column
+        justify-content: center
+        align-items: center
+        height: 100%
+        gap: 2.5%
+
+    &-button
+        cursor: pointer
+        text-align: center
+        box-sizing: border-box
+        color: rgba(255,255,255,0.6)
+        width: 100%
+        font-weight: 400
+        transition: transform 300ms, text-shadow 300ms, color 300ms
+
+        &_isCurrent,
+        &:hover
+            transform: scale(1.5)
+            color: rgba(255,255,255,0.85)
+            text-shadow: 0px 5px 25px rgba(255,255,255,0.75)
+
+    &_isShow
+        opacity: 1
+        pointer-events: all
+
+    &:not(&_isForce)
+        transition: opacity 500ms