@vnejs/plugins.views.achievement 0.1.1

package/const/const.js

@@ -0,0 +1 @@
+export const EXEC_ACTIONS = { UNLOCK: "unlock" };

package/const/events.js

@@ -0,0 +1,7 @@
+export const SUBSCRIBE_EVENTS = {
+  LOAD: "vne:achievement:load",
+  UNLOCK: "vne:achievement:unlock",
+  APPEND: "vne:achievement:append",
+  UPDATE: "vne:achievement:update",
+  UNLOCKED: "vne:achievement:unlocked",
+};

package/const/params.js

@@ -0,0 +1,28 @@
+export const TRANSITION = 500;
+export const ZINDEX = 100000;
+export const LOC_LABEL = "achievement";
+
+export const SHOW_DURATION = 5000;
+
+export const VIEW_PROPS = {
+  title: { size: 60, isActive: true },
+  description: { size: 48 },
+
+  wrap: { borderRadius: 120, height: 204, width: 1260, padding: 0, borderWidth: 0, isSelected: true },
+
+  flex: { direction: "row", gap: 36, height: "100%", align: "center" },
+  flexText: { justify: "spaceEvenly", direction: "column", height: 180 },
+
+  icon: { width: 180, height: 180, isDisabled: true, marginLeft: 24 },
+};
+
+export const TOP = 120;
+export const TOP_SHIFT = 240;
+
+export const LEFT = 0;
+export const LEFT_SHIFT = 60;
+
+export const INFO = {
+  kekw: { title: "title", description: "description.kekw", icon: "kekw" },
+  qwert: { title: "title", description: "description.qwert", icon: "qwert" },
+};

package/index.js

@@ -0,0 +1,12 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { Achievement } from "./modules/achievement";
+import { AchievementController } from "./modules/controller";
+import { AchievementExec } from "./modules/exec";
+import { AchievementView } from "./modules/view";
+
+regPlugin("ACHIEVEMENT", { constants, events: SUBSCRIBE_EVENTS, params }, [Achievement, AchievementController, AchievementExec, AchievementView]);

package/modules/achievement.js

@@ -0,0 +1,23 @@
+import { Module } from "@vnejs/module";
+
+const STORAGE_VALUE = 1;
+
+export class Achievement extends Module {
+  name = "achievement";
+
+  subscribe = () => {
+    this.on(this.EVENTS.ACHIEVEMENT.CLEAR, this.onAchievementClear);
+    this.on(this.EVENTS.ACHIEVEMENT.UNLOCK, this.onAchievementUnlock);
+  };
+
+  onAchievementClear = () => this.emitOne(this.EVENTS.STORAGE.RM_ALL, { module: this.name });
+
+  onAchievementUnlock = async ({ id = "", isSkipIfPossible = false }) => {
+    const storageValue = await this.emitOne(this.EVENTS.STORAGE.GET, { module: this.name, key: id });
+
+    this.emit(this.EVENTS.STORAGE.SET, { module: this.name, key: id, value: STORAGE_VALUE });
+    this.emit(this.EVENTS.ACHIEVEMENT.UNLOCKED, { id });
+
+    if (!isSkipIfPossible || storageValue !== STORAGE_VALUE) return this.emit(this.EVENTS.ACHIEVEMENT.APPEND, { id });
+  };
+}

package/modules/controller.js

