closes #29

app/helpers/dependencies.ts

@@ -0,0 +1,67 @@
+import * as fs from 'fs-extra';
+import * as recursiveReadDir from 'recursive-readdir';
+import { SendToUI } from '../types';
+import { baseUrl } from './constants';
+
+const depDir = `${baseUrl}/resources/dependencies`;
+
+export async function addDependency(sendToUI: SendToUI, data: any) {
+  sendToUI('notify', {
+    type: 'info',
+    text: `Attempting to download mod dependency ${data}`,
+  });
+
+  try {
+    const res = await fetch(data);
+    const resJson = await res.json();
+
+    if (
+      !resJson.meta ||
+      !resJson.meta.name ||
+      !resJson.meta.author ||
+      !resJson.meta.savedAt ||
+      !resJson.meta.version
+    ) {
+      sendToUI('notify', {
+        type: 'error',
+        text: 'Malformed mod!',
+      });
+      return;
+    }
+
+    resJson.meta._url = data;
+
+    fs.ensureDirSync(depDir);
+    fs.writeJSONSync(`${depDir}/${resJson.meta.name}.rairmod`, resJson);
+
+    getAndSendDependencies(sendToUI);
+
+    sendToUI('notify', {
+      type: 'success',
+      text: `Got dependency mod "${resJson.meta.name}"!`,
+    });
+
+    sendToUI('adddependency', { name: resJson.meta.name, url: data });
+  } catch {
+    sendToUI('notify', {
+      type: 'error',
+      text: 'Malformed mod URL!',
+    });
+  }
+}
+
+export async function getAndSendDependencies(sendToUI: SendToUI) {
+  const deps = await getDependencies();
+  sendToUI('dependencies', deps);
+}
+
+export async function getDependencies() {
+  fs.ensureDirSync(depDir);
+
+  const allDeps = await recursiveReadDir(depDir);
+  const allDepData = allDeps
+    .filter((f) => f.includes('rairmod'))
+    .map((f) => fs.readJSONSync(f));
+
+  return allDepData;
+}

app/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './constants';
+export * from './dependencies';
 export * from './modtest';

app/ipc.ts

@@ -315,4 +315,12 @@ export function setupIPC(sendToUI: SendToUI) {
     sendToUI('notify', { type: 'info', text: 'Killing LotR/MongoDB...' });
     helpers.killMod(sendToUI);
   });
+
+  ipcMain.on('GET_DEPENDENCIES', async () => {
+    helpers.getAndSendDependencies(sendToUI);
+  });
+
+  ipcMain.on('ADD_DEPENDENCY', async (e: any, data: any) => {
+    helpers.addDependency(sendToUI, data);
+  });
 }

app/main.ts

@@ -12,8 +12,6 @@ const isDevelopment = !app.isPackaged;
 
 log.transports.file.level = 'info';
 
-console.log(`Starting in ${isDevelopment ? 'dev' : 'prod'} mode...`);
-
 log.transports.file.resolvePath = () =>
   path.join(app.getAppPath(), 'logs/main.log');
 
@@ -123,11 +121,17 @@ async function createWindow(): Promise<BrowserWindow> {
     },
   });
 
-  win.setMenu(null);
+  if (!isDevelopment) {
+    win.setMenu(null);
+  }
 
   win.once('ready-to-show', () => {
     win?.show();
     handleSetup();
+
+    if (isDevelopment) {
+      win?.webContents.openDevTools();
+    }
   });
 
   // load intercepter for image loading
@@ -160,14 +164,12 @@ async function createWindow(): Promise<BrowserWindow> {
     await win.loadURL(url.href);
   }
 
