@underpostnet/cyberia 3.3.73 → 3.3.76

package/src/client/components/core/Docs.js

@@ -173,10 +173,7 @@ class Docs {
 
     Modal.Data[ModalId].onObserverListener[ModalId] = () => {
       resizeIframe();
-      if (type.match('coverage')) {
-        simpleIconsRender(`.doc-icon-coverage`);
-        simpleIconsRender(`.doc-icon-coverage-link`);
-      }
+      if (type.match('coverage')) simpleIconsRender(`.doc-icon-coverage`);
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
     // The observer fires on modal mutations, not on viewport changes; a rotate
@@ -189,105 +186,87 @@ class Docs {
       closeModalRouteChangeEvent({ closedId: ModalId });
     };
   }
-  static Data = [
-    {
-      type: 'repo',
-      icon: html`<i class="fab fa-github"></i>`,
-      text: `Last Release`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
-        return githubUrl(packageRepository());
-      },
-    },
-    {
-      type: 'demo',
-      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
-        <path fill="currentColor" d="M20 2v12l10-6z" />
-        <path
-          fill="currentColor"
-          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
-        />
-      </svg>`,
-      text: html`Demo`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
-        return githubPagesUrl(packageRepository());
-      },
-    },
-    {
-      type: 'src',
-      icon: html`<i class="fa-brands fa-osi"></i>`,
-      text: 'Source Docs',
-      url: function () {
-        return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
-      },
-    },
-    {
-      type: 'api',
-      icon: html`<i class="fa-solid fa-arrows-turn-to-dots"></i>`,
-      text: `Api Docs`,
-      url: function () {
-        return `${getProxyPath()}api-docs`;
-      },
-    },
-    {
-      type: 'coverage',
+  // One entry per coverage report the build declared, each framed from /docs/coverage/<id>.
+  static coverageReports = () =>
+    (window.renderPayload.coverage ?? []).map(({ id, label }) => ({
+      type: `coverage-${id}`,
       icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
-      text: `Coverage report`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.coverageUrl) return tokenOpts.coverageUrl();
-        return `${getProxyPath()}docs/coverage`;
+      text: label,
+      url: () => `${getProxyPath()}docs/coverage/${id}`,
+    }));
+  static get Data() {
+    return [
+      {
+        type: 'repo',
+        external: true,
+        icon: html`<i class="fab fa-github"></i>`,
+        text: `Last Release`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
+          return githubUrl(packageRepository());
+        },
       },
-      themeEvent: () => {
-        if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
+      {
+        type: 'demo',
+        external: true,
+        icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+          <path fill="currentColor" d="M20 2v12l10-6z" />
+          <path
+            fill="currentColor"
+            d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+          />
+        </svg>`,
+        text: html`Demo`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
+          return githubPagesUrl(packageRepository());
+        },
       },
-    },
-    {
-      type: 'coverage-link',
-      icon: html`<img height="20" width="20" class="doc-icon-coverage-link" />`,
-      text: `Coverage`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.coverageLinkUrl) return tokenOpts.coverageLinkUrl();
-        return coverallsUrl();
+      {
+        type: 'src',
+        icon: html`<i class="fa-brands fa-osi"></i>`,
+        text: 'Source Docs',
+        url: function () {
+          return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
+        },
       },
-      themeEvent: () => {
-        if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
+      {
+        type: 'api',
+        icon: html`<i class="fa-solid fa-arrows-turn-to-dots"></i>`,
+        text: `Api Docs`,
+        url: function () {
+          return `${getProxyPath()}api-docs`;
+        },
       },
-    },
-  ];
+      ...Docs.coverageReports(),
+      {
+        type: 'coverage-link',
+        external: true,
+        icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
+        text: `Coverage`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.coverageLinkUrl) return tokenOpts.coverageLinkUrl();
+          return coverallsUrl();
+        },
+      },
+    ];
+  }
   static Tokens = {};
   static async instance(options = {}) {
     const { idModal } = options;
     Docs.Tokens[idModal] = options;
     setTimeout(() => {
-      s(`.btn-docs-src`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'src' });
-        await Docs.RenderModal('src', idModal);
-      };
-      s(`.btn-docs-api`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'api' });
-        await Docs.RenderModal('api', idModal);
-      };
-      s(`.btn-docs-coverage`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        await Docs.RenderModal('coverage', idModal);
-      };
-      s(`.btn-docs-coverage-link`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'coverage-link');
-        location.href = docData.url();
-      };
-      s(`.btn-docs-repo`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'repo');
-        location.href = docData.url();
-      };
-      s(`.btn-docs-demo`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'demo');
-        location.href = docData.url();
-      };
+      // An external entry leaves the app; the rest open in a framed modal on their own route.
+      for (const docData of Docs.Data) {
+        s(`.btn-docs-${docData.type}`).onclick = async () => {
+          if (docData.external) return (location.href = docData.url());
+          setQueryPath({ path: 'docs', queryPath: docData.type });
+          await Docs.RenderModal(docData.type, idModal);
+        };
+      }
       listenQueryPathInstance({
         id: options.idModal,
         routeId: 'docs',
@@ -301,13 +280,11 @@ class Docs {
         },
       });
     });
