cyberia 3.0.2 → 3.0.3

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/itemledger/CssItemledger.js

@@ -30,6 +30,7 @@ const CssCommonItemledger = async () => {
         --il-font-retro: 'retro-font';
         --il-font-retro-title: 'retro-font-title';
         --il-font-retro-sensitive: 'retro-font-sensitive';
+        --il-font-retro-cta: 'retro-font-cta';
       }
 
       @font-face {
@@ -44,6 +45,64 @@ const CssCommonItemledger = async () => {
         font-family: 'retro-font-sensitive';
         src: URL('${getProxyPath()}assets/fonts/VT323-Regular.ttf') format('truetype');
       }
+      @font-face {
+        font-family: 'retro-font-cta';
+        src: URL('${getProxyPath()}assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+      }
+
+      /* Landing Page & Object Viewer Styles */
+      .landing-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        width: 100%;
+        background: #000;
+        color: #fff;
+        text-align: center;
+      }
+
+      .landing-title,
+      h1,
+      h2,
+      h3 {
+        font-family: var(--il-font-retro-cta);
+        font-size: 5rem;
+        color: #24fbff;
+        text-shadow: 2px 2px 0px #127e80;
+        margin-bottom: 2rem;
+      }
+
+      p {
+        font-family: var(--il-font-retro);
+      }
+
+      .object-layer-viewer-container {
+        width: 100% !important;
+        font-family: var(--il-font-retro);
+      }
+
+      .cta-button {
+        font-family: var(--il-font-retro-cta);
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+        border: 3px solid #24fbff;
+        background: transparent;
+        color: #24fbff;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        text-shadow: 1px 1px 0px #127e80;
+      }
+
+      .cta-button:hover {
+        background: #24fbff;
+        color: #000;
+        box-shadow:
+          0 0 20px #24fbff,
+          0 0 40px #24fbff;
+        text-shadow: none;
+      }
 
       /* Base typography and smoothing */
 
@@ -86,6 +145,9 @@ const CssCommonItemledger = async () => {
       .main-btn-menu {
         font-size: 20px;
       }
+      .input-container {
+        width: 278px;
+      }
     </style>
 
     <div class="ag-grid-style"></div>`;

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

@@ -0,0 +1,29 @@
+const ModelElement = {
+  user: () => {
+    return {
+      user: {
+        _id: '',
+      },
+    };
+  },
+};
+
+const BaseElement = () => {
+  return {
+    user: {
+      main: {
+        model: {
+          ...ModelElement.user(),
+        },
+      },
+    },
+    chat: {},
+    mailer: {},
+  };
+};
+
+const UnderpostParams = {
+  EVENT_CALLBACK_TIME: 45,
+};
+
+export { BaseElement, ModelElement, UnderpostParams };

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

@@ -0,0 +1,222 @@
+import { AgGrid } from '../core/AgGrid.js';
+import { borderChar, subThemeManager } from '../core/Css.js';
+import { LoadingAnimation } from '../core/LoadingAnimation.js';
+import { Modal } from '../core/Modal.js';
+import { getProxyPath } from '../core/Router.js';
+
+const CssCommonUnderpost = async () => {
+  LoadingAnimation.img.load({
+    key: 'points',
+    src: 'assets/util/points-loading.gif',
+    classes: 'inl',
+    style: 'width: 100px; height: 100px',
+  });
+  subThemeManager.setDarkTheme('#f70808');
+  subThemeManager.setLightTheme('#aa0000');
+  Modal.labelSelectorTopOffsetEndAnimation = '-15px';
+  await AgGrid.RenderStyle({
+    eventThemeId: 'CssCommonUnderpost',
+    style: {
+      'font-family': `retro-font`,
+      'font-size': '24px',
+      'no-cell-focus-style': true,
+      'row-cursor': 'pointer',
+    },
+  });
+
+  return html`<style>
+      /* Core variables: override in each theme */
+      :root {
+        --up-font-retro: 'retro-font';
+        --up-font-retro-title: 'retro-font-title';
+        --up-font-retro-sensitive: 'retro-font-sensitive';
+        --up-font-retro-cta: 'retro-font-cta';
+      }
+
+      @font-face {
+        font-family: 'retro-font-title';
+        src: URL('${getProxyPath()}assets/fonts/EndlessBossBattleRegular-v7Ey.ttf') format('truetype');
+      }
+      @font-face {
+        font-family: 'retro-font';
+        src: URL('${getProxyPath()}assets/fonts/Pixeboy-z8XGD.ttf') format('truetype');
+      }
+      @font-face {
+        font-family: 'retro-font-sensitive';
+        src: URL('${getProxyPath()}assets/fonts/VT323-Regular.ttf') format('truetype');
+      }
+      @font-face {
+        font-family: 'retro-font-cta';
+        src: URL('${getProxyPath()}assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+      }
+
+      /* Landing Page & Object Viewer Styles */
+      .landing-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        width: 100%;
+        background: #000;
+        color: #fff;
+        text-align: center;
+      }
+
+      .landing-title,
+      h1,
+      h2,
+      h3 {
+        font-family: var(--up-font-retro-cta);
+        font-size: 5rem;
+        color: #f70808;
+        text-shadow: 2px 2px 0px #7a0404;
+        margin-bottom: 2rem;
+      }
+
+      p {
+        font-family: var(--up-font-retro);
+      }
+
+      .object-layer-viewer-container {
+        width: 100% !important;
+        font-family: var(--up-font-retro);
+      }
+
+      .cta-button {
+        font-family: var(--up-font-retro-cta);
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+        border: 3px solid #f70808;
+        background: transparent;
+        color: #f70808;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        text-shadow: 1px 1px 0px #7a0404;
+      }
+
+      .cta-button:hover {
+        background: #f70808;
+        color: #000;
+        box-shadow:
+          0 0 20px #f70808,
+          0 0 40px #f70808;
+        text-shadow: none;
+      }
+
+      /* Base typography and smoothing */
+
+      button,
+      .title-main-modal,
+      .section-mp,
+      .default-slide-menu-top-bar-fix-title-container-text {
+        font-family: var(--up-font-retro);
+      }
+
+      .default-slide-menu-top-bar-fix-title-container-text {
+        font-size: 40px !important;
+      }
+
+      .modal,
+      .badge {
+        font-family: var(--up-font-retro);
+      }
+
+      input,
+      .chat-message-body {
+        font-family: var(--up-font-retro-sensitive);
+      }
+
+      .btn-modal-default {
+        width: 35px;
+        height: 35px;
+      }
+      .handle-btn-container {
+        text-shadow: none;
+      }
+      .underpost-menu-icon {
+        width: 30px;
+        height: 30px;
+        top: -5px;
+      }
+      .underpost-menu-icon-modal {
+        top: -3px;
+        width: 30px;
+        height: 30px;
+      }
+      .underpost-text-title-modal {
+        top: -10px;
+      }
+      .main-btn-menu {
+        font-size: 20px;
+      }
+      .input-container {
+        width: 278px;
+      }
+      .public-profile-image-container,
+      .public-profile-image,
+      .creator-avatar {
+        border-radius: 0px !important;
+      }
+    </style>
+
+    <div class="ag-grid-style"></div>`;
+};
+
+const CssUnderpostDark = {
+  theme: 'underpost-dark',
+  dark: true,
+  barButtonsIconTheme: 'img',
+  render: async () => {
+    return (
+      (await CssCommonUnderpost()) +
+      html`
+        <style>
+          button:hover,
+          .a-btn:hover {
+            background: #212020;
+          }
+          .action-bar-box {
+            color: white;
+          }
+          .default-slide-menu-top-bar-fix-title-container-text {
+            font-size: 40px !important;
+            color: black !important;
+          }
+        </style>
+        ${borderChar(2, `#f70808`, ['.default-slide-menu-top-bar-fix-title-container-text'])}
+      `
+    );
+  },
+};
+
+const CssUnderpostLight = {
+  theme: 'underpost-light',
+  dark: false,
+  barButtonsIconTheme: 'img',
+  render: async () => {
+    return (
+      (await CssCommonUnderpost()) +
+      html`
+        <style>
+          button:hover,
+          .a-btn:hover {
+            background: #d8d8d8;
+          }
+
+          .action-bar-box {
+            color: black;
+          }
+          .default-slide-menu-top-bar-fix-title-container-text {
+            font-size: 40px !important;
+            color: white !important;
+          }
+        </style>
+        ${borderChar(1, `#010101`, ['.default-slide-menu-top-bar-fix-title-container-text'])}
+        ${borderChar(1, `#010101`, ['button', '.a-btn'], true)}
+      `
+    );
+  },
+};
+
+export { CssUnderpostDark, CssCommonUnderpost, CssUnderpostLight };