@vnejs/plugins.views.intro 0.1.1 → 0.1.3

package/const/params.js

@@ -0,0 +1,11 @@
+export const BACKGROUND = "Menu/loading";
+
+export const TRANSITION = 500;
+export const ZINDEX = 2000;
+export const LOC_LABEL = "intro";
+
+export const VIEW_PROPS = {
+  texts: { position: { top: 240, left: 120, right: 720 }, flex: { direction: "column", gap: 60 }, text: { size: 96 } },
+  hint: { position: { bottom: 120, left: 120, right: 120 }, text: { size: 60, align: "center" } },
+  screen: { transition: TRANSITION, zIndex: ZINDEX },
+};

package/index.js

@@ -1,7 +1,10 @@
 import { regPlugin } from "@vnejs/shared";
 
 import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
 
+import { IntroController } from "./modules/controller";
 import { Intro } from "./modules/intro";
+import { IntroView } from "./modules/view";
 
-regPlugin("INTRO", { events: SUBSCRIBE_EVENTS }, [Intro]);
+regPlugin("INTRO", { events: SUBSCRIBE_EVENTS, params }, [IntroController, Intro, IntroView]);

package/modules/controller.js

@@ -0,0 +1,21 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class IntroController extends ModuleController {
+  name = "intro.controller";
+
+  emitInteract = () => this.emit(this.EVENTS.INTRO.INTERACT);
+
+  bgName = this.PARAMS.INTRO.BACKGROUND;
+  updateEvent = this.EVENTS.INTRO.UPDATE;
+  controls = { [this.CONST.CONTROLS.BUTTONS.ANY]: this.emitInteract };
+  controlsIndex = this.PARAMS.INTRO.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTRO.SHOW, this.onShow);
+    this.on(this.EVENTS.INTRO.HIDE, this.onHide);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+  };
+
+  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
+}

package/modules/intro.js

@@ -4,26 +4,32 @@ export class Intro extends Module {
   name = "intro";
 
   subscribe = () => {
-    this.on(this.EVENTS.INTRO.CLICK, this.onIntroInteract);
-
-    this.on(this.EVENTS.INTRO.INTERACT, this.onIntroInteract);
     this.on(this.EVENTS.INTRO.SKIP, this.onIntroSkip);
+    this.on(this.EVENTS.INTRO.CLICK, this.onIntroClick);
+    this.on(this.EVENTS.INTRO.INTERACT, this.onIntroInteract);
   };
-  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.execHandler });
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
+
+  onLineExec = () => {
+    if (this.isShowed) return void this.emitSkip();
 
-  execHandler = async (line, args) => {
-    if (this.isShowed) return setImmediate(this.emitSkip);
-    if (line === "show") return this.emit(this.EVENTS.INTRO.SHOW);
-    if (line === "hide") this.isShowed = true;
-    if (line === "hide") return this.emit(this.EVENTS.INTRO.HIDE);
+    this.isShowed = true;
+
+    return this.emit(this.EVENTS.INTRO.SHOW);
   };
 
-  onIntroInteract = () => {
-    // log
+  onIntroClick = async () => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "click" } });
+    await this.emit(this.EVENTS.INTRO.HIDE);
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+  onIntroInteract = async () => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "interact" } });
+    await this.emit(this.EVENTS.INTRO.HIDE);
     this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
   };
   onIntroSkip = () => {
-    // log
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "skip" } });
     this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
   };
 

package/modules/view.js

@@ -0,0 +1,14 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class IntroView extends ModuleView {
+  name = "intro.view";
+
+  locLabel = this.PARAMS.INTRO.LOC_LABEL;
+  animationTime = this.PARAMS.INTRO.TRANSITION;
+  updateEvent = this.EVENTS.INTRO.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.intro",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/components/IntroHint.jsx

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+
+import { PositionBox, Text } from "@vnejs/uis.react";
+
+export const IntroHint = ({ text = "", ...props } = {}) => {
+  const propsText = useMemo(() => ({ ...props.PARAMS.INTRO.VIEW_PROPS.hint.text, text }), [text]);
+
+  return (
+    <PositionBox {...props.PARAMS.INTRO.VIEW_PROPS.hint.position}>
+      <Text {...propsText} />
+    </PositionBox>
+  );
+};

package/view/components/IntroTexts.jsx

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+import { PositionBox, Text, Flex } from "@vnejs/uis.react";
+
+const renderText = ({ text, props }, i) => (
+  <Text
+    {...props}
+    text={text}
+    key={i}
+  />
+);
+
+export const IntroTexts = ({ text = "", ...props } = {}) => {
+  const propsByView = props.PARAMS.INTRO.VIEW_PROPS.texts;
+
+  const textsObj = useMemo(() => text.split("\n").map((line) => ({ text: line, props: props.PARAMS.INTRO.VIEW_PROPS.texts.text })), [text]);
+
+  return (
+    <PositionBox {...propsByView.position}>
+      <Flex {...propsByView.flex}>{textsObj.map(renderText)}</Flex>
+    </PositionBox>
+  );
+};

package/view/components/index.js

@@ -0,0 +1,2 @@
+export * from "./IntroHint";
+export * from "./IntroTexts";

package/view/index.jsx

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen } from "@vnejs/uis.react";
+
+import { IntroHint, IntroTexts } from "./components";
+
+const Intro = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, bgSrc = "", locs = {} }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback(() => props.emit(props.EVENTS.INTRO.CLICK), []);
+
+  const propsTexts = useMemo(() => ({ ...props, text: locs.intro }), [locs]);
+  const propsHint = useMemo(() => ({ ...props, text: locs.hint }), [locs]);
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.INTRO.VIEW_PROPS.screen, bgSrc, isShow, isForce, onClick }), [bgSrc, isShow, isForce]);
+
+  return (
+    <Screen {...propsScreen}>
+      <IntroTexts {...propsTexts} />
+      <IntroHint {...propsHint} />
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Intro {...props} />);