cyberia 3.0.2 → 3.1.3

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

@@ -192,6 +192,16 @@ const ObjectLayerEngineModal = {
     const { Elements } = options;
 
     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'];
     const statTypes = ['effect', 'resistance', 'agility', 'range', 'intelligence', 'utility'];
 
@@ -355,7 +365,7 @@ const ObjectLayerEngineModal = {
       const capturedDirectionCode = directionCode;
 
       if (!s(`.frames-${capturedDirectionCode}`)) {
-        logger.warn(`Frames container for direction code ${capturedDirectionCode} not found`);
+        console.warn(`Frames container for direction code ${capturedDirectionCode} not found`);
         return;
       }
 
@@ -481,7 +491,7 @@ const ObjectLayerEngineModal = {
       let loader = s('object-layer-png-loader');
 
       if (!ole || !loader) {
-        logger.warn('object-layer-engine or object-layer-png-loader component not found after retries');
+        console.warn('object-layer-engine or object-layer-png-loader component not found after retries');
         return;
       }
 
@@ -516,7 +526,7 @@ const ObjectLayerEngineModal = {
         <div class="in section-mp-border">
           <div class="fl">
             <div class="in fll">
-              <div class="in direction-code-bar-frames-title">${directionCode}</div>
+              <div class="in direction-code-bar-frames-title">${directionCodeLabels[directionCode]}</div>
               <div class="in direction-code-bar-frames-btn">
                 ${await BtnIcon.Render({
                   label: html`
@@ -564,139 +574,153 @@ const ObjectLayerEngineModal = {
     }
 
     setTimeout(async () => {
+      let loadFramesInProgress = false;
       const loadFrames = async () => {
-        showFrameLoading();
-
-        // Clear all frames and data at the start to prevent duplication from multiple calls
-        // This must happen BEFORE any async operations to avoid race conditions
-        for (const directionCode of directionCodes) {
-          // Clear DOM frames for this direction code
-          const framesContainer = s(`.frames-${directionCode}`);
-          if (framesContainer) {
-            framesContainer.innerHTML = '';
-          }
-          // Clear data for this direction code
-          ObjectLayerEngineModal.ObjectLayerData[directionCode] = [];
+        // Concurrency guard: skip if already loading to prevent duplicate frames
+        if (loadFramesInProgress) {
+          console.warn('loadFrames already in progress, skipping duplicate call');
+          return;
         }
+        loadFramesInProgress = true;
+
+        try {
+          showFrameLoading();
+
+          // Clear all frames and data at the start to prevent duplication from multiple calls
+          // This must happen BEFORE any async operations to avoid race conditions
+          for (const directionCode of directionCodes) {
+            // Clear DOM frames for this direction code
+            const framesContainer = s(`.frames-${directionCode}`);
+            if (framesContainer) {
+              framesContainer.innerHTML = '';
+            }
+            // Clear data for this direction code
+            ObjectLayerEngineModal.ObjectLayerData[directionCode] = [];
+          }
 
-        for (const directionCode of directionCodes) {
-          // Use IIFE to properly capture directionCode and handle async operations
-          await (async (currentDirectionCode) => {
-            // Register frame add button handler after DOM is ready
-            // 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
-              const { frames } = loadedData.objectLayerRenderFramesId;
-              for (const direction of directions) {
-                if (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`;
+          for (const directionCode of directionCodes) {
+            // Use IIFE to properly capture directionCode and handle async operations
+            await (async (currentDirectionCode) => {
+              // Register frame add button handler after DOM is ready
+              // 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
+                const { frames } = loadedData.objectLayerRenderFramesId;
+                for (const direction of directions) {
+                  if (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(
-                      `Loading frame ${frameIndex} for direction code ${currentDirectionCode} from: ${pngUrl}`,
+                      `Found ${frameCount} frames for direction: ${direction} (code: ${currentDirectionCode})`,
                     );
-                    await processAndAddFrameFromPngUrl(currentDirectionCode, pngUrl);
+                    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);
+                    }
+                    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;
                   }
-                  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;
                 }
               }
-            }
 
-            const buttonSelector = `.direction-code-bar-frames-btn-${currentDirectionCode}`;
-            console.log(`Registering click handler for: ${buttonSelector}`);
+              const buttonSelector = `.direction-code-bar-frames-btn-${currentDirectionCode}`;
+              console.log(`Registering click handler for: ${buttonSelector}`);
 
-            EventsUI.onClick(buttonSelector, async () => {
-              console.log(`Add frame button clicked for direction: ${currentDirectionCode}`);
-              const ole = s('object-layer-engine');
-              if (!ole) {
-                console.error('object-layer-engine not found');
-                return;
-              }
-              const image = await ole.toBlob();
-              const json = ole.exportMatrixJSON();
-
-              // Check if we're in edit mode
-              if (editingFrameId && editingDirectionCode) {
-                // Ensure we're clicking the add button for the same direction being edited
-                if (currentDirectionCode !== editingDirectionCode) {
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-exclamation-circle"></i> Please click the glowing <i class="fa-solid fa-edit"></i> button for direction <strong>${editingDirectionCode}</strong> to save changes, or click <i class="fa-solid fa-times"></i> to cancel.`,
-                    status: 'warning',
-                  });
-                  return; // Don't add a new frame
+              EventsUI.onClick(buttonSelector, async () => {
+                console.log(`Add frame button clicked for direction: ${currentDirectionCode}`);
+                const ole = s('object-layer-engine');
+                if (!ole) {
+                  console.error('object-layer-engine not found');
+                  return;
                 }
+                const image = await ole.toBlob();
+                const json = ole.exportMatrixJSON();
+
+                // Check if we're in edit mode
+                if (editingFrameId && editingDirectionCode) {
+                  // Ensure we're clicking the add button for the same direction being edited
+                  if (currentDirectionCode !== editingDirectionCode) {
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-exclamation-circle"></i> Please click the glowing <i class="fa-solid fa-edit"></i> button for direction <strong>${editingDirectionCode}</strong> to save changes, or click <i class="fa-solid fa-times"></i> to cancel.`,
+                      status: 'warning',
+                    });
+                    return; // Don't add a new frame
+                  }
 
-                // UPDATE existing frame
-                console.log(`Updating frame ${editingFrameId} in direction ${editingDirectionCode}`);
-
-                // Find the frame in the data array
-                const frameArray = ObjectLayerEngineModal.ObjectLayerData[editingDirectionCode];
-                const frameIndex = frameArray?.findIndex((frame) => frame.id === editingFrameId);
-
-                if (frameIndex !== undefined && frameIndex >= 0) {
-                  // Update the frame data while preserving the ID and index
-                  frameArray[frameIndex] = {
-                    id: editingFrameId,
-                    image,
-                    json,
-                  };
-
-                  // Update the visual representation
-                  const imgElement = s(`.direction-code-bar-frames-img-${editingFrameId}`);
-                  if (imgElement) {
-                    imgElement.src = URL.createObjectURL(image);
+                  // UPDATE existing frame
+                  console.log(`Updating frame ${editingFrameId} in direction ${editingDirectionCode}`);
+
+                  // Find the frame in the data array
+                  const frameArray = ObjectLayerEngineModal.ObjectLayerData[editingDirectionCode];
+                  const frameIndex = frameArray?.findIndex((frame) => frame.id === editingFrameId);
+
+                  if (frameIndex !== undefined && frameIndex >= 0) {
+                    // Update the frame data while preserving the ID and index
+                    frameArray[frameIndex] = {
+                      id: editingFrameId,
+                      image,
+                      json,
+                    };
+
+                    // Update the visual representation
+                    const imgElement = s(`.direction-code-bar-frames-img-${editingFrameId}`);
+                    if (imgElement) {
+                      imgElement.src = URL.createObjectURL(image);
+                    }
+
+                    console.log(`Frame ${editingFrameId} updated successfully at index ${frameIndex}`);
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-check-circle"></i> Frame updated successfully at position ${frameIndex + 1}!`,
+                      status: 'success',
+                    });
+                  } else {
+                    console.error(`Could not find frame ${editingFrameId} in direction ${editingDirectionCode}`);
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-exclamation-triangle"></i> Error: Could not find frame to update`,
+                      status: 'error',
+                    });
                   }
 
-                  console.log(`Frame ${editingFrameId} updated successfully at index ${frameIndex}`);
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-check-circle"></i> Frame updated successfully at position ${frameIndex + 1}!`,
-                    status: 'success',
-                  });
+                  // Exit edit mode and restore UI
+                  exitEditMode();
                 } else {
-                  console.error(`Could not find frame ${editingFrameId} in direction ${editingDirectionCode}`);
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-exclamation-triangle"></i> Error: Could not find frame to update`,
-                    status: 'error',
-                  });
-                }
+                  // ADD new frame (existing behavior)
+                  const id = `frame-capture-${s4()}-${s4()}`;
+                  console.log(`Creating new frame ${id} for direction ${currentDirectionCode}`);
+
+                  if (!ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode])
+                    ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode] = [];
+                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].push({ id, image, json });
+                  console.log(
+                    `Stored frame ${id} in direction code ${currentDirectionCode}. Total frames:`,
+                    ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].length,
+                  );
 