-    // Register theme events for items that have them (Docs-specific concern)
-    for (const docData of Docs.Data) {
-      if (docData.themeEvent) {
-        ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
-        setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
-      }
-    }
+    // The coverage icons are tinted to the theme's text colour, so they follow theme changes.
+    ThemeEvents['doc-icon-coverage'] = () => {
+      if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
+    };
+    setTimeout(ThemeEvents['doc-icon-coverage']);
     // Build submenu items and populate — submenu system is owned by Modal
     Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
 

package/src/client/components/core/Modal.js

@@ -415,6 +415,17 @@ class Modal {
               },
               { key: `slide-menu-${idModal}` },
             );
+            // The fixed hamburger only opens the menu: it shows while the top bar is collapsed
+            // and the menu is closed. An open menu (50px or full) carries its own controls and
+            // already pushes the views aside, so neither the button nor the title padding apply.
+            const syncFixedMenuButton = () => {
+              const fixed = s(`.main-btn-menu-top-fixed-container`);
+              if (!fixed) return;
+              const collapsed = s(`.main-body-btn-ui-close`) && s(`.main-body-btn-ui-close`).classList.contains('hide');
+              const active = collapsed && Modal.Data[idModal][options.mode].width === 0;
+              fixed.classList[active ? 'remove' : 'add']('hide');
+              s('body').classList[active ? 'add' : 'remove']('main-btn-menu-top-fixed-active');
+            };
             barConfig.buttons.menu.onClick = () => {
               Modal.Data[idModal][options.mode].width = slideMenuWidth;
               s(`.btn-menu-${idModal}`).classList.add('hide');
@@ -437,6 +448,7 @@ class Modal {
               } else {
                 s(`.${idModal}`).style.left = `0px`;
               }
+              syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
             };
             barConfig.buttons.close.onClick = () => {
@@ -460,11 +472,12 @@ class Modal {
               } else {
                 s(`.${idModal}`).style.left = `-${originSlideMenuWidth}px`;
               }
+              syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
             };
             transition += `, width 0.3s`;
 
