cyberia 2.8.885

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

@@ -0,0 +1,47 @@
+import { loggerFactory } from '../core/Logger.js';
+import { Modal } from '../core/Modal.js';
+import { s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
+
+const logger = loggerFactory(import.meta);
+
+const BannerAppTemplate = html`C Y B E R I A`;
+
+// Router
+const RoutesCyberia = () => {
+  return {
+    '/': {
+      title: 'MMORPG',
+      render: () => Modal.onHomeRouterEvent(),
+      upperCase: true,
+    },
+    '/bag': { title: 'bag', render: () => s(`.main-btn-bag`).click() },
+    '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
+    '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click() },
+    '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click() },
+    '/wallet': { title: 'wallet', render: () => s(`.main-btn-wallet`).click() },
+    '/character': { title: 'character', render: () => s(`.main-btn-character`).click() },
+    '/map': { title: 'map', render: () => s(`.main-btn-map`).click() },
+    '/wiki': { title: 'wiki', render: () => s(`.main-btn-wiki`).click() },
+    '/log-out': {
+      title: 'log-out',
+      render: () => s(`.main-btn-log-out`).click(),
+    },
+    '/account': {
+      title: 'account',
+      render: () => s(`.main-btn-account`).click(),
+    },
+    '/chat': { title: 'Chat', render: () => s(`.main-btn-chat`).click() },
+    '/server': { title: 'server', render: () => s(`.main-btn-server`).click() },
+    '/quest': { title: 'quest', render: () => s(`.main-btn-quest`).click() },
+    '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
+  };
+};
+
+window.Routes = RoutesCyberia;
+
+const RouterCyberia = () => {
+  return { Routes: RoutesCyberia };
+};
+
+export { RoutesCyberia, RouterCyberia, BannerAppTemplate };

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

@@ -0,0 +1,16 @@
+import { Css } from '../core/Css.js';
+import { FullScreen } from '../core/FullScreen.js';
+import { Translate } from '../core/Translate.js';
+import { Worker } from '../core/Worker.js';
+
+const SettingsCyberia = {
+  Render: async function () {
+    let render = await FullScreen.RenderSetting();
+    render += await Css.RenderSetting();
+    render += await Translate.RenderSetting();
+    render += await Worker.RenderSetting();
+    return render;
+  },
+};
+
+export { SettingsCyberia };

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

@@ -0,0 +1,14 @@
+import { createCyberiaUser } from '../../services/cyberia-user/cyberia-user.service.js';
+import { SignUp } from '../core/SignUp.js';
+
+const SignUpCyberia = function () {
+  const type = 'user';
+  const id = 'main';
+
+  SignUp.Event['SignUpCyberia'] = async (options) => {
+    const { user } = options;
+    await createCyberiaUser({ user });
+  };
+};
+
+export { SignUpCyberia };

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

@@ -0,0 +1,124 @@
+import { BtnIcon } from '../core/BtnIcon.js';
+import { floatRound, newInstance, range, setPad, timer } from '../core/CommonJs.js';
+import { borderChar } from '../core/Css.js';
+import { Keyboard } from '../core/Keyboard.js';
+import { loggerFactory } from '../core/Logger.js';
+import { Modal } from '../core/Modal.js';
+import { SocketIo } from '../core/SocketIo.js';
+import { append, htmls, s } from '../core/VanillaJs.js';
+import { SkillCyberiaData, SkillCyberiaType, Stat } from './CommonCyberia.js';
+import { ElementsCyberia } from './ElementsCyberia.js';
+import { getProxyPath } from '../core/Router.js';
+
+const logger = loggerFactory(import.meta);
+
+const SkillCyberia = {
+  renderMainKeysSlots: async function () {
+    // GameInputTestRender(s(`.main-skill-container`));
+
+    let mainSkillContainerRender = '';
+    for (const i of range(0, 3)) {
+      mainSkillContainerRender += html`
+        <div class="in fll main-skill-slot main-skill-slot-${i}">
+          <img
+            class="abs center main-skill-background-img main-skill-background-img-${i}"
+            src="${getProxyPath()}assets/joy/btn.png"
+          />
+          <div class="main-skill-img-container-${i}"></div>
+          <div class="abs center main-skill-cooldown main-skill-cooldown-${i}" style="display: none;">
+            <div class="abs center main-skill-cooldown-delay-time-text main-skill-cooldown-delay-time-text-${i}"></div>
+          </div>
+          <div class="abs center main-skill-key-text main-skill-key-text-${i}"></div>
+          ${await BtnIcon.RenderTouch({ id: `main-skill-touch-slot-${i}` })}
+        </div>
+      `;
+    }
+
+    append('body', html` <div class="abs main-skill-container">${mainSkillContainerRender}</div> `);
+  },
+  setMainKeysSkillCyberia: function () {
+    let indexSkillCyberiaIteration = -1;
+    Keyboard.Event['main-skill'] = {};
+    ElementsCyberia.LocalDataScope['user']['main']['skill'] = {};
+
+    for (const skillKey of Object.keys(ElementsCyberia.Data.user.main.skill.keys)) {
+      indexSkillCyberiaIteration++;
+      const indexSkillCyberia = indexSkillCyberiaIteration;
+      let triggerSkillCyberia = () => null;
+      let cooldownActive = false;
+      htmls(`.main-skill-key-text-${indexSkillCyberia}`, SkillCyberiaType[skillKey].keyboard);
+
+      if (ElementsCyberia.Data.user.main.skill.keys[skillKey]) {
+        htmls(
+          `.main-skill-img-container-${indexSkillCyberia}`,
+          html` <img class="abs center main-skill-img main-skill-img-${indexSkillCyberia}" /> `,
+        );
+        s(`.main-skill-img-${indexSkillCyberia}`).src = `${getProxyPath()}assets/${
+          SkillCyberiaData[ElementsCyberia.Data.user.main.skill.keys[skillKey]].folder
+        }/${ElementsCyberia.Data.user.main.skill.keys[skillKey]}/animation.gif`;
+        triggerSkillCyberia = (e, ms, headerRender = '', type) => {
+          if (e && e.preventDefault) e.preventDefault();
+          if (ElementsCyberia.Data.user.main.life <= 0 && type !== 'dead') return;
+          if (!cooldownActive) {
+            cooldownActive = true;
+            if (type !== 'dead')
+              SocketIo.Emit('skill', {
+                status: 'create',
+                skillKey,
+              });
+            const statData = Stat.get[ElementsCyberia.Data.user.main.skill.keys[skillKey]]();
+            let currentCooldown = ms ? newInstance(ms) : newInstance(statData.cooldown);
+            s(`.main-skill-cooldown-${indexSkillCyberia}`).style.display = 'block';
+            const reduceCooldown = async () => {
+              const cooldownDisplayValue = currentCooldown / 1000;
+              htmls(
+                `.main-skill-cooldown-delay-time-text-${indexSkillCyberia}`,
+                `${headerRender}${setPad(setPad(floatRound(cooldownDisplayValue, 3), '0', 2, true), '0', 2)} s`,
+              );
+              await timer(50);
+              currentCooldown -= 50;
+              if (currentCooldown > 0) reduceCooldown();
+              else {
+                cooldownActive = false;
+                s(`.main-skill-cooldown-${indexSkillCyberia}`).style.display = 'none';
+              }
+            };
+            reduceCooldown();
+          }
+        };
+      } else {
+        htmls(`.main-skill-img-container-${indexSkillCyberia}`, '');
+      }
+
+      BtnIcon.TouchTokens[`main-skill-touch-slot-${indexSkillCyberia}`].Events[`main`] = triggerSkillCyberia;
+      Keyboard.Event['main-skill'][SkillCyberiaType[skillKey].keyboard.toLowerCase()] = triggerSkillCyberia;
+      Keyboard.Event['main-skill'][SkillCyberiaType[skillKey].keyboard.toUpperCase()] = triggerSkillCyberia;
+      ElementsCyberia.LocalDataScope['user']['main']['skill'][indexSkillCyberia] = triggerSkillCyberia;
+    }
+  },
+  renderDeadCooldown: function ({ type, id }) {
+    s(`.dead-timer-modal`).classList.remove('hide');
+    let count = 0;
+    htmls(`.dead-timer-count`, ElementsCyberia.Data[type][id].deadTime / 1000);
+    const interval = setInterval(() => {
+      count++;
+      htmls(`.dead-timer-count`, ElementsCyberia.Data[type][id].deadTime / 1000 - count);
+    }, 1000);
+    setTimeout(() => {
+      clearInterval(interval);
+      s(`.dead-timer-modal`).classList.add('hide');
+    }, ElementsCyberia.Data[type][id].deadTime);
+
+    if (ElementsCyberia.LocalDataScope[type][id].skill)
+      for (const skillKey of Object.keys(ElementsCyberia.LocalDataScope[type][id].skill)) {
+        ElementsCyberia.LocalDataScope[type][id].skill[skillKey](
+          {},
+          ElementsCyberia.Data[type][id].deadTime,
+          html`<i class="inl fa-solid fa-ban" style="color: red; top: 10px; ${borderChar(2, 'black')}"></i> <br />`,
+          'dead',
+        );
+      }
+  },
+};
+
+export { SkillCyberia };

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

@@ -0,0 +1,211 @@
+import { Account } from '../core/Account.js';
+import { Chat } from '../core/Chat.js';
+import { s4 } from '../core/CommonJs.js';
+import { LoadingAnimation } from '../core/LoadingAnimation.js';
+import { loggerFactory } from '../core/Logger.js';
+import { SocketIo } from '../core/SocketIo.js';
+import { htmls, s } from '../core/VanillaJs.js';
+import { Webhook } from '../core/Webhook.js';
+import { Slot } from './BagCyberia.js';
+import { DisplayComponent, Stat } from './CommonCyberia.js';
+import { WebhookCyberia } from './WebhookCyberia.js';
+import { ElementsCyberia } from './ElementsCyberia.js';
+import { LogInCyberia } from './LogInCyberia.js';
+import { PixiCyberia } from './PixiCyberia.js';
+import { SkillCyberia } from './SkillCyberia.js';
+import { QuestManagementCyberia } from './QuestCyberia.js';
+import { MatrixCyberia } from './MatrixCyberia.js';
+import { InteractionPanelCyberia } from './InteractionPanelCyberia.js';
+import { getProxyPath, setPath } from '../core/Router.js';
+
+const logger = loggerFactory(import.meta);
+
+const SocketIoCyberia = {
+  Init: function () {
+    return new Promise((resolve) => {
+      for (const type of Object.keys(ElementsCyberia.Data))
+        SocketIo.Event[type][s4()] = async (args) => {
+          args = JSON.parse(args[0]);
+
+          switch (type) {
+            case 'user':
+              if (args.id === SocketIo.socket.id) args.id = 'main';
+
+              break;
+
+            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;
+
+          // TODO: dynamic assets load
+
+          switch (status) {
+            case 'update-life':
+              if (!ElementsCyberia.Data[type][id]) return;
+              ElementsCyberia.Data[type][id].life = element.life;
+              PixiCyberia.updateLife({ type, id });
+              if (ElementsCyberia.Data[type][id].life <= 0 && type === 'user' && id === 'main')
+                SkillCyberia.renderDeadCooldown({ type, id });
+              break;
+            case 'update-position':
+              if (!ElementsCyberia.Data[type][id]) return;
+              ElementsCyberia.Data[type][id].x = element.x;
+              ElementsCyberia.Data[type][id].y = element.y;
+              PixiCyberia.updatePosition({ type, id });
+              break;
+            case 'update-model-user':
+              ElementsCyberia.Data[type][id].model.user = {
+                ...ElementsCyberia.Data[type][id].model.user,
+                ...element.model.user,
+              };
+              if (element.model.user.username) PixiCyberia.setUsername({ type, id });
+              break;
+            case 'update-skin-position':
+              if (!ElementsCyberia.Data[type][id]) return;
+              ElementsCyberia.Data[type][id].components.skin = element.components.skin;
+              if (args.updateStat) {
+                ElementsCyberia.Data[type][id] = Stat.set(type, ElementsCyberia.Data[type][id]);
+                PixiCyberia.setDisplayComponent({ type, id });
+              } else PixiCyberia.triggerUpdateDisplay({ type, id });
+
+              break;
+            case 'update-item':
+              {
+                if (!ElementsCyberia.Data[type][id]) return;
+                const { itemType } = args;
+                ElementsCyberia.Data[type][id].components[itemType] = element.components[itemType];
+                ElementsCyberia.Data[type][id] = Stat.set(type, ElementsCyberia.Data[type][id]);
+                PixiCyberia.setDisplayComponent({ type, id });
+              }
+              break;
+            case 'disconnect':
+              {
+                const idPanel = `action-panel-${type}-${id}`;
+                if (s(`.${idPanel}`)) InteractionPanelCyberia.PanelRender.removeActionPanel(idPanel);
+              }
+              this.disconnect({ type, id });
+              break;
+            case 'connection':
+              ElementsCyberia.Init({ type, id, element });
+              PixiCyberia.setComponents({ type, id });
+              if (type === 'user' && id === 'main' && !ElementsCyberia.Data[type][id].model.user._id)
+                await LogInCyberia();
+              if (type === 'user' || type === 'bot') {
+                PixiCyberia.setUsername({ type, id });
+              }
+              if (type === 'user' && id === 'main') {
+                if (ElementsCyberia.Data[type][id].life <= 0) SkillCyberia.renderDeadCooldown({ type, id });
+                LoadingAnimation.barLevel.append();
+                resolve();
+              }
+              break;
+            case 'email-confirmed':
+              const newUser = { ...ElementsCyberia.Data.user.main.model.user, emailConfirmed: true };
+              Account.renderVerifyEmailStatus(newUser);
+              Account.triggerUpdateEvent({ user: newUser });
+              break;
+            case 'update-coin':
+              if (type === 'user' && id === 'main') {
+                ElementsCyberia.Data[type][id].coin = element.coin;
+                Slot.coin.update({ bagId: 'cyberia-bag', type, id });
+                PixiCyberia.renderEventIcon({ type, id, displayId: 'coin' });
+              }
+              break;
+            case 'update-weapon':
+              if (type === 'user' && id === 'main') {
+                const displayId = element.id;
+                const itemType = 'weapon';
+
+                ElementsCyberia.Data[type][id][itemType].tree.push({ id: displayId });
+                if (!ElementsCyberia.Data[type][id].components[itemType].find((c) => c.displayId === displayId)) {
+                  ElementsCyberia.Data[type][id].components[itemType].push(DisplayComponent.get[displayId]());
+                }
+                Slot[itemType].update({ bagId: 'cyberia-bag', displayId, type, id });
+              }
+              break;
+            case 'update-resource':
+              if (type === 'user' && id === 'main') {
+                ElementsCyberia.Data[type][id].resource.tree = element.resource.tree;
+                ElementsCyberia.Data[type][id].components.resource = element.components.resource;
+                Slot.resource.update({ bagId: 'cyberia-bag', displayId: element.resource.id, type, id });
+              }
+              break;
+
+            case 'complete-quest':
+              {
+                if (type === 'user' && id === 'main') {
+                  const questIndex = ElementsCyberia.Data.user['main'].model.quests.findIndex(
+                    (q) => q.id === args.questId,
+                  );
+                  if (questIndex >= 0) {
+                    ElementsCyberia.Data.user['main'].model.quests[questIndex].complete = true;
+                    for (const { id } of ElementsCyberia.Data.user['main'].model.quests[questIndex]
+                      .displaySearchObjects) {
+                      Slot.questItem.update({ bagId: 'cyberia-bag', displayId: id, type: 'user', id: 'main' });
+                    }
+                  }
+                }
+              }
+              break;
+            case 'update-quantity-quest-item':
+              if (type === 'user' && id === 'main') {
+                const { questData, displayId, questIndex, itemQuestIndex } = args;
+                const currentQuestData = ElementsCyberia.Data.user.main.model.quests.find((q) => q.id === questData.id);
+                if (currentQuestData) {
+                  const interactionPanelQuestId = questData ? `interaction-panel-${questData.id}` : undefined;
+                  QuestManagementCyberia.updateQuestItemProgressDisplay({
+                    interactionPanelQuestId,
+                    displayId,
+                    questData,
+                    currentQuestDataIndex: questIndex,
+                    currentStep: currentQuestData.currentStep,
+                    searchObjectIndex: itemQuestIndex,
+                  });
+                }
+              }
+              break;
+            default:
+              break;
+          }
+        };
+      SocketIo.Event.connect[s4()] = async (reason) => {};
+      SocketIo.Event.disconnect[s4()] = async (reason) => {
+        LoadingAnimation.barLevel.clear();
+        htmls(
+          `.ssr-loading-info`,
+          html`<span style="color: white">connecting </span> ...${location.hostname.slice(-30)}`,
+        );
+        s('.ssr-background-cyberia-lore').style.display = 'block';
+        setTimeout((s('.ssr-background-cyberia-lore').style.opacity = '1'));
+        s(`.main-user-container`).style.display = 'none';
+        PixiCyberia.removeAll();
+        ElementsCyberia.removeAll();
+        Webhook.unregister();
+        WebhookCyberia.unregister();
+      };
+    });
+  },
+  changeServer: async function (options = { name: '' }) {
+    if (options && options.name) setPath('/' + options.name);
+    await MatrixCyberia.loadData();
+    LoadingAnimation.barLevel.clear();
+    await SocketIo.Init({ channels: ElementsCyberia.Data });
+    return await this.Init();
+  },
+  disconnect: async function ({ type, id }) {
+    PixiCyberia.removeElement({ type, id });
+    ElementsCyberia.remove({ type, id });
+  },
+};
+
+export { SocketIoCyberia };