@vnejs/plugins.views.settings 0.1.1

package/const/events.js

@@ -0,0 +1,7 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:settings_view:show",
+  HIDE: "vne:settings_view:hide",
+  UPDATE: "vne:settings_view:update",
+  PRELOAD: "vne:settings_view:preload",
+  TAB_SET: "vne:settings_view:tab_set",
+};

package/const/params.js

@@ -0,0 +1,43 @@
+export const TRANSITION = 500;
+export const ZINDEX = 4000;
+export const LOC_LABEL = "settings";
+
+export const BACKGROUND = "Menu/save";
+
+export const TABS = {};
+
+export const VALUE_MAPS = {};
+
+export const VIEW_PROPS = {
+  screen: { withBackgroundDark: true, withBackgroundBlur: false, transition: TRANSITION, zIndex: ZINDEX },
+
+  background: { withDark: true, withBlur: false },
+
+  cross: { position: { bottom: 90, right: 120 }, svg: { size: 60 } },
+
+  exampleText: { size: 60, height: 300, color: "var(--vne-color-active)" },
+
+  fieldsGap: 48,
+
+  fieldProps: {
+    widthTitle: 1440,
+    width: 3120,
+
+    sizeTitle: 96,
+    sizeText: 72,
+
+    gapBetweenItems: 48,
+    gapBetweenTitleAndContent: 120,
+    gapBetweenInnerItems: 120,
+
+    rangeHeight: 24,
+
+    widthInnerLeft: 960,
+    widthInnerRight: 240,
+  },
+
+  controls: {
+    position: { top: 90, left: 120 },
+    props: { textWidth: 660, wrapWidth: 3600, flexGap: 36, flexWithWrap: false, textSize: 96, textAlign: "center" },
+  },
+};

package/index.js

@@ -0,0 +1,9 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { SettingsController } from "./modules/controller";
+import { SettingsView } from "./modules/view";
+
+regPlugin("SETTINGS_VIEW", { events: SUBSCRIBE_EVENTS, params }, [SettingsController, SettingsView]);

package/modules/controller.js

