cyberia 3.2.12 → 3.2.70

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

@@ -6,7 +6,7 @@ import { EventsUI } from '../core/EventsUI.js';
 import { Translate } from '../core/Translate.js';
 import { s, append, hexToRgbA } from '../core/VanillaJs.js';
 import { getProxyPath, getQueryParams, setPath, setQueryParams, RouterEvents } from '../core/Router.js';
-import { s4 } from '../core/CommonJs.js';
+import { s4, commonModeratorGuard } from '../core/CommonJs.js';
 import { Input } from '../core/Input.js';
 import { ToggleSwitch } from '../core/ToggleSwitch.js';
 import { ObjectLayerService } from '../../services/object-layer/object-layer.service.js';
@@ -16,6 +16,13 @@ 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 {
+  ITEM_TYPES,
+  OBJECT_LAYER_DIRECTION_CODES,
+  OBJECT_LAYER_DIRECTION_LABELS,
+  getKeyframeDirectionsByCode,
+  STAT_TYPES,
+} from './SharedDefaultsCyberia.js';
 import '../core/ColorPaletteElement.js';
 
 const CANVAS_BEHAVIOR_ICON = 'fa-solid fa-shapes';
@@ -614,8 +621,7 @@ class ObjectLayerEngineModal {
       ole.clear();
     }
 
