@underpostnet/cyberia 3.3.73 → 3.3.77

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

@@ -15,13 +15,18 @@ import { AgGrid } from '../core/AgGrid.js';
 import { Modal } from '../core/Modal.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
-import * as _ from '../cyberia/ObjectLayerEngine.js';
+import { ObjectLayerEngineElement } from '../cyberia/ObjectLayerEngine.js';
 import {
   ITEM_TYPES,
   OBJECT_LAYER_DIRECTION_CODES,
   OBJECT_LAYER_DIRECTION_LABELS,
   getKeyframeDirectionsByCode,
   STAT_TYPES,
+  STAT_DESCRIPTIONS,
+  STAT_MODIFIER_MIN,
+  STAT_MODIFIER_MAX,
+  validateStats,
+  generateRandomStats,
 } from './SharedDefaultsCyberia.js';
 import '../core/ColorPaletteElement.js';
 
@@ -93,8 +98,8 @@ const DEFAULT_DISTORTION_TYPE = DISTORTION_TYPES[0].value;
 const DEFAULT_DISTORTION_STATUS =
   'Applies the selected canvas behavior directly to the current editor frame. factorA controls distortion density or mosaic tile scale.';
 const DEFAULT_DISTORTION_FACTOR_A = 0.12;
-const DEFAULT_STAT_RANDOM_MIN = 0;
-const DEFAULT_STAT_RANDOM_MAX = 10;
+const DEFAULT_STAT_RANDOM_MIN = STAT_MODIFIER_MIN;
+const DEFAULT_STAT_RANDOM_MAX = STAT_MODIFIER_MAX;
 const UNIFORM_OPACITY_TOGGLE_ID = 'ol-uniform-opacity-lock';
 const DIRECTION_PREVIEW_MODAL_ID = 'modal-object-layer-direction-preview';
 const CANVAS_BEHAVIOR_BY_VALUE = Object.freeze(
@@ -541,45 +546,7 @@ class ObjectLayerEngineModal {
       data: [],
     },
   ];