-            setTimeout(() => {
+            setTimeout(async () => {
               setTimeout(btnCloseEvent);
               append(
                 'body',
@@ -517,6 +530,46 @@ class Modal {
                 Modal.actionBtnCenter();
               };
 
+              // Fixed top-left hamburger, shown only while the top bar is collapsed
+              // (main-body-btn-ui-close hidden). Not needed for 'top-bottom-bar' which
+              // keeps its own center action button in the bottom bar.
+              if (
+                idModal === 'modal-menu' &&
+                options.mode !== 'slide-menu-right' &&
+                options.barMode !== 'top-bottom-bar'
+              ) {
+                append(
+                  'body',
+                  html`
+                    <div
+                      class="fix main-btn-menu-top-fixed-container hide"
+                      style="top: 0px; left: 0px; z-index: 10; height: ${originHeightTopBar}px; width: ${originHeightTopBar}px"
+                    >
+                      ${await BtnIcon.instance({
+                        style: `height: 100%`,
+                        class: `in fll main-btn-menu-top action-bar-box action-btn-center-top-fixed`,
+                        label: html`<div class="abs center">${barConfig.buttons.menu.label}</div>`,
+                      })}
+                    </div>
+                    <style>
+                      /* View modals sit at top: 0 while the top bar is collapsed; keep their
+                         title clear of the fixed hamburger. The padding eases at the same pace
+                         the views slide so the title moves once, not a jump and a slide back. */
+                      .title-main-modal {
+                        transition: padding-left 0.3s;
+                      }
+                      body.main-btn-menu-top-fixed-active .title-main-modal {
+                        padding-left: ${originHeightTopBar}px;
+                      }
+                    </style>
+                  `,
+                );
+                EventsUI.onClick(`.action-btn-center-top-fixed`, (e) => {
+                  e.preventDefault();
+                  Modal.actionBtnCenter();
+                });
+              }
+
               s(`.main-body-btn-bar-custom`).onclick = () => {
                 if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
                   s(`.main-body-btn-ui`).click();
@@ -548,6 +601,7 @@ class Modal {
                   options.heightBottomBar = 0;
                   s(`.slide-menu-top-bar`).classList.add('hide');
                   s(`.bottom-bar`).classList.add('hide');
+                  syncFixedMenuButton();
                   s(`.modal-menu`).style.top = '0px';
                   s(`.main-body-btn-container`).style.top = '50px';
                   s(`.main-body`).style.top = '0px';
@@ -563,6 +617,7 @@ class Modal {
                   s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
                   s(`.slide-menu-top-bar`).classList.remove('hide');
                   s(`.bottom-bar`).classList.remove('hide');
+                  syncFixedMenuButton();
                   s(`.main-body`).style.top = `${options.heightTopBar}px`;
                   s(`.main-body`).style.height = `${windowGetH() - options.heightTopBar}px`;
                   for (const event of Object.keys(Modal.Data[idModal].onBarUiOpen))

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

@@ -13,7 +13,7 @@ import { CyberiaQuestService } from '../../services/cyberia-quest/cyberia-quest.
 import { CyberiaActionService } from '../../services/cyberia-action/cyberia-action.service.js';
 import { CyberiaDialogueService } from '../../services/cyberia-dialogue/cyberia-dialogue.service.js';
 import { CyberiaSkillService } from '../../services/cyberia-skill/cyberia-skill.service.js';
-import { QUEST_STEPS_TYPES, getDefaultCyberiaItemById, SKILL_LOGIC_IDS } from './SharedDefaultsCyberia.js';
+import { QUEST_STEPS_TYPES, SKILL_LOGIC_IDS } from './SharedDefaultsCyberia.js';
 
 const textFilter = (filter) => ({ filterType: 'text', type: 'equals', filter });
 // DropDown invokes optionData.onClick on selection, so every option (including
@@ -90,8 +90,8 @@ class ActionEngineCyberia {
       containerClass: 'inl',
       serviceProvider: async (q) => {
         const result = await ObjectLayerService.searchItemIds({ q });
-        if (result.status === 'success' && result.data?.itemIds) {
-          return result.data.itemIds.map((itemId) => dropdownOption(itemId));
+        if (result.status === 'success' && result.data?.items) {
+          return result.data.items.map(({ id }) => dropdownOption(id));
         }
         return [];
       },
@@ -139,40 +139,16 @@ class ActionEngineCyberia {
     if (ActionEngineCyberia.imageCache[itemId]) return;
     ActionEngineCyberia.imageCache[itemId] = { img: null, loaded: false, error: false };
 
-    const loadImage = (type, id) => {
-      const img = new Image();
-      img.onload = () => {
-        ActionEngineCyberia.imageCache[itemId].img = img;
-        ActionEngineCyberia.imageCache[itemId].loaded = true;
-        if (onLoad) onLoad();
-      };
-      img.onerror = () => {
-        ActionEngineCyberia.imageCache[itemId].error = true;
-      };
-      img.src = `${getProxyPath()}assets/${type}/${id}/08/0.png`;
+    const img = new Image();
+    img.onload = () => {
+      ActionEngineCyberia.imageCache[itemId].img = img;
+      ActionEngineCyberia.imageCache[itemId].loaded = true;
+      if (onLoad) onLoad();
     };
-
-    const sharedItem = getDefaultCyberiaItemById(itemId)?.item;
-    if (sharedItem?.type && sharedItem?.id) {
-      loadImage(sharedItem.type, sharedItem.id);
-      return;
-    }
-
-    ObjectLayerService.get({
-      limit: 1,
-      filterModel: { 'data.item.id': { filterType: 'text', type: 'equals', filter: itemId } },
-    })
-      .then((res) => {
-        const doc = res?.data?.data?.[0];
-        if (!doc || !doc.data?.item?.type || !doc.data?.item?.id) {
-          ActionEngineCyberia.imageCache[itemId].error = true;
-          return;
-        }
-        loadImage(doc.data.item.type, doc.data.item.id);
-      })
-      .catch(() => {
-        ActionEngineCyberia.imageCache[itemId].error = true;
-      });
+    img.onerror = () => {
+      ActionEngineCyberia.imageCache[itemId].error = true;
+    };
+    img.src = `${getProxyPath()}api/atlas-sprite-sheet/idle-preview/${itemId}`;
   }
 
   static preloadMapObjectLayers(onLoad) {