@vnejs/plugins.core.text 0.0.1

package/const/const.js

@@ -0,0 +1,6 @@
+export const DEFAULT_SPEAKER = { names: { default: [""] }, color: "#ffffff" };
+export const DEFAULT_SPEAKER_NAME = "default";
+export const LINE_REG = /^((?<speaker>[a-zA-z_0-9]+) )?["](?<text>.+)["]( (?<hash>.*))?$/;
+export const INTERFACE_VIEWS = { ADV: "adv", NVL: "nvl" };
+export const SIZES = { XS: "xs", S: "s", M: "m", L: "l", XL: "xl" };
+export const INTERACT_STATES = { EMPTY: "empty", RENDERING: "rendering", SHOWED: "showed" };

package/const/events.js

@@ -0,0 +1,10 @@
+export const SUBSCRIBE_EVENTS = {
+  EMIT: "vne:text:emit",
+  EMIT_END: "vne:text:emit_end",
+  EMIT_BEFORE: "vne:text:emit_before",
+  CICLE: "vne:text:cicle",
+  INTERACT: "vne:text:interact",
+  SPEAKER_REG: "vne:text:speaker_reg",
+  VISIT: "vne:text:visit",
+  MEET: "vne:text:meet",
+};

package/const/settings.js

@@ -0,0 +1,3 @@
+export const SETTINGS_KEYS = {
+  SPEED: "vne:text:speed",
+};

package/index.js

@@ -0,0 +1,19 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import { SETTINGS_KEYS } from "./const/settings";
+
+import { TextCycle } from "./modules/cycle";
+import { TextInteract } from "./modules/interact";
+import { TextMeet } from "./modules/meet";
+import { TextSpeaker } from "./modules/speaker";
+import { Text } from "./modules/text";
+
+regPlugin("TEXT", { constants, events: SUBSCRIBE_EVENTS, settings: SETTINGS_KEYS }, [
+  TextCycle,
+  TextInteract,
+  TextMeet,
+  TextSpeaker,
+  Text,
+]);

package/modules/cycle.js

@@ -0,0 +1,56 @@
+import { Module } from "@vnejs/module";
+
+let shouldCancelAnimation = false;
+let updateCounter = 0;
+
+export class TextCycle extends Module {
+  name = "text.cycle";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.CICLE, this.onCicle);
+    this.on(this.EVENTS.TEXT.EMIT_END, this.onTextEmitEnd);
+  };
+  onCicle = ({ text = "" } = {}) => this.startUpdateCycle(text);
+  startUpdateCycle = async (oldOriginalText) => {
+    let lastTs = new Date().getTime();
+
+    const textSpeed = this.shared.settings[this.SETTINGS.TEXT.SPEED];
+    const updateCounterCur = ++updateCounter;
+
+    while (updateCounterCur === updateCounter) {
+      await this.waitRender();
+      if (updateCounterCur !== updateCounter || shouldCancelAnimation) {
+        shouldCancelAnimation = false;
+        continue;
+      }
+      const ts = new Date().getTime();
+      const diff = ts - lastTs;
+      if (diff > textSpeed) {
+        lastTs = ts - (diff % textSpeed);
+        this.globalState.text.charsVisible += Math.floor(diff / textSpeed);
+      } else {
+        continue;
+      }
+      const { text, charsVisible, originalText } = this.globalState.text;
+
+      if (charsVisible > text.text.length) {
+        updateCounter++;
+        await this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: false });
+      } else {
+        if (originalText === oldOriginalText) {
+          await this.emit(this.EVENTS.INTERFACE.TEXT, { text, charsVisible });
+        } else updateCounter++;
+      }
+
+      continue;
+    }
+  };
+
+  onTextEmitEnd = () => {
+    updateCounter++;
+  };
+
+  onStateClear = () => {
+    shouldCancelAnimation = true;
+  };
+}

package/modules/interact.js

