add TEM to STEM editor, #47

app/handlers/resources.ts

@@ -167,11 +167,27 @@ export async function updateResources(sendToUI: SendToUI) {
     );
   };
 
+  const assets = async () => {
+    sendToUI('notify', { type: 'info', text: 'Downloading assets...' });
+    dlgit('LandOfTheRair/Assets', `${baseUrl}/resources/assets`, async () => {
+      const allSfx = fs
+        .readdirSync(`${baseUrl}/resources/assets/sfx`)
+        .map((f) => f.split('.mp3')[0]);
+      const allIcon = fs
+        .readdirSync(`${baseUrl}/resources/assets/macicons`)
+        .map((f) => f.split('.svg')[0]);
+
+      fs.writeJSONSync(`${baseUrl}/resources/json/sfx.json`, allSfx);
+      fs.writeJSONSync(`${baseUrl}/resources/json/macicons.json`, allIcon);
+    });
+  };
+
   await sheets();
   await json();
   await template();
   await tiled();
   await validators();
+  await assets();
 
   fs.writeFileSync(`${baseUrl}/resources/.loaded`, '');
 

app/ipc.ts

@@ -51,6 +51,7 @@ export function setupIPC(sendToUI: SendToUI) {
         type: 'success',
         text: 'Spritesheets and game data have been updated.',
       });
+      sendToUI('resourcedone');
     } catch (e: any) {
       sendToUI('notify', { type: 'error', text: e.message });
     }

app/main.ts