@@ -0,0 +1,32 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class AchievementController extends ModuleController {
+  name = "achievement.controller";
+
+  updateEvent = this.EVENTS.ACHIEVEMENT.UPDATE;
+
+  subscribe = () => {
+    this.on(this.EVENTS.ACHIEVEMENT.LOAD, this.onLoad);
+    this.on(this.EVENTS.ACHIEVEMENT.APPEND, this.onAppend);
+  };
+
+  onLoad = ({ id = "" }) => {
+    if (this.PARAMS.ACHIEVEMENT.INFO[id].icon) return this.getIconSrc(this.PARAMS.ACHIEVEMENT.INFO[id].icon);
+  };
+  onAppend = ({ id = "" }) => void this.append(id);
+
+  append = async (id = "") => {
+    const initialInfo = { id, isShow: false, isNotShowed: true };
+
+    if (this.PARAMS.ACHIEVEMENT.INFO[id].icon) initialInfo.icon = await this.getIconSrc(this.PARAMS.ACHIEVEMENT.INFO[id].icon);
+
+    this.updateStateAndViewFast({ array: [...(this.state.array || []), initialInfo] });
+    await this.waitTimeout(this.PARAMS.ACHIEVEMENT.TRANSITION);
+    this.updateStateAndViewFast({ array: this.state.array.map((i) => (i.id === id ? { ...i, isShow: true, isNotShowed: false } : i)) });
+    await this.waitTimeout(this.PARAMS.ACHIEVEMENT.SHOW_DURATION);
+    this.updateStateAndViewFast({ array: this.state.array.map((i) => (i.id === id ? { ...i, isShow: false } : i)) });
+    await this.waitTimeout(this.PARAMS.ACHIEVEMENT.TRANSITION);
+    this.updateStateAndViewFast({ array: this.state.array.filter((i) => i.id !== id) });
+  };
+  getIconSrc = async (icon = "") => (await this.loadImageMedia(`achievement/${icon}`, "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src;
+}

package/modules/exec.js

@@ -0,0 +1,38 @@
+import { Module } from "@vnejs/module";
+
+import { tokenizeExecLine } from "@vnejs/helpers.tokenize-exec-line";
+
+export class AchievementExec extends Module {
+  name = "achievement.exec";
+
+  init = () =>
+    Promise.all([
+      this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: "achievement", handler: this.onLineExec }),
+      this.emit(this.EVENTS.SCENARIO.LINE_LOAD_REG, { module: "achievement", handler: this.onLineLoad }),
+    ]);
+
+  onLineExec = async ({ keywords = [], line = "" } = {}) => {
+    const [action = "", ...tokens] = tokenizeExecLine(line);
+
+    await this.emitActionExec(action, tokens, keywords);
+
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+  onLineLoad = ({ line = "", priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND } = {}) => {
+    const [action = "", ...tokens] = tokenizeExecLine(line);
+
+    return this.emitActionLoad(action, tokens, priority);
+  };
+
+  emitActionExec = (action = "", tokens = [], keywords = []) => {
+    const isSkipIfPossible = keywords.includes("skip-if-possible");
+
+    if (action === this.CONST.ACHIEVEMENT.EXEC_ACTIONS.UNLOCK) return this.emitUnlockExec(tokens, isSkipIfPossible);
+  };
+  emitUnlockExec = ([id = ""], isSkipIfPossible = false) => this.emitOne(this.EVENTS.ACHIEVEMENT.UNLOCK, { id, isSkipIfPossible });
+
+  emitActionLoad = (action = "", tokens = [], priority) => {
+    if (action === this.CONST.ACHIEVEMENT.EXEC_ACTIONS.UNLOCK) return this.emitUnlockLoad(tokens, priority);
+  };
+  emitUnlockLoad = ([id = ""], priority) => this.emitOne(this.EVENTS.ACHIEVEMENT.LOAD, { id, priority });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.achievement",
+  "version": "0.1.1",
+  "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,52 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { View, Text, Wrap, Flex, Icon } from "@vnejs/uis.react";
+import { getVneLength } from "@vnejs/uis.utils";
+
+const renderOneView = ({ icon, id, isShow, isNotShowed, props, locs }, i) => (
+  <View
+    top={props.PARAMS.ACHIEVEMENT.TOP}
+    left={props.PARAMS.ACHIEVEMENT.LEFT}
+    translateY={getVneLength(props.PARAMS.ACHIEVEMENT.TOP_SHIFT * i)}
+    translateX={getVneLength(isNotShowed || !isShow ? 0 : props.PARAMS.ACHIEVEMENT.LEFT_SHIFT)}
+    isShow={isShow || isNotShowed}
+    transition={props.PARAMS.ACHIEVEMENT.TRANSITION}
+    zIndex={props.PARAMS.ACHIEVEMENT.ZINDEX}
+    key={id}
+    isHidden={isNotShowed}
+  >
+    <Wrap {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.wrap}>
+      <Flex {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.flex}>
+        <Icon
+          {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.icon}
+          src={icon}
+          isNotRender={!icon}
+        />
+        <Flex {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.flexText}>
+          <Text
+            {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.title}
+            text={locs[props.PARAMS.ACHIEVEMENT.INFO[id]?.title] || props.PARAMS.ACHIEVEMENT.INFO[id]?.title}
+          />
+          <Text
+            {...props.PARAMS.ACHIEVEMENT.VIEW_PROPS.description}
+            text={locs[props.PARAMS.ACHIEVEMENT.INFO[id]?.description] || props.PARAMS.ACHIEVEMENT.INFO[id]?.description}
+          />
+        </Flex>
+      </Flex>
+    </Wrap>
+  </View>
+);
+
+const Achievement = ({ store, onMount, ...props } = {}) => {
+  const [{ locs = {}, array = [] }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const arrayWithProps = useMemo(() => array.map((a) => ({ ...a, props, locs })), [array, locs]);
+
+  return arrayWithProps.map(renderOneView);
+};
+
+export const render = (props, root) => createRoot(root).render(<Achievement {...props} />);