@betarena/ad-engine 0.0.61 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.61",
+	"version": "0.0.63",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -64,7 +64,9 @@
 		"@betarena/scores-lib": "1.11.0-alpha.17",
 		"@fontsource/roboto": "5.0.12",
 		"colorthief": "2.6.0",
-		"svelte-preprocess": "5.1.3"
+		"device-detector-js": "3.0.3",
+		"svelte-preprocess": "5.1.3",
+		"ua-parser-js": "2.0.0"
 	},
 	"main": "./dist/index.js",
 	"svelte": "./src/index.js",

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

@@ -47,7 +47,7 @@
   import { betarenaEndpoint } from './constants/instance.js';
   import { storeSession } from './store/session.js';
   import { logger } from './utils/debug.js';
-  import { detectDeviceType } from './utils/device.js';
+  import { detectDeviceWithUA } from './utils/device.js';
   import { postMod } from './utils/fetch.js';
   import { getUserLocation } from './utils/geo.js';
 
@@ -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
   }
 
@@ -599,7 +634,7 @@
   (
   ): Promise < void >
   {
-    deviceType = detectDeviceType() as IDeviceType;
+    deviceType = detectDeviceWithUA() as IDeviceType;
     geoLocation = await getUserLocation();
     generateElementMap();
 
@@ -607,9 +642,7 @@
     logger
     (
       [
-        '🚏 checkpoint ➤ initialize(..) // START',
-        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`
-        // `🔹 [var] ➤ zoneIds ${JSON.stringify(zoneIds)}`
+        '🚏 checkpoint ➤ initialize(..) // START'
       ]
     );
 
@@ -663,7 +696,7 @@
   {
     () =>
     {
-      detectDeviceType();
+      detectDeviceWithUA();
       return;
     }
   }
@@ -728,7 +761,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,20 +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>
@@ -331,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;
@@ -348,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);
     }
@@ -356,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;
+          }
+        }
       }
     }
   }

package/src/lib/utils/device.ts

@@ -15,63 +15,94 @@
 
 // #region ➤ 📦 Package Imports
 
+import DeviceDetector from 'device-detector-js';
+import { UAParser } from 'ua-parser-js';
+
 import { logger } from './debug.js';
 
+import type { IDeviceType } from '@betarena/scores-lib/types/ad-engine/index.js';
+
 // #endregion ➤ 📦 Package Imports
 
 /**
  * @author
  *  @migbash
  * @summary
- *  🟥 MAIN
+ *  🟦 HELPER
  * @description
- *  📝 Detect target device type, such as: `mobile` | `tablet` | `desktop`.
- * @returns { string }
- *  📤
+ *  📝 Detect device used from `User-Agent` data.
+ * @see https://discord.com/channels/457912077277855764/1067871458233159750
+ * @see https://discord.com/channels/457912077277855764/1067529519294070885/1067827869004341319
+ * @return { string }
+ *  📤 `device` type.
  */
-export function detectDeviceType
+export function detectDeviceWithUA
 (
-): string
+): IDeviceType
 {
-  const
+  let
     /**
      * @description
+     *  📝 `device type`.
      */
-    userAgentObject = navigator.userAgent.toLowerCase(),
+    deviceType: IDeviceType = 'mobile'
+  ;
+
+  const
     /**
      * @description
+     *  📝 `user-agent` data.
+     * @example
+     * => 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+     * => [production] navigator.userAgent
      */
-    isUserAgentMobile = userAgentObject.includes('mobile'),
+    userAgent = navigator.userAgent,
     /**
      * @description
+     *  📝 Using `ua-parser-js` module.
      */
-    isUserAgentTablet = /tablet|ipad/.test(userAgentObject)
-  ;
-
-  let
+    methodRes0
+      // eslint-disable-next-line new-cap
+      = UAParser
+      (
+        userAgent
+      ),
     /**
      * @description
-     * 📝 Type of device
+     *  📝 Using 'device-detector-js' module.
      */
-    strDeviceType = 'desktop'
-  ;
-
-  if (isUserAgentMobile)
-    strDeviceType = 'mobile';
-  else if (isUserAgentTablet)
-    strDeviceType = 'tablet';
-  else
-    strDeviceType = 'desktop';
+    methodRes1
+      = new DeviceDetector().parse
+      (
+        userAgent
+      )
   ;
 
   // [🐞]
   logger
   (
     [
-      `🔹 [var] ➤ strDeviceType ${JSON.stringify(strDeviceType)}`,
-      '🚏 checkpoint ➤ detectDeviceType(..) // END'
+      `🔹 [var] ➤ userAgent ${userAgent}`,
+      // `🔹 [var] ➤ methodRes0 ${JSON.stringify(methodRes0, null, 4)}`,
+      `🔹 [var] ➤ methodRes1 ${JSON.stringify(methodRes1, null, 4)}`,
+      `🔹 [var] ➤ deviceType ${deviceType}`,
+      '🚏 checkpoint ➤ detectDeviceWithUA(..) // END'
     ]
   );
 
-  return strDeviceType;
+  // ╭─────
+  // │ NOTE:
+  // │ |: Alternative method to get device type.
+  // ╰─────
+  // deviceType = (methodRes0.device.type ?? 'mobile');
+
+  if (methodRes1.device?.type === 'smartphone')
+    deviceType = 'mobile';
+  else if (methodRes1.device?.type === 'tablet')
+    deviceType = 'tablet';
+  else
+    deviceType = 'desktop';
+  ;
+
+  return deviceType;
 }

package/src/lib/utils/geo.ts

@@ -1,5 +1,26 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Overview                                                           │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Code Format   // V.8.0                                                         │
+// │ ➤ Status        // 🔒 LOCKED                                                     │
+// │ ➤ Author(s)     // @migbash                                                      │
+// │ ➤ Maintainer(s) // @migbash                                                      │
+// │ ➤ Created on    // <date-created>                                                │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ BETARENA (Module)
+// │ |: Geo Location Logic
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+// #region ➤ 📦 Package Imports
+
+import { logger } from './debug.js';
+
 import type { GeoJsResponse } from '../types/geojs.js';
 
+// #endregion ➤ 📦 Package Imports
+
 /**
  * @author
  *  @migbash
@@ -7,7 +28,8 @@ import type { GeoJsResponse } from '../types/geojs.js';
  *  🟥 MAIN
  * @description
  *  📝 Detect user `geo-location`.
- * @returns { Promise <void> }
+ * @return { Promise < GeoJsResponse > }
+ *  📤 `geo-location` data.
  */
 export async function getUserLocation
 (
@@ -18,17 +40,29 @@ export async function getUserLocation
      * @description
      * 📝 Response from `fetch`
     */
-    response = await fetch
-    (
-      'https://get.geojs.io/v1/ip/geo.json',
-      {
-        method: 'GET'
-      }
-    )
+    dataRes0
+      = await fetch
+      (
+        'https://get.geojs.io/v1/ip/geo.json',
+        {
+          method: 'GET'
+        }
+      ),
+    /**
+     * @description
+     * 📝 Response from `fetch`
+     */
+    dataRes1 = await dataRes0.json()
   ;
 
   // [🐞]
-  // console.log('geoLocation', geoLocation);
+  logger
+  (
+    [
+      `🔹 [var] ➤ dataRes0 :: ${JSON.stringify(dataRes1, null, 4)}`,
+      '🚏 checkpoint ➤ getUserLocation(..) // END'
+    ]
+  );
 
-  return await response.json();
+  return dataRes1;
 }