-    const directionCodes = ['08', '18', '02', '12', '04', '14', '06', '16'];
-    for (const directionCode of directionCodes) {
+    for (const directionCode of OBJECT_LAYER_DIRECTION_CODES) {
       const framesContainer = s(`.frames-${directionCode}`);
       if (framesContainer) {
         framesContainer.innerHTML = '';
@@ -637,8 +643,7 @@ class ObjectLayerEngineModal {
     if (activableCheckbox) activableCheckbox.checked = false;
 
     // Clear stat inputs with correct IDs
-    const statTypes = Object.keys(ObjectLayerEngineModal.statDescriptions);
-    for (const stat of statTypes) {
+    for (const stat of STAT_TYPES) {
       const statInput = getRenderedInputNode(`ol-input-item-stats-${stat}`);
       if (statInput) statInput.value = '0';
     }
@@ -713,20 +718,16 @@ class ObjectLayerEngineModal {
     ObjectLayerEngineModal.clearData();
 
     const { appStore } = options;
+    const canMutate = commonModeratorGuard(appStore?.Data?.user?.main?.model?.user?.role || 'guest');
+
+    const directionCodes = OBJECT_LAYER_DIRECTION_CODES;
+    const directionCodeLabels = OBJECT_LAYER_DIRECTION_LABELS;
+    const statTypes = STAT_TYPES;
+
+    // Canonical authorable item types (includes `static`). A per-render copy so a
+    // loaded layer's custom type can be appended without mutating the shared enum.
+    const itemTypes = Object.values(ITEM_TYPES);
 
-    const directionCodes = ['08', '18', '02', '12', '04', '14', '06', '16'];
-    const directionCodeLabels = {
-      '08': 'Down Idle',
-      18: 'Down Walk',
-      '02': 'Up Idle',
-      12: 'Up Walk',
-      '04': 'Left Idle',
-      14: 'Left Walk',
-      '06': 'Right Idle',
-      16: 'Right Walk',
-    };
-    const itemTypes = ['skin', 'weapon', 'armor', 'artifact', 'floor', 'resource', 'obstacle', 'foreground', 'portal'];
-    const statTypes = ['effect', 'resistance', 'agility', 'range', 'intelligence', 'utility'];
     const distortionDropdownId = 'ol-dropdown-distortion-type';
     const distortionApplyBtnClass = 'ol-btn-apply-distortion';
     const distortionStatusClass = 'ol-distortion-status';
@@ -1004,8 +1005,8 @@ class ObjectLayerEngineModal {
       }
     }
 
-    let cellsW = 26;
-    let cellsH = 26;
+    let cellsW = 16;
+    let cellsH = 16;
     if (loadedData && loadedData.objectLayerRenderFramesId && loadedData.objectLayerRenderFramesId.frames) {
       const frames = loadedData.objectLayerRenderFramesId.frames;
       for (const direction of Object.keys(frames)) {
@@ -1016,7 +1017,8 @@ class ObjectLayerEngineModal {
         }
       }
     }
-    const pixelSize = parseInt(320 / Math.max(cellsW, cellsH));
+    // const pixelSize = parseInt(320 / Math.max(cellsW, cellsH));
+    const pixelSize = 30;
     const idSectionA = 'template-section-a';
     const idSectionB = 'template-section-b';
     const colorPaletteClass = 'ol-color-palette';
@@ -1427,10 +1429,12 @@ class ObjectLayerEngineModal {
 
                 console.log(`Loading frames for direction code: ${currentDirectionCode}, directions:`, directions);
 
-                // Check if frames exist for any direction mapped to this direction code
-                const { frames } = loadedData.objectLayerRenderFramesId;
+                // 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;
                 for (const direction of directions) {
-                  if (frames[direction] && frames[direction].length > 0) {
+                  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);
@@ -1814,9 +1818,9 @@ class ObjectLayerEngineModal {
           clone ? '(CLONE MODE)' : isUpdateMode ? '(UPDATE MODE)' : '(CREATE MODE)',
         );
 
-        if (appStore.Data.user.main.model.user.role === 'guest') {
+        if (!commonModeratorGuard(appStore.Data.user.main.model.user.role)) {
           NotificationManager.Push({
-            html: 'Guests cannot save object layers. Please log in.',
+            html: 'Only moderators and admins can create or edit object layers.',
             status: 'warning',
           });
           return;
@@ -2202,7 +2206,7 @@ class ObjectLayerEngineModal {
       </div>
 
       <div class="in section-mp section-mp-border">
-        <div class="in sub-title-modal"><i class="fa-solid fa-database"></i> instance data</div>
+        <div class="in sub-title-modal"><i class="fa-solid fa-database"></i> render data</div>
         ${dynamicCol({ containerSelector: options.idModal, id: idSectionA })}
 
         <div class="fl">
@@ -2342,12 +2346,14 @@ class ObjectLayerEngineModal {
       </div>
 
       <div class="fl section-mp">
-        ${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`,
-        })}
-        ${ObjectLayerEngineModal.existingObjectLayerId
+        ${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`,
@@ -2363,36 +2369,7 @@ class ObjectLayerEngineModal {
   };
 
   static getDirectionsFromDirectionCode(directionCode = '08') {
-    let objectLayerFrameDirections = [];
-
-    switch (directionCode) {
-      case '08':
-        objectLayerFrameDirections = ['down_idle', 'none_idle', 'default_idle'];
-        break;
-      case '18':
-        objectLayerFrameDirections = ['down_walking'];
-        break;
-      case '02':
-        objectLayerFrameDirections = ['up_idle'];
-        break;
-      case '12':
-        objectLayerFrameDirections = ['up_walking'];
-        break;
-      case '04':
-        objectLayerFrameDirections = ['left_idle', 'up_left_idle', 'down_left_idle'];
-        break;
-      case '14':
-        objectLayerFrameDirections = ['left_walking', 'up_left_walking', 'down_left_walking'];
-        break;
-      case '06':
-        objectLayerFrameDirections = ['right_idle', 'up_right_idle', 'down_right_idle'];
-        break;
-      case '16':
-        objectLayerFrameDirections = ['right_walking', 'up_right_walking', 'down_right_walking'];
-        break;
-    }
-
-    return objectLayerFrameDirections;
+    return getKeyframeDirectionsByCode(directionCode);
   }
 
   static toManagement = async (id = null) => {

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

@@ -11,6 +11,7 @@ import { ObjectLayerService } from '../../services/object-layer/object-layer.ser
 import { AtlasSpriteSheetService } from '../../services/atlas-sprite-sheet/atlas-sprite-sheet.service.js';
 import { NotificationManager } from '../core/NotificationManager.js';
 import { append, htmls, s } from '../core/VanillaJs.js';
+import { commonModeratorGuard } from '../core/CommonJs.js';
 import { darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from '../core/Css.js';
 import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
 import { ObjectLayerEngineModal } from './ObjectLayerEngineModal.js';
@@ -179,6 +180,7 @@ class ObjectLayerEngineViewer {
   }
   static async renderViewer({ appStore }) {
     const id = 'object-layer-engine-viewer';
+    const canMutate = commonModeratorGuard(appStore?.Data?.user?.main?.model?.user?.role || 'guest');
     const { objectLayer, frameCounts } = ObjectLayerEngineViewer.Data;
     if (!objectLayer || !frameCounts) return;
     // Check if DOM element exists
@@ -915,10 +917,12 @@ class ObjectLayerEngineViewer {
                           </div>
                         </div>
                         <div class="atlas-actions-grid">
-                          <button class="default-viewer-btn" id="generate-atlas-btn">
-                            <i class="fa-solid fa-sync"></i>
-                            <span>Update</span>
-                          </button>
+                          ${canMutate
+                            ? html`<button class="default-viewer-btn" id="generate-atlas-btn">
+                                <i class="fa-solid fa-sync"></i>
+                                <span>Update</span>
+                              </button>`
+                            : ''}
                           <button class="default-viewer-btn" id="download-atlas-png-btn">
                             <i class="fa-solid fa-download"></i>
                             <span>PNG</span>
@@ -927,18 +931,22 @@ class ObjectLayerEngineViewer {
                             <i class="fa-solid fa-code"></i>
                             <span>JSON</span>
                           </button>
-                          <button class="default-viewer-btn" id="remove-atlas-btn" style="background: #dc3545;">
-                            <i class="fa-solid fa-trash"></i>
-                            <span>Remove</span>
-                          </button>
+                          ${canMutate
+                            ? html`<button class="default-viewer-btn" id="remove-atlas-btn" style="background: #dc3545;">
+                                <i class="fa-solid fa-trash"></i>
+                                <span>Remove</span>
+                              </button>`
+                            : ''}
                         </div>
                       `
                         : html`
                             <p>No atlas sprite sheet associated with this object layer.</p>
-                            <button class="default-viewer-btn" id="generate-atlas-btn">
-                              <i class="fa-solid fa-wand-magic-sparkles"></i>
-                              <span>Generate Atlas</span>
-                            </button>
+                            ${canMutate
+                              ? html`<button class="default-viewer-btn" id="generate-atlas-btn">
+                                  <i class="fa-solid fa-wand-magic-sparkles"></i>
+                                  <span>Generate Atlas</span>
+                                </button>`
+                              : ''}
                           `}
                     </div>
                   </div>
@@ -948,14 +956,20 @@ class ObjectLayerEngineViewer {
                     <i class="fa-solid fa-arrow-left"></i>
                     <span>Return to List</span>
                   </button>
-                  <button class="default-viewer-btn edit-btn" id="edit-object-layer-btn">
-                    <i class="fa-solid fa-edit"></i>
-                    <span>Edit</span>
-                  </button>
-                  <button class="default-viewer-btn" id="delete-object-layer-btn" style="background: #dc3545;">
-                    <i class="fa-solid fa-trash"></i>
-                    <span>Delete</span>
-                  </button>
+                  ${canMutate
+                    ? html`<button class="default-viewer-btn edit-btn" id="edit-object-layer-btn">
+                          <i class="fa-solid fa-edit"></i>
+                          <span>Edit</span>
+                        </button>
+                        <button
+                          class="default-viewer-btn"
+                          id="delete-object-layer-btn"
+                          style="background: #dc3545;"
+                        >
+                          <i class="fa-solid fa-trash"></i>
+                          <span>Delete</span>
+                        </button>`
+                    : ''}
                 </div>
               `}
         </div>

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

@@ -18,7 +18,7 @@
  *
  *   2. **Shared content vocabulary** — `ITEM_TYPES`, `ENTITY_TYPES`,
  *      `DefaultCyberiaItems` registry + lookups, type-to-item mapping,
- *      quest step / action type enums. The data shape both the
+ *      quest step objective enum. The data shape both the
  *      browser-side editor UI and the engine REST controllers need to
  *      understand; it is **not** simulation state.
  *
@@ -70,6 +70,7 @@ export const ITEM_TYPES = Object.freeze({
   portal: 'portal',
   foreground: 'foreground',
   resource: 'resource',
+  static: 'static',
 });
 
 /**
@@ -89,6 +90,7 @@ export const ENTITY_TYPES = Object.freeze({
   portal: 'portal',
   foreground: 'foreground',
   resource: 'resource',
+  static: 'static',
 });
 
 /** Per-entity-type allowlist of item types that may appear on the entity. */
@@ -103,13 +105,186 @@ export const ENTITY_TYPE_TO_ITEM_TYPES = Object.freeze({
   [ENTITY_TYPES.portal]: Object.freeze([ITEM_TYPES.portal]),
   [ENTITY_TYPES.foreground]: Object.freeze([ITEM_TYPES.foreground]),
   [ENTITY_TYPES.resource]: Object.freeze([ITEM_TYPES.resource]),
+  [ENTITY_TYPES.static]: Object.freeze([ITEM_TYPES.static]),
 });
 
 /** Quest step objective types accepted by the quest-progress engine. */
 export const QUEST_STEPS_TYPES = Object.freeze(['collect', 'talk', 'kill']);
 
-/** Action categories accepted by the cyberia-action engine. */
-export const CYBERIA_ACTION_TYPES = Object.freeze(['craft', 'shop', 'storage', 'quest-talk']);
+/**
+ * Canonical skill LogicId registry — the single source of truth for the
+ * `logicEventId` handler keys the simulation skill dispatcher knows how to run.
+ * MUST stay aligned with the handlers registered in cyberia-server
+ * `game/skill_dispatcher.go#InitSkills`. The skill editor (ActionEngineCyberia)
+ * offers ONLY these ids, and `DefaultSkillConfig` (cyberia-server-defaults.js)
+ * draws its `logicEventId`s from here.
+ *
+ * @type {ReadonlyArray<{id:string,name:string,description:string}>}
+ */
+export const SKILL_LOGIC_IDS = Object.freeze([
+  Object.freeze({
+    id: 'projectile',
+    name: 'Projectile',
+    description: 'Fires a projectile toward the tap. Spawn chance and lifetime scale with Intelligence and Range.',
+  }),
+  Object.freeze({
+    id: 'coin_drop_or_transaction',
+    name: 'Coin Drop',
+    description: 'Drops coins on kill; transfer amount follows the kill-percent economy rules.',
+  }),
+  Object.freeze({
+    id: 'doppelganger',
+    name: 'Doppelganger',
+    description: 'Summons a passive clone that wanders nearby. Spawn chance scales with Intelligence.',
+  }),
+]);
+
+/** Ordered list of canonical skill LogicId values. */
+export const SKILL_LOGIC_ID_VALUES = Object.freeze(SKILL_LOGIC_IDS.map((l) => l.id));
+
+/** True when `logicEventId` is a known canonical skill LogicId. */
+export const isCanonicalSkillLogicId = (logicEventId) => SKILL_LOGIC_ID_VALUES.includes(logicEventId);
+
+/**
+ * Canonical entity-behavior registry — the authoritative vocabulary for the
+ * `behavior` an entity-type default may bind to its matched entities. The Go
+ * simulation owns the runtime semantics; this registry is the shared label /
+ * documentation source consumed by the editor (EntityEngineCyberia) and by
+ * content-authority validation. MUST stay aligned with cyberia-server
+ * `game/behavior.go`.
+ *
+ * `selectable: false` marks behaviors the runtime assigns itself
+ * (projectiles, coin drops) — they are not author-assignable to a default.
+ *
+ * @type {ReadonlyArray<{id:string,label:string,description:string,selectable:boolean}>}
+ */
+export const ENTITY_BEHAVIORS = Object.freeze([
+  Object.freeze({
+    id: 'passive',
+    label: 'Passive',
+    description: 'Wanders within its spawn radius; never aggroes. Default for unarmed entities.',
+    selectable: true,
+  }),
+  Object.freeze({
+    id: 'hostile',
+    label: 'Hostile',
+    description: 'Pursues and attacks players within aggro range. Default for armed entities.',
+    selectable: true,
+  }),
+  Object.freeze({
+    id: 'provider',
+    label: 'Provider',
+    description: 'Mission/action giver: barely moves from its spawn (sporadic short steps) and is immortal.',
+    selectable: true,
+  }),
+  Object.freeze({
+    id: 'provider-static',
+    label: 'Provider (Static)',
+    description: 'Like provider but completely immobile, and immortal.',
+    selectable: true,
+  }),
+  Object.freeze({
+    id: 'skill',
+    label: 'Skill',
+    description: 'Runtime projectile entity — assigned by the skill engine, not author-selectable.',
+    selectable: false,
+  }),
+  Object.freeze({
+    id: 'coin',
+    label: 'Coin',
+    description: 'Runtime coin entity — assigned by the economy engine, not author-selectable.',
+    selectable: false,
+  }),
+]);
+
+/** Ordered list of canonical behavior id values. */
+export const ENTITY_BEHAVIOR_VALUES = Object.freeze(ENTITY_BEHAVIORS.map((b) => b.id));
+
+/** Author-assignable behaviors (the subset the entity-default editor offers). */
+export const SELECTABLE_ENTITY_BEHAVIORS = Object.freeze(ENTITY_BEHAVIORS.filter((b) => b.selectable));
+
+/** True when `behavior` is a known canonical entity behavior. */
+export const isCanonicalEntityBehavior = (behavior) => ENTITY_BEHAVIOR_VALUES.includes(behavior);
+
+/**
+ * Canonical object-layer animation directions. Each entry binds:
+ *   code      — numeric asset folder name on disk
+ *               (`./assets/<type>/<id>/<code>/<frame>.png`)
+ *   label     — human-readable label for the editor UI
+ *   keyframes — render keyframe direction names this folder code feeds
+ *
+ * Single source of truth for the browser editor (`ObjectLayerEngineModal`) and
+ * the Node asset pipeline (`src/projects/cyberia/object-layer.js`). Adding a
+ * direction here is the only place it needs to be declared.
+ *
+ * @type {ReadonlyArray<{code:string,label:string,keyframes:ReadonlyArray<string>}>}
+ */
+export const OBJECT_LAYER_DIRECTIONS = Object.freeze([
+  Object.freeze({
+    code: '08',
+    label: 'Down Idle',
+    keyframes: Object.freeze(['down_idle', 'none_idle', 'default_idle']),
+  }),
+  Object.freeze({ code: '18', label: 'Down Walk', keyframes: Object.freeze(['down_walking']) }),
+  Object.freeze({ code: '02', label: 'Up Idle', keyframes: Object.freeze(['up_idle']) }),
+  Object.freeze({ code: '12', label: 'Up Walk', keyframes: Object.freeze(['up_walking']) }),
+  Object.freeze({
+    code: '04',
+    label: 'Left Idle',
+    keyframes: Object.freeze(['left_idle', 'up_left_idle', 'down_left_idle']),
+  }),
+  Object.freeze({
+    code: '14',
+    label: 'Left Walk',
+    keyframes: Object.freeze(['left_walking', 'up_left_walking', 'down_left_walking']),
+  }),
+  Object.freeze({
+    code: '06',
+    label: 'Right Idle',
+    keyframes: Object.freeze(['right_idle', 'up_right_idle', 'down_right_idle']),
+  }),
+  Object.freeze({
+    code: '16',
+    label: 'Right Walk',
+    keyframes: Object.freeze(['right_walking', 'up_right_walking', 'down_right_walking']),
+  }),
+]);
+
+/** Ordered list of object-layer direction folder codes. */
+export const OBJECT_LAYER_DIRECTION_CODES = Object.freeze(OBJECT_LAYER_DIRECTIONS.map((d) => d.code));
+
+/** Map: direction folder code → editor label. */
+export const OBJECT_LAYER_DIRECTION_LABELS = Object.freeze(
+  Object.fromEntries(OBJECT_LAYER_DIRECTIONS.map((d) => [d.code, d.label])),
+);
+
+/** Render keyframe direction names a numeric folder code feeds (empty if unknown). */
+export const getKeyframeDirectionsByCode = (code) => {
+  const entry = OBJECT_LAYER_DIRECTIONS.find((d) => d.code === code);
+  return entry ? [...entry.keyframes] : [];
+};
+
+/** Inverse map: render keyframe direction name → numeric folder code. */
+export const OBJECT_LAYER_DIRECTION_NAME_TO_CODE = Object.freeze(
+  OBJECT_LAYER_DIRECTIONS.reduce((acc, d) => {
+    for (const name of d.keyframes) acc[name] = d.code;
+    return acc;
+  }, {}),
+);
+
+/**
+ * Canonical entity/item stat types, in display order. Shared by the object-layer
+ * editor (stat inputs) and the asset pipeline (random stat generation).
+ */
+export const STAT_TYPES = Object.freeze(['effect', 'resistance', 'agility', 'range', 'intelligence', 'utility']);
+
+/**
+ * Build a random stat block keyed by STAT_TYPES, each value 0–10 inclusive.
+ * Non-deterministic (uses Math.random) — the asset pipeline uses it to seed
+ * default stats for newly authored object layers.
+ */
+export const generateRandomStats = () =>
+  Object.fromEntries(STAT_TYPES.map((statType) => [statType, Math.floor(Math.random() * 11)]));
 
 /**
  * Canonical (itemId → itemType) registry shipped with the engine. Used
@@ -126,6 +301,7 @@ export const DefaultCyberiaItems = [
   { item: { id: 'tim-knife', type: ITEM_TYPES.weapon } },
   { item: { id: 'hatchet', type: ITEM_TYPES.weapon } },
   { item: { id: 'wason', type: ITEM_TYPES.skin } },
+  { item: { id: 'kishins', type: ITEM_TYPES.skin } },
   { item: { id: 'scp-2040', type: ITEM_TYPES.skin } },
   { item: { id: 'purple', type: ITEM_TYPES.skin } },
   { item: { id: 'punk', type: ITEM_TYPES.skin } },
@@ -198,6 +374,7 @@ export const PALETTE = Object.freeze([
   { key: 'COIN', r: 255, g: 215, b: 0, a: 255 },
   { key: 'SKILL', r: 255, g: 255, b: 50, a: 255 },
   { key: 'RESOURCE', r: 100, g: 180, b: 80, a: 255 },
+  { key: 'STATIC', r: 120, g: 140, b: 110, a: 255 },
   { key: 'WEAPON', r: 180, g: 50, b: 50, a: 255 },
   { key: 'SELF_BORDER', r: 220, g: 190, b: 60, a: 240 },
 ]);
@@ -218,6 +395,7 @@ export const ENTITY_COLOR_KEYS = Object.freeze([
   { entityType: 'portal', colorKey: 'PORTAL' },
   { entityType: 'foreground', colorKey: 'FOREGROUND' },
   { entityType: 'resource', colorKey: 'RESOURCE' },
+  { entityType: 'static', colorKey: 'STATIC' },
 ]);
 
 /**
@@ -236,6 +414,12 @@ export const ENTITY_COLOR_KEYS = Object.freeze([
  *   defaultObjHeight — default entity dimensions used by the world editor
  *                     and the client when a doc omits dims. Presentation
  *                     because dims-in-cells is just a visual sizing.
+ *   fontFamily      — TTF file name under engine `assets/fonts/`. When set, the
+ *                     cyberia-client fetches `assets/fonts/<fontFamily>` and loads
+ *                     it as the main default font for all text. Empty = raylib's
+ *                     built-in font.
+ *   fontFactorSize  — uniform multiplier applied to every text size, so a
+ *                     deployment can scale all UI/HUD text without per-call edits.
  */
 export const RENDER_DEFAULTS = Object.freeze({
   cellSize: 45,
@@ -247,6 +431,8 @@ export const RENDER_DEFAULTS = Object.freeze({
   defaultHeightScreenFactor: 1,
   interpolationMs: 100,
   devUi: false,
+  fontFamily: 'PressStart2P-Regular.ttf',
+  fontFactorSize: 0.8,
 });
 
 /**
@@ -267,7 +453,10 @@ export const STATUS_ICONS_PRESENTATION = Object.freeze([
   { id: 5, iconId: 'skull', bounce: false, borderColor: { r: 160, g: 130, b: 200, a: 200 } },
   { id: 6, iconId: 'arrow-down-gray', bounce: false, borderColor: { r: 100, g: 180, b: 80, a: 220 } },
   { id: 7, iconId: 'clock', bounce: false, borderColor: { r: 160, g: 130, b: 200, a: 200 } },
-  { id: 8, iconId: 'chat', bounce: true, borderColor: { r: 220, g: 190, b: 60, a: 240 } },
+  { id: 8, iconId: 'hand', bounce: true, borderColor: { r: 80, g: 160, b: 220, a: 240 } },
+  { id: 9, iconId: 'quest', bounce: true, borderColor: { r: 220, g: 190, b: 60, a: 240 } },
+  { id: 10, iconId: 'transport', bounce: false, borderColor: { r: 90, g: 170, b: 230, a: 240 } },
+  { id: 11, iconId: 'transport-random', bounce: false, borderColor: { r: 150, g: 130, b: 230, a: 240 } },
 ]);
 
 /**
@@ -320,6 +509,8 @@ export function buildClientHints(overrides = {}) {
     defaultHeightScreenFactor: ov.defaultHeightScreenFactor ?? RENDER_DEFAULTS.defaultHeightScreenFactor,
     interpolationMs: ov.interpolationMs ?? RENDER_DEFAULTS.interpolationMs,
     devUi: ov.devUi ?? RENDER_DEFAULTS.devUi,
+    fontFamily: ov.fontFamily ?? RENDER_DEFAULTS.fontFamily,
+    fontFactorSize: ov.fontFactorSize ?? RENDER_DEFAULTS.fontFactorSize,
   };
 }
 

package/src/client/components/cyberia-portal/AppShellCyberiaPortal.js

@@ -31,6 +31,8 @@ import { ObjectLayerManagement } from '../../services/object-layer/object-layer.
 import { MainBodyCyberiaPortal } from './MainBodyCyberiaPortal.js';
 import { MapEngineCyberia } from '../cyberia/MapEngineCyberia.js';
 import { InstanceEngineCyberia } from '../cyberia/InstanceEngineCyberia.js';
+import { ActionEngineCyberia } from '../cyberia/ActionEngineCyberia.js';
+import { EntityEngineCyberia } from '../cyberia/EntityEngineCyberia.js';
 
 class AppShellCyberiaPortal {
   static Data = {};
@@ -249,6 +251,30 @@ class AppShellCyberiaPortal {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('cyberia-instance-engine')),
           })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-cyberia-action-engine',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/engine.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('cyberia-action-engine')}</span>`,
+            }),
+            attrs: `data-id="cyberia-action-engine"`,
+            tabHref: `${getProxyPath()}cyberia-action-engine`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('cyberia-action-engine')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-cyberia-entity-engine',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/engine.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('cyberia-entity-engine')}</span>`,
+            }),
+            attrs: `data-id="cyberia-entity-engine"`,
+            tabHref: `${getProxyPath()}cyberia-entity-engine`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('cyberia-entity-engine')),
+          })}
         </div>
       `,
       // htmlMainBody: async () => {
@@ -664,6 +690,46 @@ class AppShellCyberiaPortal {
       });
     });
 
+    EventsUI.onClick(`.main-btn-cyberia-action-engine`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-cyberia-action-engine',
+        route: 'cyberia-action-engine',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl cyberia-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/engine.png" />`,
+          text: `<span class='inl cyberia-text-title-modal'>${Translate.instance('cyberia-action-engine')}</span>`,
+        }),
+        html: async () => await ActionEngineCyberia.render({ appStore: AppStoreCyberiaPortal }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        observer: true,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-cyberia-entity-engine`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-cyberia-entity-engine',
+        route: 'cyberia-entity-engine',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl cyberia-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/engine.png" />`,
+          text: `<span class='inl cyberia-text-title-modal'>${Translate.instance('cyberia-entity-engine')}</span>`,
+        }),
+        html: async () => await EntityEngineCyberia.render({ appStore: AppStoreCyberiaPortal }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        observer: true,
+      });
+    });
+
     s(`.main-btn-admin`).onclick = () => {
       const { protocol, hostname } = window.location;
       return (location.href = `${protocol}//${hostname}/admin${['', 0][random(0, 1)]}`);

package/src/client/components/cyberia-portal/RouterCyberiaPortal.js

@@ -48,6 +48,14 @@ class RouterCyberiaPortal {
         title: 'cyberia-instance-engine',
         render: () => s(`.main-btn-cyberia-instance-engine`).click(),
       },
+      '/cyberia-action-engine': {
+        title: 'cyberia-action-engine',
+        render: () => s(`.main-btn-cyberia-action-engine`).click(),
+      },
+      '/cyberia-entity-engine': {
+        title: 'cyberia-entity-engine',
+        render: () => s(`.main-btn-cyberia-entity-engine`).click(),
+      },
       '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
     };
   }