add shims for web

src/app/home/home.component.html

@@ -3,8 +3,10 @@
     <a class="btn btn-ghost text-xl">Land of the Rair Mod Toolkit</a>
 
     @if(electronService.isLoaded()) {
-    <a class="btn btn-ghost text-lg" [swal]="changeModName">{{ modService.modName() }}</a>
-    <a class="btn btn-ghost" [swal]="changeModAuthor">{{ modService.modAuthor() }}</a>
+    <a class="btn btn-ghost text-lg" [swal]="changeModName" [class.btn-disabled]="!electronService.isInElectron()">{{
+      modService.modName() }}</a>
+    <a class="btn btn-ghost" [swal]="changeModAuthor" [class.btn-disabled]="!electronService.isInElectron()">{{
+      modService.modAuthor() }}</a>
     }
   </div>
 
@@ -21,17 +23,24 @@
           </summary>
           <ul class="z-30 top-6 right-1.5 w-72 bg-base-100 rounded-t-none p-2">
             <li class="menu-title"><a>Mod Metadata</a></li>
-            <li><a (click)="closeMenu()" [swal]="changeModName">Change Mod Name</a></li>
-            <li><a (click)="closeMenu()" [swal]="changeModAuthor">Change Mod Author</a></li>
+            <li><a (click)="closeMenu()" [swal]="changeModName"
+                [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 class="menu-title"><a>Mod I/O</a></li>
-            <li><a (click)="closeMenu(); electronService.send('LOAD_MOD')">Load/Import Mod</a></li>
-            <li><a (click)="closeMenu(); attemptExport();">Export Mod</a></li>
+            <li><a (click)="closeMenu(); electronService.send('LOAD_MOD')"
+                [class.btn-disabled]="!electronService.isInElectron()">Load/Import Mod</a></li>
+            <li><a (click)="closeMenu(); attemptExport();" [class.btn-disabled]="!electronService.isInElectron()">Export
+                Mod</a></li>
 
             <li class="menu-title"><a>Mod Testing</a></li>
-            <li><a (click)="closeMenu(); electronService.send('DOWNLOAD_MONGO')">Install MongoDB...</a></li>
-            <li><a (click)="closeMenu(); electronService.send('DOWNLOAD_RAIR')">Install Rair Server...</a></li>
-            <li><a (click)="closeMenu(); toggleTester()">Test Mod!</a></li>
+            <li><a (click)="closeMenu(); electronService.send('DOWNLOAD_MONGO')"
+                [class.btn-disabled]="!electronService.isInElectron()">Install MongoDB...</a></li>
+            <li><a (click)="closeMenu(); electronService.send('DOWNLOAD_RAIR')"
+                [class.btn-disabled]="!electronService.isInElectron()">Install Rair Server...</a></li>
+            <li><a (click)="closeMenu(); toggleTester()" [class.btn-disabled]="!electronService.isInElectron()">Test
+                Mod!</a></li>
 
             <li class="menu-title"><a>ModKit Utilities</a></li>
             <li><a (click)="closeMenu()" target="_blank" href="https://rair.land/docs/modkit/">Help</a></li>
@@ -45,11 +54,13 @@
             </li>
 
             <li class="menu-title"><a>Updates</a></li>
-            <li><a (click)="closeMenu(); modService.updateAutogenerated()">Update Autogenerated Content</a></li>
-            <li><a (click)="closeMenu(); electronService.send('UPDATE_RESOURCES')">Update Resources</a></li>
+            <li><a (click)="closeMenu(); modService.updateAutogenerated()"
+                [class.btn-disabled]="!electronService.isInElectron()">Update Autogenerated Content</a></li>
+            <li><a (click)="closeMenu(); updateResources()">Update Resources</a></li>
 
             <li class="menu-title"><a>Danger Zone</a></li>
-            <li><a (click)="closeMenu()" [swal]="resetMod">Reset Mod</a></li>
+            <li><a (click)="closeMenu()" [swal]="resetMod" [class.btn-disabled]="!electronService.isInElectron()">Reset
+                Mod</a></li>
           </ul>
         </details>
       </li>
@@ -107,7 +118,8 @@
   <div role="tablist" class="tabs tabs-boxed rounded-none flex flex-wrap">
 
     @for(tab of tabOrder; track tab.name; let i = $index) {
-    <a role="tab" class="tab flex-1 min-w-[150px]" [class.tab-disabled]="!electronService.isLoaded()"
+    <a role="tab" class="tab flex-1 min-w-[150px]"
+      [class.tab-disabled]="!electronService.isLoaded() || (tab.disableOutsideElectron && !electronService.isInElectron())"
       [class.tab-active]="activeTab() === i" (click)="changeTab(i)">{{ tab.name
       }} ({{ tab.count() }})</a>
     }

src/app/home/home.component.scss

@@ -41,3 +41,7 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+a.btn-disabled {
+  opacity: 0.5;
+}

src/app/home/home.component.ts

@@ -54,7 +54,11 @@ export class HomeComponent {
   });
 
   public tabOrder = [
-    { name: 'Maps', count: computed(() => this.modService.mod().maps.length) },
+    {
+      name: 'Maps',
+      count: computed(() => this.modService.mod().maps.length),
+      disableOutsideElectron: true,
+    },
     {
       name: 'Items',
       count: computed(() => this.modService.mod().items.length),
@@ -173,4 +177,13 @@ export class HomeComponent {
   toggleTester() {
     this.tester()?.nativeElement.showModal();
   }
+
+  updateResources() {
+    if (this.electronService.isInElectron()) {
+      this.electronService.send('UPDATE_RESOURCES');
+      return;
+    }
+
+    void this.electronService.reloadExternalWebMod();
+  }
 }

src/app/services/electron.service.ts

@@ -29,6 +29,8 @@ export class ElectronService {
   private notifyService = inject(NotifyService);
   private settingsService = inject(SettingsService);
 
+  public isInElectron = computed(() => !!window.api);
+
   private quicksaveFilepath = computed(() => {
     const mod = this.modService.mod();
     const settings = this.settingsService.allSettings()[mod.meta.id];
@@ -38,6 +40,8 @@ export class ElectronService {
   constructor() {
     this.watchIPC();
 
+    void this.tryLoadingOutsideElectron();
+
     effect(() => {
       const mod = this.modService.mod();
 
@@ -53,7 +57,30 @@ export class ElectronService {
     });
   }
 
+  public async reloadExternalWebMod() {
+    const basegamecontent = await fetch(
+      'https://play.rair.land/assets/content/_output/simplemods/BaseGameContent.rairmod.json'
+    );
+    const contentJson = await basegamecontent.json();
+
+    this.modService.updateMod(contentJson as IModKit);
+  }
+
+  private async tryLoadingOutsideElectron() {
+    if (this.isInElectron()) return;
+
+    const mod = this.modService.mod();
+    if (mod.meta.author === 'Anonymous') {
+      await this.reloadExternalWebMod();
+    }
+
+    this.isLoaded.set(true);
+    this.isFirstLoad.set(false);
+  }
+
   private watchIPC() {
+    if (!this.isInElectron()) return;
+
     window.api.reset();
 
     const tryToReady = () => {
@@ -157,10 +184,12 @@ export class ElectronService {
   }
 
   requestJSON(key: ModJSONKey) {
+    if (!this.isInElectron()) return;
     window.api.send('JSON', { json: key });
   }
 
   send(key: string, value?: any) {
+    if (!this.isInElectron()) return;
     window.api.send(key, value);
   }
 }

src/app/services/mod.service.ts

@@ -212,12 +212,12 @@ export class ModService {
 
   // map functions
   public ensureMapsExist() {
-    window.api.send('ENSURE_MAPS', this.mod().maps);
+    window.api?.send('ENSURE_MAPS', this.mod().maps);
   }
 
   public importMap(incomingMap: IEditorMap) {
     this.addMap(incomingMap);
-    window.api.send('ENSURE_MAP', { ...incomingMap });
+    window.api?.send('ENSURE_MAP', { ...incomingMap });
   }
 
   public addMap(incomingMap: IEditorMap) {

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

@@ -6,14 +6,16 @@
   }
 
   @if(params.showCopyButton) {
-  <button class="ml-2 btn btn-sm btn-info" [class.btn-disabled]="params.data._id?.includes('AUTOGENERATED')"
+  <button class="ml-2 btn btn-sm btn-info"
+    [class.btn-disabled]="params.data._id?.includes('AUTOGENERATED') || !electronService.isInElectron()"
     (click)="params.copyCallback?.(params.data)" floatUi="Copy">
     <ng-icon name="heroDocumentDuplicate"></ng-icon>
   </button>
   }
 
   @if(params.showRenameButton) {
-  <button class="ml-2 btn btn-sm btn-info" (click)="params.renameCallback?.(params.data)" floatUi="Rename">
+  <button class="ml-2 btn btn-sm btn-info" [class.btn-disabled]="!electronService.isInElectron()"
+    (click)="params.renameCallback?.(params.data)" floatUi="Rename">
     <ng-icon name="heroDocumentText"></ng-icon>
   </button>
   }
@@ -25,7 +27,8 @@
   }
 
   @if(params.showDeleteButton) {
-  <button class="ml-2 btn btn-sm btn-warning" (click)="attemptDelete($event)" floatUi="Delete">
+  <button class="ml-2 btn btn-sm btn-warning" [class.btn-disabled]="!electronService.isInElectron()"
+    (click)="attemptDelete($event)" floatUi="Delete">
     <ng-icon name="heroTrash"></ng-icon>
   </button>
 

src/app/shared/components/cell-buttons/cell-buttons.component.ts

@@ -1,14 +1,17 @@
-import { Component, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
 import { SwalComponent } from '@sweetalert2/ngx-sweetalert2';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
+import { ElectronService } from '../../../services/electron.service';
 
 @Component({
   selector: 'app-cell-buttons',
   templateUrl: './cell-buttons.component.html',
   styleUrl: './cell-buttons.component.scss',
 })
 export class CellButtonsComponent implements ICellRendererAngularComp {
+  public electronService = inject(ElectronService);
+
   public params!: any;
 
   public deleteWarnSwal = viewChild<SwalComponent>('deleteItem');

src/app/shared/components/editor-base/editor-base.component.ts

@@ -10,6 +10,7 @@ import {
 import { LocalStorageService } from 'ngx-webstorage';
 import { HasIdentification } from '../../../../interfaces';
 import { id } from '../../../helpers/id';
+import { ElectronService } from '../../../services/electron.service';
 import { ModService } from '../../../services/mod.service';
 
 type Tab = { name: string; visibleIf?: Signal<boolean> };
@@ -23,6 +24,7 @@ export class EditorBaseComponent<T extends HasIdentification>
   implements OnInit
 {
   private localStorage = inject(LocalStorageService);
+  public electronService = inject(ElectronService);
   public modService = inject(ModService);
 
   public readonly key: string = '';

src/app/shared/components/editor-view-table/editor-view-table.component.html

@@ -4,10 +4,12 @@
 <div class="w-full h-full vh- flex flex-col flex-nowrap justify-center items-center text-center text-3xl">
   You don't have any {{ dataType() }}.
 
-  <button class="mt-4 btn btn-secondary" (click)="create.emit()">Add one</button>
+  <button class="mt-4 btn btn-secondary" (click)="create.emit()"
+    [class.btn-disabled]="!electronService.isInElectron()">Add one</button>
 
   @if(showImport()) {
-  <button class="mt-4 btn btn-secondary" (click)="import.emit()">Import one</button>
+  <button class="mt-4 btn btn-secondary" (click)="import.emit()"
+    [class.btn-disabled]="!electronService.isInElectron()">Import one</button>
   }
 </div>
 

src/app/shared/components/editor-view-table/editor-view-table.component.ts

@@ -1,17 +1,20 @@
-import { Component, input, output } from '@angular/core';
+import { Component, inject, input, output } from '@angular/core';
 import {
   ColDef,
   FilterChangedEvent,
   FilterModel,
   GridReadyEvent,
 } from 'ag-grid-community';
+import { ElectronService } from '../../../services/electron.service';
 
 @Component({
   selector: 'app-editor-view-table',
   templateUrl: './editor-view-table.component.html',
   styleUrl: './editor-view-table.component.scss',
 })
 export class EditorViewTableComponent {
+  public electronService = inject(ElectronService);
+
   public tableItems = input<any[]>([]);
   public dataType = input<string>('');
   public tableColumns = input<ColDef[]>([]);

src/app/shared/components/header-buttons/header-buttons.component.html

@@ -1,12 +1,14 @@
 <div class="flex justify-end items-center h-full w-full">
   @if(params.showImportButton) {
-  <button class="ml-2 btn btn-sm btn-secondary" (click)="params.importCallback()" floatUi="Import">
+  <button class="ml-2 btn btn-sm btn-secondary" [class.btn-disabled]="!electronService.isInElectron()"
+    (click)="params.importCallback()" floatUi="Import">
     <ng-icon name="heroArrowDownOnSquare"></ng-icon>
   </button>
   }
 
   @if(params.showNewButton) {
-  <button class="ml-2 btn btn-sm btn-secondary" (click)="params.newCallback()" floatUi="New">
+  <button class="ml-2 btn btn-sm btn-secondary" [class.btn-disabled]="!electronService.isInElectron()"
+    (click)="params.newCallback()" floatUi="New">
     <ng-icon name="heroPlus"></ng-icon>
   </button>
   }

src/app/shared/components/header-buttons/header-buttons.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { IHeaderAngularComp } from 'ag-grid-angular';
 import { IHeaderParams } from 'ag-grid-community';
+import { ElectronService } from '../../../services/electron.service';
 
 type AllHeaderParams = IHeaderParams & {
   showNewButton: boolean;
@@ -15,6 +16,8 @@ type AllHeaderParams = IHeaderParams & {
   styleUrl: './header-buttons.component.scss',
 })
 export class HeaderButtonsComponent implements IHeaderAngularComp {
+  public electronService = inject(ElectronService);
+
   public params!: AllHeaderParams;
 
   agInit(params: AllHeaderParams) {

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

@@ -1,4 +1,4 @@
 @if(icon(); as icon) {
-<svg-icon [src]="'lotr://./resources/assets/macicons/' + icon + '.svg'" class="icon"
-  [svgStyle]="{ 'background-color': bgColor() }" [style.--svg-color]="color()"></svg-icon>
+<svg-icon [src]="baseUrl() + '/macicons/' + icon + '.svg'" class="icon" [svgStyle]="{ 'background-color': bgColor() }"
+  [style.--svg-color]="color()"></svg-icon>
 }

src/app/shared/components/icon/icon.component.ts

@@ -1,16 +1,27 @@
-import { Component, HostBinding, input } from '@angular/core';
+import { Component, computed, HostBinding, inject, input } from '@angular/core';
+import { ElectronService } from '../../../services/electron.service';
 
 @Component({
   selector: 'app-icon',
   templateUrl: './icon.component.html',
   styleUrl: './icon.component.scss',
 })
 export class IconComponent {
+  private electronService = inject(ElectronService);
+
   public icon = input.required<string | undefined>();
   public color = input<string | undefined>();
   public bgColor = input<string | undefined>();
   public borderColor = input<string | undefined>();
 
+  public baseUrl = computed(() => {
+    if (!this.electronService.isInElectron()) {
+      return 'https://play.rair.land/assets';
+    }
+
+    return 'lotr://./resources/maps/__assets';
+  });
+
   @HostBinding('style.outline-color')
   get outlineColor() {
     return this.borderColor();

src/app/shared/components/sprite/sprite.component.html

@@ -1,2 +1,2 @@
-<img [src]="'lotr://./resources/maps/__assets/spritesheets/' + type() + '.png'" class="sprite"
-  [style.object-position]="objectPosition()" [style.transform]="'scale(' + scale() + ')'" />
+<img [src]="baseUrl() + '/spritesheets/' + type() + '.png'" class="sprite" [style.object-position]="objectPosition()"
+  [style.transform]="'scale(' + scale() + ')'" />

src/app/shared/components/sprite/sprite.component.ts

@@ -1,4 +1,5 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
+import { ElectronService } from '../../../services/electron.service';
 
 type SpriteType = 'items' | 'creatures';
 
@@ -13,10 +14,20 @@ const divisors: Record<SpriteType, number> = {
   styleUrl: './sprite.component.scss',
 })
 export class SpriteComponent {
+  private electronService = inject(ElectronService);
+
   public sprite = input.required<number>();
   public type = input.required<'items' | 'creatures'>();
   public scale = input<number>(1);
 
+  public baseUrl = computed(() => {
+    if (!this.electronService.isInElectron()) {
+      return 'https://play.rair.land/assets';
+    }
+
+    return 'lotr://./resources/maps/__assets';
+  });
+
   public size = computed(() => divisors[this.type()]);
 
   public objectPosition = computed(() => {