@@ -0,0 +1,34 @@
+import { Module } from "@vnejs/module";
+
+export class TextInteract extends Module {
+  name = "text.interact";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.INTERACT, this.onTextInteract);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+  onTextInteract = async ({ state = "" } = {}) => {
+    this.state.state = state;
+
+    state === this.CONST.TEXT.INTERACT_STATES.RENDERING
+      ? await this.emit(this.EVENTS.INTERACT.PUSH, { key: `${this.name}.rendering`, handler: this.handlerRendering })
+      : await this.emit(this.EVENTS.INTERACT.POP, { key: `${this.name}.rendering` });
+
+    state === this.CONST.TEXT.INTERACT_STATES.SHOWED
+      ? await this.emit(this.EVENTS.INTERACT.PUSH, { key: `${this.name}.showed`, handler: this.handlerShowed })
+      : await this.emit(this.EVENTS.INTERACT.POP, { key: `${this.name}.showed` });
+  };
+
+  onStateSet = ({ [this.name]: state }) => this.emit(this.EVENTS.TEXT.INTERACT, state);
+  onStateClear = () => this.emit(this.EVENTS.TEXT.INTERACT, this.getDefaultState());
+
+  handlerShowed = async () => {
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.EMPTY });
+    this.emitNext();
+  };
+  handlerRendering = () => this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: true });
+
+  getDefaultState = () => ({ state: this.CONST.TEXT.INTERACT_STATES.EMPTY });
+}

package/modules/meet.js

@@ -0,0 +1,31 @@
+import { Module } from "@vnejs/module";
+
+const MEET_REG = /^(?<char>[a-zA-Z0-9_\-]+)( (?<value>-?\d+))?$/;
+
+export class TextMeet extends Module {
+  name = "meet";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.MEET, this.onMeet);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.setDefaultState);
+    this.on(this.EVENTS.STATE.SET, this.setStateFromGlobalState);
+  };
+
+  init = () => this.emit(this.EVENTS.SCENARIO.EXEC_REG, { module: this.name, handler: this.execHandler });
+
+  execHandler = async (line, args) => {
+    const { char, value } = line.match(MEET_REG).groups;
+
+    await this.emit(this.EVENTS.TEXT.MEET, { char, value, ...args });
+    this.emitNext();
+  };
+
+  onMeet = ({ char, value = 1 }) => {
+    const realValue = Number(value);
+    this.log({ char, value });
+    this.state[char] = this.state[char] ? this.state[char] + realValue : realValue;
+  };
+
+  getDefaultState = () => ({});
+}

package/modules/speaker.js

@@ -0,0 +1,28 @@
+import { Module } from "@vnejs/module";
+
+window.VNESpeakers = {};
+
+export class TextSpeaker extends Module {
+  name = "text.speaker";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.SPEAKER_REG, this.onSpeakerReg);
+  };
+  init = async () => {
+    const defaultSpeakerName = this.CONST.TEXT.DEFAULT_SPEAKER_NAME;
+    const defaultSpeaker = this.CONST.TEXT.DEFAULT_SPEAKER;
+    window.VNESpeakers = { [defaultSpeakerName]: defaultSpeaker, ...window.VNESpeakers };
+
+    this.shared.speakers = {};
+
+    await Promise.all(Object.entries(window.VNESpeakers).map(this.mapSpeakers));
+  };
+
+  mapSpeakers = ([name, speaker]) => this.emit(this.EVENTS.TEXT.SPEAKER_REG, { name, speaker });
+
+  onSpeakerReg = ({ name, speaker } = {}) => {
+    this.log({ action: "reg", name, speaker });
+
+    this.shared.speakers[name] = speaker;
+  };
+}

package/modules/text.js

