bc-deeplib 1.0.2 → 1.0.3

package/.types/declarations.d.ts

@@ -0,0 +1,15 @@
+interface Window {
+  RibbonMenuMods?: string[];
+}
+
+declare const serverUrl: string;
+
+declare module '*.css' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.html' {
+  const value: string;
+  export = value;
+}

package/.types/elements.d.ts

@@ -0,0 +1,38 @@
+export type SettingElement = Button | Checkbox | Input | Label;
+
+export type BaseElementModel = {
+  id: string;
+  size?: [width: number, height: number];
+  position?: [x: number, y: number];
+  disabled?: boolean;
+};
+
+export type Button = BaseElementModel & {
+  type: 'button';
+  image?: string;
+  label?: string;
+  tooltip?: string;
+  onClick: () => void;
+};
+
+export type Checkbox = BaseElementModel & {
+  type: 'checkbox';
+  label: string;
+  description: string;
+  getSettingValue: () => boolean;
+  setSettingValue: (val: boolean) => void;
+};
+
+export type Input = BaseElementModel & {
+  type: 'text' | 'number';
+  label: string;
+  description: string;
+  getElementValue: () => string;
+  setSettingValue: (val: string) => void;
+};
+
+export type Label = BaseElementModel & {
+  type: 'label';
+  label: string;
+  description?: string;
+};

package/.types/type-override.d.ts

@@ -0,0 +1,3 @@
+interface PlayerCharacter {
+  [key: string]: any;
+}

package/README.md

@@ -1,2 +1,2 @@
 ## Deep Lib
-Package for easier development of BC mods without need to repeat myself in every mod
+Package for easier development of BC mods.

package/package.json

