Add Image Path Resolving to Plugins

.gitignore

@@ -34,6 +34,8 @@ package-lock.json
 scripts/buildresource/*.json
 src-webviews/src/plugins/imports.ts
 src-webviews/src/plugins/vue-plugin-imports.ts
+!src-webviews/public/plugins/.gitkeep
+src-webviews/public/plugins/**
 
 # Yarn stuff
 .yarn/

package.json

@@ -16,7 +16,7 @@
  "check": "tsc -p ./src/tsconfig.json | npx loose-ts-check --ignored-error-codes ./.loose-ts-check/ignore-codes.json --loosely-type-checked-files ./.loose-ts-check/loosely-type-checked-files.json",
  "fix": "node ./scripts/doctor/index.js",
  "[-] Vue WebView Deployment": "",
- "vue-dev": "node ./scripts/plugins/webview && npx vite ./src-webviews --clearScreen=false --debug=false --logLevel=silent",
+ "vue-dev": "node ./scripts/plugins/webview && node ./scripts/plugins/webview-images && npx vite ./src-webviews --clearScreen=false",
  "[-] Utility": "",
  "prepare": "husky install && husky-init",
  "lint": "prettier --end-of-line auto --config package.json --write ./src/**/*.ts",

scripts/plugins/webview-images.js

@@ -0,0 +1,52 @@
+import fs from 'fs-extra';
+import glob from 'glob';
+import path from 'path';
+import { getEnabledPlugins, sanitizePath } from './shared.js';
+
+function getWebviewImages(pluginName) {
+ const pluginFolder = sanitizePath(path.join(process.cwd(), 'src/core/plugins', pluginName));
+ if (!fs.existsSync(sanitizePath(path.join(pluginFolder, 'webview', 'images')))) {
+ return 0;
+ }
+
+ let allFiles = [];
+ let amountCopied = 0;
+
+ for (let ext of ['png', 'gif', 'jpg', 'jpeg', 'webm']) {
+ const files = glob.sync(sanitizePath(path.join(pluginFolder, `webview/images/**/*.${ext}`)));
+ allFiles = allFiles.concat(files);
+ }
+
+ for (let i = 0; i < allFiles.length; i++) {
+ const imgPath = allFiles[i];
+ const finalPath = sanitizePath(imgPath.replace(/.*\/webview\/images/gm, `src-webviews/public/plugins/${pluginName}`))
+ if (fs.existsSync(imgPath)) {
+ const folderPath = sanitizePath(path.dirname(finalPath));
+ if (!fs.existsSync(folderPath)) {
+ fs.mkdirSync(folderPath, { recursive: true });
+ }
+
+ fs.copyFileSync(imgPath, finalPath);
+ amountCopied += 1;
+ }
+ }
+
+ return amountCopied;
+}
+
+function run() {
+ const enabledPlugins = getEnabledPlugins();
+ fs.emptyDirSync(sanitizePath('src-webviews/public/plugins/'));
+ fs.writeFileSync(sanitizePath('src-webviews/public/plugins/.gitkeep'), '');
+
+ let totalCopied = 0;
+
+ for (const pluginName of enabledPlugins) {
+ const count = getWebviewImages(pluginName);
+ totalCopied += count;
+ }
+
+ console.log(`WebView Images Moved -- ${totalCopied}`);
+}
+
+run();

scripts/runtime/index.js

@@ -223,6 +223,7 @@ async function coreBuildProcess() {
  await runFile(node, './scripts/compiler/core');
  await runFile(node, './scripts/plugins/core');
  await runFile(node, './scripts/plugins/webview');
+ await runFile(node, './scripts/plugins/webview-images');
  console.log(`===> Finished Core Build (${Date.now() - start}ms)`);
 }
 

src-webviews/src/defaultPage.ts

@@ -2,4 +2,4 @@
 // This does not change anything in-game.
 // It's solely for development mode only.
 
-export default [{ name: 'SimpleHud' }];
+export default [{ name: 'Factions' }];

src-webviews/src/utility/pathResolver.ts

@@ -1,4 +1,8 @@
-export default function resolvePath(currentPath: string): string {
+export default function resolvePath(currentPath: string, pluginName = ''): string {
+ if (currentPath.includes('images/') && pluginName) {
+ currentPath = currentPath.replace(/.*images\//gm, `./plugins/${pluginName}/`);
+ }
+
  if (!('alt' in window)) {
  return currentPath;
  }

src/core/plugins/core-factions/webview/Factions.vue

@@ -56,7 +56,7 @@ export default defineComponent({
  },
  data() {
  return {
- pageIndex: 5,
+ pageIndex: 0,
  pages: [
  { name: 'Members', page: 'Members' },
  { name: 'Ranks', page: 'Ranks' },

src/core/plugins/core-factions/webview/pages/Bank.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 
  this.manageRanks = rank.rankPermissions.manageRanks;
  this.manageRankPermissions = rank.rankPermissions.manageRankPermissions;
- }
+ },
  },
  watch: {
  amount() {