@@ -0,0 +1,78 @@
+import { Module } from "@vnejs/module";
+
+import { prepareText } from "./utils";
+
+const BIG_VALUE = 99999999;
+
+export class Text extends Module {
+  name = "text";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.EMIT, this.onTextEmit);
+    this.on(this.EVENTS.TEXT.EMIT_END, this.onTextEmitEnd);
+
+    this.on(this.EVENTS.LOCS.LANG_CHANGED, this.changeTextLang);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+  init = async () => {
+    await this.emit(this.EVENTS.SCENARIO.EXEC_REG, { module: this.name, handler: this.onLineHandler });
+    await this.emit(this.EVENTS.SETTINGS.INIT, { name: this.SETTINGS.TEXT.SPEED, value: 15 });
+
+    this.shared.textNoAnimationSources = [];
+  };
+  onLineHandler = async (line, args) => {
+    const { speaker, text, hash } = line.match(this.CONST.TEXT.LINE_REG).groups;
+
+    await this.emit(this.EVENTS.INTERFACE.SHOW);
+    await this.emit(this.EVENTS.TEXT.EMIT, { speaker, text, hash, ...args });
+  };
+  onTextEmit = async ({ text: originalText, speaker = this.CONST.TEXT.DEFAULT_SPEAKER_NAME, ...otherArgs }) => {
+    const [meet, textSpeed] = [this.globalState.meet[speaker], this.shared.settings[this.SETTINGS.TEXT.SPEED]];
+    const [uid, text] = [
+      await this.emitOne(this.EVENTS.VENDORS.UID),
+      prepareText(await this.getRealText(originalText)),
+    ];
+    const charsVisible = textSpeed && !this.shared.textNoAnimationSources.length ? 0 : BIG_VALUE;
+
+    this.updateState({ originalText, charsVisible, text: { ...otherArgs, uid, text, speaker, meet } });
+
+    await this.setInterfaceText();
+
+    if (!textSpeed || this.shared.textNoAnimationSources.length) return setImmediate(this.emitAnimationEnd);
+
+    this.shared.isTextAnimationInProcess = true;
+
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.RENDERING });
+    await this.waitRender();
+    await this.emit(this.EVENTS.TEXT.CICLE, { text: originalText });
+  };
+  onTextEmitEnd = async ({ isForced = true } = {}) => {
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.SHOWED });
+    this.state.charsVisible = isForced ? BIG_VALUE : (await this.getRealText(this.state.originalText)).length;
+
+    if (!this.shared.textNoAnimationSources.length) await this.setInterfaceText();
+    this.shared.isTextAnimationInProcess = false;
+  };
+  onStateSet = ({ [this.name]: state }) => this.setNewState(state);
+  onStateClear = () => this.setNewState(this.getDefaultState());
+
+  setNewState = (state) => {
+    this.setState(state);
+    this.shared.isTextAnimationInProcess = false;
+    this.state.charsVisible = BIG_VALUE;
+
+    return this.changeTextLang();
+  };
+  setInterfaceText = () => this.emit(this.EVENTS.INTERFACE.TEXT, this.state);
+  changeTextLang = async () => {
+    this.state.text = { ...this.state.text, text: prepareText(await this.getRealText(this.state.originalText)) };
+    return this.setInterfaceText();
+  };
+  getRealText = (text) => this.getLocTextByKey(this.globalState.scenario.label, text);
+  emitAnimationEnd = () => this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: true });
+
+  getDefaultState = () => ({ originalText: "", charsVisible: 0, text: this.getDefaultText() });
+  getDefaultText = () => ({ text: [], speaker: this.CONST.TEXT.DEFAULT_SPEAKER_NAME, meet: 0 });
+}

package/modules/utils.js

@@ -0,0 +1,37 @@
+export const prepareText = (str) => {
+  const marks = {};
+  const result = [];
+
+  for (let i = 0; i < str.length; ) {
+    const curChar = str[i];
+
+    if (curChar === "{") {
+      let j = 0;
+      while (true) {
+        j++;
+        if (str[i + j] === "}") {
+          if (str[i + 1] === "/") {
+            let mark = str.slice(i + 2, i + j);
+            if (mark.includes(":")) {
+              mark = mark.split(":")[0];
+            }
+            delete marks[mark];
+          } else {
+            let [mark, value] = [str.slice(i + 1, i + j), true];
+            if (mark.includes(":")) {
+              [mark, value] = mark.split(":");
+            }
+            marks[mark] = value;
+          }
+          break;
+        }
+      }
+      i += j + 1;
+    } else {
+      i++;
+      result.push({ char: curChar, marks: { ...marks } });
+    }
+  }
+
+  return result;
+};

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.core.text",
+  "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": "*"
+  }
+}