@@ -1,24 +1,40 @@
 {
   "name": "bc-deeplib",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "dDeepLb",
   "description": "Package for easier development of BC mods without need to repeat myself in every mod",
   "license": "MIT",
+  "type": "module",
   "files": [
-    "/dist"
+    "/src",
+    ".types",
+    "public"
   ],
-  "main": "./dist/DeepLib.js",
-  "types": "./dist/DeepLib.d.ts",
-  "scripts": {
-    "prepare": "tsc"
+  "main": "./src/DeepLib.ts",
+  "devDependencies": {
+    "@eslint/js": "^9.16.0",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "@types/node": "^22.5.4",
+    "bc-stubs": "^110.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.16.0",
+    "globals": "^15.13.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
     "bondage-club-mod-sdk": "^1.2.0"
   },
-  "devDependencies": {
-    "@types/node": "^20.11.19",
-    "lz-string": "^1.5.0",
-    "typescript": "^5.3.3",
-    "bc-stubs": "github:bananarama92/BC-stubs"
+  "scripts": {
+    "lint": "eslint src/",
+    "build": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env prod --fail-on-warnings",
+    "dev": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --progress"
   }
-}
+}

package/public/styles/DeepLib.css

@@ -0,0 +1,206 @@
+.deeplib-subscreen {
+  --deeplib-background-color: var(--main, white);
+  --deeplib-element-color: var(--element, white);
+  --deeplib-element-hover-color: var(--accentHover, cyan);
+  --deeplib-text-color: var(--text, black);
+  --deeplib-icon-color: var(--accent, white);
+  --deeplib-border-color: var(--accent, black);
+}
+
+/************/
+/* ELEMENTS */
+/************/
+
+.deeplib-text {
+  color: var(--deeplib-text-color);
+}
+
+.deeplib-subscreen {
+  padding: 0;
+  margin: 0;
+}
+
+.deeplib-subscreen * {
+  box-sizing: border-box;
+}
+
+.deeplib-settings {
+  display: flex;
+  flex-direction: column;
+  padding: min(1.0dvh, 0.5dvw);
+  gap: 0.3em;
+  overflow-y: auto;
+}
+
+.deeplib-misc {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+}
+
+.deeplib-button.button-styling {
+  border-radius: min(1.0dvh, 0.5dvw);
+  color: var(--deeplib-text-color);
+}
+
+.deeplib-button.button-styling img {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background-position: left;
+  background-color: var(--deeplib-icon-color);
+  background-blend-mode: multiply;
+  background-size: contain;
+  mask-position: left;
+  mask-size: contain;
+  background-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  color: transparent;
+
+  background-image: var(--image);
+  mask-image: var(--image);
+}
+
+.deeplib-button.button-styling .button-label {
+  width: 100%;
+  background-color: transparent;
+  color: var(--deeplib-text-color);
+  font-size: min(3.6dvh, 1.8dvw);
+}
+
+#deeplib-subscreen-title {
+  text-align: center;
+  color: var(--deeplib-text-color);
+}
+
+#deeplib-reset-button {
+  background-color: indianred;
+}
+
+#deeplib-wiki-button {
+  background-color: #BDA203;
+}
+
+#deeplib-support-button {
+  background-color: #5e4969;
+}
+
+.deeplib-checkbox-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.3em;
+}
+
+.deeplib-input {
+  border-radius: min(1.0dvh, 0.5dvw);
+}
+
+.deeplib-input-container {
+  position: relative;
+  margin-top: min(1vh, 0.5vw);
+}
+
+.deeplib-input-container input.deeplib-input {
+  font-size: 20px;
+  width: 100%;
+  padding: 5px 0;
+  background-color: transparent;
+  outline: none;
+  padding-left: min(1vh, 0.5vw);
+  padding-right: min(1vh, 0.5vw);
+}
+
+.deeplib-input-container label.deeplib-text {
+  position: absolute;
+  top: min(0.6vh, 0.3vw);
+  left: min(0.6vh, 0.3vw);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.deeplib-input-container input.deeplib-input:focus~label,
+.deeplib-input-container input.deeplib-input:not(:placeholder-shown)~label {
+  font-size: 0.7em;
+  transform: translate(20%, -70%);
+  background-color: var(--deeplib-background-color);
+  padding: 0px min(1vh, 0.5vw);
+}
+
+.deeplib-input-container .deeplib-underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background-color: var(--deeplib-element-hover-color);
+  transform: scaleX(0);
+  transition: all 0.3s ease;
+}
+
+.deeplib-input-container input.deeplib-input:focus~.deeplib-underline,
+.deeplib-input-container input.deeplib-input:not(:placeholder-shown)~.deeplib-underline {
+  transform: scaleX(0.98);
+}
+
+.deeplib-tooltip {
+  background-color: var(--deeplib-element-color);
+  color: var(--deeplib-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: min(1.0dvh, 0.5dvw);
+  padding: min(1vh, 0.5vw);
+  font-size: 0.8em;
+  border: min(0.2vh, 0.1vw) solid var(--deeplib-border-color);
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+/*************/
+/* MESSAGES */
+/*************/
+
+.deeplib-highlight-text {
+  font-weight: bold;
+  color: rgb(203, 185, 23);
+}
+
+#TextAreaChatLog[data-colortheme='dark'] div.ChatMessage.deeplib-message,
+#TextAreaChatLog[data-colortheme='dark2'] div.ChatMessage.deeplib-message {
+  background-color: var(--deeplib-element-color);
+  border: min(0.2dvh, 0.1dvw) solid var(--deeplib-border-color);
+  color: var(--deeplib-text-color);
+}
+
+#TextAreaChatLog div.ChatMessage.deeplib-message {
+  background-color: #eee;
+  border: min(0.2dvh, 0.1dvw) solid #440171;
+  color: #111;
+  padding-left: min(0.6dvh, 0.3dvw);
+  display: block;
+  white-space: normal;
+}
+
+#TextAreaChatLog[data-colortheme='dark'] div.ChatMessage.deeplib-message a,
+#TextAreaChatLog[data-colortheme='dark2'] div.ChatMessage.deeplib-message a {
+  color: var(--deeplib-text-color);
+}
+
+#TextAreaChatLog div.ChatMessage.deeplib-message a {
+  cursor: pointer;
+  font-weight: bold;
+  color: #111;
+}

package/public/styles/Gratitude.css

@@ -0,0 +1,23 @@
+#deeplib-gratitude {
+  position: fixed;
+  width: 25%;
+  height: 50%;
+  top: 15%;
+  left: 50%;
+}
+
+#deeplib-gratitude h1 {
+  font-size: 1em;
+  color: var(--text, #333);
+}
+
+#deeplib-gratitude p {
+  font-size: 0.6em;
+  color: var(--text, #555);
+  line-height: 1.5;
+}
+
+#deeplib-gratitude p:last-child {
+  font-size: 0.8em;
+  color: var(--text, #ff69b4);
+}

