@vnejs/plugins.views.screens.credits 0.1.5

package/const/events.js

@@ -0,0 +1,5 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:credits:show",
+  HIDE: "vne:credits:hide",
+  UPDATE: "vne:credits:update",
+};

package/const/params.js

@@ -0,0 +1,11 @@
+export const LINES = [];
+
+export const TRANSITION = 1000;
+export const ZINDEX = 2000;
+
+export const VIEW_PROPS = {
+  screen: { isDisableAutoread: true, zIndex: ZINDEX, transition: TRANSITION },
+  scroll: { waitCommonDelay: TRANSITION, waitStartDelay: 500, waitEndDelay: 2000, duration: 120 * 1000 },
+  flex: { paddingHorizontal: 720, paddingVertical: 120, gap: 36, direction: "column" },
+  text: { size: 72, align: "center" },
+};

package/index.js

@@ -0,0 +1,10 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { CreditsController } from "./modules/controller";
+import { Credits } from "./modules/credits";
+import { CreditsView } from "./modules/view";
+
+regPlugin("CREDITS", { events: SUBSCRIBE_EVENTS, params }, [CreditsController, Credits, CreditsView]);

package/modules/controller.js

@@ -0,0 +1,24 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class CreditsController extends ModuleController {
+  name = "credits.controller";
+
+  onInteract = () => this.emit(this.EVENTS.CREDITS.HIDE);
+
+  updateEvent = this.EVENTS.CREDITS.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.onInteract,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.onInteract,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.onInteract,
+  };
+  controlsIndex = this.PARAMS.CREDITS.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CREDITS.SHOW, this.onShow);
+    this.on(this.EVENTS.CREDITS.HIDE, this.onHide);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+  };
+
+  afterHide = () => this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+}

package/modules/credits.js

@@ -0,0 +1,16 @@
+import { Module } from "@vnejs/module";
+
+import { tokenizeExecLine } from "@vnejs/helpers";
+
+export class Credits extends Module {
+  name = "credits";
+
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
+
+  onLineExec = ({ line = "" } = {}) => {
+    const [action = ""] = tokenizeExecLine(line);
+
+    if (action === "show") return this.emit(this.EVENTS.CREDITS.SHOW);
+    if (action === "hide") return this.emit(this.EVENTS.CREDITS.HIDE);
+  };
+}

package/modules/view.js

@@ -0,0 +1,13 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class CreditsView extends ModuleView {
+  name = "credits.view";
+
+  animationTime = this.PARAMS.CREDITS.TRANSITION;
+  updateEvent = this.EVENTS.CREDITS.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.credits",
+  "version": "0.1.5",
+  "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": ""
+}

package/view/index.jsx

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Flex, Screen, ScrollContent, Text } from "@vnejs/uis.react";
+
+const renderLine = ({ text, props } = {}, i) => (
+  <Text
+    {...props}
+    text={text}
+    key={i}
+  />
+);
+
+const Credits = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClose = useCallback(() => props.emit(props.EVENTS.CREDITS.HIDE), []);
+
+  const propsByView = props.PARAMS.CREDITS.VIEW_PROPS;
+
+  const propsScreen = useMemo(() => ({ ...propsByView.screen, isShow, isForce, onClose }), [isShow, isForce]);
+  const propsScroll = useMemo(() => ({ ...propsByView.scroll, shouldScroll: isShow, onClose }), [isShow]);
+
+  const texts = useMemo(() => props.PARAMS.CREDITS.LINES.split("\n").map((text) => ({ text, props: propsByView.text })), []);
+
+  return (
+    <Screen {...propsScreen}>
+      <ScrollContent {...propsScroll}>
+        <Flex {...propsByView.flex}>{texts.map(renderLine)}</Flex>
+      </ScrollContent>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Credits {...props} />);