@betarena/ad-engine 0.0.53 → 0.0.56

package/README.md

@@ -0,0 +1,45 @@
+<h1
+  align="left"
+  style=
+  "
+  background: black;
+  "
+>
+  <a
+    href="http://betarena.com/"
+    target="_blank"
+  >
+    <img
+      style=
+      "
+      padding: 5px;
+      background: black;
+      "
+      src="https://user-images.githubusercontent.com/20924663/148760091-dea6a851-1aa9-4dbb-ac29-59f2ce2ad493.png" alt="BetarenaLogo"
+    />
+  </a>
+</h1>
+
+[![npm version](https://badge.fury.io/js/@betarena%2Fad-engine.svg)](https://badge.fury.io/js/@betarena%2Fad-engine)
+
+## 📝 - Package Description
+
+This `pacakge` is a gateway for making use of [**Betarena**](http://betarena.com/) `Advert Engine` system.
+
+## 🚀 - Get Started
+
+```shell
+npm install @betarena/ad-engine@latest
+# OR
+# pnpm [..]
+# yarm [..]
+```
+
+### 🧪 - Local Development
+
+```shell
+pnpm run 'vite/dev/1-click/pnpm'
+```
+
+> [!IMPORTANT]
+> It is strongly recommended to use `pnpm`, for its (1) symlink capabilites and (2) better `node_modules/` management when working on other Betarena project simultanously, that depend on `scores-lib`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.53",
+	"version": "0.0.56",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -33,8 +33,8 @@
 		"build": "vite build",
 		"start": "node dist/index.js",
 		"vite/dev": "vite --host",
-		"vite/dev/1-click/npm": "npm run 'npm/link/@betarena/scores-lib' & npm run 'sass/watch' & npm run 'vite/dev'",
-		"vite/dev/1-click/pnpm": "pnpm run 'pnpm/link/@betarena/scores-lib' & pnpm run 'sass/watch' & pnpm run 'vite/dev'",
+		"vite/dev/1-click/npm": "npm run 'sass/watch' & npm run 'vite/dev'",
+		"vite/dev/1-click/pnpm": "pnpm run 'sass/watch' & pnpm run 'vite/dev'",
 		"vite/preview": "vite preview",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
 		"npm/next/@betarena/scores-lib": "npm i @betarena/scores-lib@latest",
@@ -42,6 +42,7 @@
 		"npm/link": "npm link",
 		"npm/bump+publish": "npm version patch && npm publish",
 		"sass/watch": "sass --watch src/style/app.scss src/style/app.css",
+		"pnpm/link": "pnpm link --dir . --global",
 		"pnpm/link/@betarena/scores-lib": "pnpm link --global @betarena/scores-lib"
 	},
 	"devDependencies": {

package/src/App.svelte

@@ -1,3 +1,17 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 High Order Component Overview                                                 │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+│ ➤ Status :|: 🔒 LOCKED                                                           │
+│ ➤ Author(s) :|: @migbash                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ 📝 Description                                                                   │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ Application Entrypoint                                                                       │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
 <!--
 ╭──────────────────────────────────────────────────────────────────────────────────╮
 │ 🟦 Svelte Component JS/TS                                                        │
@@ -24,8 +38,8 @@
   // │ 5. type(s) imports(s)                                                  │
   // ╰────────────────────────────────────────────────────────────────────────╯
 
-  // import AdvertEngineWidget from "./lib/Advert-Engine-Widget.svelte";
-  import AdvertInterScroller from "./lib/Advert-InterScroller.svelte";
+  import AdvertEngineWidget from './lib/Advert-Engine-Widget.svelte';
+
   // #endregion ➤ 📦 Package Imports
 
 </script>
@@ -41,8 +55,4 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-<!-- <AdvertEngineWidget /> -->
-
-<AdvertInterScroller containerSelector="#content">
-<div id="content" style="margin-inline: 20px;" class="svelte-w74u0i"><p><strong>Mallorca</strong> and <strong>Valencia </strong>will be playing against each other on Friday, November 29th, 2024, at 20:00h (UTC), in a La Liga football game in Spain, check the Mallorca vs Valencia betting tip 2024/2025 to win with your bets.</p><h4>Stadium and City where Mallorca vs Valencia will occur</h4><p>The game takes place in the small <strong>Estadi Mallorca Son Moix</strong> stadium, in the city of <strong>Palma</strong>, with a capacity for 24642 spectators, who hope to help the team to surprise in this match.</p><h4>Where to follow the live game</h4><p>At Betarena, you can find everything about the <a href="https://scores.betarena.com">match live</a>, including <strong>statistics</strong>, <strong>events</strong>, <strong>odds</strong>, and everything else that can help with your <strong>sports betting</strong>.</p><h2>Introduction to the Mallorca vs Valencia betting tip 2024/2025</h2><p>Despite the season change, the La Liga has not changed much regarding goals. Today's average goals in the competition are still similar to what was seen in the tournament's last edition. The current mark is 2.58 goals per game, which is very close to the 2.64 goals per game of the last championship.</p><h4>Mallorca last match</h4><p><strong>Mallorca</strong> comes from a <strong>win</strong> in the last match played. On that occasion the opponent was <strong>Las Palmas</strong>, in a match valid for La Liga, and the match ended <strong>2-3</strong>. Coach <strong>J. Arrasate's</strong> team lined up with this formation: 4-4-2.</p><p>Before the kick-off, the home win had odds of 2.80, which explains why it was considered to be a fairly close match.</p><p>An eye-popping performance did not accompany the victory for Mallorca. Despite this, the good appearances of <strong>Vedat Muriqi</strong> deserve mentioning. The athlete left the field as the main responsible for the positive result of the team.</p><h4>Valencia last match</h4><p>On the other hand, the <strong>visiting team</strong> arrives at this match after a <strong>victory</strong> in the last round. In a dispute valid for La Liga, Valencia, who used a 5-4-1 formation, faced the Real Betis team with a final score of <strong>4-2</strong>.</p><p>A win for the home team had odds of 2.50, which makes it clear that a close match was expected.</p><h4>Mallorca vs Valencia h2h</h4><p>Valencia was in 8th place <strong>when they last went head-to-head</strong> in La Liga against Mallorca, who was in 15th place. Valencia formed a 4-4-2 arrangement while Mallorca took to the pitch with a 5-3-2 formation.</p><p>The last time these teams met was in a <strong>La Liga</strong> themed match that took place on the 30-03-2024 during the 2023/2024 football season, it ended in a <strong>0-0 draw</strong>, a competitive one it was.</p><p>Last time a draw between these teams, what to expect now?</p><h2>Mallorca</h2><h4>La Liga leaderboard now</h4><p>Considering the home team <strong>Mallorca</strong>, standing in <strong>8th place</strong> with <strong>21 points</strong> in the La Liga competition in Spain. Their performance statistics have been such as <strong>6 wins</strong>, <strong>5 losses</strong> and, <strong>3 draws</strong>.</p><p>In the 15th round, the team has the same score as opposed to Girona who places just above in 7th place.</p><p>Mallorca will try to benefit of the home factor to get a win despite being ranked in the middle of the league table in the Spain La Liga and having no high ambitions or relegation concerns.</p><h4>Mallorca analysis</h4><p>At the end of round 14 Mallorca has a good ratio of goals made to goals conceded, with 13 goals to its credit against 12 conceded.</p><p>The average shooting on goal for the Mallorca team in the league is not the best. There are only 4 per game. This turns out to be another good indication that the team does not usually score many goals or give much work to the opposing goalkeepers.</p><p>Mallorca has a ball possession percentage of 46.07% in the league. This indicates that it is not the kind of team that shows up on the field to create play. Fans hope that something will change for the next match against Valencia and especially that the team will score more goals.</p><p>Mallorca has demonstrated their offensive prowess by scoring 13 times with 1330 attacks, while Valencia has only scored 12 times with 1091 attacks.</p><h4>Best goalscorer from Mallorca</h4><p>Until this stage of the season, in terms of individual exhibitions, the highlight is Dani Rodríguez. The Midfielder has scored 3 times in this competition and helped Mallorca avoiding adverse outcomes on several occasions.</p><h2>Valencia</h2><h4>La Liga leaderboard now</h4><p>With 10 points won, Valencia is in 18th place on the leaderboard, which leaves the team in the Relegation zone. The team's campaign so far is 2 wins against 6 losses, plus 4 draws.</p><p>This means that Espanyol team, in 19th place, is close behind in the 15th round with the same number of points.</p><h4>Valencia analysis</h4><p>Valencia, after 14 rounds, has conceded more goals than it has scored. The goals scored are in fact 12 while 19 are those conceded to opponents.</p><p>Recent games have demonstrated that Valencia is having difficulties in scoring goals, as they have recorded a low number of goals and a high number of matches where they failed to score. This suggests that their attacking play needs to be improved, with a focus on creating more quality chances.</p><p>The team does not shine in attack, with a scoring average of 1 goals per game. With these statistics against it, it can hardly count on a good result in the next away game.</p><h4>Best goalscorer from Valencia</h4><p>In the individual highlights of the team in the offensive sector, the focus falls on Hugo Duro so far in the competition. With 4 goals with his signature, the Attacker has helped his team Valencia to achieve victorious results this season.</p><h2>Now a few markets where you can get some return from your bets:</h2><h4>Goals Top Betting Tips</h4><p>It can also be interesting to bet on who will score in this match. The featured player of Mallorca is Dani Rodríguez, who has already scored 3 goals in the competition. On the other hand, the leading scorer of Valencia is Hugo Duro, he has scored in 4 opportunities.</p><p>75-90 minutes into the game is a good time to bet with most goals being made in this period.</p><p>Taking into consideration that Valencia scores an average of 0.33 goals per match when playing away, we should consider the under 2.5 betting market, especially because this team usually does not concede goals when playing out of their stadium.</p><p> Currently, at <a href="https://qg9t2.app.goo.gl/bet365_general" target="_blank" rel="noreferrer noopener">Bet365</a>, the odds for the Total Goals Under 2.5 market are quoted at 1.44.</p><h4>Corners Top Betting Tips</h4><p>The corners market can help a favorable return on your bets, the average team corners per game are 5.14 corners.</p><h4>Cards Top Betting Tips</h4><p>Highly disciplined, the teams have an average of only 4.36 yellow cards per match, when added together. In other words, the 'Under 4.5 cards' option looks like a great alternative for bettors.</p><p>On the Mallorca side, we know that it is a more aggressive team having received the red card 3 times this season, very different from Valencia who only saw the red card once. Both the red and yellow cards market can be a good bet.</p><p>This is a match with several good betting entries to have some return on sports betting.</p><p>Check other great betting tips <a href="https://scores.betarena.com/a/tag/forecasts">here</a>.</p></div>
-</AdvertInterScroller>
+<AdvertEngineWidget />

package/src/index.ts

@@ -1,5 +1,19 @@
-import AdvertEngineWidget from './lib/Advert-Engine-Widget.svelte';
-import AdvertInterScroller from './lib/Advert-InterScroller.svelte';
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Overview                                                           │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Code Format   // V.8.0                                                         │
+// │ ➤ Status        // 🔒 LOCKED                                                     │
+// │ ➤ Author(s)     // @<author>                                                     │
+// │ ➤ Maintainer(s) // @<author>                                                     │
+// │ ➤ Created on    // <date-created>                                                │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ <project> (Module)
+// │ |: <insert-module-summary-here>
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+import App from './App.svelte';
 
 let
   /**
@@ -13,18 +27,16 @@ let
 // ╰─────
 if (typeof document !== 'undefined')
   app
-    = new AdvertEngineWidget
+    = new App
     (
       {
         target: document.body,
         props:
         {
-          // authorId: 1
-          authorArticleTagIds: [1]
         }
       }
     )
   ;
 ;
-export { AdvertInterScroller };
+
 export default app;

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

@@ -42,23 +42,25 @@
 
   // import '@fontsource/roboto';
 
-  import { betarenaEndpoint } from './constants/instance.js';
+  import { removeNull } from '@betarena/scores-lib/dist/functions/func.common.js';
   import { betarenaAdEngineStore } from './_store.js';
-  import { postMod } from './utils/fetch.js';
+  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 { postMod } from './utils/fetch.js';
   import { getUserLocation } from './utils/geo.js';
-  import { removeNull } from '@betarena/scores-lib/dist/functions/func.common.js';
-  import { storeSession } from './store/session.js';
 
-  import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
   import WidgetAdGeneral from './Advert-General-Child.svelte';
+  import AdvertInterScrollerChild from './Advert-InterScroller-Child.svelte';
+  import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
   import DevInfoBox from './misc/admin/Dev-Info-Box.svelte';
 
   import '../style/app.scss';
 
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
   import type { IAdsRequestBody, IAdsResponseBody } from '@betarena/scores-lib/types/ad-engine/index.js';
   import type { GeoJsResponse } from './types/geojs.js';
-  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
 
   // #endregion ➤ 📦 Package Imports
 
@@ -126,12 +128,12 @@
      * @description
      * 📝 `Map` where, `key=ZoneId` and `value=HTMLElement`
      */
-    betarenaAdsInjectMap: Map < number, Element > = new Map(),
+    mapBetarenaAdvertStandardElement = new Map < number, Element > (),
     /**
      * @description
-     * 📝 temporary data
+     * 📝 `Map` where, `key=CreativeId` and `value=AdvertObject` (temporary)
      */
-    creativeDataMap: Map < number, AdsCreativeMain > = new Map()
+    mapCreative = new Map < number, AdsCreativeMain > ()
   ;
 
   // #endregion ➤ 📌 VARIABLES
@@ -166,13 +168,22 @@
        * @description
        * 📝 `List` of `HTMLElements` identified on `page` for a target `zone`.
        */
-      htmlElementList = document.querySelectorAll('[data-betarena-zone-id]')
+      listElementTarget = document.querySelectorAll('[data-betarena-zone-id]')
     ;
 
+    // [🐞]
+    logger
+    (
+      [
+        '🚏 checkpoint ➤ generateElementMap(..) // START',
+        `🔹 [var] ➤ listElementTarget.length ${listElementTarget.length}`
+      ]
+    );
+
     // ╭─────
-    // │ NOTE: |:| loop over elements detected as betarena elegible ads
+    // │ NOTE: |:| loop over elements detected as betarena elegible ads (global/outer)
     // ╰─────
-    for (const elem of htmlElementList)
+    for (const elem of listElementTarget)
     {
       const
         /**
@@ -184,7 +195,7 @@
 
       if (!value) continue;
 
-      betarenaAdsInjectMap.set(parseInt(value), elem);
+      mapBetarenaAdvertStandardElement.set(parseInt(value), elem);
     }
 
     return
@@ -226,39 +237,47 @@
     ;
 
     // [🐞]
-    console.log('response', response);
+    logger
+    (
+      [
+        '🚏 checkpoint ➤ injectBetarenaAds(..) // START',
+        `🔹 [var] ➤ response ${JSON.stringify(response)}`
+      ]
+    );
 
-    creativeDataMap = new Map((response as IAdsResponseBody).ads ?? []);
+    mapCreative = new Map((response as IAdsResponseBody).ads ?? []);
 
     const
       /**
        * @description
-       * 📝 `Map`
+       * 📝 `Map` where, `key=ZoneId` and `value=listCampaignId`
        */
       mapZoneIdToCampaignId = new Map ((response as IAdsResponseBody).mapZoneIdToCampaignId),
       /**
        * @description
-       * 📝 `Map`
+       * 📝 `Map` where, `key=CampaignId` and `value=listCreativeId`
        */
       mapCampaignIdToCreativeId = new Map ((response as IAdsResponseBody).mapCampaignIdToCreativeId),
       /**
        * @description
-       * 📝 `Map`
+       * 📝 `Map` where, `key=ZoneId` and `value=listAuthorId`
        */
       mapZoneToAuthorIds = new Map ((response as IAdsResponseBody).mapZoneIdToAuthorIds),
       /**
        * @description
-       * 📝 `Map`
+       * 📝 `Map` where, `key=ZoneId` and `value=listTagId`
        */
       mapZoneToTagIds = new Map ((response as IAdsResponseBody).mapZoneIdToTagIds)
     ;
 
     // ╭─────
     // │ NOTE:
-    // │ ➤ [1] loop over retrieved/fetched elements, and
-    // │ ➤ [2] inject target `ads` in specific locations
+    // │ ➤ [1] loop over retrieved/fetched elements identified in 'document',
+    // │ ➤ [2] and inject target 'ADVERTS' in target specific locations.
+    // ┣─────
+    // ┃ ZONE-ID :: 1,2,3
     // ╰─────
-    for (const [zoneId, element] of betarenaAdsInjectMap)
+    for (const [zoneId, element] of mapBetarenaAdvertStandardElement)
     {
       if (!geoLocation) continue;
 
@@ -276,55 +295,100 @@
         creativeAdData
           = removeNull
           (
-            campaignIds.map
-            (
-              x =>
-              {
-                if (mapCampaignIdToCreativeId.has(x))
+            campaignIds
+              // ╭─────
+              // │ NOTE:
+              // │ |: Filter out `campaign ids` that have no `creative ids`
+              // ╰─────
+              .filter
+              (
+                x =>
                 {
-                  const
-                    /**
-                     * @description
-                     * 📝 **creative ids**
-                     */
-                    creativeIds = mapCampaignIdToCreativeId.get(x)!
+                  if (mapCampaignIdToCreativeId.has(x))
+                    return true;
                   ;
-
-                  for (const creativeId of creativeIds)
+                  return false;
+                }
+              )
+              // ╭─────
+              // │ NOTE:
+              // │ |: Map over `campaign ids` and return `creative data`
+              // ╰─────
+              .map
+              (
+                x =>
+                {
+                // ╭─────
+                // │ NOTE:
+                // │ |: Loop over creative data and inject adverts
+                // ╰─────
+                  for (const creativeId of mapCampaignIdToCreativeId.get(x)!)
                   {
-                    if (creativeDataMap.has(creativeId))
-                      return creativeDataMap.get(creativeId);
+                    if (mapCreative.has(creativeId))
+                      return mapCreative.get(creativeId);
                     ;
                   }
                 }
-              }
-            )
+              )
           ) as AdsCreativeMain[]
       ;
 
       // [🐞]
-      // console.log('creativeAdData', creativeAdData);
-
-      for (const adData of (creativeAdData ?? []))
+      logger
+      (
+        [
+          `🔹 [var] ➤ creativeAdData.length ${creativeAdData.length}`
+        ]
+      );
+
+      // ╭─────
+      // │ NOTE:
+      // │ |: Loop over creative data and inject adverts, based on respective `zoneId`.
+      // ╰─────
+      if (zoneId == 1)
       {
-        new WidgetAdGeneral
-        (
-          {
-            target: element,
-            props:
+        for (const adData of (creativeAdData ?? []))
+          new WidgetAdGeneral
+          (
             {
-              adData
+              target: element,
+              props:
+              {
+                adData
+              }
             }
-          }
-        );
+          );
+        ;
+      }
+      else if (zoneId == 2 || zoneId == 3)
+      {
+        for (const adData of (creativeAdData ?? []))
+          new AdvertInterScrollerChild
+          (
+            {
+              target: element,
+              props:
+              {
+                instanceNode: element,
+                objectAdverData: adData
+              }
+            }
+          );
+        ;
       }
     }
 
     // ╭─────
-    // │ CHECK |:| for injection of 'global' placements ads (based on global page data)
+    // │ CHECK
+    // │ |: for case of injection of 'GLOBAL' placements for adverts,
+    // │ |: (a.k.a SLIDER / POPUP ads)
     // ╰─────
     if (authorId || authorArticleTagIds.length > 0)
     {
+      // ╭─────
+      // │ NOTE:
+      // │ |: Loop over creative data and inject adverts
+      // ╰─────
       for (const [zoneId, authorIds] of mapZoneToAuthorIds)
       {
         if (!authorId || (authorIds.length > 0 && !authorIds.includes(authorId)))
@@ -361,8 +425,8 @@
 
                     for (const creativeId of creativeIds)
                     {
-                      if (creativeDataMap.has(creativeId))
-                        return creativeDataMap.get(creativeId);
+                      if (mapCreative.has(creativeId))
+                        return mapCreative.get(creativeId);
                       ;
                     }
                   }
@@ -372,10 +436,19 @@
         ;
 
         // [🐞]
-        console.log('creativeAdData-HERE1', creativeAdData);
+        logger
+        (
+          [
+            '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-1',
+            `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`
+          ]
+        );
 
+        // ╭─────
+        // │ NOTE:
+        // │ |: Loop over creative data and inject adverts
+        // ╰─────
         for (const adData of creativeAdData)
-        {
           new WidgetAdvertSlide
           (
             {
@@ -386,9 +459,13 @@
               }
             }
           );
-        }
+        ;
       }
 
+      // ╭─────
+      // │ NOTE:
+      // │ |: Loop over creative data and inject adverts
+      // ╰─────
       for (const [zoneId, tagIds] of mapZoneToTagIds)
       {
         if (tagIds.length > 0 && authorArticleTagIds.filter(x => { return tagIds.includes(x) } ).length == 0)
@@ -425,8 +502,8 @@
 
                     for (const creativeId of creativeIds)
                     {
-                      if (creativeDataMap.has(creativeId))
-                        return creativeDataMap.get(creativeId);
+                      if (mapCreative.has(creativeId))
+                        return mapCreative.get(creativeId);
                       ;
                     }
                   }
@@ -436,10 +513,19 @@
         ;
 
         // [🐞]
-        console.log('creativeAdData-HERE2', creativeAdData);
+        logger
+        (
+          [
+            '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-2',
+            `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`
+          ]
+        );
 
+        // ╭─────
+        // │ NOTE:
+        // │ |: Loop over creative data and inject adverts
+        // ╰─────
         for (const adData of creativeAdData)
-        {
           new WidgetAdvertSlide
           (
             {
@@ -450,16 +536,34 @@
               }
             }
           );
-        }
+        ;
       }
     }
     // ╭─────