-                // Exit edit mode and restore UI
-                exitEditMode();
-              } else {
-                // ADD new frame (existing behavior)
-                const id = `frame-capture-${s4()}-${s4()}`;
-                console.log(`Creating new frame ${id} for direction ${currentDirectionCode}`);
-
-                if (!ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode])
-                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode] = [];
-                ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].push({ id, image, json });
-                console.log(
-                  `Stored frame ${id} in direction code ${currentDirectionCode}. Total frames:`,
-                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].length,
-                );
-
-                await addFrameToBar(currentDirectionCode, id, image, json);
-              }
-            });
-          })(directionCode);
+                  await addFrameToBar(currentDirectionCode, id, image, json);
+                }
+              });
+            })(directionCode);
+          }
+          hideFrameLoading();
+        } finally {
+          loadFramesInProgress = false;
         }
-        hideFrameLoading();
       };
       RouterEvents[`router-${options.idModal}`] = loadFrames;
 
@@ -748,6 +772,7 @@ const ObjectLayerEngineModal = {
           data: {
             stats: {},
             item: {},
+            ledger: { type: 'OFF_CHAIN' },
           },
         };
         for (const directionCode of directionCodes) {
@@ -980,6 +1005,7 @@ const ObjectLayerEngineModal = {
           font-weight: bold;
           font-size: 1.2rem;
           padding: 0.5rem;
+          width: 70px;
         }
         .direction-code-bar-frames-img {
           width: 100px;

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

@@ -225,6 +225,11 @@ const ObjectLayerEngineViewer = {
     const itemDescription = objectLayer.data.item.description || '';
     const itemActivable = objectLayer.data.item.activable || false;
 
+    // Get ledger data
+    const ledger = objectLayer.data.ledger || {};
+    const ledgerType = ledger.type || '';
+    const ledgerAddress = ledger.address || '';
+
     // Get stats data
     const stats = objectLayer.data.stats || {};
 
@@ -616,6 +621,33 @@ const ObjectLayerEngineViewer = {
             font-size: 13px;
           }
 
+          .webp-download-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            border-radius: 6px;
+            padding: 6px 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            z-index: 5;
+            backdrop-filter: blur(4px);
+            transition: all 0.2s ease;
+          }
+          .webp-download-btn:hover {
+            background: rgba(0, 0, 0, 0.75);
+            transform: scale(1.05);
+          }
+          .webp-download-btn i {
+            font-size: 12px;
+          }
+
           @media (max-width: 850px) {
             .object-layer-viewer-container {
               padding: 5px;
@@ -672,11 +704,18 @@ const ObjectLayerEngineViewer = {
                         <span class="ipfs-cid-value">${objectLayer.cid}</span>
                       </div>`
                     : ''}
-                  ${objectLayer.data.atlasSpriteSheetCid
+                  ${objectLayer.data.render?.cid
                     ? html`<div class="ipfs-cid-label">
                         <i class="fa-solid fa-image"></i>
                         <strong>Atlas IPFS CID:</strong>
-                        <span class="ipfs-cid-value">${objectLayer.data.atlasSpriteSheetCid}</span>
+                        <span class="ipfs-cid-value">${objectLayer.data.render.cid}</span>
+                      </div>`
+                    : ''}
+                  ${objectLayer.data.render?.metadataCid
+                    ? html`<div class="ipfs-cid-label">
+                        <i class="fa-solid fa-file-code"></i>
+                        <strong>Atlas Metadata CID:</strong>
+                        <span class="ipfs-cid-value">${objectLayer.data.render.metadataCid}</span>
                       </div>`
                     : ''}
                   ${objectLayer.sha256
@@ -725,7 +764,30 @@ const ObjectLayerEngineViewer = {
                   </div>
                 </div>
 
+                <!-- Ledger Section -->
+                <div class="control-group" style="margin-bottom: 20px;">
+                  <h4><i class="fa-solid fa-link"></i> Ledger</h4>
+                  <div
+                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px 0;"
+                  >
+                    <div style="display: flex; flex-direction: column; gap: 4px;">
+                      <span class="item-data-key-label">Type</span>
+                      <span style="font-weight: 600;">${ledgerType || 'N/A'}</span>
+                    </div>
+                    ${ledgerAddress
+                      ? html`<div style="display: flex; flex-direction: column; gap: 4px;">
+                          <span class="item-data-key-label">Contract Address</span>
+                          <span style="font-weight: 600; word-break: break-all;">${ledgerAddress}</span>
+                        </div>`
+                      : ''}
+                  </div>
+                </div>
+
                 <div class="webp-display-area">
+                  <button class="webp-download-btn" id="download-webp-btn">
+                    <i class="fa-solid fa-download"></i>
+                    <span>WebP</span>
+                  </button>
                   <div class="webp-canvas-container chess in" id="webp-canvas-container">
                     ${!this.Data.webp
                       ? html`
@@ -917,10 +979,6 @@ const ObjectLayerEngineViewer = {
                     <i class="fa-solid fa-arrow-left"></i>
                     <span>Return to List</span>
                   </button>
-                  <button class="default-viewer-btn" id="download-webp-btn">
-                    <i class="fa-solid fa-download"></i>
-                    <span>Download WebP</span>
-                  </button>
                   <button class="default-viewer-btn edit-btn" id="edit-object-layer-btn">
                     <i class="fa-solid fa-edit"></i>
                     <span>Edit</span>

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

@@ -31,6 +31,7 @@ const CyberiaDependencies = {
   pngjs: '^7.0.0',
   jimp: '^1.6.0',
   sharp: '^0.32.5',
+  ethers: '~6.16.0',
 };
 
 export { BaseElement, ModelElement, CyberiaPortalParams, CyberiaDependencies };

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

@@ -63,20 +63,62 @@ const CssCommonCyberia = async () => {
         text-align: center;
       }
 
-      .landing-title,
       h1,
       h2,
       h3 {
         font-family: var(--cy-font-retro-cta);
+      }
+
+      p {
+        font-family: var(--cy-font-retro);
+      }
+
+      .landing-title,
+      .html-main-body h1,
+      .html-main-body h2,
+      .html-main-body h3 {
         font-size: 5rem;
         color: #ffcc00;
         text-shadow: 2px 2px 0px #9e7b00;
         margin-bottom: 2rem;
       }
 
-      p {
+      /* Docs section retro styling */
+      .docs-header h1 {
+        font-family: var(--cy-font-retro-cta);
+        color: #ffcc00;
+        text-shadow: 2px 2px 0px #9e7b00;
+      }
+      .docs-card {
+        border: 2px solid #ffcc00;
+        transition: all 0.3s ease-in-out;
+      }
+      .docs-card:hover {
+        background: rgba(255, 204, 0, 0.08);
+        box-shadow:
+          0 0 10px rgba(255, 204, 0, 0.3),
+          0 0 20px rgba(255, 204, 0, 0.15);
+        transform: translateY(-3px);
+      }
+      .card-icon {
+        color: #ffcc00;
+      }
+      .card-content h3 {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 1.25rem;
+      }
+      .card-content p {
+        font-family: var(--cy-font-retro);
+      }
+      .submenu-btn {
         font-family: var(--cy-font-retro);
       }
+      .submenu-btn:hover {
+        background: rgba(255, 204, 0, 0.1);
+      }
+      .down-arrow-submenu {
+        left: 102px;
+      }
 
       .object-layer-viewer-container {
         width: 100% !important;

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

@@ -10,7 +10,6 @@ const LogInCyberiaPortal = async function () {
 
     ElementsCyberiaPortal.Data.user.main.model.user = user;
 
-    // if (user.role === 'admin' || user.role === 'moderator') s(`.main-btn-admin`).classList.remove('hide');
     await ObjectLayerManagement.Reload('viewer');
   };
   const { user } = await Auth.sessionIn();

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

@@ -2,14 +2,22 @@ import { Account } from '../core/Account.js';
 import { BtnIcon } from '../core/BtnIcon.js';
 import { getId, newInstance, random } from '../core/CommonJs.js';
 import { Css, ThemeEvents, Themes, darkTheme } from '../core/Css.js';
+import { Docs } from '../core/Docs.js';
 import { EventsUI } from '../core/EventsUI.js';
 import { LogIn } from '../core/LogIn.js';
 import { LogOut } from '../core/LogOut.js';
-import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
+import {
+  buildBadgeToolTipMenuOption,
+  isSubMenuOpen,
+  Modal,
+  renderMenuLabel,
+  renderViewTitle,
+  subMenuRender,
+} from '../core/Modal.js';
 import { SignUp } from '../core/SignUp.js';
 import { Translate } from '../core/Translate.js';
 import { htmls, s } from '../core/VanillaJs.js';
-import { getProxyPath } from '../core/Router.js';
+import { getProxyPath, setQueryParams } from '../core/Router.js';
 import { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
 import Sortable from 'sortablejs';
 import { RouterCyberiaPortal, BannerAppTemplate } from './RoutesCyberiaPortal.js';
@@ -135,6 +143,27 @@ const MenuCyberiaPortal = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-docs',
+            useMenuBtn: true,
+            label: html`<div class="in">
+              ${renderMenuLabel({
+                icon: html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/wiki.png" />`,
+                text: html`<span class="menu-label-text"
+                  >${Translate.Render('docs')}
+                  <i
+                    class="fas fa-caret-down inl down-arrow-submenu down-arrow-submenu-docs"
+                    style="rotate: 0deg; transition: 0.4s;"
+                  ></i
+                ></span>`,
+              })}
+            </div> `,
+            attrs: `data-id="docs"`,
+            tabHref: `${getProxyPath()}docs`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
+          })}
+          <div class="abs menu-btn-container-children-docs"></div>
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-admin hide',
             useMenuBtn: true,
@@ -432,6 +461,39 @@ const MenuCyberiaPortal = {
       });
     });
 
+    EventsUI.onClick(`.main-btn-docs`, async (e) => {
+      if (!isSubMenuOpen('docs') || e.isTrusted) {
+        if (e.isTrusted) setQueryParams({ cid: '' });
+        await subMenuRender('docs');
+      }
+
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-docs',
+        route: 'docs',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl cyberia-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/wiki.png" />`,
+          text: `<span class='inl cyberia-text-title-modal'>${Translate.Render('docs')}</span>`,
+        }),
+        html: async () =>
+          await Docs.Init({
+            idModal: 'modal-docs',
+            subMenuIcon: (type) =>
+              html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/arrow-right.png" />`,
+            coverageUrl: () => `${getProxyPath()}docs/hardhat-coverage`,
+            demoUrl: () => `https://client.cyberiaonline.com/`,
+            lastReleaseUrl: () => `https://github.com/underpostnet/engine-cyberia.git`,
+          }),
+        handleType: 'bar',
+        observer: true,
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
     EventsUI.onClick(`.main-btn-server`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
       await Modal.Render({

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

@@ -45,6 +45,7 @@ const RoutesCyberiaPortal = () => {
       title: 'cyberia-map-engine',
       render: () => s(`.main-btn-cyberia-map-engine`).click(),
     },
+    '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
   };
 };