cyberia 2.8.885

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

@@ -0,0 +1,160 @@
+import { borderChar, renderCssAttr } from '../core/Css.js';
+import { getProxyPath } from '../core/Router.js';
+
+const MapCyberia = {
+  Render: async function () {
+    const renderZoneLegendInfo = ({ name, color, imgPath, left, top, style }) => {
+      return html`
+        <div
+          class="abs map-faction-symbol-container"
+          style="${renderCssAttr({
+            style: {
+              left,
+              top,
+              border: `2px solid ${color}`,
+              ...(style ? style : {}),
+            },
+          })}"
+        >
+          ${imgPath ? html`<img class="inl map-faction-symbol-img" src="${getProxyPath()}${imgPath}" />` : ''}
+          <span class="inl map-text-shadow-${color}" ${imgPath ? html`style="top: -10px"` : ''}> ${name}</span>
+        </div>
+      `;
+    };
+    return html`
+      <style>
+        .map-modal-universe-background-image {
+          width: 100%;
+          height: auto;
+          min-width: 350px;
+          max-width: 600px;
+          /* height: 100%;
+          object-fit: cover; */
+        }
+        .map-faction-symbol-container {
+          border-radius: 10px;
+          opacity: 0.7;
+          color: black;
+          font-size: 12px;
+          filter: contrast(130%);
+          min-width: 100px;
+          padding: 4px;
+          min-height: 60px;
+        }
+        .map-faction-symbol-img {
+          width: 35px;
+          height: 35px;
+        }
+        .blink-current-universe-position-container {
+          width: 35px;
+          height: 35px;
+        }
+        .blink-current-universe-position {
+          animation: blink-current-universe-position 1s infinite;
+          transition: 1s;
+        }
+        @keyframes blink-current-universe-position {
+          0% {
+            width: 35px;
+            height: 35px;
+          }
+          50% {
+            width: 25px;
+            height: 25px;
+          }
+          100% {
+            width: 35px;
+            height: 35px;
+          }
+        }
+      </style>
+      ${borderChar(1, 'red', ['.map-text-shadow-red'])} ${borderChar(1, 'yellow', ['.map-text-shadow-yellow'])}
+      ${borderChar(1, 'blue', ['.map-text-shadow-blue'])} ${borderChar(1, 'white', ['.map-text-shadow-white'])}
+      <div class="in map-modal-universe-background-image">
+        <img class="in map-modal-universe-background-image" src="${getProxyPath()}assets/lore/universe/_0.jpeg" />
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/zenith-empire.jpeg',
+          name: 'Zenith Empire',
+          color: 'red',
+          left: '5%',
+          top: '38%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/zenith-empire.jpeg',
+          name: 'Zenith Empire',
+          color: 'red',
+          left: '56%',
+          top: '22%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/atlas-confederation.jpeg',
+          name: 'Atlas Confederation',
+          color: 'yellow',
+          left: '13%',
+          top: '64%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/atlas-confederation.jpeg',
+          name: 'Atlas Confederation',
+          color: 'yellow',
+          left: '14%',
+          top: '11%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/nova-republic.jpeg',
+          name: 'Nova Republic',
+          color: 'blue',
+          left: '48%',
+          top: '6%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/zenith-empire.jpeg',
+          name: 'Zenith Empire',
+          color: 'red',
+          left: '42%',
+          top: '76%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/nova-republic.jpeg',
+          name: 'Nova Republic',
+          color: 'blue',
+          left: '67%',
+          top: '63%',
+        })}
+        ${renderZoneLegendInfo({
+          imgPath: 'assets/lore/macro-factions/atlas-confederation.jpeg',
+          name: 'Atlas Confederation',
+          color: 'yellow',
+          left: '37%',
+          top: '51%',
+        })}
+        ${renderZoneLegendInfo({
+          name: 'Seed City',
+          color: 'white',
+          left: '50%',
+          top: '61%',
+          style: {
+            'min-width': '0px',
+            'min-height': '0px',
+          },
+        })}
+        <div
+          class="abs blink-current-universe-position-container"
+          style="${renderCssAttr({
+            style: {
+              top: '61%',
+              left: '45%',
+            },
+          })}"
+        >
+          <img
+            src="${getProxyPath()}/assets/ui-icons/fullscreen.png"
+            class="abs center blink-current-universe-position"
+          />
+        </div>
+      </div>
+    `;
+  },
+};
+
+export { MapCyberia };

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