@@ -0,0 +1,132 @@
+import { ModuleController } from "@vnejs/module.components";
+
+const filterTabsToShow = ({ showInSettings = false }) => Boolean(showInSettings);
+
+export class SettingsController extends ModuleController {
+  name = "settings.controller";
+
+  emitHide = () => this.emit(this.EVENTS.SETTINGS_VIEW.HIDE);
+
+  onArrowLeft = () => {
+    const { currentTab, currentItemInner, currentItem } = this.state;
+
+    if (currentItem === null) return;
+
+    const { settingKey = "", step = 0, min = 0, type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
+
+    if (options?.length) {
+      const newValue = (currentItemInner === 0 ? options.length : currentItemInner) - 1;
+
+      return this.updateStateAndViewFast({ currentItemInner: newValue });
+    }
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === true && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(this.shared.settings[settingKey] - step).toFixed(4));
+
+      return newValue >= min && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onArrowRight = () => {
+    const { currentTab, currentItemInner, currentItem } = this.state;
+
+    if (currentItem === null) return;
+
+    const { settingKey = "", step = 0, max = 0, type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
+
+    if (options?.length) {
+      return this.updateStateAndViewFast({ currentItemInner: (currentItemInner + 1) % options.length });
+    }
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === false && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(this.shared.settings[settingKey] + step).toFixed(4));
+
+      return newValue <= max && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onPrevTab = () => this.emit(this.EVENTS.SETTINGS_VIEW.TAB_SET, { tab: (this.state.currentTab === 0 ? this.tabs.length : this.state.currentTab) - 1 });
+  onNextTab = () => this.emit(this.EVENTS.SETTINGS_VIEW.TAB_SET, { tab: (this.state.currentTab + 1) % this.tabs.length });
+
+  onInteract = () => {
+    const { currentTab, currentItemInner, currentItem } = this.state;
+
+    if (currentItem === null) return;
+
+    const { settingKey = "", type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
+
+    if (options?.length)
+      return options[currentItemInner].action
+        ? this.PARAMS.SETTINGS_VIEW.ACTIONS[options[currentItemInner].action](this, this.state.locs)
+        : this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: options[currentItemInner].value });
+
+    if (type === "toggle") return this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
+  };
+
+  bgName = this.PARAMS.SETTINGS_VIEW.BACKGROUND;
+
+  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.onInteract,
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.onInteract,
+    [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: this.onPrevTab,
+    [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: this.onNextTab,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.onArrowLeft,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.onArrowRight,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+  };
+  controlsIndex = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.SETTINGS_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.SETTINGS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+    this.on(this.EVENTS.SETTINGS_VIEW.PRELOAD, this.loadBgMedia);
+
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
+
+    this.on(this.EVENTS.LOCS.CHANGED, this.updateViewFast);
+
+    this.on(this.EVENTS.STATE.SET, this.onHide);
+    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+  init = () => {
+    this.tabs = Object.values(this.PARAMS.SETTINGS_VIEW.TABS).filter(filterTabsToShow);
+
+    this.setMaxCurrentItemByTabIndex(0);
+
+    return this.emit(this.EVENTS.SETTINGS.INIT);
+  };
+
+  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src, tabs: this.tabs, currentTab: 0 });
+  afterHide = () => this.setDefaultState();
+
+  onSettingChange = () => this.isReady && this.state.isShow && this.updateViewFast();
+
+  onTabSet = ({ tab = 0 } = {}) => {
+    this.setMaxCurrentItemByTabIndex(tab);
+    this.unsetCurrentItem();
+
+    return this.updateStateAndViewFast({ currentTab: tab, currentItemInner: 0 });
+  };
+
+  onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
+
+  setMaxCurrentItemByTabIndex = (i) => {
+    this.maxCurrentItem = this.tabs[i].fields.length - 1;
+  };
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.settings",
+  "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/components/SettingsControls.jsx

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { PositionBox, TextControls } from "@vnejs/uis.react";
+
+export const SettingsControls = ({ tabs = [], locs = {}, currentTab = 0, ...props } = {}) => {
+  const [texts, setTexts] = useState();
+
+  useEffect(() => void setTexts(Object.values(tabs).map(({ titleLocKey }, i) => ({ value: i, text: locs[titleLocKey] }))), [locs, tabs]);
+
+  const onClick = useCallback((tab) => props.emit(props.EVENTS.SETTINGS_VIEW.TAB_SET, { tab }), []);
+
+  const propsControls = useMemo(
+    () => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.controls.props, selectedIndex: currentTab, texts, onClick }),
+    [currentTab, texts],
+  );
+
+  return (
+    <PositionBox {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.controls.position}>
+      <TextControls {...propsControls} />
+    </PositionBox>
+  );
+};

package/view/components/SettingsCross.jsx

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+
+import { PositionBox, Svg } from "@vnejs/uis.react";
+
+export const SettingsCross = (props = {}) => {
+  const propsCross = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.svg, onClick: () => props.emit(props.EVENTS.SETTINGS_VIEW.HIDE) }), []);
+
+  return (
+    <PositionBox {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.position}>
+      <Svg.Cross {...propsCross} />
+    </PositionBox>
+  );
+};

package/view/components/SettingsExampleText.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { SmoothText } from "@vnejs/uis.react";
+
+const EMPTY_ARRAY = [];
+
+const mapTokens = (token) => ({ token });
+
+export const SettingsExampleText = ({ isShow = false, locs = {}, ...props } = {}) => {
+  const [tokens, setTokens] = useState(EMPTY_ARRAY);
+
+  const isForce = Boolean(props.shared.textNoAnimationSources.length);
+
+  const text = useMemo(() => locs["fields.text.example"] ?? "", [locs]);
+
+  useEffect(() => {
+    if (!isShow) return;
+
+    setTokens([...text].map(mapTokens));
+  }, [isShow, text]);
+
+  useEffect(() => {
+    if (isShow || isForce) return;
+
+    const tm = setTimeout(() => setTokens(EMPTY_ARRAY), props.PARAMS.SETTINGS_VIEW.TRANSITION);
+
+    return () => clearTimeout(tm);
+  }, [isShow]);
+
+  return (
+    <SmoothText
+      tokens={tokens}
+      isForce={isForce}
+      charDelay={props.PARAMS.TEXT.TOKEN_RENDER_DELAY / props.shared.settings[props.SETTINGS.TEXT.TOKEN_RENDER_SPEED]}
+      size={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.size}
+      color={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.color}
+      height={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.height}
+      scrollBarTextSize={props.shared.settings[props.SETTINGS.TEXTSIZE.VALUE]}
+    />
+  );
+};

