cyberia 3.0.3 → 3.2.5

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

@@ -1,20 +1,19 @@
 import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
 import { s } from '../core/VanillaJs.js';
-import { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
+import { AppStoreCyberiaPortal } from './AppStoreCyberiaPortal.js';
 import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
 
 const LogInCyberiaPortal = async function () {
   LogIn.Event['LogInCyberiaPortal'] = async (options) => {
     const { token, user } = options;
 
-    ElementsCyberiaPortal.Data.user.main.model.user = user;
+    AppStoreCyberiaPortal.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();
-  ElementsCyberiaPortal.Data.user.main.model.user = user;
+  AppStoreCyberiaPortal.Data.user.main.model.user = user;
 };
 
 export { LogInCyberiaPortal };

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

@@ -1,11 +1,11 @@
 import { LogOut } from '../core/LogOut.js';
 import { s } from '../core/VanillaJs.js';
-import { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
+import { AppStoreCyberiaPortal } from './AppStoreCyberiaPortal.js';
 import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
 
 const LogOutCyberiaPortal = async function () {
   LogOut.Event['LogOutCyberiaPortal'] = async (result = { user: { _id: '' } }) => {
-    ElementsCyberiaPortal.Data.user.main.model.user = result.user;
+    AppStoreCyberiaPortal.Data.user.main.model.user = result.user;
     s(`.main-btn-admin`).classList.add('hide');
     await ObjectLayerManagement.Reload('viewer');
   };

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

@@ -2,15 +2,23 @@ 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 { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
+import { getProxyPath, setQueryParams } from '../core/Router.js';
+import { AppStoreCyberiaPortal } from './AppStoreCyberiaPortal.js';
 import Sortable from 'sortablejs';
 import { RouterCyberiaPortal, BannerAppTemplate } from './RoutesCyberiaPortal.js';
 import { SettingsCyberiaPortal } from './SettingsCyberiaPortal.js';
@@ -22,6 +30,7 @@ import { ObjectLayerEngineViewer } from '../cyberia/ObjectLayerEngineViewer.js';
 import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
 import { MainBodyCyberiaPortal } from './MainBodyCyberiaPortal.js';
 import { MapEngineCyberia } from '../cyberia/MapEngineCyberia.js';
+import { InstanceEngineCyberia } from '../cyberia/InstanceEngineCyberia.js';
 
 const MenuCyberiaPortal = {
   Data: {},
@@ -135,6 +144,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,
@@ -207,6 +237,18 @@ const MenuCyberiaPortal = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('cyberia-map-engine')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-cyberia-instance-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.Render('cyberia-instance-engine')}</span>`,
+            }),
+            attrs: `data-id="cyberia-instance-engine"`,
+            tabHref: `${getProxyPath()}cyberia-instance-engine`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('cyberia-instance-engine')),
+          })}
         </div>
       `,
       // htmlMainBody: async () => {
@@ -382,7 +424,7 @@ const MenuCyberiaPortal = {
         html: async () =>
           await Account.Render({
             idModal: 'modal-account',
-            user: ElementsCyberiaPortal.Data.user.main.model.user,
+            user: AppStoreCyberiaPortal.Data.user.main.model.user,
             disabled: [],
           }),
         handleType: 'bar',
@@ -432,6 +474,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({
@@ -471,7 +546,7 @@ const MenuCyberiaPortal = {
           text: `<span class='inl cyberia-text-title-modal'>${Translate.Render('recover')}</span>`,
         }),
         html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: ElementsCyberiaPortal.Data.user.main.model.user }),
+          await Recover.Render({ idModal: 'modal-recover', user: AppStoreCyberiaPortal.Data.user.main.model.user }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -493,7 +568,7 @@ const MenuCyberiaPortal = {
         html: async () =>
           await ObjectLayerEngineModal.Render({
             idModal: 'modal-object-layer-engine',
-            Elements: ElementsCyberiaPortal,
+            appStore: AppStoreCyberiaPortal,
           }),
         handleType: 'bar',
         maximize: true,
@@ -515,7 +590,7 @@ const MenuCyberiaPortal = {
         }),
         html: async () =>
           ObjectLayerManagement.RenderTable({
-            Elements: ElementsCyberiaPortal,
+            appStore: AppStoreCyberiaPortal,
           }),
         handleType: 'bar',
         maximize: true,
@@ -538,7 +613,7 @@ const MenuCyberiaPortal = {
         }),
         html: async () =>
           ObjectLayerEngineViewer.Render({
-            Elements: ElementsCyberiaPortal,
+            appStore: AppStoreCyberiaPortal,
           }),
         handleType: 'bar',
         maximize: true,
@@ -559,7 +634,27 @@ const MenuCyberiaPortal = {
           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.Render('cyberia-map-engine')}</span>`,
         }),
-        html: async () => await MapEngineCyberia.render(),
+        html: async () => await MapEngineCyberia.render({ appStore: AppStoreCyberiaPortal }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        observer: true,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-cyberia-instance-engine`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-cyberia-instance-engine',
+        route: 'cyberia-instance-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.Render('cyberia-instance-engine')}</span>`,
+        }),
+        html: async () => await InstanceEngineCyberia.render({ appStore: AppStoreCyberiaPortal }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',

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

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

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

@@ -1,52 +1,6 @@
-import { Account } from '../core/Account.js';
-import { Chat } from '../core/Chat.js';
-import { s4 } from '../core/CommonJs.js';
-import { loggerFactory } from '../core/Logger.js';
-import { SocketIo } from '../core/SocketIo.js';
-import { s } from '../core/VanillaJs.js';
-import { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
+import { SocketIoHandlerProvider } from '../core/SocketIoHandler.js';
+import { AppStoreCyberiaPortal } from './AppStoreCyberiaPortal.js';
 
-const logger = loggerFactory(import.meta);
-
-const SocketIoCyberiaPortal = {
-  Init: function () {
-    return new Promise((resolve) => {
-      for (const type of Object.keys(ElementsCyberiaPortal.Data)) {
-        SocketIo.Event[type][s4()] = async (args) => {
-          args = JSON.parse(args[0]);
-          switch (type) {
-            case 'chat':
-              {
-                const idModal = 'modal-chat';
-                if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
-              }
-              break;
-
-            default:
-              break;
-          }
-          // logger.info('ws on event', args);
-          const { id, element, status } = args;
-          switch (status) {
-            case 'email-confirmed':
-              const newUser = { ...ElementsCyberiaPortal.Data.user.main.model.user, emailConfirmed: true };
-              Account.renderVerifyEmailStatus(newUser);
-              Account.triggerUpdateEvent({ user: newUser });
-              break;
-            default:
-              break;
-          }
-        };
-      }
-      SocketIo.Event.connect[s4()] = async (reason) => {
-        // ElementsCyberiaPortal.Init({ type, id, element });
-      };
-      SocketIo.Event.disconnect[s4()] = async (reason) => {
-        // ElementsCyberiaPortal.removeAll();
-      };
-      return resolve();
-    });
-  },
-};
+const SocketIoCyberiaPortal = SocketIoHandlerProvider.create(AppStoreCyberiaPortal);
 
 export { SocketIoCyberiaPortal };

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

@@ -18,6 +18,10 @@ const TranslateCyberiaPortal = {
       en: 'Cyberia Map Engine',
       es: 'Cyberia Map Engine',
     };
+    Translate.Data['cyberia-instance-engine'] = {
+      en: 'Cyberia Instance Engine',
+      es: 'Cyberia Instance Engine',
+    };
   },
 };
 

package/src/client/components/default/AppStoreDefault.js

@@ -0,0 +1,5 @@
+import { AppStore } from '../core/AppStore.js';
+
+const AppStoreDefault = AppStore.create();
+
+export { AppStoreDefault };

package/src/client/components/default/LogInDefault.js

@@ -1,14 +1,14 @@
 import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
-import { ElementsDefault } from './ElementsDefault.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
 
 const LogInDefault = async function () {
   LogIn.Event['LogInDefault'] = async (options) => {
     const { token, user } = options;
-    ElementsDefault.Data.user.main.model.user = user;
+    AppStoreDefault.Data.user.main.model.user = user;
   };
   const { user } = await Auth.sessionIn();
-  ElementsDefault.Data.user.main.model.user = user;
+  AppStoreDefault.Data.user.main.model.user = user;
 };
 
 export { LogInDefault };

package/src/client/components/default/LogOutDefault.js

@@ -1,9 +1,9 @@
 import { LogOut } from '../core/LogOut.js';
-import { ElementsDefault } from './ElementsDefault.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
 
 const LogOutDefault = async function () {
   LogOut.Event['LogOutDefault'] = async (result = { user: { _id: '' } }) => {
-    ElementsDefault.Data.user.main.model.user = result.user;
+    AppStoreDefault.Data.user.main.model.user = result.user;
   };
 };
 

package/src/client/components/default/MenuDefault.js

@@ -10,7 +10,7 @@ import { SignUp } from '../core/SignUp.js';
 import { Translate } from '../core/Translate.js';
 import { htmls, s } from '../core/VanillaJs.js';
 import { extractUsernameFromPath, getProxyPath, getQueryParams } from '../core/Router.js';
-import { ElementsDefault } from './ElementsDefault.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
 import Sortable from 'sortablejs';
 import { RouterDefault, BannerAppTemplate } from './RoutesDefault.js';
 import { SettingsDefault } from './SettingsDefault.js';
@@ -551,7 +551,7 @@ const MenuDefault = {
         html: async () =>
           await Account.Render({
             idModal: 'modal-account',
-            user: ElementsDefault.Data.user.main.model.user,
+            user: AppStoreDefault.Data.user.main.model.user,
             disabled: [],
           }),
         handleType: 'bar',
@@ -565,7 +565,7 @@ const MenuDefault = {
     EventsUI.onClick(`.main-btn-public-profile`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
       const idModal = 'modal-public-profile';
-      const user = ElementsDefault.Data.user.main.model.user;
+      const user = AppStoreDefault.Data.user.main.model.user;
 
       // Check if modal already exists
       const existingModal = s(`.${idModal}`);
@@ -635,7 +635,7 @@ const MenuDefault = {
           text: Translate.Render('recover'),
         }),
         html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: ElementsDefault.Data.user.main.model.user }),
+          await Recover.Render({ idModal: 'modal-recover', user: AppStoreDefault.Data.user.main.model.user }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -723,7 +723,7 @@ const MenuDefault = {
             await PanelForm.instance({
               idPanel: 'default-blog',
               defaultUrlImage: `${getProxyPath()}android-chrome-96x96.png`,
-              Elements: ElementsDefault,
+              appStore: AppStoreDefault,
               parentIdModal: idModal,
               scrollClassContainer: `html-${idModal}`,
               route: routeModal,

package/src/client/components/default/SocketIoDefault.js

@@ -1,54 +1,6 @@
-import { Account } from '../core/Account.js';
-import { Chat } from '../core/Chat.js';
-import { s4 } from '../core/CommonJs.js';
-import { loggerFactory } from '../core/Logger.js';
-import { SocketIo } from '../core/SocketIo.js';
-import { s } from '../core/VanillaJs.js';
-import { ElementsDefault } from './ElementsDefault.js';
+import { SocketIoHandlerProvider } from '../core/SocketIoHandler.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
 
-const logger = loggerFactory(import.meta);
-
-const SocketIoDefault = {
-  Init: function () {
-    return new Promise((resolve) => {
-      for (const type of Object.keys(ElementsDefault.Data)) {
-        SocketIo.Event[type][s4()] = async (args) => {
-          args = JSON.parse(args[0]);
-          switch (type) {
-            case 'chat':
-              {
-                const idModal = 'modal-chat';
-                if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
-              }
-              break;
-
-            default:
-              break;
-          }
-          const { status } = args;
-
-          switch (status) {
-            case 'email-confirmed': {
-              const newUser = { ...ElementsDefault.Data.user.main.model.user, emailConfirmed: true };
-              Account.renderVerifyEmailStatus(newUser);
-              Account.triggerUpdateEvent({ user: newUser });
-              break;
-            }
-
-            default:
-              break;
-          }
-        };
-      }
-      SocketIo.Event.connect[s4()] = async (reason) => {
-        // ElementsDefault.Init({ type, id, element });
-      };
-      SocketIo.Event.disconnect[s4()] = async (reason) => {
-        // ElementsDefault.removeAll();
-      };
-      return resolve();
-    });
-  },
-};
+const SocketIoDefault = SocketIoHandlerProvider.create(AppStoreDefault);
 
 export { SocketIoDefault };

package/src/client/components/itemledger/AppStoreItemledger.js

@@ -0,0 +1,5 @@
+import { AppStore } from '../core/AppStore.js';
+
+const AppStoreItemledger = AppStore.create();
+
+export { AppStoreItemledger };

package/src/client/components/itemledger/LogInItemledger.js

@@ -1,15 +1,15 @@
 import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
-import { ElementsItemledger } from './ElementsItemledger.js';
+import { AppStoreItemledger } from './AppStoreItemledger.js';
 
 const LogInItemledger = async function () {
   LogIn.Event['LogInItemledger'] = async (options) => {
     const { token, user } = options;
 
-    ElementsItemledger.Data.user.main.model.user = user;
+    AppStoreItemledger.Data.user.main.model.user = user;
   };
   const { user } = await Auth.sessionIn();
-  ElementsItemledger.Data.user.main.model.user = user;
+  AppStoreItemledger.Data.user.main.model.user = user;
 };
 
 export { LogInItemledger };

package/src/client/components/itemledger/LogOutItemledger.js

@@ -1,9 +1,9 @@
 import { LogOut } from '../core/LogOut.js';
-import { ElementsItemledger } from './ElementsItemledger.js';
+import { AppStoreItemledger } from './AppStoreItemledger.js';
 
 const LogOutItemledger = async function () {
   LogOut.Event['LogOutItemledger'] = async (result = { user: { _id: '' } }) => {
-    ElementsItemledger.Data.user.main.model.user = result.user;
+    AppStoreItemledger.Data.user.main.model.user = result.user;
   };
 };
 

package/src/client/components/itemledger/MenuItemledger.js

@@ -10,7 +10,7 @@ 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 { ElementsItemledger } from './ElementsItemledger.js';
+import { AppStoreItemledger } from './AppStoreItemledger.js';
 import Sortable from 'sortablejs';
 import { RouterItemledger, BannerAppTemplate } from './RoutesItemledger.js';
 import { SettingsItemledger } from './SettingsItemledger.js';
@@ -271,7 +271,7 @@ const MenuItemledger = {
         html: async () =>
           await Account.Render({
             idModal: 'modal-account',
-            user: ElementsItemledger.Data.user.main.model.user,
+            user: AppStoreItemledger.Data.user.main.model.user,
             disabled: [],
           }),
         handleType: 'bar',
@@ -339,7 +339,7 @@ const MenuItemledger = {
           text: Translate.Render('recover'),
         }),
         html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: ElementsItemledger.Data.user.main.model.user }),
+          await Recover.Render({ idModal: 'modal-recover', user: AppStoreItemledger.Data.user.main.model.user }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',

package/src/client/components/itemledger/SocketIoItemledger.js

@@ -1,54 +1,6 @@
-import { Account } from '../core/Account.js';
-import { Chat } from '../core/Chat.js';
-import { s4 } from '../core/CommonJs.js';
-import { loggerFactory } from '../core/Logger.js';
-import { SocketIo } from '../core/SocketIo.js';
-import { s } from '../core/VanillaJs.js';
-import { ElementsItemledger } from './ElementsItemledger.js';
+import { SocketIoHandlerProvider } from '../core/SocketIoHandler.js';
+import { AppStoreItemledger } from './AppStoreItemledger.js';
 
-const logger = loggerFactory(import.meta);
-
-const SocketIoItemledger = {
-  Init: function () {
-    return new Promise((resolve) => {
-      for (const type of Object.keys(ElementsItemledger.Data)) {
-        SocketIo.Event[type][s4()] = async (args) => {
-          args = JSON.parse(args[0]);
-          switch (type) {
-            case 'chat':
-              {
-                const idModal = 'modal-chat';
-                if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
-              }
-              break;
-
-            itemledger:
-              break;
-          }
-          const { status } = args;
-
-          switch (status) {
-            case 'email-confirmed': {
-              const newUser = { ...ElementsItemledger.Data.user.main.model.user, emailConfirmed: true };
-              Account.renderVerifyEmailStatus(newUser);
-              Account.triggerUpdateEvent({ user: newUser });
-              break;
-            }
-
-            itemledger:
-              break;
-          }
-        };
-      }
-      SocketIo.Event.connect[s4()] = async (reason) => {
-        // ElementsItemledger.Init({ type, id, element });
-      };
-      SocketIo.Event.disconnect[s4()] = async (reason) => {
-        // ElementsItemledger.removeAll();
-      };
-      return resolve();
-    });
-  },
-};
+const SocketIoItemledger = SocketIoHandlerProvider.create(AppStoreItemledger);
 
 export { SocketIoItemledger };

package/src/client/components/underpost/AppStoreUnderpost.js

@@ -0,0 +1,5 @@
+import { AppStore } from '../core/AppStore.js';
+
+const AppStoreUnderpost = AppStore.create();
+
+export { AppStoreUnderpost };