-    // │ CHECK |:| for case where no author or tag ids are present (global ads), but the ads are still fetched
+    // │ CHECK
+    // │ |: otherwise, case where NO (1) 'authorId' OR (2) 'tagIds' are present (a.k.a Global Ads),
+    // │ |: but data for ADS was still fetched (a.k.a Advert Condition was RETRIVED/HIT)
+    // │ |: inject SLIDER adverts in 'document.body'
     // ╰─────
     else
     {
-      for (const [adId, adData] of creativeDataMap)
+      // [🐞]
+      logger
+      (
+        [
+          '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-3',
+          `🔹 [var] ➤ mapCreative.length ${mapCreative.size}`
+        ]
+      );
+
+      // ╭─────
+      // │ NOTE:
+      // │ |: Loop over creative data and inject adverts
+      // ╰─────
+      for (const [, adData] of mapCreative)
       {
+        if (adData.type != 1) continue;
+
         new WidgetAdvertSlide
         (
           {
@@ -494,17 +598,25 @@
     generateElementMap();
 
     // [🐞]
-    // console.log('elements', betarenaAdsInjectMap);
-    // console.log('elements', zoneIds);
+    logger
+    (
+      [
+        '🚏 checkpoint ➤ initialize(..) // START',
+        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`
+        // `🔹 [var] ➤ zoneIds ${JSON.stringify(zoneIds)}`
+      ]
+    );
 
     injectBetarenaAds
     (
       {
         deviceType,
-        isoCountryCode: geoLocation?.country_code ?? 'EN',
+        // deviceType: 'mobile',
+        isoCountryCode: geoLocation.country_code ?? 'EN',
+        // isoCountryCode: 'BR',
         authorId,
         tagIds: authorArticleTagIds,
-        zoneIds: [...betarenaAdsInjectMap.keys()]
+        zoneIds: [...mapBetarenaAdvertStandardElement.keys()]
       }
     );
 
@@ -527,7 +639,11 @@
     async () =>
     {
       betarenaAdEngineStore.useLocalStorage();
-      await initialize();
+      // ╭─────
+      // │ NOTE:
+      // │ |: Delay initialization to ensure all elements are loaded on page
+      // ╰─────
+      setTimeout(() => { initialize(); return; }, 1000);
       return;
     }
   );
@@ -542,7 +658,6 @@
     () =>
     {
       detectDeviceType();
-      console.log(detectDeviceType());
       return;
     }
   }
@@ -565,14 +680,14 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-{#if import.meta.env.DEV}
+{#if false}
   <!--
   ╭─────
   │ [🐞]
   │ ➤ Testing Configuration(s)
   ╰─────
   -->
-  <!-- <DevInfoBox>
+  <DevInfoBox>
     <p>
       [detected] Device Type :|: {deviceType}
     </p>
@@ -580,7 +695,7 @@
       [detected] Geo-Location :|: {geoLocation?.country_code}
     </p>
     <p>
-      [detected] Page Advert Snippets Number :|: {betarenaAdsInjectMap.size}
+      [detected] Page Advert Snippets Number :|: {mapBetarenaAdvertStandardElement.size}
     </p>
     <p>
       [properties] AuthorId :|: {authorId}
@@ -589,9 +704,9 @@
       [properties] AuthorArticleTagIds :|: [{authorArticleTagIds}]
     </p>
     <p>
-      [data] Adverts Fetched Number :|: {creativeDataMap.size}
+      [data] Adverts Fetched Number :|: {mapCreative.size}
     </p>
-  </DevInfoBox> -->
+  </DevInfoBox>
 
   <!--
   ╭─────
@@ -599,17 +714,20 @@
   │ ➤ Testing Advert(s)
   ╰─────
   -->
-  <!--
-  <div
+  <!-- <div
     data-betarena-zone-id=1
   >
-  </div>
+  </div> -->
 
   <hr>
 
   <div
     data-betarena-zone-id=2
   >
+    {#each { length: 25 } as _, i}
+      <p>
+        Loren ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi id.
+      </p>
+    {/each}
   </div>
-  -->
 {/if}

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

@@ -0,0 +1,395 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 High Order Component Overview                                                 │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+│ ➤ Status :|: 🔒 LOCKED                                                           │
+│ ➤ Author(s) :|: @migbash                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ 📝 Description                                                                   │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ Betarena Ad-Engine Component - Interscroller                                     │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🟦 Svelte Component JS/TS                                                        │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ HINT: │ Access snippets for '<script> [..] </script>' those found in           │
+│         │ '.vscode/snippets.code-snippets' via intellisense using 'doc'          │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<script lang="ts">
+
+  // #region ➤ 📦 Package Imports
+
+  // ╭────────────────────────────────────────────────────────────────────────╮
+  // │ NOTE:                                                                  │
+  // │ Please add inside 'this' region the 'imports' that are required        │
+  // │ by 'this' .svelte file is ran.                                         │
+  // │ IMPORTANT                                                              │
+  // │ Please, structure the imports as follows:                              │
+  // │ 1. svelte/sveltekit imports                                            │
+  // │ 2. project-internal files and logic                                    │
+  // │ 3. component import(s)                                                 │
+  // │ 4. assets import(s)                                                    │
+  // │ 5. type(s) imports(s)                                                  │
+  // ╰────────────────────────────────────────────────────────────────────────╯
+
+  import { onMount } from 'svelte';
+
+  import { betarenaEndpoint } from './constants/instance.js';
+  import { storeAdmin } from './store/admin.js';
+  import { postMod } from './utils/fetch.js';
+
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
+
+  // #endregion ➤ 📦 Package Imports
+
+  // #region ➤ 📌 VARIABLES
+
+  // ╭────────────────────────────────────────────────────────────────────────╮
+  // │ NOTE:                                                                  │
+  // │ Please add inside 'this' region the 'variables' that are to be         │
+  // │ and are expected to be used by 'this' .svelte file / component.        │
+  // │ IMPORTANT                                                              │
+  // │ Please, structure the imports as follows:                              │
+  // │ 1. export const / let [..]                                             │
+  // │ 2. const [..]                                                          │
+  // │ 3. let [..]                                                            │
+  // │ 4. $: [..]                                                             │
+  // ╰────────────────────────────────────────────────────────────────────────╯
+
+  export let
+    /**
+     * @description
+     * 📝
+     */
+    listStrInsertAfter: [number, string] | undefined = [-1, 'p'],
+    /**
+     * @augments AdsCreativeMain
+     */
+    objectAdverData: AdsCreativeMain,
+    /**
+     * @description
+     * 📝
+     */
+    instanceNode: Element
+  ;
+
+  let
+    /**
+     * @description
+     * 📝
+     */
+    instanceAdvertInterscroller: HTMLDivElement
+  ;
+
+  // #endregion ➤ 📌 VARIABLES
+
+  // #region ➤ 🛠️ METHODS
+
+  // ╭────────────────────────────────────────────────────────────────────────╮
+  // │ NOTE:                                                                  │
+  // │ Please add inside 'this' region the 'methods' that are to be           │
+  // │ and are expected to be used by 'this' .svelte file / component.        │
+  // │ IMPORTANT                                                              │
+  // │ Please, structure the imports as follows:                              │
+  // │ 1. function (..)                                                       │
+  // │ 2. async function (..)                                                 │
+  // ╰────────────────────────────────────────────────────────────────────────╯
+
+  /**
+   * @author
+   *  @ivanzob
+   * @summary
+   *  🟦 HELPER
+   * @description
+   *  📝 Inject Advert data
+   * @return { void }
+   */
+  function injectBetarenaInterscrollerAd
+  (
+  ): void
+  {
+    if (!instanceNode) return;
+
+    const
+      // ╭─────
+      // │ NOTE: |:| Destructuring listStrInsertAfter
+      // ╰─────
+      [
+        count,
+        n
+      ] = listStrInsertAfter ?? [-1, 'p'],
+      /**
+       * @description
+       * 📝
+       */
+      insertAfterNodes
+        = instanceNode.querySelectorAll(n)
+    ;
+
+    if (!insertAfterNodes.length)
+      return;
+    ;
+
+    let
+      /**
+       * @description
+       */
+      afterNode
+    ;
+
+    if (count >= 0)
+      afterNode = insertAfterNodes[count];
+    else if (count === -1)
+      if (insertAfterNodes.length > 2)
+        afterNode
+          = insertAfterNodes
+            [
+              Math.floor
+              (
+                Math.random() * (insertAfterNodes.length - 2)
+              ) + 1
+            ]
+        ;
+      else
+        afterNode = insertAfterNodes[0];
+    ;
+
+    if (!afterNode) return;
+
+    const
+      /**
+       * @description
+       * 📝
+       */
+      pos
+        = instanceNode.getBoundingClientRect()
+    ;
+
+    instanceAdvertInterscroller.style.display = 'flex';
+    instanceAdvertInterscroller.style.left = `${-pos.left}px`;
+
+    afterNode.insertAdjacentElement
+    (
+      'afterend',
+      instanceAdvertInterscroller
+    );
+
+    return;
+  }
+
+  // #endregion ➤ 🛠️ METHODS
+
+  // #region ➤ 🔄 LIFECYCLE [SVELTE]
+
+  // ╭────────────────────────────────────────────────────────────────────────╮
+  // │ NOTE:                                                                  │
+  // │ Please add inside 'this' region the 'logic' that should run            │
+  // │ immediately and as part of the 'lifecycle' of svelteJs,                │
+  // │ as soon as 'this' .svelte file is ran.                                 │
+  // ╰────────────────────────────────────────────────────────────────────────╯
+
+  onMount
+  (
+    () =>
+    {
+      injectBetarenaInterscrollerAd();
+
+      storeAdmin.updateData
+      (
+        [
+          ['numberOfAdvertsActive', null]
+        ]
+      );
+
+      return;
+    }
+  );
+
+  // #endregion ➤ 🔄 LIFECYCLE [SVELTE]
+
+</script>
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 💠 Svelte Component HTML                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ HINT: │ Use 'Ctrl + Space' to autocomplete global class=styles, dynamically    │
+│         │ imported from './static/app.css'                                       │
+│ ➤ HINT: │ access custom Betarena Scores VScode Snippets by typing emmet-like     │
+│         │ abbrev.                                                                │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<div
+  id="inter-outer"
+  bind:this={instanceAdvertInterscroller}
+  class="interscroller-wrapper"
+  style=
+  "
+  display: none;
+  height: 100vh;
+  right: 0px;
+  width: 100vw;
+  max-width: 100vw;
+  "
+>
+  <h2 class="info-box">
+    Advertisement
+  </h2>
+
+  <div
+    id="intscdiv"
+    class="interscroller-bg-wrapper"
+    style="height: 100%; right: 0px; clip: rect(0px 100vw 100vh 0px); width: 100vw;"
+  >
+    <div
+      id="nxtads"
+      class=
+      "
+      interscroller-bg
+      "
+      style=
+      "
+      height: 100%;
+      width: 100%;
+      padding: 0px;
+      overflow: hidden;
+      text-align: center;
+      "
+    >
+      <div
+        style=
+        "
+        margin: 0px auto;
+        width: 100%;
+        height: 100%;
+        "
+      >
+        <a
+          target="_blank"
+          on:click=
+          {
+            () =>
+            {
+              postMod
+              (
+                `${betarenaEndpoint}/ad/update/click`,
+                {
+                  creativeId: objectAdverData.id
+                }
+              );
+            }
+          }
+          href={objectAdverData.data?.cta_link}
+        >
+          <img
+            alt="ad_image"
+            class="ad_image"
+            src={objectAdverData.data?.media}
+            width="100%"
+            height="100%"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="info-box">
+    Scroll to continue
+  </h2>
+</div>
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🌊 Svelte Component CSS/SCSS                                                     │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ HINT: │ auto-fill/auto-complete iniside <style> for var()                      │
+│         │ values by typing/CTRL+SPACE                                            │
+│ ➤ HINT: │ access custom Betarena Scores CSS VScode Snippets by typing 'style...' │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<style lang="scss">
+
+  /*
+  ╭──────────────────────────────────────────────────────────────────────────────╮
+  │ 📲 MOBILE-FIRST                                                              │
+  ╰──────────────────────────────────────────────────────────────────────────────╯
+  */
+
+  .info-box
+  {
+    color: var(--colors-text-text-primary-900, #fbfbfb);
+    text-align: center;
+    font-family: Roboto;
+    font-size: 12px !important;
+    font-style: normal;
+    font-weight: 700 !important;
+    line-height: 38px !important; /* 190% */
+    text-transform: uppercase;
+    width: 100%;
+    margin: 0 !important;
+    z-index: 1;
+    background: var(--colors-background-bg-secondary, #313131);
+  }
+
+  .interscroller-wrapper
+  {
+    position: relative !important;
+    cursor: pointer !important;
+    background: #ffffff !important;
+    z-index: 10000000 !important;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .interscroller-bg-wrapper
+  {
+    position: absolute !important;
+    width: 100% !important;
+    left: 0 !important;
+  }
+
+  .interscroller-bg
+  {
+    position: fixed !important;
+    height: 100% !important;
+    top: 0;
+    backface-visibility: hidden !important;
+    -webkit-backface-visibility: hidden !important;
+    border: 0 !important;
+  }
+
+  .ad_image
+  {
+    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;
+  }
+
+  /*
+  ╭──────────────────────────────────────────────────────────────────────────────╮
+  │ ⚡️ RESPONSIVNESS                                                              │
+  ╰──────────────────────────────────────────────────────────────────────────────╯
+  */
+
+  @media (min-width: 768px)
+  {
+    .info-box
+    {
+      font-size: 20px !important;
+    }
+  }
+
+</style>

package/src/lib/utils/debug.ts

@@ -0,0 +1,49 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Overview                                                           │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Code Format   // V.8.0                                                         │
+// │ ➤ Status        // 🔒 LOCKED                                                     │
+// │ ➤ Author(s)     // @migbash                                                      │
+// │ ➤ Maintainer(s) // @migbash                                                      │
+// │ ➤ Created on    // 05-12-2024                                                    │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ BETARENA (Module)
+// │ |: Debug Logic
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+/* eslint-disable new-cap */
+
+// #region 📦 Package]
+
+import chalk from 'chalk';
+
+// #endregion ➤ 📦 Package Imports
+
+/**
+ * @author
+ *  @migbash
+ * @summary
+ *  [🐞]
+ * @description
+ *  📝 Custom `console.log(..)` wrapper for general logging.
+ * @param { string[] } listMsg
+ *  💠 **[required]** The message.
+ * @return { void }
+ */
+export function logger
+(
+  listMsg: string[]
+): void
+{
+  // [🐞]
+  // eslint-disable-next-line no-console
+  console.log(chalk.hex('#FF7F50')('📦 [ad-engine] :: ─────────────────────────'));
+  for (const message of listMsg)
+    // [🐞]
+    // eslint-disable-next-line no-console
+    console.log(chalk.hex('#FF7F50')(`📦 [ad-engine] :: ${message}`));
+  ;
+  return;
+}

package/src/lib/utils/device.ts

@@ -1,3 +1,24 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Overview                                                           │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Code Format   // V.8.0                                                         │
+// │ ➤ Status        // 🔒 LOCKED                                                     │
+// │ ➤ Author(s)     // @migbash                                                      │
+// │ ➤ Maintainer(s) // @migbash                                                      │
+// │ ➤ Created on    // <date-created>                                                │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ BETARENA (Module)
+// │ |: Device Logic
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+// #region ➤ 📦 Package Imports
+
+import { logger } from './debug.js';
+
+// #endregion ➤ 📦 Package Imports
+
 /**
  * @author
  *  @migbash
@@ -27,11 +48,30 @@ export function detectDeviceType
     isUserAgentTablet = /tablet|ipad/.test(userAgentObject)
   ;
 
+  let
+    /**
+     * @description
+     * 📝 Type of device
+     */
+    strDeviceType = 'desktop'
+  ;
+
   if (isUserAgentMobile)
-    return 'mobile';
+    strDeviceType = 'mobile';
   else if (isUserAgentTablet)
-    return 'tablet';
+    strDeviceType = 'tablet';
   else
-    return 'desktop';
+    strDeviceType = 'desktop';
   ;
+
+  // [🐞]
+  logger
+  (
+    [
+      `🔹 [var] ➤ strDeviceType ${JSON.stringify(strDeviceType)}`,
+      '🚏 checkpoint ➤ detectDeviceType(..) // END'
+    ]
+  );
+
+  return strDeviceType;
 }

package/src/lib/Advert-InterScroller.svelte

@@ -1,155 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  //   import { postMod } from "./utils/fetch";
-  export let containerSelector = "#content";
-  export let insertAfter = ["random", "p"];
-  let adData = {
-    id: 0,
-    image: "",
-    link: "",
-  };
-  let targetNode;
-  let adNode: HTMLDivElement;
-
-  // Fetch ad content
-  async function fetchAd() {
-    adData = {
-      id: 1,
-      image:
-        "https://firebasestorage.googleapis.com/v0/b/betarena-ios.appspot.com/o/Betarena_Media%2Fads%2F0x1510ea733e1e81f9bcfcc4eabb5a2226d1a9f9ea18da9aea119ba28b8ed6be81%2FBRBet365ADInterscroller.png?alt=media&token=4b1ef015-2643-4834-9081-f2c763531a21",
-      link: "http://google.com",
-    };
-  }
-
-  function trackClick() {
-    // postMod(`${betarenaEndpoint}/ad/update/click`, {
-    //   creativeId: adData.id,
-    // });
-  }
-
-  onMount(async () => {
-    targetNode = document.querySelector(containerSelector);
-    await fetchAd();
-    injectAdd(targetNode);
-  });
-
-  function injectAdd(node: Element | null) {
-    if (!node) return;
-    const [count, n] = insertAfter;
-    const insertAfterNodes = node.querySelectorAll(n);
-    if (!insertAfterNodes.length) return;
-    let afterNode;
-    if (typeof count === "number") {
-      afterNode = insertAfterNodes[count];
-    }
-    if (count === "random") {
-      if (insertAfterNodes.length > 2) {
-        let randomCount =
-          Math.floor(Math.random() * (insertAfterNodes.length - 2)) + 1;
-        afterNode = insertAfterNodes[randomCount];
-      } else {
-        afterNode = insertAfterNodes[0];
-      }
-    }
-    if (!afterNode) return;
-    const pos = node.getBoundingClientRect();
-    adNode.style.display = "flex";
-    adNode.style.left = `${-pos.left}px`;
-    afterNode.insertAdjacentElement("afterend", adNode);
-    setTimeout(() => {
-      window.addEventListener("scroll", handleScroll);
-    }, 1000);
-  }
-  function handleScroll() {
-    if (!adNode) return;
-    const rect = adNode.getBoundingClientRect();
-    if (rect.bottom < 0) {
-      adNode.style.display = "none";
-      window.removeEventListener("scroll", handleScroll);
-    }
-  }
-</script>
-
-<slot />
-<div
-  id="inter-outer"
-  bind:this={adNode}
-  class="interscroller-wrapper"
-  style="display: none; height: 100vh; right: 0px; width: 100vw;"
->
-  <h2 class="info-box">Advertisement</h2>
-  <div
-    id="intscdiv"
-    class="interscroller-bg-wrapper"
-    style="height: 100%; right: 0px; clip: rect(0px 100vw 100vh 0px); width: 100vw;"
-  >
-    <div
-      id="nxtads"
-      class="interscroller-bg"
-      style="height: 100%; width: 100%; padding: 0px; overflow: hidden; text-align: center;"
-    >
-      <div
-        id="smt-130304454"
-        style="margin: 0px auto;width: 100%;height: 100%;/* position: absolute; *//* z-index: 1000000000; */"
-      >
-        <a target="_blank" on:click={trackClick} href={adData.link}>
-          <img
-          alt="ad_image"
-            src={adData.image}
-            width="100%"
-            height="100%"
-          />
-        </a>
-      </div>
-    </div>
-  </div>
-  <h2 class="info-box">Scroll to continue</h2>
-</div>
-
-<style>
-  .info-box {
-    color: var(--colors-text-text-primary-900, #fbfbfb);
-    text-align: center;
-    font-family: Roboto;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 38px; /* 190% */
-    text-transform: uppercase;
-    width: 100%;
-    margin: 0;
-    z-index: 1;
-    background: var(--colors-background-bg-primary-solid, #313131);
-  }
-  .interscroller-wrapper {
-    position: relative !important;
-    cursor: pointer !important;
-    background: #ffffff !important;
-    z-index: 10000000 !important;
-    flex-direction: column;
-    justify-content: space-between;
-    /*border-top: 2px solid #cccccc;
-      border-bottom: 2px solid #cccccc;*/
-  }
-
-  .interscroller-bg-wrapper {
-    position: absolute !important;
-    width: 100% !important;
-    left: 0 !important;
-  }
-
-  .interscroller-bg {
-    position: fixed !important;
-    height: 100% !important;
-    top: 0;
-    backface-visibility: hidden !important;
-    -webkit-backface-visibility: hidden !important;
-    border: 0 !important;
-  }
-
-  @media (min-width: 768px) {
-    .info-box {
-      font-size: 20px;
-    }
-  }
-</style>