package/view/components/SettingsTabContent.jsx

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+
+import { PositionBox, Settings, Flex } from "@vnejs/uis.react";
+
+import { SettingsExampleText } from "./SettingsExampleText";
+
+export const SettingsTabContent = ({ isShow = false, isForce = false, locs = {}, fields = [], ...props } = {}) => {
+  const mapFields = useCallback(
+    ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", valueMap = "", ...fieldProps } = {}) => {
+      const onChange = (value) => props.emit(props.EVENTS.SETTINGS.SET, { name: settingKey, value });
+
+      const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
+      const valueMapReal = valueMap ? props.PARAMS.SETTINGS_VIEW.VALUE_MAPS[valueMap] : null;
+
+      const optionsReal = options.map((option) => {
+        const result = { ...option };
+
+        if (option.locKey) {
+          delete result.locKey;
+          result.text = locs[option.locKey];
+        }
+
+        if (option.action) {
+          delete result.action;
+          result.onClick = () => props.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](props, locs);
+        }
+
+        return result;
+      });
+
+      return { ...titles, value: props.shared.settings[settingKey], type, onChange, props: fieldProps, options: optionsReal, valueMap: valueMapReal };
+    },
+    [locs],
+  );
+
+  return (
+    <PositionBox
+      isCentered={true}
+      opacity={isShow ? 1 : 0}
+      transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
+    >
+      <Flex
+        direction={Flex.DIRECTION.COLUMN}
+        gap={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldsGap}
+      >
+        <Settings
+          selectedIndex={isShow ? props.currentItem : -1}
+          selectedIndexInner={isShow ? props.currentItemInner : -1}
+          transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
+          settings={fields.map(mapFields)}
+          {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldProps}
+        />
+
+        {props.showTextExample && (
+          <SettingsExampleText
+            {...props}
+            isShow={isShow}
+            isForce={isForce}
+            text={locs["fields.text.example"] || ""}
+          />
+        )}
+      </Flex>
+    </PositionBox>
+  );
+};

package/view/components/index.js

@@ -0,0 +1,4 @@
+export * from "./SettingsControls";
+export * from "./SettingsCross";
+export * from "./SettingsExampleText";
+export * from "./SettingsTabContent";

package/view/index.jsx

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen } from "@vnejs/uis.react";
+
+import { SettingsControls, SettingsCross, SettingsTabContent } from "./components";
+
+const Settings = ({ store, onMount, ...props } = {}) => {
+  const [state, setState] = useState({});
+
+  const { isShow = false, isForce = false, bgSrc = "", tabs = [], locs = {}, currentTab = 0, currentItem = null, currentItemInner = null } = state;
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsTab = useMemo(() => ({ ...props, isForce, currentItem, currentItemInner, locs }), [isForce, currentItem, currentItemInner, locs]);
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc]);
+  const propsControls = useMemo(() => ({ ...props, locs, tabs, currentTab, isForce }), [locs, tabs, currentTab, isForce]);
+
+  const renderTabContent = useCallback(
+    ({ fields = [], showTextExample = false } = {}, i) => (
+      <SettingsTabContent
+        {...propsTab}
+        key={i}
+        isShow={currentTab === i}
+        fields={fields}
+        showTextExample={showTextExample}
+      />
+    ),
+    [currentTab, propsTab],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <SettingsCross {...props} />
+      <SettingsControls {...propsControls} />
+      {Object.values(tabs).map(renderTabContent)}
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Settings {...props} />);