package/src/Base/BaseModule.ts

@@ -0,0 +1,45 @@
+import { BaseSettingsModel, BaseSubscreen, PlayerStorage, SettingsModel, bcSdkMod } from '../DeepLib';
+
+export type Subscreen = new (module?: BaseModule) => BaseSubscreen;
+
+export abstract class BaseModule {
+  get settingsScreen(): Subscreen | null {
+    return null;
+  }
+
+  get settingsStorage(): string | null {
+    return this.constructor.name;
+  }
+
+  get settings(): BaseSettingsModel {
+    const modName = bcSdkMod.ModInfo.name;
+    if (!this.settingsStorage) return {} as BaseSettingsModel;
+    if (!PlayerStorage()) {
+      Player[modName] = <SettingsModel>{};
+      this.registerDefaultSettings();
+    } else if (!PlayerStorage()[this.settingsStorage]) this.registerDefaultSettings();
+    return PlayerStorage()[this.settingsStorage];
+  }
+
+  init() {
+    this.registerDefaultSettings();
+  }
+
+  registerDefaultSettings(): void {
+    const storage = this.settingsStorage;
+    const defaults = this.defaultSettings;
+    if (!storage || !defaults) return;
+
+    Player[bcSdkMod.ModInfo.name][storage] = Object.assign(defaults, Player[bcSdkMod.ModInfo.name][storage] ?? {});
+  }
+
+  get defaultSettings(): BaseSettingsModel | null {
+    return null;
+  }
+
+  load() { }
+
+  run() { }
+
+  unload() { }
+}

package/src/Base/BaseSubscreen.ts

