@betarena/ad-engine 0.0.60 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.60",
+	"version": "0.0.62",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [

package/src/lib/Advert-Engine-Widget.svelte

@@ -166,7 +166,7 @@
     const
       /**
        * @description
-       * 📝 `List` of `HTMLElements` identified on `page` for a target `zone`.
+       * 📝  `List` of `HTMLElements` identified on `page` expecting a target `zone` advertisement injection.
        */
       listElementTarget = document.querySelectorAll('[data-betarena-zone-id]')
     ;
@@ -181,11 +181,11 @@
     );
 
     // ╭─────
-    // │ NOTE: |:| loop over elements detected as betarena elegible ads (global/outer)
+    // │ NOTE: |:| loop over elements detected as betarena elegible advert injection (global/outer)
     // ╰─────
     for (const elem of listElementTarget)
     {
-      const
+      let
         /**
          * @description
          * 📝 Value of Betarena Zone Id
@@ -195,9 +195,44 @@
 
       if (!value) continue;
 
-      mapBetarenaAdvertStandardElement.set(parseInt(value), elem);
+      // [🐞]
+      logger
+      (
+        [
+          `🔹 [var] ➤ value ${value}`
+        ]
+      );
+
+      if (value.includes(','))
+      {
+        const
+          /**
+           * @description
+           * 📝 Split value by `,`
+           */
+          values = value.split(',')
+        ;
+
+        for (const val of values)
+          mapBetarenaAdvertStandardElement.set(parseInt(val), elem);
+        ;
+      }
+      else
+      {
+        mapBetarenaAdvertStandardElement.set(parseInt(value), elem);
+      }
     }
 
+    // [🐞]
+    logger
+    (
+      [
+        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.keys ${[...mapBetarenaAdvertStandardElement.keys()]}`,
+        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`,
+        '🚏 checkpoint ➤ generateElementMap(..) // END'
+      ]
+    );
+
     return
   }
 
@@ -608,8 +643,8 @@
     (
       [
         '🚏 checkpoint ➤ initialize(..) // START',
-        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`
-        // `🔹 [var] ➤ zoneIds ${JSON.stringify(zoneIds)}`
+        `🔹 [var] ➤ deviceType ${deviceType}`,
+        `🔹 [var] ➤ geoLocation ${JSON.stringify(geoLocation)}`
       ]
     );
 
@@ -728,7 +763,7 @@
   <hr>
 
   <div
-    data-betarena-zone-id=2
+    data-betarena-zone-id=2,3
   >
     {#each { length: 25 } as _, i}
       <p>

package/src/lib/Advert-InterScroller-Child.svelte

@@ -234,45 +234,31 @@
 -->
 
 <div
-  id="inter-outer"
+  id='inter-outer'
   bind:this={instanceAdvertInterscroller}
-  class="interscroller-wrapper"
-  style=
-  "
-  display: none;
-  height: 100vh;
-  right: 0px;
-  width: 100vw;
-  max-width: 100vw;
-  background-color: var(--betarena-ad-engine-interscroller-advert-background-image-);
-  "
+  class=
+  '
+  interscroller-wrapper
+  '
 >
-  <h2 class="info-box">
+  <h2 class='info-box'>
     Advertisement
   </h2>
 
   <div
-    id="intscdiv"
-    class="interscroller-bg-wrapper"
-    style="height: 100%; right: 0px; clip-path: rect(0px 100vw 100vh 0px); width: 100vw;"
+    class=
+    '
+    interscroller-bg-wrapper
+    '
   >
     <div
-      id="nxtads"
       class=
-      "
+      '
       interscroller-bg
-      "
-      style=
-      "
-      height: 100%;
-      width: 100%;
-      padding: 0px;
-      overflow: hidden;
-      text-align: center;
-      "
+      '
     >
       <a
-        target="_blank"
+        target='_blank'
         on:click=
         {
           () =>
@@ -289,19 +275,19 @@
         href={objectAdverData.data?.cta_link}
       >
         <div
+          id='advert'
           style=
-          "
-          height: 100vh;
-          width: 100vw;
+          '
+          background: url({objectAdverData.data?.media});
           background-repeat: no-repeat;
-          background-size: contain;
-          "
+          background-size: 100vw 100vh;
+          '
         />
       </a>
     </div>
   </div>
 
-  <h2 class="info-box">
+  <h2 class='info-box'>
     Scroll to continue
   </h2>
 </div>
@@ -330,15 +316,24 @@
     position: relative !important;
     cursor: pointer !important;
     z-index: 10000000 !important;
+    right: 0px;
     /* 🛝 layout */
     flex-direction: column;
     justify-content: space-between;
+    display: none;
+    /* 🎨 style */
+    min-width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+    min-height: 100vh;
+    background-color: var(--betarena-ad-engine-interscroller-advert-background-image-);
 
     .info-box
     {
       /* 📌 position */
       z-index: 1;
       /* 🎨 style */
+      width: 100%;
       color: var(--colors-text-text-primary-900, #fbfbfb);
       text-align: center;
       font-family: Roboto;
@@ -347,7 +342,6 @@
       font-weight: 700 !important;
       line-height: 38px !important; /* 190% */
       text-transform: uppercase;
-      width: 100%;
       margin: 0 !important;
       background: var(--colors-background-bg-secondary, #313131);
     }
@@ -355,34 +349,47 @@
     .interscroller-bg-wrapper
     {
       /* 📌 position */
-      position: absolute !important;
-      left: 0 !important;
+      position: absolute;
+      left: 0;
+      right: 0;
       /* 🎨 style */
-      width: 100% !important;
+      width: 100vw;
+      height: 100vh;
+      clip-path: rect(0 100vw 100vh 0);
 
       .interscroller-bg
       {
         /* 📌 position */
-        position: fixed !important;
-        top: 30px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
         /* 🎨 style */
-        height: 100% !important;
-        backface-visibility: hidden !important;
-        -webkit-backface-visibility: hidden !important;
-        border: 0 !important;
-      }
+        width: 100vw;
+        height: 100vh;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+        border: 0;
+        text-align: center;
+
+        a
+        {
+          /* 🎨 style */
+          display: block;
+          width: 100vw;
+          height: 100vh;
+          text-decoration: none;
 
-      .ad_image
-      {
-        /* 🎨 style */
-        width: 100% !important;
-        height: 100% !important;
-        max-width: 100vw !important;
-        max-height: 100% !important;
-        touch-action: manipulation;
-        user-select: none;
-        -webkit-user-drag: none;
-        -webkit-touch-callout: none;
+          div#advert
+          {
+            /* 📌 position */
+            position: relative;
+            /* 🎨 style */
+            margin-top: -30px;
+            max-width: 100vw;
+            height: 100vh;
+          }
+        }
       }
     }
   }