-  if (isDevelopment) {
-    win.webContents.openDevTools();
-  }
-
   return win;
 }
 
 try {
+  console.log(`Starting in ${isDevelopment ? 'dev' : 'prod'} mode...`);
+
   protocol.registerSchemesAsPrivileged([
     { scheme: 'lotr', privileges: { bypassCSP: true, supportFetchAPI: true } },
   ]);

src/app/dependencies/dependencies.component.html

@@ -0,0 +1,65 @@
+<div role="tablist" class="tabs tabs-boxed rounded-none">
+
+  <div class="tab flex flex-row justify-end">
+    <button class="btn btn-primary btn-sm mr-2" [swal]="addDependency">
+      <ng-icon name="heroPlus"></ng-icon>
+    </button>
+    <button class="btn-sm btn btn-success mr-3" (click)="exit.emit()">Done</button>
+  </div>
+
+</div>
+
+<div class="flex flex-row gap-2 mb-3">
+  <div class="form-column">
+
+    @if(modService.activeDependencies().length === 0) {
+    <div class="form-row">
+      <p>You don't currently have any dependencies.</p>
+    </div>
+    }
+
+    @for(dep of modService.activeDependencies(); track $index) {
+    <div class="form-row split pl-3">
+      <div class="form-column justify-center pr-3">
+        <div class="form-row">
+          <h2 class="text-xl font-bold mb-1">{{ dep.meta.name }}</h2>
+          <h3 class="text-lg italic mb-2">{{ dep.meta.author }} &middot; Last edited {{ dep.meta.savedAt | date }}</h3>
+
+          <p class="italic">{{ dep.meta._url }}</p>
+        </div>
+      </div>
+
+      <div class="form-column justify-center">
+        <div class="form-row">
+          <ul class="list-disc">
+            <li>{{ dep.achievements.length | number }} Achievements</li>
+            <li>{{ dep.items.length | number }} Items</li>
+            <li>{{ dep.npcs.length | number }} NPCs</li>
+            <li>{{ dep.dialogs.length | number }} NPC Scripts</li>
+            <li>{{ dep.quests.length | number }} Quests</li>
+            <li>{{ dep.recipes.length | number }} Recipes</li>
+            <li>{{ dep.spawners.length | number }} Spawners</li>
+            <li>{{ dep.stems.length | number }} STEMs</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="form-column justify-center">
+        <div class="form-row">
+          <button class="ml-1 btn btn-info btn-sm" (click)="addNewDependency(dep.meta._url)">
+            <ng-icon name="heroArrowPathRoundedSquare"></ng-icon>
+          </button>
+          <button class="ml-1 btn btn-error btn-sm" (click)="removeDependency(dep.meta.name)">
+            <ng-icon name="heroMinus"></ng-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+    }
+
+  </div>
+</div>
+
+<swal #addDependency title="Add Dependency" text="Add a dependency by pasting the link here." input="text"
+  confirmButtonText="Add Dependency" [focusCancel]="true" (confirm)="addNewDependency($event)">
+</swal>

src/app/dependencies/dependencies.component.ts

@@ -0,0 +1,24 @@
+import { Component, inject, output } from '@angular/core';
+import { ElectronService } from '../services/electron.service';
+import { ModService } from '../services/mod.service';
+
+@Component({
+  selector: 'app-dependencies',
+  templateUrl: './dependencies.component.html',
+  styleUrl: './dependencies.component.scss',
+})
+export class DependenciesComponent {
+  public exit = output();
+
+  public modService = inject(ModService);
+  private electronService = inject(ElectronService);
+
+  addNewDependency(dependency: string) {
+    if (!dependency?.trim()) return;
+    this.electronService.send('ADD_DEPENDENCY', dependency);
+  }
+
+  removeDependency(dependency: string) {
+    this.modService.removeModDependency(dependency);
+  }
+}

src/app/home/home.component.html

@@ -27,6 +27,8 @@
                 [class.btn-disabled]="!electronService.isInElectron()">Change Mod Name</a></li>
             <li><a (click)="closeMenu()" [swal]="changeModAuthor"
                 [class.btn-disabled]="!electronService.isInElectron()">Change Mod Author</a></li>
+            <li><a (click)="closeMenu(); toggleDependencies()"
+                [class.btn-disabled]="!electronService.isInElectron()">Manage Dependencies</a></li>
 
             <li class="menu-title"><a>Mod I/O</a></li>
             <li><a (click)="closeMenu(); electronService.send('LOAD_MOD')"
@@ -80,6 +82,17 @@
   </div>
 </div>
 
+} @else if(isManagingDependencies()) {
+<div class="root-body">
+  <div class="root-content p-3">
+    <div class="card bg-base-100 w-full shadow-xl">
+      <div class="card-body">
+        <app-dependencies (exit)="resetSub(); isManagingDependencies.set(false)"></app-dependencies>
+      </div>
+    </div>
+  </div>
+</div>
+
 } @else if(pinpointService.isPinpointing()) {
 <div class="root-body">
   <div class="root-content p-3">

src/app/home/home.component.ts

@@ -43,6 +43,7 @@ export class HomeComponent implements OnInit {
 
   public activeTab = signal<number>(0);
   public isValidating = signal<boolean>(false);
+  public isManagingDependencies = signal<boolean>(false);
 
   public hasErrors = computed(() => {
     const mod = this.modService.mod();
@@ -130,6 +131,10 @@ export class HomeComponent implements OnInit {
       case 'query': {
         return this.toggleQuerying();
       }
+      case 'dependencies': {
+        this.isManagingDependencies.set(true);
+        return;
+      }
     }
   }
 
@@ -185,8 +190,25 @@ export class HomeComponent implements OnInit {
     saveMod();
   }
 
+  toggleDependencies() {
+    this.isManagingDependencies.set(true);
+    this.pinpointService.togglePinpointing(false);
+    this.isValidating.set(false);
+    this.analysisService.toggleAnalyzing(false);
+    this.queryService.toggleQuerying(false);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        sub: 'dependencies',
+      },
+    });
+  }
+
   toggleModValidation() {
     this.isValidating.set(!this.isValidating());
+    this.isManagingDependencies.set(false);
     this.pinpointService.togglePinpointing(false);
     this.analysisService.toggleAnalyzing(false);
     this.queryService.toggleQuerying(false);
@@ -202,6 +224,7 @@ export class HomeComponent implements OnInit {
 
   togglePinpointing() {
     this.pinpointService.togglePinpointing(true);
+    this.isManagingDependencies.set(false);
     this.isValidating.set(false);
     this.analysisService.toggleAnalyzing(false);
     this.queryService.toggleQuerying(false);
@@ -217,6 +240,7 @@ export class HomeComponent implements OnInit {
 
   toggleAnalyzing() {
     this.analysisService.toggleAnalyzing(true);
+    this.isManagingDependencies.set(false);
     this.isValidating.set(false);
     this.pinpointService.togglePinpointing(false);
     this.queryService.toggleQuerying(false);
@@ -232,6 +256,7 @@ export class HomeComponent implements OnInit {
 
   toggleQuerying() {
     this.queryService.toggleQuerying(true);
+    this.isManagingDependencies.set(false);
     this.isValidating.set(false);
     this.pinpointService.togglePinpointing(false);
     this.analysisService.toggleAnalyzing(false);

src/app/home/home.module.ts

@@ -11,6 +11,7 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxFloatUiModule } from 'ngx-float-ui';
 
 import { AnalysisComponent } from '../analysis/analysis.component';
+import { DependenciesComponent } from '../dependencies/dependencies.component';
 import { PinpointComponent } from '../pinpoint/pinpoint.component';
 import { QueryComponent } from '../query/query.component';
 import { SharedModule } from '../shared/shared.module';
@@ -70,6 +71,7 @@ import { HomeComponent } from './home.component';
     PinpointComponent,
     AnalysisComponent,
     QueryComponent,
+    DependenciesComponent,
   ],
   imports: [
     CommonModule,

src/app/query/query.component.ts

@@ -82,7 +82,7 @@ export class QueryComponent {
 
     try {
       // eslint-disable-next-line @typescript-eslint/no-implied-eval
-      const func = new Function(`return ${this.jsModel.value};`);
+      const func = new Function(`return ${this.jsModel.value.trim()};`);
       const modifiableMod = this.queryService.modForJSModifiable();
       const result = func()(this.queryService.modForJS(), modifiableMod);
       this.queryService.updateMod(modifiableMod);

src/app/services/electron.service.ts

@@ -1,6 +1,11 @@
 import { computed, effect, inject, Injectable, signal } from '@angular/core';
 
-import { IEditorMap, IModKit, ModJSONKey } from '../../interfaces';
+import {
+  IEditorMap,
+  IModKit,
+  IModKitDependency,
+  ModJSONKey,
+} from '../../interfaces';
 import { importMod } from '../helpers/importer';
 import { ModService } from './mod.service';
 import { NotifyService } from './notify.service';
@@ -106,6 +111,7 @@ export class ElectronService {
 
       this.send('GET_VERSION');
       this.send('GET_BASEURL');
+      this.send('GET_DEPENDENCIES');
 
       this.requestAllJSON();
       tryEnsureMaps();
@@ -180,11 +186,18 @@ export class ElectronService {
       this.baseUrl.set(baseurl as string)
     );
 
+    window.api.receive('dependencies', (deps) => {
+      this.modService.setDependencies(deps as IModKit[]);
+    });
+
+    window.api.receive('adddependency', (dep) => {
+      this.modService.addModDependency(dep as IModKitDependency);
+    });
+
     const quicksaveFilepath = this.quicksaveFilepath();
     if (quicksaveFilepath) {
       this.needsLoadForReadyCheck.set(true);
       this.send('LOAD_MOD_QUIETLY', { path: quicksaveFilepath });
-      return;
     }
 
     this.send('READY_CHECK');