cyberia 3.2.12 → 3.2.70

package/src/client/components/cyberia/InstanceEngineCyberia.js

@@ -1,12 +1,14 @@
 import { BtnIcon } from '../core/BtnIcon.js';
 import { Input, InputFile, getFileFromBlobEndpoint } from '../core/Input.js';
 import { htmls, s } from '../core/VanillaJs.js';
+import { commonModeratorGuard } from '../core/CommonJs.js';
 import { NotificationManager } from '../core/NotificationManager.js';
 import { Translate } from '../core/Translate.js';
 import { dynamicCol, darkTheme, ThemeEvents } from '../core/Css.js';
 import { DropDown } from '../core/DropDown.js';
 import { CyberiaInstanceManagement } from '../../services/cyberia-instance/cyberia-instance.management.js';
 import { CyberiaInstanceService } from '../../services/cyberia-instance/cyberia-instance.service.js';
+import { CyberiaInstanceConfService } from '../../services/cyberia-instance-conf/cyberia-instance-conf.service.js';
 import { CyberiaMapService } from '../../services/cyberia-map/cyberia-map.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
@@ -27,28 +29,102 @@ class InstanceEngineCyberia {
   static thumbnailDirty = false;
   static portals = [];
   static itemIdsDropdownId = 'instance-engine-item-ids-dropdown';
+  static itemInventoryListId = 'instance-engine-item-inventory-list';
+  // itemId → defaultPlayerInventory flag for the currently selected item ids.
+  static itemInventoryFlags = {};
+
+  // Current selection, read from the dropdown's `oncheckvalues` (always live —
+  // it is updated before `_renderSelectedBadges` runs, unlike `.value` which
+  // lags by one in the option-click path).
+  static getSelectedItemIds() {
+    const token = DropDown.Tokens[InstanceEngineCyberia.itemIdsDropdownId];
+    if (!token) return [];
+    const fromChecks = Object.values(token.oncheckvalues || {})
+      .map((v) => v.data)
+      .filter(Boolean);
+    if (fromChecks.length > 0) return fromChecks;
+    return Array.isArray(token.value) ? token.value.filter(Boolean) : [];
+  }
+
+  // Render the per-item "Default Player Inventory" toggles for every selected
+  // item id. Kept in sync with the dropdown via a MutationObserver on its badge
+  // container (see render()).
+  static renderItemInventoryList(containerId = InstanceEngineCyberia.itemInventoryListId) {
+    const container = s(`.${containerId}`);
+    if (!container) return;
+
+    const selected = InstanceEngineCyberia.getSelectedItemIds();
+
+    // Drop flags for items no longer selected so the payload never carries them.
+    for (const key of Object.keys(InstanceEngineCyberia.itemInventoryFlags)) {
+      if (!selected.includes(key)) delete InstanceEngineCyberia.itemInventoryFlags[key];
+    }
+
+    if (selected.length === 0) {
+      htmls(`.${containerId}`, html`<div style="color:#888;font-size:12px;">No item IDs selected.</div>`);
+      return;
+    }
+
+    let listHtml = '';
+    for (const itemId of selected) {
+      const checked = InstanceEngineCyberia.itemInventoryFlags[itemId] ? 'checked' : '';
+      listHtml += html`<div class="fl" style="border-bottom:1px solid #444;padding:4px 0;align-items:center;">
+        <div class="in fll" style="flex:1;font-size:12px;font-family:monospace;">${itemId}</div>
+        <div class="in fll" style="display:flex;align-items:center;justify-content:flex-end;">
+          <label style="font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;">
+            <input
+              type="checkbox"
+              class="instance-engine-item-inv-checkbox"
+              data-item-id="${itemId}"
+              ${checked}
+              style="cursor:pointer;"
+            />
+            Default Player Inventory
+          </label>
+        </div>
+      </div>`;
+    }
+    htmls(`.${containerId}`, listHtml);
+
+    container.querySelectorAll('.instance-engine-item-inv-checkbox').forEach((cb) => {
+      cb.onchange = () => {
+        InstanceEngineCyberia.itemInventoryFlags[cb.dataset.itemId] = cb.checked;
+      };
+    });
+  }
 
   static syncItemIdsDropdownSelection(itemIds = []) {
     const dropdownId = InstanceEngineCyberia.itemIdsDropdownId;
     if (!DropDown.Tokens[dropdownId]) return;
 
+    // Accept both the new [{ id, defaultPlayerInventory }] shape and the legacy
+    // string[] shape so older instance docs keep loading.
+    const normalized = (itemIds || [])
+      .map((entry) => (typeof entry === 'string' ? { id: entry, defaultPlayerInventory: false } : entry))
+      .filter((entry) => entry && entry.id);
+
     DropDown.Tokens[dropdownId].value = [];
     if (s(`.${dropdownId}`)) s(`.${dropdownId}`).value = [];
     DropDown.Tokens[dropdownId].oncheckvalues = {};
     htmls(`.dropdown-current-${dropdownId}`, '');
     htmls(`.${dropdownId}-render-container`, '');
 
-    for (const itemId of itemIds) {
-      const key = dropdownValueKey(itemId);
+    InstanceEngineCyberia.itemInventoryFlags = {};
+    const ids = [];
+    for (const entry of normalized) {
+      const key = dropdownValueKey(entry.id);
       DropDown.Tokens[dropdownId].oncheckvalues[key] = {
-        data: itemId,
-        display: itemId,
-        value: itemId,
+        data: entry.id,
+        display: entry.id,
+        value: entry.id,
       };
+      InstanceEngineCyberia.itemInventoryFlags[entry.id] = !!entry.defaultPlayerInventory;
+      ids.push(entry.id);
     }
-    DropDown.Tokens[dropdownId].value = [...itemIds];
-    if (s(`.${dropdownId}`)) s(`.${dropdownId}`).value = [...itemIds];
+    DropDown.Tokens[dropdownId].value = [...ids];
+    if (s(`.${dropdownId}`)) s(`.${dropdownId}`).value = [...ids];
     DropDown.Tokens[dropdownId]._renderSelectedBadges?.();
+    InstanceEngineCyberia.renderItemInventoryList();
   }
 
   static async buildItemIdsDropdown() {
@@ -151,6 +227,8 @@ class InstanceEngineCyberia {
 
   static async render(options = {}) {
     const { appStore } = options;
+    const role = appStore?.Data?.user?.main?.model?.user?.role || 'guest';
+    const canMutate = commonModeratorGuard(role);
     const idCode = 'instance-engine-input-code';
     const idName = 'instance-engine-input-name';
     const idDescription = 'instance-engine-input-description';
@@ -169,6 +247,11 @@ class InstanceEngineCyberia {
     const idTargetCellY = 'instance-engine-target-cell-y';
     const idFilterSource = 'instance-engine-filter-source';
     const idFilterTarget = 'instance-engine-filter-target';
+    const idSpawnMapCode = 'instance-engine-spawn-map-code';
+    const idSpawnCellX = 'instance-engine-spawn-cell-x';
+    const idSpawnCellY = 'instance-engine-spawn-cell-y';
+    const idSpawnRandom = 'instance-engine-spawn-random';
+    const idAoiRadius = 'instance-engine-aoi-radius';
 
     InstanceEngineCyberia.currentInstanceId = null;
     InstanceEngineCyberia.currentThumbnailId = null;
@@ -184,7 +267,10 @@ class InstanceEngineCyberia {
       const cyberiaMapCodes = DropDown.Tokens[idMapCodesDropdown]?.value
         ? [...DropDown.Tokens[idMapCodesDropdown].value]
         : [];
-      const itemIds = DropDown.Tokens[idItemIdsDropdown]?.value ? [...DropDown.Tokens[idItemIdsDropdown].value] : [];
+      const itemIds = InstanceEngineCyberia.getSelectedItemIds().map((id) => ({
+        id,
+        defaultPlayerInventory: !!InstanceEngineCyberia.itemInventoryFlags[id],
+      }));
       const payload = {
         code: s(`.${idCode}`)?.value || '',
         name: s(`.${idName}`)?.value || '',
@@ -194,11 +280,37 @@ class InstanceEngineCyberia {
         cyberiaMapCodes,
         itemIds,
         portals: InstanceEngineCyberia.portals,
+        playerSpawn: {
+          sourceMapCode: s(`.${idSpawnMapCode}`)?.value?.trim() || '',
+          sourceCellX: parseInt(s(`.${idSpawnCellX}`)?.value) || 0,
+          sourceCellY: parseInt(s(`.${idSpawnCellY}`)?.value) || 0,
+          random: !!s(`.${idSpawnRandom}`)?.checked,
+        },
       };
       if (InstanceEngineCyberia.currentThumbnailId) payload.thumbnail = InstanceEngineCyberia.currentThumbnailId;
       return payload;
     };
 
+    // AOI radius lives on the linked CyberiaInstanceConf (auto-upserted on
+    // instance save). Fetch / update it by instanceCode so the engine can edit
+    // it alongside instance identity without touching the rest of the conf.
+    const fetchConfByCode = async (instanceCode) => {
+      if (!instanceCode) return null;
+      const res = await CyberiaInstanceConfService.get({
+        filterModel: { instanceCode: { filterType: 'text', type: 'equals', filter: instanceCode } },
+      });
+      return res?.data?.data?.[0] || null;
+    };
+
+    const persistAoiRadius = async (instanceCode) => {
+      const raw = s(`.${idAoiRadius}`)?.value;
+      if (raw === undefined || raw === '') return;
+      const aoiRadius = parseFloat(raw);
+      if (!Number.isFinite(aoiRadius)) return;
+      const conf = await fetchConfByCode(instanceCode);
+      if (conf?._id) await CyberiaInstanceConfService.put({ id: conf._id, body: { aoiRadius } });
+    };
+
     const persistInstance = async ({ notify = true } = {}) => {
       // Upload thumbnail file only if user selected a new one
       const thumbnailInput = s(`.${idThumbnail}`);
@@ -245,6 +357,9 @@ class InstanceEngineCyberia {
       }
       if (result.status === 'success') {
         if (result.data?._id) InstanceEngineCyberia.currentInstanceId = result.data._id;
+        // The conf is auto-upserted on instance save; persist the AOI radius onto
+        // it now that we know the instance code resolves to a conf document.
+        await persistAoiRadius(body.code);
         await DefaultManagement.loadTable(managementId, { force: true, reload: true });
       }
       return result;
@@ -347,6 +462,17 @@ class InstanceEngineCyberia {
         portalMode: p.portalMode || 'inter-portal',
       }));
       InstanceEngineCyberia.renderPortalList(portalListId);
+
+      // Player spawn (instance-level).
+      const spawn = instanceData.playerSpawn || {};
+      if (s(`.${idSpawnMapCode}`)) s(`.${idSpawnMapCode}`).value = spawn.sourceMapCode || '';
+      if (s(`.${idSpawnCellX}`)) s(`.${idSpawnCellX}`).value = spawn.sourceCellX ?? 0;
+      if (s(`.${idSpawnCellY}`)) s(`.${idSpawnCellY}`).value = spawn.sourceCellY ?? 0;
+      if (s(`.${idSpawnRandom}`)) s(`.${idSpawnRandom}`).checked = !!spawn.random;
+
+      // AOI radius (lives on the linked conf, fetched by instance code).
+      const conf = await fetchConfByCode(instanceData.code);
+      if (s(`.${idAoiRadius}`)) s(`.${idAoiRadius}`).value = conf?.aoiRadius ?? '';
     };
 
     const resetForm = () => {
@@ -381,8 +507,15 @@ class InstanceEngineCyberia {
         htmls(`.dropdown-current-${idItemIdsDropdown}`, '');
         htmls(`.${idItemIdsDropdown}-render-container`, '');
       }
+      InstanceEngineCyberia.itemInventoryFlags = {};
+      InstanceEngineCyberia.renderItemInventoryList();
       InstanceEngineCyberia.portals = [];
       InstanceEngineCyberia.renderPortalList(portalListId);
+      if (s(`.${idSpawnMapCode}`)) s(`.${idSpawnMapCode}`).value = '';
+      if (s(`.${idSpawnCellX}`)) s(`.${idSpawnCellX}`).value = 0;
+      if (s(`.${idSpawnCellY}`)) s(`.${idSpawnCellY}`).value = 0;
+      if (s(`.${idSpawnRandom}`)) s(`.${idSpawnRandom}`).checked = false;
+      if (s(`.${idAoiRadius}`)) s(`.${idAoiRadius}`).value = '';
     };
 
     setTimeout(() => {
@@ -495,6 +628,19 @@ class InstanceEngineCyberia {
           InstanceEngineCyberia.renderPortalList(portalListId);
         };
 
+      // Keep the per-item "Default Player Inventory" toggles in sync with the
+      // item-ids dropdown. Every add/remove/clear re-renders the dropdown badge
+      // container, so observing it is a reliable change hook (the dropdown
+      // exposes no onChange callback).
+      const itemBadgeContainer = s(`.dropdown-current-${idItemIdsDropdown}`);
+      if (itemBadgeContainer) {
+        const itemInventoryObserver = new MutationObserver(() => {
+          InstanceEngineCyberia.renderItemInventoryList();
+        });
+        itemInventoryObserver.observe(itemBadgeContainer, { childList: true, subtree: true });
+      }
+      InstanceEngineCyberia.renderItemInventoryList();
+
       ThemeEvents['instance-engine-theme'] = () => {
         InstanceEngineCyberia.renderPortalList(portalListId);
       };
@@ -527,6 +673,7 @@ class InstanceEngineCyberia {
     const dcPortalSource = 'instance-engine-dc-portal-source';
     const dcPortalTarget = 'instance-engine-dc-portal-target';
     const dcPortalFilter = 'instance-engine-dc-portal-filter';
+    const dcSpawn = 'instance-engine-dc-spawn';
 
     return html`<div class="in section-mp instance-engine-container">
       ${dynamicCol({ containerSelector: 'instance-engine-container', id: dcFields, type: 'search-inputs' })}
@@ -645,6 +792,10 @@ class InstanceEngineCyberia {
         })}
       </div>
       <div class="in section-mp" style="margin-top: 10px;">${await InstanceEngineCyberia.buildItemIdsDropdown()}</div>
+      <div class="in section-mp" style="margin-top: 5px;">
+        <div class="in input-label" style="font-size:13px;margin-bottom:5px;">Default Player Inventory</div>
+        <div class="in ${InstanceEngineCyberia.itemInventoryListId}" style="max-height:200px;overflow-y:auto;"></div>
+      </div>
       <div class="in section-mp" style="margin-top: 10px;">
         <div class="in input-label" style="font-size:14px;margin-bottom:5px;">Portals</div>
         ${dynamicCol({ containerSelector: 'instance-engine-container', id: dcPortalSource, type: 'search-inputs' })}
@@ -757,14 +908,69 @@ class InstanceEngineCyberia {
         <div class="in ${portalListId}" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
       </div>
       <div class="in section-mp" style="margin-top: 10px;">
-        ${dynamicCol({ containerSelector: 'instance-engine-container', id: dcSaveNew, type: 'a-50-b-50' })}
+        <div class="in input-label" style="font-size:14px;margin-bottom:5px;">Player Spawn &amp; World</div>
+        <div class="in" style="font-size:12px;color:#888;margin-bottom:6px;">
+          Fixed spawn places every new player at the cell below. Enable Random (or leave the map code blank) to spawn at
+          a random walkable cell on a random map.
+        </div>
+        ${dynamicCol({ containerSelector: 'instance-engine-container', id: dcSpawn, type: 'search-inputs' })}
         <div class="fl">
-          <div class="in fll ${dcSaveNew}-col-a" style="padding: 5px;">
-            ${await BtnIcon.instance({
-              class: 'wfa btn-instance-engine-save',
-              label: html`<i class="fa-solid fa-floppy-disk"></i> Save Instance`,
+          <div class="in fll ${dcSpawn}-col-a">
+            ${await Input.instance({
+              id: idSpawnMapCode,
+              label: html`Spawn Map Code`,
+              containerClass: 'inl',
+              type: 'text',
+            })}
+          </div>
+          <div class="in fll ${dcSpawn}-col-b">
+            ${await Input.instance({
+              id: idSpawnCellX,
+              label: html`Spawn Cell X`,
+              containerClass: 'inl',
+              type: 'number',
+              min: 0,
+              value: 0,
+            })}
+          </div>
+          <div class="in fll ${dcSpawn}-col-c">
+            ${await Input.instance({
+              id: idSpawnCellY,
+              label: html`Spawn Cell Y`,
+              containerClass: 'inl',
+              type: 'number',
+              min: 0,
+              value: 0,
             })}
           </div>
+        </div>
+        <div class="in" style="margin-top:6px;">
+          <label style="font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;">
+            <input class="${idSpawnRandom}" type="checkbox" style="cursor:pointer;" /> Random spawn (ignore the fixed
+            cell)
+          </label>
+        </div>
+        <div class="in" style="margin-top:10px;">
+          ${await Input.instance({
+            id: idAoiRadius,
+            label: html`AOI Radius (cells)`,
+            containerClass: 'inl',
+            type: 'number',
+            min: 1,
+          })}
+        </div>
+      </div>
+      <div class="in section-mp" style="margin-top: 10px;">
+        ${dynamicCol({ containerSelector: 'instance-engine-container', id: dcSaveNew, type: 'a-50-b-50' })}
+        <div class="fl">
+          ${canMutate
+            ? html`<div class="in fll ${dcSaveNew}-col-a" style="padding: 5px;">
+                ${await BtnIcon.instance({
+                  class: 'wfa btn-instance-engine-save',
+                  label: html`<i class="fa-solid fa-floppy-disk"></i> Save Instance`,
+                })}
+              </div>`
+            : ''}
           <div class="in fll ${dcSaveNew}-col-b" style="padding: 5px;">
             ${await BtnIcon.instance({
               class: 'wfa btn-instance-engine-new',

package/src/client/components/cyberia/MapEngineCyberia.js

@@ -1,6 +1,7 @@
 import { BtnIcon } from '../core/BtnIcon.js';
 import { Input, InputFile, getFileFromBlobEndpoint } from '../core/Input.js';
 import { htmls, s } from '../core/VanillaJs.js';
+import { commonModeratorGuard } from '../core/CommonJs.js';
 import { NotificationManager } from '../core/NotificationManager.js';
 import { Translate } from '../core/Translate.js';
 import { darkTheme, dynamicCol, ThemeEvents } from '../core/Css.js';
@@ -33,6 +34,7 @@ class MapEngineCyberia {
   static loadMap = null;
   static showGridBorders = true;
   static addOnClick = true;
+  static removeOnClick = false;
   static showObjectLayers = false;
   static enableRandomFactors = false;
   static captureObjLayerThumbnail = true;
@@ -151,13 +153,43 @@ class MapEngineCyberia {
       return false;
     }
 
+    // Collect indices of filtered entities that have the source itemId
+    const eligible = [];
+    for (const { i } of filtered) {
+      const entity = MapEngineCyberia.entities[i];
+      if (Array.isArray(entity?.objectLayerItemIds) && entity.objectLayerItemIds.includes(source)) {
+        eligible.push(i);
+      }
+    }
+
+    if (!eligible.length) {
+      NotificationManager.Push({
+        html: `No exact ItemId matches for "${source}" were found in the current filtered entities.`,
+        status: 'error',
+      });
+      return false;
+    }
+
+    // When enableRandomFactors is active, each matching entity independently rolls
+    // a random probability check in [fMin, fMax]. If the roll passes, it gets renamed;
+    // otherwise it stays unchanged. This produces an intermediate intensity between
+    // "almost everyone" (factors near/above 1.0) and "almost no one" (factors near 0).
     let matchedEntities = 0;
     let renamedReferences = 0;
     const changed = MapEngineCyberia.commitEntityMutation(() => {
-      for (const { i } of filtered) {
+      for (const i of eligible) {
+        if (MapEngineCyberia.enableRandomFactors) {
+          const rawA = parseFloat(s('.map-engine-factor-a')?.value);
+          const rawB = parseFloat(s('.map-engine-factor-b')?.value);
+          const minF = Number.isFinite(rawA) ? rawA : 0.5;
+          const maxF = Number.isFinite(rawB) ? rawB : 1.5;
+          const fMin = Math.min(minF, maxF);
+          const fMax = Math.max(minF, maxF);
+          const roll = fMin + Math.random() * (fMax - fMin);
+          // If the roll is >= 1.0, always rename; otherwise compare against Math.random()
+          if (roll < 1.0 && Math.random() > roll) continue;
+        }
         const entity = MapEngineCyberia.entities[i];
-        if (!Array.isArray(entity?.objectLayerItemIds) || entity.objectLayerItemIds.length === 0) continue;
-
         let entityChanged = false;
         entity.objectLayerItemIds = entity.objectLayerItemIds.map((itemId) => {
           if (itemId !== source) return itemId;
@@ -165,7 +197,6 @@ class MapEngineCyberia {
           renamedReferences += 1;
           return target;
         });
-
         if (entityChanged) matchedEntities += 1;
       }
     });
@@ -570,6 +601,8 @@ class MapEngineCyberia {
 
   static async render(options = {}) {
     const { appStore } = options;
+    const role = appStore?.Data?.user?.main?.model?.user?.role || 'guest';
+    const canMutate = commonModeratorGuard(role);
     const idCode = 'map-engine-input-code';
     const idName = 'map-engine-input-name';
     const idDescription = 'map-engine-input-description';
@@ -1143,7 +1176,15 @@ class MapEngineCyberia {
         if (s(`.${idInitCellX}`)) s(`.${idInitCellX}`).value = col;
         if (s(`.${idInitCellY}`)) s(`.${idInitCellY}`).value = row;
 
-        if (MapEngineCyberia.addOnClick) addEntityLocally();
+        if (MapEngineCyberia.addOnClick) {
+          addEntityLocally();
+        } else if (MapEngineCyberia.removeOnClick) {
+          MapEngineCyberia.commitEntityMutation(() => {
+            MapEngineCyberia.entities = MapEngineCyberia.entities.filter(
+              (entity) => !(entity.initCellX === col && entity.initCellY === row),
+            );
+          });
+        }
       };
 
       if (s(`.btn-map-engine-add-entity`)) s(`.btn-map-engine-add-entity`).onclick = () => addEntityLocally();
@@ -1461,67 +1502,107 @@ class MapEngineCyberia {
         ${dynamicCol({ containerSelector: 'map-engine-container', id: dcCanvasOpts, type: 'search-inputs' })}
         <div class="fl" style="margin-bottom: 5px;">
           <div class="in fll ${dcCanvasOpts}-col-a">
-            <div class="fl" style="align-items: center; gap: 8px; font-size: 20px; text-align: left;">
-              ${await ToggleSwitch.instance({
-                id: 'map-engine-show-grid',
-                type: 'checkbox',
-                displayMode: 'checkbox',
-                containerClass: 'in fll',
-                checked: true,
-                on: {
-                  checked: () => {
-                    MapEngineCyberia.showGridBorders = true;
-                    rerenderCanvas();
+            <div class="in section-mp-border" style="padding: 10px;">
+              <div class="in input-label" style="margin-bottom: 6px; font-size: 14px;">Click Action</div>
+              <div class="fl" style="align-items: center; gap: 8px; font-size: 20px; text-align: left;">
+                ${await ToggleSwitch.instance({
+                  id: 'map-engine-add-on-click',
+                  type: 'checkbox',
+                  displayMode: 'checkbox',
+                  containerClass: 'in fll',
+                  checked: true,
+                  on: {
+                    checked: () => {
+                      MapEngineCyberia.addOnClick = true;
+                      MapEngineCyberia.removeOnClick = false;
+                      const removeToken = ToggleSwitch.Tokens['map-engine-remove-on-click'];
+                      if (removeToken) {
+                        const removeCheckbox = s('.map-engine-remove-on-click-checkbox');
+                        if (removeCheckbox && removeCheckbox.checked) removeToken.click();
+                      }
+                    },
+                    unchecked: () => {
+                      MapEngineCyberia.addOnClick = false;
+                    },
                   },
-                  unchecked: () => {
-                    MapEngineCyberia.showGridBorders = false;
-                    rerenderCanvas();
+                })}
+                <div class="section-mp">&nbsp &nbsp Add on Click</div>
+              </div>
+              <div
+                class="fl"
+                style="align-items: center; gap: 8px; font-size: 20px; text-align: left; margin-top: 4px;"
+              >
+                ${await ToggleSwitch.instance({
+                  id: 'map-engine-remove-on-click',
+                  type: 'checkbox',
+                  displayMode: 'checkbox',
+                  containerClass: 'in fll',
+                  checked: false,
+                  on: {
+                    checked: () => {
+                      MapEngineCyberia.removeOnClick = true;
+                      MapEngineCyberia.addOnClick = false;
+                      const addToken = ToggleSwitch.Tokens['map-engine-add-on-click'];
+                      if (addToken) {
+                        const addCheckbox = s('.map-engine-add-on-click-checkbox');
+                        if (addCheckbox && addCheckbox.checked) addToken.click();
+                      }
+                    },
+                    unchecked: () => {
+                      MapEngineCyberia.removeOnClick = false;
+                    },
                   },
-                },
-              })}
-              <div class="section-mp">&nbsp &nbsp Show Grid</div>
+                })}
+                <div class="section-mp">&nbsp &nbsp Remove on Click</div>
+              </div>
             </div>
           </div>
           <div class="in fll ${dcCanvasOpts}-col-b">
-            <div class="fl" style="align-items: center; gap: 8px; font-size: 20px; text-align: left;">
-              ${await ToggleSwitch.instance({
-                id: 'map-engine-add-on-click',
-                type: 'checkbox',
-                displayMode: 'checkbox',
-                containerClass: 'in fll',
-                checked: true,
-                on: {
-                  checked: () => {
-                    MapEngineCyberia.addOnClick = true;
-                  },
-                  unchecked: () => {
-                    MapEngineCyberia.addOnClick = false;
+            <div class="in section-mp-border" style="padding: 10px;">
+              <div class="in input-label" style="margin-bottom: 6px; font-size: 14px;">View Options</div>
+              <div class="fl" style="align-items: center; gap: 8px; font-size: 20px; text-align: left;">
+                ${await ToggleSwitch.instance({
+                  id: 'map-engine-show-grid',
+                  type: 'checkbox',
+                  displayMode: 'checkbox',
+                  containerClass: 'in fll',
+                  checked: true,
+                  on: {
+                    checked: () => {
+                      MapEngineCyberia.showGridBorders = true;
+                      rerenderCanvas();
+                    },
+                    unchecked: () => {
+                      MapEngineCyberia.showGridBorders = false;
+                      rerenderCanvas();
+                    },
                   },
-                },
-              })}
-              <div class="section-mp">&nbsp &nbsp Add on Click</div>
-            </div>
-          </div>
-          <div class="in fll ${dcCanvasOpts}-col-c">
-            <div class="fl" style="align-items: center; gap: 8px; font-size: 20px; text-align: left;">
-              ${await ToggleSwitch.instance({
-                id: 'map-engine-show-object-layers',
-                type: 'checkbox',
-                displayMode: 'checkbox',
-                containerClass: 'in fll',
-                checked: false,
-                on: {
-                  checked: () => {
-                    MapEngineCyberia.showObjectLayers = true;
-                    rerenderCanvas();
-                  },
-                  unchecked: () => {
-                    MapEngineCyberia.showObjectLayers = false;
-                    rerenderCanvas();
+                })}
+                <div class="section-mp">&nbsp &nbsp Show Grid</div>
+              </div>
+              <div
+                class="fl"
+                style="align-items: center; gap: 8px; font-size: 20px; text-align: left; margin-top: 4px;"
+              >
+                ${await ToggleSwitch.instance({
+                  id: 'map-engine-show-object-layers',
+                  type: 'checkbox',
+                  displayMode: 'checkbox',
+                  containerClass: 'in fll',
+                  checked: false,
+                  on: {
+                    checked: () => {
+                      MapEngineCyberia.showObjectLayers = true;
+                      rerenderCanvas();
+                    },
+                    unchecked: () => {
+                      MapEngineCyberia.showObjectLayers = false;
+                      rerenderCanvas();
+                    },
                   },
-                },
-              })}
-              <div class="section-mp">&nbsp &nbsp Object Layers</div>
+                })}
+                <div class="section-mp">&nbsp &nbsp Object Layers</div>
+              </div>
             </div>
           </div>
         </div>
@@ -1813,18 +1894,20 @@ class MapEngineCyberia {
         <div class="in ${entityListId}" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
         ${dynamicCol({ containerSelector: 'map-engine-container', id: dcSaveNew, type: 'search-inputs' })}
         <div class="fl" style="margin-top: 10px;">
-          <div class="in fll ${dcSaveNew}-col-a" style="padding: 5px;">
-            ${await BtnIcon.instance({
-              class: 'wfa btn-map-engine-save-map',
-              label: html`<i class="fa-solid fa-floppy-disk"></i> Save Map`,
-            })}
-          </div>
-          <div class="in fll ${dcSaveNew}-col-b" style="padding: 5px;">
-            ${await BtnIcon.instance({
-              class: 'wfa btn-map-engine-clone-map',
-              label: html`<i class="fa-solid fa-clone"></i> Clone Map`,
-            })}
-          </div>
+          ${canMutate
+            ? html`<div class="in fll ${dcSaveNew}-col-a" style="padding: 5px;">
+                  ${await BtnIcon.instance({
+                    class: 'wfa btn-map-engine-save-map',
+                    label: html`<i class="fa-solid fa-floppy-disk"></i> Save Map`,
+                  })}
+                </div>
+                <div class="in fll ${dcSaveNew}-col-b" style="padding: 5px;">
+                  ${await BtnIcon.instance({
+                    class: 'wfa btn-map-engine-clone-map',
+                    label: html`<i class="fa-solid fa-clone"></i> Clone Map`,
+                  })}
+                </div>`
+            : ''}
           <div class="in fll ${dcSaveNew}-col-c" style="padding: 5px;">
             ${await BtnIcon.instance({
               class: 'wfa btn-map-engine-new-map',