@@ -0,0 +1,198 @@
+import { SettingElement } from '../../.types/elements';
+import { BaseModule, BaseSettingsModel, SupportHelper, bcSdkMod, dataStore, elementAdjustFontSize, elementAppendToSettingsDiv, elementAppendToSubscreenDiv, elementCreateButton, elementCreateCheckbox, elementCreateInput, elementCreateLabel, elementCreateSettingsDiv, elementCreateSubscreenDiv, elementCreateTooltip, elementGetSettingsDiv, elementGetSubscreenDiv, elementGetTooltip, elementHide, elementRemoveSubscreenDiv, elementSetPosSizeFont, elementSetPosition, elementSetSize, getText, modules, setSubscreen } from '../DeepLib';
+
+export abstract class BaseSubscreen {
+  static currentElements: [HTMLElement, SettingElement][] = [];
+  static currentPage: number = 1;
+  readonly module!: BaseModule;
+
+  constructor(module?: BaseModule) {
+    if (module) this.module = module;
+  }
+
+  get name(): string {
+    return 'UNKNOWN';
+  }
+
+  get icon(): string {
+    return '';
+  }
+
+  get subscreenName(): string {
+    return this.constructor.name;
+  }
+
+  setSubscreen(screen: BaseSubscreen | string | null) {
+    return setSubscreen(screen);
+  }
+
+  get settings(): BaseSettingsModel {
+    return this.module.settings as BaseSettingsModel;
+  }
+
+  get pageStructure(): SettingElement[][] {
+    return [[]];
+  }
+
+  get currentPage(): SettingElement[] {
+    return this.pageStructure[Math.min(PreferencePageCurrent - 1, this.pageStructure.length - 1)];
+  }
+
+  hideElements() {
+    this.pageStructure.forEach((item, ix) => {
+      if (ix != PreferencePageCurrent - 1) {
+        item.forEach((setting) => {
+          elementHide({ elementId: setting.id });
+        });
+      }
+    });
+  }
+
+  load() {
+    for (const module of modules()) {
+      if (!module.settingsScreen) continue;
+      if (!module.settings || !Object.keys(module.settings).length) module.registerDefaultSettings();
+    }
+
+    elementCreateSubscreenDiv();
+    const settingsElement = elementCreateSettingsDiv();
+    elementAppendToSubscreenDiv(settingsElement);
+
+    const subscreenTitle = elementCreateLabel({
+      type: 'label',
+      id: 'deeplib-subscreen-title',
+      label: getText('mainmenu.title').replace('$ModVersion', bcSdkMod.ModInfo.version) + '  ' + SupportHelper.getSupporter(),
+    });
+    elementAppendToSubscreenDiv(subscreenTitle);
+
+    if (this.name !== 'mainmenu') {
+      const exitButton = elementCreateButton({
+        type: 'button',
+        id: 'deeplib-exit',
+        position: [1815, 75],
+        size: [90, 90],
+        image: 'Icons/Exit.png',
+        onClick: () => {
+          setSubscreen('mainmenu');
+        },
+        tooltip: getText('settings.button.back_button_hint')
+      });
+      elementAppendToSubscreenDiv(exitButton);
+    }
+
+    const tooltip = elementCreateTooltip();
+    elementAppendToSubscreenDiv(tooltip);
+
+    this.pageStructure.forEach((s) =>
+      s.forEach((item) => {
+        let element: HTMLElement;
+        switch (item.type) {
+          case 'text':
+          case 'number':
+            element = elementCreateInput(item);
+            break;
+          case 'checkbox':
+            element = elementCreateCheckbox(item);
+            break;
+          case 'button':
+            element = elementCreateButton(item);
+            break;
+          case 'label':
+            element = elementCreateLabel(item);
+            break;
+        }
+        elementAppendToSettingsDiv(element);
+      })
+    );
+
+    CharacterAppearanceForceUpCharacter = Player.MemberNumber ?? -1;
+  }
+
+  run() {
+    const newTitle = getText('mainmenu.title').replace('$ModVersion', bcSdkMod.ModInfo.version) + '  ' + SupportHelper.getSupporter();
+    const oldTitle = ElementContent('deeplib-subscreen-title');
+    if (newTitle !== oldTitle) {
+      ElementContent('deeplib-subscreen-title', newTitle);
+    }
+    DrawCharacter(Player, 50, 50, 0.9, false);
+
+    if (this.pageStructure.length > 1) {
+      MainCanvas.textAlign = 'center';
+      PreferencePageChangeDraw(1595, 75, this.pageStructure.length);
+      MainCanvas.textAlign = 'left';
+    }
+
+    this.hideElements();
+  }
+
+  click() {
+    if (this.pageStructure.length > 1) PreferencePageChangeClick(1595, 75, this.pageStructure.length);
+  }
+
+  exit() {
+    CharacterAppearanceForceUpCharacter = -1;
+    CharacterLoadCanvas(Player);
+
+    setSubscreen('mainmenu');
+    dataStore();
+  }
+
+  resize(onLoad: boolean = false) {
+    elementSetPosSizeFont({ element: elementGetSubscreenDiv() }, 0, 0, 2000, 1000);
+    if (this.name === 'mainmenu') {
+      elementSetPosSizeFont({ element: elementGetSettingsDiv() }, 530, 170, 800, 660);
+    } else {
+      elementSetPosSizeFont({ element: elementGetSettingsDiv() }, 530, 170, 1000, 660);
+    }
+
+    elementSetPosSizeFont({ elementId: 'deeplib-subscreen-title' }, 530, 75, 800, 60);
+    
+    elementSetPosition({ element: elementGetTooltip() }, 250, 850);
+    elementSetSize({ element: elementGetTooltip() }, 1500, 60);
+
+    BaseSubscreen.currentElements.forEach((item) => {
+      const options = item[1];
+      const elementDataAttrs = item[0].dataset;
+      
+      if (options.position || elementDataAttrs.position) {
+        const position = elementDataAttrs?.position?.split('x');
+        const xPos = options?.position?.[0] || parseInt(position?.[0] || 0);
+        const yPos = options?.position?.[1] || parseInt(position?.[1] || 0);
+
+        elementSetPosition({ elementId: options.id }, xPos, yPos);
+      }
+
+      if (options.size || elementDataAttrs.size) {
+        const size = elementDataAttrs?.size?.split('x');
+        const width = options?.size?.[0] || parseInt(size?.[0] || 0);
+        const height = options?.size?.[1] || parseInt(size?.[1] || 0);
+
+        elementSetSize({ elementId: options.id }, width, height);
+      }
+
+      elementAdjustFontSize({ elementId: options.id });
+    });
+  }
+
+  unload() {
+    this.pageStructure.forEach((s) =>
+      s.forEach((item) => {
+        switch (item.type) {
+          case 'text':
+            item.setSettingValue(ElementValue(item.id));
+            break;
+          case 'checkbox': {
+            const elem = document.getElementById(item.id) as HTMLInputElement;
+            const checked = elem.checked;
+            item.setSettingValue(checked);
+            break;
+          }
+        }
+      })
+    );
+    BaseSubscreen.currentElements = [];
+
+    elementRemoveSubscreenDiv();
+  }
+}
+