-  static statDescriptions = {
-    effect: {
-      title: 'Effect',
-      icon: 'stat-effect.png',
-      description: 'Amount of life removed when an entity collides or deals an impact.',
-      detail: 'Measured in life points.',
-    },
-    resistance: {
-      title: 'Resistance',
-      icon: 'stat-resistance.png',
-      description: "Adds to the owner's maximum life (survivability cap).",
-      detail:
-        "This value is summed with the entity's base max life. It also increases the amount of life restored when a regeneration event occurs (adds directly to current life).",
-    },
-    agility: {
-      title: 'Agility',
-      icon: 'stat-agility.png',
-      description: 'Increases the movement speed of entities.',
-      detail: 'Higher values result in faster movement.',
-    },
-    range: {
-      title: 'Range',
-      icon: 'stat-range.png',
-      description: 'Increases the lifetime of a cast/summoned entity.',
-      detail: 'Measured in milliseconds.',
-    },
-    intelligence: {
-      title: 'Intelligence',
-      icon: 'stat-intelligence.png',
-      description: 'Probability-based stat that increases the chance to spawn/trigger a summoned entity.',
-      detail: 'Higher values increase summoning success rate.',
-    },
-    utility: {
-      title: 'Utility',
-      icon: 'stat-utility.png',
-      description: 'Reduces the cooldown time between actions, allowing for more frequent actions.',
-      detail: 'It also increases the chance to trigger life-regeneration events.',
-    },
-  };
+  static statDescriptions = STAT_DESCRIPTIONS;
 
   static RenderTemplate = (colorTemplate) => {
     const ole = s('object-layer-engine');
@@ -735,7 +702,7 @@ class ObjectLayerEngineModal {
     const statsRandomMinInputId = 'ol-input-stats-random-min';
     const statsRandomMaxInputId = 'ol-input-stats-random-max';
 
-    // Check if we have an 'id' query parameter to load existing object layer
+    // ?itemId=<item-id> opens the editor on a stored object layer.
     const queryParams = getQueryParams();
     let loadedData = null;
 
@@ -762,42 +729,19 @@ class ObjectLayerEngineModal {
       return normalizedFactor;
     };
 
-    const readRandomStatBounds = () => {
-      const minInput = getRenderedInputNode(statsRandomMinInputId);
-      const maxInput = getRenderedInputNode(statsRandomMaxInputId);
-      let minValue = Number.parseInt(minInput?.value, 10);
-      let maxValue = Number.parseInt(maxInput?.value, 10);
-
-      minValue = clampNumber(Number.isFinite(minValue) ? minValue : DEFAULT_STAT_RANDOM_MIN, 0, 10);
-      maxValue = clampNumber(Number.isFinite(maxValue) ? maxValue : DEFAULT_STAT_RANDOM_MAX, 0, 10);
-
-      if (minValue > maxValue) {
-        const nextMin = maxValue;
-        maxValue = minValue;
-        minValue = nextMin;
-      }
-
-      if (minInput) minInput.value = String(minValue);
-      if (maxInput) maxInput.value = String(maxValue);
-
-      return { minValue, maxValue };
-    };
-
     const randomizeStatInputs = () => {
-      const { minValue, maxValue } = readRandomStatBounds();
-
-      for (const statType of statTypes) {
-        const statInput = getRenderedInputNode(`ol-input-item-stats-${statType}`);
-        if (!statInput) continue;
-
-        const randomValue = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
-        statInput.value = String(randomValue);
+      try {
+        const minValue = Number(getRenderedInputNode(statsRandomMinInputId)?.value);
+        const maxValue = Number(getRenderedInputNode(statsRandomMaxInputId)?.value);
+        const stats = generateRandomStats(minValue, maxValue);
+        for (const statType of statTypes) {
+          const input = getRenderedInputNode(`ol-input-item-stats-${statType}`);
+          if (input) input.value = String(stats[statType]);
+        }
+        NotificationManager.Push({ html: `Stats randomized between ${minValue} and ${maxValue}.`, status: 'success' });
+      } catch (error) {
+        NotificationManager.Push({ html: error.message, status: 'error' });
       }
-
-      NotificationManager.Push({
-        html: `Stats randomized between ${minValue} and ${maxValue}.`,
-        status: 'success',
-      });
     };
 
     let uniformOpacitySyncInProgress = false;
@@ -966,12 +910,13 @@ class ObjectLayerEngineModal {
       });
     };
 
-    if (queryParams.id) {
-      ObjectLayerEngineModal.existingObjectLayerId = queryParams.id;
-      loadedData = await ObjectLayerEngineModal.loadFromDatabase(queryParams.id);
+    if (queryParams.itemId) {
+      loadedData = await ObjectLayerEngineModal.loadFromDatabase(queryParams.itemId);
 
       if (loadedData) {
         const { metadata, objectLayerRenderFramesId } = loadedData;
+        // The URL carries the item id; writes address the document it resolved to.
+        ObjectLayerEngineModal.existingObjectLayerId = metadata._id;
 
         // Set form values from metadata
         if (metadata.data) {
@@ -1297,40 +1242,25 @@ class ObjectLayerEngineModal {
       s(`.frame-editor-container`).classList.remove('hide');
     };
 
-    // Helper function to process and add frame from PNG URL using ObjectLayerPngLoader
-    const processAndAddFrameFromPngUrl = async (directionCode, pngUrl) => {
-      // Wait for components to be available with retry logic
-      let ole = s('object-layer-engine');
-      let loader = s('object-layer-png-loader');
-
-      if (!ole || !loader) {
-        console.warn('object-layer-engine or object-layer-png-loader component not found after retries');
-        return;
-      }
-
+    // Adds one stored frame to a direction code, rebuilt cell for cell from the render-frames
+    // document: the index matrix keeps each frame's own width and height, where the asset PNG
+    // would be resampled into whatever size the editor happens to have. The editor is not
+    // involved: a frame that passed through it was captured whenever something else wrote to
+    // the canvas in between, and came back empty.
+    const processAndAddStoredFrame = async (directionCode, indexMatrix, colors) => {
       try {
-        // Load PNG using the loader component - it will automatically load into the editor
-        await loader.loadPngUrl(pngUrl);
-
-        // Export as blob and JSON from component after loading
-        const image = await ole.toBlob();
-        const json = ole.exportMatrixJSON();
+        const matrix = indexMatrix.map((row) => row.map((index) => colors[index].slice()));
+        const image = await ObjectLayerEngineElement.matrixToBlob(matrix, pixelSize);
+        const json = ObjectLayerEngineElement.matrixJSON(matrix);
         const id = `frame-loaded-${s4()}-${s4()}`;
 
-        // Add to ObjectLayerData
         if (!ObjectLayerEngineModal.ObjectLayerData[directionCode]) {
           ObjectLayerEngineModal.ObjectLayerData[directionCode] = [];
         }
         ObjectLayerEngineModal.ObjectLayerData[directionCode].push({ id, image, json });
-        console.log(
-          `Stored frame ${id} in direction code ${directionCode}. Total frames:`,
-          ObjectLayerEngineModal.ObjectLayerData[directionCode].length,
-        );
-
-        // Add to UI
         await addFrameToBar(directionCode, id, image, json);
       } catch (error) {
-        console.error('Error loading frame from PNG URL:', error);
+        console.error('Error loading stored frame:', error);
       }
     };
 
@@ -1381,8 +1311,8 @@ class ObjectLayerEngineModal {
             </div>`,
             containerClass: 'inl',
             type: 'number',
-            min: 0,
-            max: 10,
+            min: STAT_MODIFIER_MIN,
+            max: STAT_MODIFIER_MAX,
             placeholder: true,
             value: statValue,
           })}
@@ -1426,36 +1356,21 @@ class ObjectLayerEngineModal {
               // Wait longer to ensure all direction bars are rendered
 
               if (loadedData && loadedData.metadata && loadedData.metadata.data && currentDirectionCode) {
-                // Show loading animation only once on first direction that has frames
-
-                const { type, id } = loadedData.metadata.data.item;
                 const directions = ObjectLayerEngineModal.getDirectionsFromDirectionCode(currentDirectionCode);
 
-                console.log(`Loading frames for direction code: ${currentDirectionCode}, directions:`, directions);
-
                 // Check if frames exist for any direction mapped to this direction code.
                 // Object layers with an empty render (no render-frames doc yet) load
                 // with zero frames so the user can author them from scratch.
-                const frames = loadedData.objectLayerRenderFramesId?.frames;
+                const { frames, colors } = loadedData.objectLayerRenderFramesId ?? {};
                 for (const direction of directions) {
                   if (frames && frames[direction] && frames[direction].length > 0) {
                     // Track this direction code as having original data
                     if (!ObjectLayerEngineModal.originalDirectionCodes.includes(currentDirectionCode)) {
                       ObjectLayerEngineModal.originalDirectionCodes.push(currentDirectionCode);
                     }
-                    // Load frames from static PNG URLs sequentially to avoid race conditions
-                    const frameCount = frames[direction].length;
-                    console.log(
-                      `Found ${frameCount} frames for direction: ${direction} (code: ${currentDirectionCode})`,
-                    );
-                    for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
-                      const pngUrl = `${getProxyPath()}assets/${type}/${id}/${currentDirectionCode}/${frameIndex}.png`;
-                      console.log(
-                        `Loading frame ${frameIndex} for direction code ${currentDirectionCode} from: ${pngUrl}`,
-                      );
-                      await processAndAddFrameFromPngUrl(currentDirectionCode, pngUrl);
+                    for (const indexMatrix of frames[direction]) {
+                      await processAndAddStoredFrame(currentDirectionCode, indexMatrix, colors);
                     }
-                    console.log(`Completed loading ${frameCount} frames for direction code: ${currentDirectionCode}`);
                     // Once we found frames for this direction code, we can break to avoid duplicates
                     break;
                   }
@@ -1796,14 +1711,19 @@ class ObjectLayerEngineModal {
           }
         }
         objectLayerRenderFramesData.frame_duration = parseInt(s(`.ol-input-render-frame-duration`).value);
-        objectLayer.data.stats = {
-          effect: parseInt(s(`.ol-input-item-stats-effect`).value),
-          resistance: parseInt(s(`.ol-input-item-stats-resistance`).value),
-          agility: parseInt(s(`.ol-input-item-stats-agility`).value),
-          range: parseInt(s(`.ol-input-item-stats-range`).value),
-          intelligence: parseInt(s(`.ol-input-item-stats-intelligence`).value),
-          utility: parseInt(s(`.ol-input-item-stats-utility`).value),
-        };
+        try {
+          objectLayer.data.stats = validateStats(
+            Object.fromEntries(
+              STAT_TYPES.map((key) => {
+                const input = getRenderedInputNode(`ol-input-item-stats-${key}`);
+                return [key, input?.value.trim() ? Number(input.value) : NaN];
+              }),
+            ),
+          );
+        } catch (error) {
+          NotificationManager.Push({ html: error.message, status: 'error' });
+          return;
+        }
         objectLayer.data.item = {
           type: ObjectLayerEngineModal.selectItemType,
           activable: ObjectLayerEngineModal.itemActivable,
@@ -1997,9 +1917,12 @@ class ObjectLayerEngineModal {
           padding: 0.5rem;
           width: 70px;
         }
+        /* One square tile per frame whatever its aspect: a wide frame drawn at natural height
+           sat almost entirely under the edit and trash buttons, so a click never reached it. */
         .direction-code-bar-frames-img {
           width: 100px;
-          height: auto;
+          height: 100px;
+          object-fit: contain;
           margin: 3px;
           cursor: pointer;
         }
@@ -2312,6 +2235,7 @@ class ObjectLayerEngineModal {
         <div class="in fll ${idSectionB}-col-b">
           <div class="in section-mp section-mp-border">
             <div class="in sub-title-modal"><i class="fa-solid fa-database"></i> Stats data</div>
+            <div class="in">−100 penalty ↔ 0 neutral ↔ +100 bonus</div>
             <div class="fl" style="align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">
               <div class="in fll" style="width: 110px;">
                 ${await Input.instance({
@@ -2319,8 +2243,8 @@ class ObjectLayerEngineModal {
                   label: html`Random min`,
                   containerClass: 'inl',
                   type: 'number',
-                  min: 0,
-                  max: 10,
+                  min: STAT_MODIFIER_MIN,
+                  max: STAT_MODIFIER_MAX,
                   placeholder: true,
                   value: DEFAULT_STAT_RANDOM_MIN,
                 })}
@@ -2331,8 +2255,8 @@ class ObjectLayerEngineModal {
                   label: html`Random max`,
                   containerClass: 'inl',
                   type: 'number',
-                  min: 0,
-                  max: 10,
+                  min: STAT_MODIFIER_MIN,
+                  max: STAT_MODIFIER_MAX,
                   placeholder: true,
                   value: DEFAULT_STAT_RANDOM_MAX,
                 })}
@@ -2350,19 +2274,23 @@ class ObjectLayerEngineModal {
       </div>
 
       <div class="fl section-mp">
-        ${canMutate
-          ? await BtnIcon.instance({
-              label: html`<i class="submit-btn-icon fa-solid fa-folder-open"></i>
-                ${ObjectLayerEngineModal.existingObjectLayerId ? 'Update' : Translate.instance('save')}`,
-              class: `in flr ol-btn-save`,
-            })
-          : ''}
-        ${canMutate && ObjectLayerEngineModal.existingObjectLayerId
-          ? await BtnIcon.instance({
-              label: html`<i class="submit-btn-icon fa-solid fa-clone"></i> Clone`,
-              class: `in flr ol-btn-clone`,
-            })
-          : ''}
+        ${
+          canMutate
+            ? await BtnIcon.instance({
+                label: html`<i class="submit-btn-icon fa-solid fa-folder-open"></i>
+                  ${ObjectLayerEngineModal.existingObjectLayerId ? 'Update' : Translate.instance('save')}`,
+                class: `in flr ol-btn-save`,
+              })
+            : ''
+        }
+        ${
+          canMutate && ObjectLayerEngineModal.existingObjectLayerId
+            ? await BtnIcon.instance({
+                label: html`<i class="submit-btn-icon fa-solid fa-clone"></i> Clone`,
+                class: `in flr ol-btn-clone`,
+              })
+            : ''
+        }
         ${await BtnIcon.instance({
           label: html`<i class="submit-btn-icon fa-solid fa-broom"></i> ${Translate.instance('reset')}`,
           class: `in flr ol-btn-reset`,
@@ -2382,10 +2310,8 @@ class ObjectLayerEngineModal {
     const modalId = `modal-object-layer-engine-${subModalId}`;
     await DefaultManagement.runIsolated(modalId, async () => {
       setPath(`${getProxyPath()}object-layer-engine-management`);
-      const queryParams = getQueryParams();
-      queryParams.id = id ? id : '';
-      queryParams.page = 1;
-      setQueryParams(queryParams, { replace: true });
+      // The grid filters by document id; itemId belongs to the editor route only.
+      setQueryParams({ ...getQueryParams(), itemId: null, id: id ? id : '', page: 1 }, { replace: true });
 
       if (id) {
         DefaultManagement.setIdFilter(modalId, id);