@underpostnet/cyberia 3.3.73 → 3.3.77

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,19 @@ class Modal {
               },
               { key: `slide-menu-${idModal}` },
             );
+            // The fixed hamburger stands in for the top bar's while it is collapsed, opening and
+            // closing the menu alike. Its 50px corner is kept clear two ways: the menu content is
+            // padded down while it shows, and a view title is padded right only while the menu
+            // is closed — an open menu (50px or full) already pushes the views aside.
+            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 menuClosed = Modal.Data[idModal][options.mode].width === 0;
+              fixed.classList[collapsed ? 'remove' : 'add']('hide');
+              s('body').classList[collapsed ? 'add' : 'remove']('main-btn-menu-top-fixed-active');
+              s('body').classList[collapsed && menuClosed ? 'add' : 'remove']('main-btn-menu-top-fixed-title-offset');
+            };
             barConfig.buttons.menu.onClick = () => {
               Modal.Data[idModal][options.mode].width = slideMenuWidth;
               s(`.btn-menu-${idModal}`).classList.add('hide');
@@ -437,6 +450,7 @@ class Modal {
               } else {
                 s(`.${idModal}`).style.left = `0px`;
               }
+              syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
             };
             barConfig.buttons.close.onClick = () => {
@@ -460,11 +474,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 +532,53 @@ 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">
+                          <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
+                          <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
+                        </div>`,
+                      })}
+                    </div>
+                    <style>
+                      /* The menu content starts below the fixed hamburger while it shows. */
+                      body.main-btn-menu-top-fixed-active .html-${idModal} {
+                        padding-top: ${originHeightTopBar}px;
+                      }
+                      /* 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-title-offset .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 +610,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 +626,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))
@@ -2829,28 +2893,18 @@ const renderViewTitle = (
     </div>`;
 };
 
-const buildBadgeToolTipMenuOption = (id, sideKey = 'left') => {
-  const option = {
-    id: `tooltip-content-main-btn-${id}`,
-    text: `${Translate.instance(`${id}`)}`,
-    classList: 'tooltip-menu',
-    style: { top: `-40px` },
-  };
-  switch (sideKey) {
-    case 'left':
-      option.style.left = '60px';
-
-      break;
-
-    case 'right':
-      option.style.right = '60px';
-      break;
-
-    default:
-      break;
-  }
-  return option;
-};
+/**
+ * Tooltip badge for a collapsed menu button. ToolTip places it beside the button on the side
+ * the menu leaves free, read from the menu mode when it shows — so a shell never pins an
+ * offset that only holds for one of 'slide-menu' or 'slide-menu-right'.
+ * @param {string} id - Translation key and tooltip id suffix.
+ * @param {'left'|'right'} [sideKey] - Forces the side the menu sits on; omit to follow the mode.
+ */
+const buildBadgeToolTipMenuOption = (id, sideKey) => ({
+  id: `tooltip-content-main-btn-${id}`,
+  text: `${Translate.instance(`${id}`)}`,
+  classList: `tooltip-menu${sideKey ? ` tooltip-menu-side-${sideKey}` : ''}`,
+});
 
 const isSubMenuOpen = (subMenuId) => {
   return s(`.down-arrow-submenu-${subMenuId}`) && s(`.down-arrow-submenu-${subMenuId}`).style.rotate === '180deg';

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

@@ -58,6 +58,21 @@ class ToolTip {
       const tooltipRect = tooltipEl.getBoundingClientRect();
       let top = containerRect.bottom + window.scrollY + 5;
       let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
+      if (options.useMenuBtn) {
+        // Beside the collapsed menu button, on the side the menu leaves free: a right-hand menu
+        // sits on the window edge, so its tooltips open leftwards. A shell may pin the side.
+        const pinned = tooltipEl.querySelector('.tooltip-menu-side-right')
+          ? 'right'
+          : tooltipEl.querySelector('.tooltip-menu-side-left')
+            ? 'left'
+            : null;
+        const menuSide = pinned || (Modal.Data['modal-menu'].options.mode === 'slide-menu-right' ? 'right' : 'left');
+        top = containerRect.top + window.scrollY + (containerRect.height - tooltipRect.height) / 2;
+        left =
+          menuSide === 'right'
+            ? containerRect.left + window.scrollX - tooltipRect.width - 10
+            : containerRect.right + window.scrollX + 10;
+      }
       // Adjust if it goes off-screen
       if (left < 0) left = 5;
       if (left + tooltipRect.width > window.innerWidth) {

package/src/client/components/cryptokoyn/AppShellCryptokoyn.js

@@ -26,8 +26,6 @@ class AppShellCryptokoyn {
     const RouterInstance = RouterCryptokoyn.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
-
-    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
     await Modal.instance({
       id: 'modal-menu',

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) {