package/src/Base/Initialization.ts

@@ -0,0 +1,83 @@
+import { BaseModule, bcSdkMod, dataTake, deepLibLogger, Localization, modules, registerModule, VersionModule } from '../DeepLib';
+
+export function initMod(initFunction: (() => void) | (() => Promise<void>), modules: BaseModule[], pathToTranslationsFolder: string) {
+  const MOD_NAME = bcSdkMod.ModInfo.name;
+  deepLibLogger.debug(`Init wait for ${MOD_NAME}`);
+  if (CurrentScreen == null || CurrentScreen === 'Login') {
+    bcSdkMod.prototype.hookFunction('LoginResponse', 0, (args, next) => {
+      deepLibLogger.debug(`Init for ${MOD_NAME}! LoginResponse caught: `, args);
+      next(args);
+      const response = args[0];
+      if (response === 'InvalidNamePassword') return next(args);
+      if (response && typeof response.Name === 'string' && typeof response.AccountName === 'string') {
+        init(initFunction, modules, pathToTranslationsFolder);
+      }
+    });
+  } else {
+    deepLibLogger.debug(`Already logged in, initing ${MOD_NAME}`);
+    init(initFunction, modules, pathToTranslationsFolder);
+  }
+}
+
+export async function init(initFunction: (() => void) | (() => Promise<void>), modules: BaseModule[], pathToTranslationsFolder: string) {
+  const MOD_NAME = bcSdkMod.ModInfo.name;
+  const MOD_VERSION = bcSdkMod.ModInfo.version;
+
+  if ((window as any)[MOD_NAME + 'Loaded']) return;
+
+  dataTake();
+
+  new Localization({ pathToTranslationsFolder: pathToTranslationsFolder });
+  await Localization.init();
+
+  if (!initModules(modules)) {
+    unloadMod();
+    return;
+  }
+
+  await initFunction();
+
+  VersionModule.checkVersionUpdate();
+  VersionModule.checkVersionMigration();
+
+  (window as any)[MOD_NAME + 'Loaded'] = true;
+  deepLibLogger.log(`Loaded ${MOD_NAME}! Version: ${MOD_VERSION}`);
+}
+
+function initModules(modulesToRegister: BaseModule[]): boolean {
+  const MOD_NAME = bcSdkMod.ModInfo.name;
+
+  for (const module of modulesToRegister) {
+    registerModule(module);
+  }
+
+  for (const module of modules()) {
+    module.init();
+  }
+
+  for (const module of modules()) {
+    module.load();
+  }
+
+  for (const module of modules()) {
+    module.run();
+  }
+
+  deepLibLogger.debug(`Modules Loaded for ${MOD_NAME}.`);
+  return true;
+}
+
+export function unloadMod(): true {
+  const MOD_NAME = bcSdkMod.ModInfo.name;
+  unloadModules();
+
+  delete (window as any)[MOD_NAME + 'Loaded'];
+  deepLibLogger.debug(`Unloaded ${MOD_NAME}.`);
+  return true;
+}
+
+function unloadModules() {
+  for (const module of modules()) {
+    module.unload();
+  }
+}

package/src/Base/Modules.ts

@@ -0,0 +1,16 @@
+import { BaseModule } from '../DeepLib';
+
+export const modulesMap: Map<string, BaseModule> = new Map<string, BaseModule>();
+
+export function modules(): BaseModule[] {
+  return [...modulesMap.values()];
+}
+
+export function registerModule<T extends BaseModule>(module: T): T {
+  modulesMap.set(module.constructor.name, module);
+  return module;
+}
+
+export function getModule<T extends BaseModule>(moduleType: string): T {
+  return modulesMap.get(moduleType) as T;
+}