@@ -110,7 +110,6 @@ async function createWindow(): Promise<BrowserWindow> {
   // load intercepter for image loading
   protocol.interceptFileProtocol('lotr', (req, callback) => {
     const url = req.url.substr(7);
-    console.log(path.normalize(app.getAppPath() + url));
     callback({ path: path.normalize(app.getAppPath() + url) });
   });
 
@@ -146,6 +145,10 @@ async function createWindow(): Promise<BrowserWindow> {
 }
 
 try {
+  protocol.registerSchemesAsPrivileged([
+    { scheme: 'lotr', privileges: { bypassCSP: true, supportFetchAPI: true } },
+  ]);
+
   app.on('ready', createWindow);
 
   app.on('window-all-closed', () => {

package.json

@@ -42,9 +42,11 @@
     "@sweetalert2/ngx-sweetalert2": "12.4.0",
     "@sweetalert2/theme-dark": "5.0.17",
     "ag-grid-angular": "32.0.2",
+    "angular-svg-icon": "18.0.1",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
     "monaco-editor": "0.50.0",
+    "ngx-color-picker": "17.0.0",
     "ngx-float-ui": "18.0.1",
     "ngx-webstorage": "18.0.0",
     "rxjs": "7.8.1",

src/app/app.module.ts

@@ -2,9 +2,10 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { AngularSvgIconModule } from 'angular-svg-icon';
 import { SharedModule } from './shared/shared.module';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -27,6 +28,7 @@ import {
 } from 'ngx-webstorage';
 import { AppComponent } from './app.component';
 import { appIcons } from './app.icons';
+import { AssetsService } from './services/assets.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -37,6 +39,7 @@ import { appIcons } from './app.icons';
     SharedModule,
     HomeModule,
     AppRoutingModule,
+    AngularSvgIconModule.forRoot(),
     NgxFloatUiModule.forRoot({
       trigger: NgxFloatUiTriggers.hover,
       showDelay: 500,
@@ -52,6 +55,15 @@ import { appIcons } from './app.icons';
     CodeEditorModule.forRoot(),
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (assetsService: AssetsService) => async () => {
+        await assetsService.load();
+        return assetsService;
+      },
+      deps: [AssetsService],
+      multi: true,
+    },
     provideHttpClient(withInterceptorsFromDi()),
     provideHotToastConfig(),
     provideNgxWebstorage(

src/app/helpers/exporter.ts

@@ -19,6 +19,7 @@ export function formatMod(modData: IModKit): IModKit {
     recipes: modData.recipes,
     spawners: formatSpawners(modData.spawners),
     cores: modData.cores,
+    stems: modData.stems,
   };
 
   return exported;

src/app/helpers/index.ts

@@ -1,9 +1,14 @@
 export * from './constants';
+export * from './core';
+export * from './dialog';
 export * from './droptable';
+export * from './exporter';
 export * from './id';
+export * from './importer';
 export * from './item';
 export * from './npc';
 export * from './quest';
 export * from './recipe';
 export * from './spawner';
+export * from './stem';
 export * from './validate';

src/app/helpers/stem.ts

@@ -0,0 +1,83 @@
+import { BuffType, MacroActivationType } from '../../interfaces';
+import { ISTEM } from '../../interfaces/stem';
+import { id } from './id';
+
+export const defaultSTEM: () => ISTEM = () => {
+  return {
+    _id: id(),
+    _hasSpell: false,
+    _hasTrait: false,
+    _hasEffect: false,
+    _hasMacro: false,
+
+    name: '',
+    _gameId: '',
+
+    all: {
+      desc: '',
+      icon: 'uncertainty',
+      color: '',
+      bgColor: '',
+    },
+
+    effect: {
+      tooltip: {
+        name: '',
+        color: '',
+        bgColor: '',
+        desc: '',
+        icon: undefined as unknown as string,
+      },
+      effect: {
+        type: undefined as unknown as BuffType,
+        duration: 0,
+        extra: {
+          potency: 0,
+          canRemove: false,
+          unique: true,
+          doesTick: false,
+          persistThroughDeath: false,
+          canOverlapUniqueIfEquipped: false,
+          charges: 0,
+          statChanges: {},
+        },
+      },
+      effectMeta: {},
+    },
+
+    macro: {
+      name: '',
+      macro: '',
+      icon: undefined as unknown as string,
+      color: '',
+      bgColor: '',
+      mode: undefined as unknown as MacroActivationType,
+      key: '',
+      tooltipDesc: '',
+      isDefault: false,
+    },
+
+    spell: {
+      spellName: '',
+      maxSkillForGain: 0,
+      mpCost: 0,
+      skillMultiplierChanges: [],
+      spellMeta: {
+        spellRef: '',
+      },
+    },
+
+    trait: {
+      name: '',
+      desc: '',
+      icon: undefined as unknown as string,
+      borderColor: '',
+      iconBgColor: '',
+      iconColor: '',
+      spellGiven: '',
+      isAncient: false,
+      valuePerTier: 0,
+      statsGiven: {},
+    },
+  };
+};

src/app/home/home.component.html

@@ -122,6 +122,10 @@
         <app-cores class="h-full"></app-cores>
         }
 
+        @case (9) {
+        <app-stems class="h-full"></app-stems>
+        }
+
         }
       </div>
     </div>

src/app/home/home.component.ts

@@ -63,6 +63,10 @@ export class HomeComponent {
       name: 'Cores',
       count: computed(() => this.modService.mod().cores.length),
     },
+    {
+      name: 'STEMs',
+      count: computed(() => this.modService.mod().stems.length),
+    },
   ];
 
   constructor() {

src/app/home/home.module.ts

@@ -7,7 +7,9 @@ import { NgIconsModule } from '@ng-icons/core';
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { AgGridModule } from 'ag-grid-angular';
+import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxFloatUiModule } from 'ngx-float-ui';
+
 import { SharedModule } from '../shared/shared.module';
 import { CoresEditorComponent } from '../tabs/cores/cores-editor/cores-editor.component';
 import { CoresComponent } from '../tabs/cores/cores.component';
@@ -68,6 +70,7 @@ import { HomeComponent } from './home.component';
     NgxFloatUiModule,
     NgIconsModule,
     CodeEditorModule,
+    ColorPickerModule,
   ],
   exports: [
     ValidationComponent,

src/app/services/assets.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AssetsService {
+  async load() {}
+}

src/app/services/electron.service.ts

@@ -50,6 +50,12 @@ export class ElectronService {
     window.api.receive('ready', () => {
       this.isLoaded.set(true);
       this.isFirstLoad.set(false);
+
+      this.requestAllJSON();
+    });
+
+    window.api.receive('resourcedone', () => {
+      this.requestAllJSON();
     });
 
     window.api.receive('firstload', () => {
@@ -61,7 +67,6 @@ export class ElectronService {
     });
 
     window.api.receive('newmap', (mapData: IEditorMap) => {
-      console.log('pre', mapData);
       this.modService.addMap(mapData);
     });
 
@@ -105,18 +110,22 @@ export class ElectronService {
       }
     );
 
+    this.send('READY_CHECK');
+  }
+
+  private requestAllJSON() {
     [
       'effect-data',
       'holidaydescs',
       'spells',
       'traits',
       'challenge',
       'trait-trees',
+      'sfx',
+      'macicons',
     ].forEach((neededJSON) => {
       this.requestJSON(neededJSON);
     });
-
-    this.send('READY_CHECK');
   }
 
   requestJSON(key: string) {

src/app/services/mod.service.ts

@@ -40,6 +40,7 @@ export function defaultModKit(): IModKit {
     recipes: [],
     spawners: [],
     cores: [],
+    stems: [],
   };
 }
 
@@ -220,8 +221,6 @@ export class ModService {
       mod.maps.push(incomingMap);
     }
 
-    console.log(incomingMap);
-
     this.updateMod(mod);
   }
 

src/app/shared/components/cell-icon/cell-icon.component.html

@@ -0,0 +1,2 @@
+<app-icon class="w-17 min-w-[70px] min-h-[70px] max-w-[70px] max-h-[70px]" [icon]="params.data.all.icon"
+  [color]="params.data.all.color || '#000'" [bgColor]="params.data.all.bgColor || '#9ca3af'"></app-icon>

src/app/shared/components/cell-icon/cell-icon.component.scss

@@ -0,0 +1,4 @@
+:host {
+  width: 100%;
+  height: 100%;
+}