@vnejs/plugins.view.coralina.confirm 0.0.1

package/index.js

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

package/modules/controller.js

@@ -0,0 +1,23 @@
+import { Module } from "@vnejs/module";
+
+export class ConfirmController extends Module.Controller {
+  name = "confirm.controller";
+
+  updateEvent = this.EVENTS.CONFIRM.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => this.emit(this.EVENTS.CONFIRM.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.CONFIRM.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => this.emit(this.EVENTS.CONFIRM.DECLINE),
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => this.emit(this.EVENTS.CONFIRM.DECLINE),
+  };
+  controlsIndex = 5000;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CONFIRM.SHOW, this.onShow);
+    this.on(this.EVENTS.CONFIRM.HIDE, this.onHide);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+  };
+
+  beforeShow = (args) => this.setState(args);
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.confirm",
+  "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,45 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("ConfirmView");
+
+class ConfirmView extends React.Component {
+  state = { isShow: false, text: "", textAccept: "", textDecline: "" };
+
+  onAccept = () => this.props.emit(this.props.EVENTS.CONFIRM.ACCEPT);
+  onDecline = () => this.props.emit(this.props.EVENTS.CONFIRM.DECLINE);
+
+  renderOneLine = (line = "", i) => (
+    <div key={i} className={b("text", ["text"])}>
+      {line}
+    </div>
+  );
+
+  renderControl = (text, onClick) => (
+    <div className={b("control", ["text"])} onClick={onClick}>
+      {text}
+    </div>
+  );
+
+  render() {
+    const { isShow = false, text = "", textAccept = "", textDecline = "" } = this.state;
+
+    return (
+      <div className={b({ isShow })}>
+        <div className={b("wrap")}>
+          <div className={b("texts", ["textWrap_60"])}>{(text || "").split("\n").map(this.renderOneLine)}</div>
+          <div className={b("controls", ["textWrap_60"])}>
+            {this.renderControl(textAccept, this.onAccept)}
+            {this.renderControl(textDecline, this.onDecline)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<ConfirmView {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,59 @@
+.ConfirmView
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    display: flex
+    align-items: center
+    justify-content: center
+    z-index: 9000
+    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 14.04%, rgba(0,0,0,0.45) 27.9%, rgba(0,0,0,0.55) 45.51%, rgba(0,0,0,0.7) 66.85%, rgba(0,0,0,0.85) 100%);
+    backdrop-filter: blur(5px) brightness(0.5)
+    font-family: Montserrat
+    pointer-events: none
+    opacity: 0
+    transition: opacity 300ms
+
+    &-wrap
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: center
+
+        text-align: center
+
+        height: calc(1000 / 2160 * 100%)
+        gap: calc(50 / 1000 * 100%)
+
+    &-texts
+        display: flex;
+        flex-direction: column
+        justify-content: flex-end
+        width: 100%;
+        height: calc(450 / 1000 * 100%)
+
+    &-text
+        color: rgba(255,255,255,0.6)
+
+    &-controls
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start
+        width: 100%;
+        height: calc(450 / 1000 * 100%)
+
+    &-control
+        cursor: pointer
+        color: rgba(255,255,255,0.6)
+
+        transition: color 300ms, text-shadow 300ms, transform 300ms
+
+        &:hover
+            text-shadow: 0px 5px 25px rgba(255,255,255,0.75)
+            transform: scale(1.5)
+            color: white
+
+    &_isShow
+        pointer-events: all
+        opacity: 1