@@ -0,0 +1,147 @@
+import { CoreService } from '../../services/core/core.service.js';
+import { CyberiaBiomeService } from '../../services/cyberia-biome/cyberia-biome.service.js';
+import { range } from '../core/CommonJs.js';
+import { Responsive } from '../core/Responsive.js';
+import { append, s } from '../core/VanillaJs.js';
+import { loadDefaultResources, QuestComponent } from './CommonCyberia.js';
+import { ElementsCyberia } from './ElementsCyberia.js';
+import { getProxyPath } from '../core/Router.js';
+const MatrixCyberia = {
+  Data: {},
+  loadData: async function () {
+    const { data } = await CyberiaBiomeService.get({ id: 'matrix-params' });
+    MatrixCyberia.Data = {
+      dim: 16 * 2,
+      dimPaintByCell: 3,
+      dimAmplitude: 3, // 8,
+      ...data,
+    };
+
+    loadDefaultResources();
+
+    for (const questId of Object.keys(QuestComponent.Data))
+      await QuestComponent.loadMediaQuestComponents({
+        id: questId,
+        ...QuestComponent.Data[questId](),
+      });
+
+    for (const questData of QuestComponent.defaultQuests) // data.quests
+      if (questData.sagaId)
+        await QuestComponent.loadMediaQuestComponents({
+          ...questData,
+          ...JSON.parse(
+            await CoreService.getRaw({
+              url: `${getProxyPath()}assets/ai-resources/lore/${questData.sagaId}/quests/${questData.id}.json`,
+            }),
+          ),
+        });
+
+    if (!s(`.map-name-icon-container`)) append('body', html`<div class="abs map-name-icon-container"></div>`);
+  },
+  Render: async function () {
+    let start;
+    const frame = (timeStamp) => {
+      if (start === undefined || timeStamp - start >= 35) {
+        start = timeStamp;
+        this.UpdateAllCamera();
+      }
+
+      requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+    Responsive.orientationEvent['matrix-cyberia'] = MatrixCyberia.UpdateAllCamera;
+    Responsive.orientationDelayEvent['matrix-cyberia'] = MatrixCyberia.UpdateAllCamera;
+  },
+  UpdateAllCamera: async function (options = { type: 'user', id: 'main' }) {
+    const { type, id } = options;
+    MatrixCyberia.UpdateCamera('.pixi-canvas', ElementsCyberia.Data[type][id], true);
+    MatrixCyberia.UpdateCamera('.pixi-canvas-top-level', ElementsCyberia.Data[type][id], true);
+    MatrixCyberia.UpdateCamera('.PointAndClickMovementCyberia-container', ElementsCyberia.Data[type][id]);
+  },
+  UpdateAdjacentLimit: function (params) {
+    const { leftDimValue, topDimValue, ResponsiveDataAmplitude } = params;
+    for (const limitType of [
+      'top',
+      'bottom',
+      'left',
+      'right',
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+    ]) {
+      switch (limitType) {
+        case 'top':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue - ResponsiveDataAmplitude.minValue}px`;
+          break;
+        case 'bottom':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue + ResponsiveDataAmplitude.minValue}px`;
+          break;
+        case 'left':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue - ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue}px`;
+          break;
+        case 'right':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue + ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue}px`;
+          break;
+        case 'top-left':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue - ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue - ResponsiveDataAmplitude.minValue}px`;
+          break;
+        case 'top-right':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue + ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue - ResponsiveDataAmplitude.minValue}px`;
+          break;
+        case 'bottom-left':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue - ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue + ResponsiveDataAmplitude.minValue}px`;
+          break;
+        case 'bottom-right':
+          s(`.adjacent-map-limit-${limitType}`).style.left = `${leftDimValue + ResponsiveDataAmplitude.minValue}px`;
+          s(`.adjacent-map-limit-${limitType}`).style.top = `${topDimValue + ResponsiveDataAmplitude.minValue}px`;
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  UpdateCamera: async function (gridId, element, adjacent = false) {
+    const ResponsiveData = Responsive.getResponsiveData();
+    const ResponsiveDataAmplitude = Responsive.getResponsiveDataAmplitude({ dimAmplitude: this.Data.dimAmplitude });
+    const { x, y } = element;
+    let leftDimValue, topDimValue;
+    if (ResponsiveData.minType === 'height') {
+      leftDimValue =
+        ResponsiveData.maxValue / 2 -
+        (ResponsiveDataAmplitude.minValue / this.Data.dim) * x -
+        ResponsiveDataAmplitude.minValue / this.Data.dim / 2 +
+        (ResponsiveDataAmplitude.minValue / this.Data.dim / 2) * (1 - element.dim);
+      topDimValue =
+        ResponsiveData.minValue / 2 -
+        (ResponsiveDataAmplitude.minValue / this.Data.dim) * y -
+        ResponsiveDataAmplitude.minValue / this.Data.dim / 2 +
+        (ResponsiveDataAmplitude.minValue / this.Data.dim / 2) * (1 - element.dim);
+    } else {
+      leftDimValue =
+        ResponsiveData.minValue / 2 -
+        (ResponsiveDataAmplitude.minValue / this.Data.dim) * x -
+        ResponsiveDataAmplitude.minValue / this.Data.dim / 2 +
+        (ResponsiveDataAmplitude.minValue / this.Data.dim / 2) * (1 - element.dim);
+      topDimValue =
+        ResponsiveData.maxValue / 2 -
+        (ResponsiveDataAmplitude.minValue / this.Data.dim) * y -
+        ResponsiveDataAmplitude.minValue / this.Data.dim / 2 +
+        (ResponsiveDataAmplitude.minValue / this.Data.dim / 2) * (1 - element.dim);
+    }
+    if (s(gridId)) {
+      s(gridId).style.left = `${leftDimValue}px`;
+      s(gridId).style.top = `${topDimValue}px`;
+      if (adjacent) this.UpdateAdjacentLimit({ gridId, leftDimValue, topDimValue, ResponsiveDataAmplitude });
+    }
+  },
+};
+
+export { MatrixCyberia };