@betarena/ad-engine 0.3.3 → 1.0.0

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

@@ -22,7 +22,6 @@
 -->
 
 <script lang="ts">
-
   // #region ➤ 📦 Package Imports
 
   // ╭────────────────────────────────────────────────────────────────────────╮
@@ -38,27 +37,27 @@
   // │ 5. type(s) imports(s)                                                  │
   // ╰────────────────────────────────────────────────────────────────────────╯
 
-  import { onDestroy, onMount, SvelteComponent } from 'svelte';
+  import { onDestroy, onMount, SvelteComponent } from "svelte";
   // import '@fontsource/roboto';
 
-  import { ServiceAdEngine } from '@betarena/scores-lib/dist/classes/_service.adengine.js';
-  import { removeNull } from '@betarena/scores-lib/dist/util/common.js';
-  import { betarenaAdEngineStore } from './_store.js';
-  import { betarenaEndpoint } from './constants/instance.js';
-  import { storeSession } from './store/session.js';
-  import { logger } from './utils/debug.js';
-  import { detectDeviceWithUA } from './utils/device.js';
-  import { getUserLocation } from './utils/geo.js';
-
-  import WidgetAdGeneral from './Advert-General-Child.svelte';
-  import AdvertInterScrollerChild from './Advert-InterScroller-Child.svelte';
-  import AdvertLeftSide from './Advert-LeftSide-Child.svelte';
-  import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
-  import DevInfoBox from './misc/admin/Dev-Info-Box.svelte';
-
-  import type { IAdsServiceData } from '@betarena/scores-lib/types/ad-engine/index.js';
-  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0.js';
-  import type { GeoJsResponse } from './types/geojs.js';
+  import { ServiceAdEngine } from "@betarena/scores-lib/dist/classes/_service.adengine.js";
+  import { removeNull } from "@betarena/scores-lib/dist/util/common.js";
+  import { betarenaAdEngineStore } from "./_store.js";
+  import { betarenaEndpoint } from "./constants/instance.js";
+  import { storeSession } from "./store/session.js";
+  import { logger } from "./utils/debug.js";
+  import { detectDeviceWithUA } from "./utils/device.js";
+  import { getUserLocation } from "./utils/geo.js";
+
+  import WidgetAdGeneral from "./Advert-General-Child.svelte";
+  import AdvertInterScrollerChild from "./Advert-InterScroller-Child.svelte";
+  import AdvertLeftSide from "./Advert-LeftSide-Child.svelte";
+  import WidgetAdvertSlide from "./Advert-Slide-Child.svelte";
+  import DevInfoBox from "./misc/admin/Dev-Info-Box.svelte";
+
+  import type { IAdsServiceData } from "@betarena/scores-lib/types/ad-engine/index.js";
+  import type { AdsCreativeMain } from "@betarena/scores-lib/types/v8/_HASURA-0.js";
+  import type { GeoJsResponse } from "./types/geojs.js";
 
   // #endregion ➤ 📦 Package Imports
 
@@ -76,8 +75,7 @@
   // │ 4. $: [..]                                                             │
   // ╰────────────────────────────────────────────────────────────────────────╯
 
-  export let
-    /**
+  export let /**
      * @description
      * 📝 Width device change onset number
      */
@@ -94,27 +92,21 @@
     authorArticleTagIds: number[] = [],
     /**
      * @description
-     * 📝 Dark theme value
+     * 📝 Logged-in users should bypass the initial global slider delay.
      */
-    isDarkTheme: boolean = false,
+    isLoggedIn = false,
     /**
      * @description
      * 📝 Translation target
      */
-    strTranslationTarget = 'en',
-    /**
-     * @description
-     * 📝 Condition for testing
-     */
-    isStandalone = true,
+    strTranslationTarget = "en",
     /**
      * @description
      * 📝 Signal from the host that the current page is an article page.
      * Zone 1 body-mounted ads (slider/popup) must only inject when this is `true`.
      * Defaults to `false` so the widget fails closed on non-article pages.
      */
-    isArticlePage: boolean = false
-  ;
+    isArticlePage: boolean = false;
 
   // Retained as a supported public prop for API compatibility.
   // Device detection is UA-based; this value is not consumed internally.
@@ -124,20 +116,13 @@
    * @description
    * 📝 Component Local Interface
    */
-  type IDeviceType =
-    | 'desktop'
-    | 'tablet'
-    | 'mobile'
-  ;
-
-  $: $storeSession.isDarkTheme = isDarkTheme;
+  type IDeviceType = "desktop" | "tablet" | "mobile";
 
-  let
-    /**
+  let /**
      * @description
      * 📝 device type detected
      */
-    deviceType: IDeviceType = 'desktop',
+    deviceType: IDeviceType = "desktop",
     /**
      * @description
      * 📝 geo-location response
@@ -147,24 +132,24 @@
      * @description
      * 📝 `Map` where, `key=ZoneId` and `value=HTMLElement`
      */
-    mapBetarenaAdvertStandardElement = new Map < number, Element > (),
+    mapBetarenaAdvertStandardElement = new Map<number, Element>(),
     /**
      * @description
      * 📝 `Map` where, `key=CreativeId` and `value=AdvertObject` (temporary)
      */
-    mapCreative = new Map < number, AdsCreativeMain > (),
+    mapCreative = new Map<number, AdsCreativeMain>(),
     /**
      * @description
      * 📝 Shared promise for one-time prerequisite initialization (device type + geolocation).
      * Set on first call to `ensureReady()`; subsequent callers await the same promise.
      */
-    readinessPromise: Promise < void > | null = null,
+    readinessPromise: Promise<void> | null = null,
     /**
      * @description
      * 📝 ID of the deferred `initialize()` timeout, used to cancel it if the component
      * is destroyed before the delay elapses.
      */
-    initTimeoutId: ReturnType < typeof setTimeout > | null = null,
+    initTimeoutId: ReturnType<typeof setTimeout> | null = null,
     /**
      * @description
      * 📝 Set to `true` once `onDestroy` fires, so any in-flight async work can bail out.
@@ -181,17 +166,12 @@
      * 📝 Previous value of `window.betarenaAdEngine` saved before this instance assigns it,
      * so it can be restored on destroy instead of unconditionally deleting.
      */
-    prevWindowApi: unknown = undefined
-  ;
-
-  const
-    /**
+    prevWindowApi: unknown = undefined;
+  const /**
      * @description
      * 📝 `List` of dynamically created advert components (to be destroyed on cleanup)
      */
-    listAdWidgetElements: SvelteComponent[] = []
-  ;
-
+    listAdWidgetElements: SvelteComponent[] = [];
   // #endregion ➤ 📌 VARIABLES
 
   // #region ➤ 🛠️ METHODS
@@ -215,40 +195,30 @@
    * 📝 `Map` generation for `HTMLElements`.
    * @returns { void }
    */
-  function generateElementMap
-  (
-    rootElement?: ParentNode
-  ): void
-  {
+  function generateElementMap(rootElement?: ParentNode): void {
     mapBetarenaAdvertStandardElement.clear();
 
-    const
-      /**
+    const /**
        * @description
        * 📝  `List` of `HTMLElements` identified on `page` expecting a target `zone` advertisement injection.
        */
-      listElementTarget = (rootElement ?? document).querySelectorAll('[data-betarena-zone-id]')
-    ;
-
+      listElementTarget = (rootElement ?? document).querySelectorAll(
+        "[data-betarena-zone-id]",
+      );
     // ╭─────
     // │ NOTE:
     // │ |: querySelectorAll only returns descendants — if rootElement itself carries
     // │ |:   the zone attribute it would be missed. Include it explicitly.
     // ╰─────
-    if (rootElement instanceof Element && rootElement.hasAttribute('data-betarena-zone-id'))
-    {
-      const
-        value = rootElement.getAttribute('data-betarena-zone-id')
-      ;
-
-      if (value)
-      {
-        for (const rawToken of value.split(','))
-        {
-          const
-            token = rawToken.trim(),
-            id = Number.parseInt(token, 10)
-          ;
+    if (
+      rootElement instanceof Element &&
+      rootElement.hasAttribute("data-betarena-zone-id")
+    ) {
+      const value = rootElement.getAttribute("data-betarena-zone-id");
+      if (value) {
+        for (const rawToken of value.split(",")) {
+          const token = rawToken.trim(),
+            id = Number.parseInt(token, 10);
           if (!token || !Number.isFinite(id)) continue;
           mapBetarenaAdvertStandardElement.set(id, rootElement);
         }
@@ -256,59 +226,41 @@
     }
 
     // [🐞]
-    logger
-    (
-      [
-        '🚏 checkpoint ➤ generateElementMap(..) // START',
-        `🔹 [var] ➤ listElementTarget.length ${listElementTarget.length}`
-      ]
-    );
+    logger([
+      "🚏 checkpoint ➤ generateElementMap(..) // START",
+      `🔹 [var] ➤ listElementTarget.length ${listElementTarget.length}`,
+    ]);
 
     // ╭─────
     // │ NOTE: |:| loop over elements detected as betarena elegible advert injection (global/outer)
     // ╰─────
-    for (const elem of listElementTarget)
-    {
-      let
-        /**
+    for (const elem of listElementTarget) {
+      let /**
          * @description
          * 📝 Value of Betarena Zone Id
          */
-        value = elem.attributes.getNamedItem('data-betarena-zone-id')?.value
-      ;
-
+        value = elem.attributes.getNamedItem("data-betarena-zone-id")?.value;
       if (!value) continue;
 
       // [🐞]
-      logger
-      (
-        [
-          `🔹 [var] ➤ value ${value}`
-        ]
-      );
+      logger([`🔹 [var] ➤ value ${value}`]);
 
-      for (const rawToken of value.split(','))
-      {
-        const
-          token = rawToken.trim(),
-          id = Number.parseInt(token, 10)
-        ;
+      for (const rawToken of value.split(",")) {
+        const token = rawToken.trim(),
+          id = Number.parseInt(token, 10);
         if (!token || !Number.isFinite(id)) continue;
         mapBetarenaAdvertStandardElement.set(id, elem);
       }
     }
 
     // [🐞]
-    logger
-    (
-      [
-        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.keys ${[...mapBetarenaAdvertStandardElement.keys()]}`,
-        `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`,
-        '🚏 checkpoint ➤ generateElementMap(..) // END'
-      ]
-    );
+    logger([
+      `🔹 [var] ➤ mapBetarenaAdvertStandardElement.keys ${[...mapBetarenaAdvertStandardElement.keys()]}`,
+      `🔹 [var] ➤ mapBetarenaAdvertStandardElement.size ${mapBetarenaAdvertStandardElement.size}`,
+      "🚏 checkpoint ➤ generateElementMap(..) // END",
+    ]);
 
-    return
+    return;
   }
 
   /**
@@ -322,97 +274,70 @@
    *  💠 **[required]** `list` of zone ids
    * @returns { Promise < void > }
    */
-  async function injectBetarenaAds
-  (
-    opts: IAdsServiceData['request']['body'],
+  async function injectBetarenaAds(
+    opts: IAdsServiceData["request"]["body"],
     includesGlobalZone: boolean,
-    refreshToken: number
-  ): Promise < void >
-  {
+    refreshToken: number,
+  ): Promise<void> {
     if (!document) return;
 
-    const
-      /**
+    const /**
        * @description
        * 📝 Response from `fetch`
        */
-      dataRes0
-        = await new ServiceAdEngine
-        (
-          betarenaEndpoint
-        ).getAdEngineData
-        (
-          {
-            query: {},
-            body: opts
-          }
-        ),
+      dataRes0 = await new ServiceAdEngine(betarenaEndpoint).getAdEngineData({
+        query: {},
+        body: opts,
+      }),
       /**
        * @description
        * 📝 Response from `fetch`
        */
-      dataRes1
-        = await new ServiceAdEngine
-        (
-          betarenaEndpoint
-        ).getAdEgnineTranslationData
-        (
-          {
-            query: {
-              language: strTranslationTarget
-            },
-            body: {}
-          }
-        )
-    ;
-
+      dataRes1 = await new ServiceAdEngine(
+        betarenaEndpoint,
+      ).getAdEgnineTranslationData({
+        query: {
+          language: strTranslationTarget,
+        },
+        body: {},
+      });
     // [🐞]
-    logger
-    (
-      [
-        '🚏 checkpoint ➤ injectBetarenaAds(..) // START',
-        `🔹 [var] ➤ dataRes0 ${JSON.stringify(dataRes0)}`,
-        `🔹 [var] ➤ dataRes1 ${JSON.stringify(dataRes1)}`
-      ]
-    );
+    logger([
+      "🚏 checkpoint ➤ injectBetarenaAds(..) // START",
+      `🔹 [var] ➤ dataRes0 ${JSON.stringify(dataRes0)}`,
+      `🔹 [var] ➤ dataRes1 ${JSON.stringify(dataRes1)}`,
+    ]);
 
     if (isDestroyed || refreshToken !== refreshSerial) return;
 
-    storeSession.updateData
-    (
-      [
-        [
-          'setTranslation',
-          dataRes1.success.data
-        ]
-      ]
-    );
+    storeSession.updateData([["setTranslation", dataRes1.success.data]]);
 
     mapCreative = new Map(dataRes0.success.data.ads ?? []);
 
-    const
-      /**
+    const /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listCampaignId`
        */
-      mapZoneIdToCampaignId = new Map (dataRes0.success.data.mapZoneIdToCampaignId),
+      mapZoneIdToCampaignId = new Map(
+        dataRes0.success.data.mapZoneIdToCampaignId,
+      ),
       /**
        * @description
        * 📝 `Map` where, `key=CampaignId` and `value=listCreativeId`
        */
-      mapCampaignIdToCreativeId = new Map (dataRes0.success.data.mapCampaignIdToCreativeId),
+      mapCampaignIdToCreativeId = new Map(
+        dataRes0.success.data.mapCampaignIdToCreativeId,
+      ),
       /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listAuthorId`
        */
-      mapZoneToAuthorIds = new Map (dataRes0.success.data.mapZoneIdToAuthorIds),
+      mapZoneToAuthorIds = new Map(dataRes0.success.data.mapZoneIdToAuthorIds),
       /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listTagId`
        */
-      mapZoneToTagIds = new Map (dataRes0.success.data.mapZoneIdToTagIds)
-    ;
-
+      mapZoneToTagIds = new Map(dataRes0.success.data.mapZoneIdToTagIds);
     // ╭──────────────────────────────────────────────────────────────────────────────────╮
     // │ 💠 │ STEP :: ADVERT INJECTION                                                    │
     // ╰──────────────────────────────────────────────────────────────────────────────────╯
@@ -424,161 +349,118 @@
     // ┣─────
     // ┃ ZONE-ID :: 1,2,3,4
     // ╰─────
-    for (const [zoneId, element] of mapBetarenaAdvertStandardElement)
-    {
-      const
-        el = element as HTMLElement,
+    for (const [zoneId, element] of mapBetarenaAdvertStandardElement) {
+      const el = element as HTMLElement,
         parent = el.parentElement as HTMLElement | null,
-        mountedAttr =
-        [
+        mountedAttr = [
           el.dataset.betarenaAdMounted,
-          parent?.dataset?.betarenaAdMounted
-        ].filter(Boolean).join(','),
-        mountedZones = mountedAttr.split(',').map(z => z.trim()).filter(Boolean)
-      ;
+          parent?.dataset?.betarenaAdMounted,
+        ]
+          .filter(Boolean)
+          .join(","),
+        mountedZones = mountedAttr
+          .split(",")
+          .map((z) => z.trim())
+          .filter(Boolean);
       if (mountedZones.includes(String(zoneId))) continue;
 
-      const
-        /**
+      const /**
          * @description
          * 📝 **campaign ids** of respective **zone id**
          */
-        campaignIds
-          = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+        campaignIds = mapZoneIdToCampaignId.get(zoneId) ?? [],
         /**
          * @description
          * 📝 `List` of creative data point(s)
          */
-        creativeAdData
-          = removeNull
-          (
-            campaignIds
-              // ╭─────
-              // │ NOTE:
-              // │ |: Filter out `campaign ids` that have no `creative ids`
-              // ╰─────
-              .filter
-              (
-                x =>
-                {
-                  if (mapCampaignIdToCreativeId.has(x))
-                    return true;
-                  ;
-                  return false;
-                }
-              )
+        creativeAdData = removeNull(
+          campaignIds
+            // ╭─────
+            // │ NOTE:
+            // │ |: Filter out `campaign ids` that have no `creative ids`
+            // ╰─────
+            .filter((x) => {
+              if (mapCampaignIdToCreativeId.has(x)) return true;
+              return false;
+            })
+            // ╭─────
+            // │ NOTE:
+            // │ |: Map over `campaign ids` and return `creative data`
+            // ╰─────
+            .map((x) => {
               // ╭─────
               // │ NOTE:
-              // │ |: Map over `campaign ids` and return `creative data`
+              // │ |: Loop over creative data and inject adverts
               // ╰─────
-              .map
-              (
-                x =>
-                {
-                // ╭─────
-                // │ NOTE:
-                // │ |: Loop over creative data and inject adverts
-                // ╰─────
-                  for (const creativeId of mapCampaignIdToCreativeId.get(x)!)
-                  {
-                    if (mapCreative.has(creativeId))
-                      return mapCreative.get(creativeId);
-                    ;
-                  }
-                }
-              )
-          ) as AdsCreativeMain[]
-      ;
-
+              for (const creativeId of mapCampaignIdToCreativeId.get(x)!) {
+                if (mapCreative.has(creativeId))
+                  return mapCreative.get(creativeId);
+              }
+            }),
+        ) as AdsCreativeMain[];
       // [🐞]
-      logger
-      (
-        [
-          `🔹 [var] ➤ creativeAdData.length ${creativeAdData.length}`
-        ]
-      );
+      logger([`🔹 [var] ➤ creativeAdData.length ${creativeAdData.length}`]);
 
       // ╭─────
       // │ NOTE:
       // │ |: Loop over creative data and inject adverts, based on respective `zoneId`.
       // ╰─────
-      if (zoneId == 1)
-      {
-        for (const adData of (creativeAdData ?? []))
-          new WidgetAdGeneral
-          (
-            {
-              target: element,
-              props:
-              {
-                adData
-              }
-            }
-          );
-        ;
-        if (creativeAdData.length > 0)
-        {
+      if (zoneId == 1) {
+        for (const adData of creativeAdData ?? [])
+          new WidgetAdGeneral({
+            target: element,
+            props: {
+              adData,
+            },
+          });
+        if (creativeAdData.length > 0) {
           mountedZones.push(String(zoneId));
-          el.dataset.betarenaAdMounted = mountedZones.join(',');
+          el.dataset.betarenaAdMounted = mountedZones.join(",");
         }
-      }
-      else if (zoneId == 2 || zoneId == 3)
-      {
-        for (const adData of (creativeAdData ?? []))
-          new AdvertInterScrollerChild
-          (
-            {
-              target: element,
-              props:
-              {
-                instanceNode: element,
-                objectAdvertData: adData
-              }
-            }
-          );
-        ;
-        if (creativeAdData.length > 0)
-        {
+      } else if (zoneId == 2 || zoneId == 3) {
+        for (const adData of creativeAdData ?? [])
+          new AdvertInterScrollerChild({
+            target: element,
+            props: {
+              instanceNode: element,
+              objectAdvertData: adData,
+            },
+          });
+        if (creativeAdData.length > 0) {
           mountedZones.push(String(zoneId));
-          el.dataset.betarenaAdMounted = mountedZones.join(',');
+          el.dataset.betarenaAdMounted = mountedZones.join(",");
         }
-      }
-      else if (zoneId == 4)
-      {
+      } else if (zoneId == 4) {
         if (!element.parentElement) continue;
 
-        for (const adData of (creativeAdData ?? []))
-          new AdvertLeftSide
-          (
-            {
-              target: element.parentElement,
-              props:
-              {
-                objectAdvertData: adData
-              }
-            }
-          );
-        ;
-        if (creativeAdData.length > 0)
-        {
+        for (const adData of creativeAdData ?? [])
+          new AdvertLeftSide({
+            target: element.parentElement,
+            props: {
+              objectAdvertData: adData,
+            },
+          });
+        if (creativeAdData.length > 0) {
           mountedZones.push(String(zoneId));
-          el.dataset.betarenaAdMounted = mountedZones.join(',');
+          el.dataset.betarenaAdMounted = mountedZones.join(",");
           // ╭─────
           // │ NOTE:
           // │ |: Also mark the actual injection target (parentElement) so that
           // │ |:   if the zone element is replaced while the parent persists,
           // │ |:   subsequent refreshAds() calls won't re-inject into the same parent.
           // ╰─────
-          if (element.parentElement)
-          {
-            const
-              parentMountedRaw = (element.parentElement as HTMLElement).dataset.betarenaAdMounted ?? '',
-              parentMountedZones = parentMountedRaw.split(',').map(z => z.trim()).filter(Boolean)
-            ;
-            if (!parentMountedZones.includes(String(zoneId)))
-            {
+          if (element.parentElement) {
+            const parentMountedRaw =
+                (element.parentElement as HTMLElement).dataset
+                  .betarenaAdMounted ?? "",
+              parentMountedZones = parentMountedRaw
+                .split(",")
+                .map((z) => z.trim())
+                .filter(Boolean);
+            if (!parentMountedZones.includes(String(zoneId))) {
               parentMountedZones.push(String(zoneId));
-              (element.parentElement as HTMLElement).dataset.betarenaAdMounted = parentMountedZones.join(',');
+              (element.parentElement as HTMLElement).dataset.betarenaAdMounted =
+                parentMountedZones.join(",");
             }
           }
         }
@@ -594,87 +476,66 @@
     // │ |:   (not from DOM-filtered targetZoneIds) so global placements inject correctly
     // │ |:   even when no zone-1 element exists in the DOM.
     // ╰─────
-    if (includesGlobalZone && isArticlePage && (authorId || authorArticleTagIds.length > 0))
-    {
+    if (
+      includesGlobalZone &&
+      isArticlePage &&
+      (authorId || authorArticleTagIds.length > 0)
+    ) {
       // ╭─────
       // │ NOTE:
       // │ |: loop over creative data AND inject adverts, based on 'authorId'
       // ╰─────
-      for (const [zoneId, authorIds] of mapZoneToAuthorIds)
-      {
-        if (!authorId || (authorIds.length > 0 && !authorIds.includes(authorId)))
+      for (const [zoneId, authorIds] of mapZoneToAuthorIds) {
+        if (
+          !authorId ||
+          (authorIds.length > 0 && !authorIds.includes(authorId))
+        )
           continue;
-        ;
-
-        const
-          /**
+        const /**
            * @description
            * 📝 **campaign ids** of respective **zone id**
            */
-          campaignIds
-            = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+          campaignIds = mapZoneIdToCampaignId.get(zoneId) ?? [],
           /**
            * @description
            * 📝 `List` of creative data point(s)
            */
-          creativeAdData
-            = removeNull
-            (
-              campaignIds.map
-              (
-                x =>
-                {
-                  if (mapCampaignIdToCreativeId.has(x))
-                  {
-                    const
-                      /**
-                       * @description
-                       * 📝 **creative ids**
-                       */
-                      creativeIds = mapCampaignIdToCreativeId.get(x)!
-                    ;
-
-                    for (const creativeId of creativeIds)
-                    {
-                      if (mapCreative.has(creativeId))
-                        return mapCreative.get(creativeId);
-                      ;
-                    }
-                  }
+          creativeAdData = removeNull(
+            campaignIds.map((x) => {
+              if (mapCampaignIdToCreativeId.has(x)) {
+                const /**
+                   * @description
+                   * 📝 **creative ids**
+                   */
+                  creativeIds = mapCampaignIdToCreativeId.get(x)!;
+                for (const creativeId of creativeIds) {
+                  if (mapCreative.has(creativeId))
+                    return mapCreative.get(creativeId);
                 }
-              )
-            ) as AdsCreativeMain[]
-        ;
-
+              }
+            }),
+          ) as AdsCreativeMain[];
         // [🐞]
-        logger
-        (
-          [
-            '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-1',
-            `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`
-          ]
-        );
+        logger([
+          "🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-1",
+          `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`,
+        ]);
 
         // ╭─────
         // │ NOTE:
         // │ |: Loop over creative data and inject adverts
         // ╰─────
-        for (const adData of creativeAdData)
-        {
+        for (const adData of creativeAdData) {
           if (zoneId != 1) continue;
 
-          listAdWidgetElements.push
-          (
-            new WidgetAdvertSlide
-            (
-              {
-                target: document.body,
-                props:
-                {
-                  adData
-                }
-              }
-            )
+          listAdWidgetElements.push(
+            new WidgetAdvertSlide({
+              target: document.body,
+              props: {
+                adData,
+                isLoggedIn,
+              },
+            }),
           );
         }
       }
@@ -683,81 +544,59 @@
       // │ NOTE:
       // │ |: loop over creative data AND inject adverts, based on 'tagIds'
       // ╰─────
-      for (const [zoneId, tagIds] of mapZoneToTagIds)
-      {
-        if (tagIds.length > 0 && authorArticleTagIds.filter(x => { return tagIds.includes(x) } ).length == 0)
+      for (const [zoneId, tagIds] of mapZoneToTagIds) {
+        if (
+          tagIds.length > 0 &&
+          authorArticleTagIds.filter((x) => {
+            return tagIds.includes(x);
+          }).length == 0
+        )
           continue;
-        ;
-
-        const
-          /**
+        const /**
            * @description
            * 📝 **campaign ids** of respective **zone id**
            */
-          campaignIds
-            = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+          campaignIds = mapZoneIdToCampaignId.get(zoneId) ?? [],
           /**
            * @description
            * 📝 `List` of creative data point(s)
            */
-          creativeAdData
-            = removeNull
-            (
-              campaignIds.map
-              (
-                x =>
-                {
-                  if (mapCampaignIdToCreativeId.has(x))
-                  {
-                    const
-                      /**
-                       * @description
-                       * 📝 **creative ids**
-                       */
-                      creativeIds = mapCampaignIdToCreativeId.get(x)!
-                    ;
-
-                    for (const creativeId of creativeIds)
-                    {
-                      if (mapCreative.has(creativeId))
-                        return mapCreative.get(creativeId);
-                      ;
-                    }
-                  }
+          creativeAdData = removeNull(
+            campaignIds.map((x) => {
+              if (mapCampaignIdToCreativeId.has(x)) {
+                const /**
+                   * @description
+                   * 📝 **creative ids**
+                   */
+                  creativeIds = mapCampaignIdToCreativeId.get(x)!;
+                for (const creativeId of creativeIds) {
+                  if (mapCreative.has(creativeId))
+                    return mapCreative.get(creativeId);
                 }
-              )
-            ) as AdsCreativeMain[]
-        ;
-
+              }
+            }),
+          ) as AdsCreativeMain[];
         // [🐞]
-        logger
-        (
-          [
-            '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-2',
-            `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`
-          ]
-        );
+        logger([
+          "🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-2",
+          `🔹 [var] ➤ creativeAdData ${creativeAdData.length}`,
+        ]);
 
         // ╭─────
         // │ NOTE:
         // │ |: Loop over creative data and inject adverts
         // ╰─────
-        for (const adData of creativeAdData)
-        {
+        for (const adData of creativeAdData) {
           if (zoneId != 1) continue;
 
-          listAdWidgetElements.push
-          (
-            new WidgetAdvertSlide
-            (
-              {
-                target: document.body,
-                props:
-                {
-                  adData
-                }
-              }
-            )
+          listAdWidgetElements.push(
+            new WidgetAdvertSlide({
+              target: document.body,
+              props: {
+                adData,
+                isLoggedIn,
+              },
+            }),
           );
         }
       }
@@ -771,16 +610,12 @@
     // │ |: Inject STANDARD SLIDER adverts in 'document.body'
     // │ |: Guard with `includesGlobalZone` to avoid body injections on scoped refreshes.
     // ╰─────
-    else if (includesGlobalZone && isArticlePage)
-    {
+    else if (includesGlobalZone && isArticlePage) {
       // [🐞]
-      logger
-      (
-        [
-          '🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-3',
-          `🔹 [var] ➤ mapCreative.length ${mapCreative.size}`
-        ]
-      );
+      logger([
+        "🚏 checkpoint ➤ injectBetarenaAds(..) // CHECKPOINT-3",
+        `🔹 [var] ➤ mapCreative.length ${mapCreative.size}`,
+      ]);
 
       // ╭─────
       // │ NOTE:
@@ -788,34 +623,24 @@
       // │ |: Build a Set of creative IDs that belong to zone 1 so we only
       // │ |:   inject zone-1-specific creatives rather than all slider-type creatives.
       // ╰─────
-      const
-        zone1CampaignIds
-          = mapZoneIdToCampaignId.get(1) ?? [],
-        zone1CreativeIds
-          = new Set
-          (
-            zone1CampaignIds
-              .flatMap(campaignId => mapCampaignIdToCreativeId.get(campaignId) ?? [])
-          )
-      ;
-
-      for (const [creativeId, adData] of mapCreative)
-      {
+      const zone1CampaignIds = mapZoneIdToCampaignId.get(1) ?? [],
+        zone1CreativeIds = new Set(
+          zone1CampaignIds.flatMap(
+            (campaignId) => mapCampaignIdToCreativeId.get(campaignId) ?? [],
+          ),
+        );
+      for (const [creativeId, adData] of mapCreative) {
         if (adData.type != 1) continue;
         if (!zone1CreativeIds.has(creativeId)) continue;
 
-        listAdWidgetElements.push
-        (
-          new WidgetAdvertSlide
-          (
-            {
-              target: document.body,
-              props:
-              {
-                adData
-              }
-            }
-          )
+        listAdWidgetElements.push(
+          new WidgetAdvertSlide({
+            target: document.body,
+            props: {
+              adData,
+              isLoggedIn,
+            },
+          }),
         );
       }
     }
@@ -834,28 +659,18 @@
    *  await the same in-flight promise.
    * @returns { Promise < void > }
    */
-  async function ensureReady
-  (
-  ): Promise < void >
-  {
+  async function ensureReady(): Promise<void> {
     if (readinessPromise) return readinessPromise;
 
-    readinessPromise =
-    (
-      async () =>
-      {
-        try
-        {
-          deviceType = detectDeviceWithUA() as IDeviceType;
-          geoLocation = await getUserLocation();
-        }
-        catch (e)
-        {
-          readinessPromise = null;
-          throw e;
-        }
+    readinessPromise = (async () => {
+      try {
+        deviceType = detectDeviceWithUA() as IDeviceType;
+        geoLocation = await getUserLocation();
+      } catch (e) {
+        readinessPromise = null;
+        throw e;
       }
-    )();
+    })();
 
     return readinessPromise;
   }
@@ -874,39 +689,26 @@
    *  💠 Optional scope: restrict to specific zone IDs and / or a DOM subtree.
    * @returns { Promise < void > }
    */
-  async function refreshAds
-  (
-    opts?:
-    {
-      zoneIds?: number[];
-      rootElement?: HTMLElement;
-    }
-  ): Promise < void >
-  {
+  async function refreshAds(opts?: {
+    zoneIds?: number[];
+    rootElement?: HTMLElement;
+  }): Promise<void> {
     if (isDestroyed) return;
 
-    const
-      mySerial = ++refreshSerial
-    ;
-
+    const mySerial = ++refreshSerial;
     await ensureReady();
 
     if (isDestroyed || mySerial !== refreshSerial) return;
 
     generateElementMap(opts?.rootElement);
 
-    let
-      /**
+    let /**
        * @description
        * 📝 Zone IDs discovered in the current DOM scan (or filtered subset).
        */
-      targetZoneIds = [...mapBetarenaAdvertStandardElement.keys()]
-    ;
-
+      targetZoneIds = [...mapBetarenaAdvertStandardElement.keys()];
     if (opts?.zoneIds && opts.zoneIds.length > 0)
-      targetZoneIds = targetZoneIds.filter(id => opts.zoneIds!.includes(id));
-    ;
-
+      targetZoneIds = targetZoneIds.filter((id) => opts.zoneIds!.includes(id));
     // ╭─────
     // │ NOTE:
     // │ |: Zone 1 (global slider/popup) has no DOM element and will never appear
@@ -916,16 +718,10 @@
     // │ |:   article pages; creative-level targeting handles device/country/author filtering.
     // │ |:   Respect scoped refreshes: only add zone 1 if the caller's scope includes it.
     // ╰─────
-    const
-      shouldRequestZone1
-        = isArticlePage
-        && (!opts?.zoneIds || opts.zoneIds.length === 0 || opts.zoneIds.includes(1))
-    ;
-
-    if (shouldRequestZone1 && !targetZoneIds.includes(1))
-      targetZoneIds.push(1);
-    ;
-
+    const shouldRequestZone1 =
+      isArticlePage &&
+      (!opts?.zoneIds || opts.zoneIds.length === 0 || opts.zoneIds.includes(1));
+    if (shouldRequestZone1 && !targetZoneIds.includes(1)) targetZoneIds.push(1);
     // ╭─────
     // │ NOTE:
     // │ |: Only tear down previously injected global/body components when the
@@ -934,22 +730,22 @@
     // │ |:   Scoped refreshes that exclude zone 1 leave existing body-mounted
     // │ |:   widgets untouched to avoid permanently removing them.
     // ╰─────
-    if (!opts?.zoneIds || opts.zoneIds.length === 0 || opts.zoneIds.includes(1))
-    {
-      for (const item of listAdWidgetElements)
-        item.$destroy();
-      ;
+    if (
+      !opts?.zoneIds ||
+      opts.zoneIds.length === 0 ||
+      opts.zoneIds.includes(1)
+    ) {
+      for (const item of listAdWidgetElements) item.$destroy();
       listAdWidgetElements.length = 0;
     }
 
-    await injectBetarenaAds
-    (
+    await injectBetarenaAds(
       {
         deviceType,
-        isoCountryCode: geoLocation?.country_code ?? 'EN',
+        isoCountryCode: geoLocation?.country_code ?? "EN",
         authorId: authorId ?? undefined,
         tagIds: authorArticleTagIds,
-        zoneIds: targetZoneIds
+        zoneIds: targetZoneIds,
       },
       // ╭─────
       // │ NOTE:
@@ -958,7 +754,7 @@
       // │ |:   won't include 1, but a full/zone-1 refresh should still inject global placements.
       // ╰─────
       !opts?.zoneIds || opts.zoneIds.length === 0 || opts.zoneIds.includes(1),
-      mySerial
+      mySerial,
     );
 
     return;
@@ -973,17 +769,9 @@
    *  📝 Logic bundle for advert initialization
    * @returns { Promise < void > }
    */
-  async function initialize
-  (
-  ): Promise < void >
-  {
+  async function initialize(): Promise<void> {
     // [🐞]
-    logger
-    (
-      [
-        '🚏 checkpoint ➤ initialize(..) // START'
-      ]
-    );
+    logger(["🚏 checkpoint ➤ initialize(..) // START"]);
 
     await refreshAds();
 
@@ -1001,117 +789,71 @@
   // │ as soon as 'this' .svelte file is ran.                                 │
   // ╰────────────────────────────────────────────────────────────────────────╯
 
-  onMount
-  (
-    async () =>
-    {
-      betarenaAdEngineStore.useLocalStorage();
-      // ╭─────
-      // │ NOTE:
-      // │ |: Expose public API immediately so host apps can call refreshAds()
-      // │ |: without waiting for the delayed initialize().
-      // │ |: refreshAds() self-initializes prerequisites via ensureReady() if needed.
-      // │ |: Save any existing value so it can be restored when this instance is destroyed.
-      // ╰─────
-      prevWindowApi = (window as any).betarenaAdEngine;
-      (window as any).betarenaAdEngine = { refreshAds };
-      // ╭─────
-      // │ NOTE:
-      // │ |: Delay initialization to ensure all elements are loaded on page
-      // ╰─────
-      initTimeoutId = setTimeout
-      (
-        () =>
-        {
-          initialize().catch
-          (
-            (error) =>
-            {
-              logger
-              (
-                [
-                  '🚨 checkpoint ➤ initialize(..) // UNHANDLED ERROR',
-                  `🔹 [var] ➤ error ${error}`
-                ]
-              );
-            }
-          );
-        },
-        1000
-      );
-      return;
-    }
-  );
-
-  onDestroy
-  (
-    () =>
-    {
-      // [🐞]
-      logger
-      (
-        [
-          'Betarena Ad-Engine ⏰ onMount ⏰ cleanup',
-          `🔹 [var] ➤ listAdWidgetElements.length ${listAdWidgetElements.length}`
-        ],
-      );
-
-      isDestroyed = true;
-
-      if (initTimeoutId !== null)
-        clearTimeout(initTimeoutId);
-      ;
+  onMount(async () => {
+    betarenaAdEngineStore.useLocalStorage();
+    // ╭─────
+    // │ NOTE:
+    // │ |: Expose public API immediately so host apps can call refreshAds()
+    // │ |: without waiting for the delayed initialize().
+    // │ |: refreshAds() self-initializes prerequisites via ensureReady() if needed.
+    // │ |: Save any existing value so it can be restored when this instance is destroyed.
+    // ╰─────
+    prevWindowApi = (window as any).betarenaAdEngine;
+    (window as any).betarenaAdEngine = { refreshAds };
+    // ╭─────
+    // │ NOTE:
+    // │ |: Delay initialization to ensure all elements are loaded on page
+    // ╰─────
+    initTimeoutId = setTimeout(() => {
+      initialize().catch((error) => {
+        logger([
+          "🚨 checkpoint ➤ initialize(..) // UNHANDLED ERROR",
+          `🔹 [var] ➤ error ${error}`,
+        ]);
+      });
+    }, 1000);
+    return;
+  });
 
-      // ╭─────
-      // │ NOTE:
-      // │ |: Only remove/restore the global if this instance still owns it.
-      // │ |:   A later-mounted instance or host code may have overwritten it.
-      // ╰─────
-      if ((window as any).betarenaAdEngine?.refreshAds === refreshAds)
-      {
-        if (prevWindowApi !== undefined)
-          (window as any).betarenaAdEngine = prevWindowApi;
-        else
-          delete (window as any).betarenaAdEngine;
-      }
+  onDestroy(() => {
+    // [🐞]
+    logger([
+      "Betarena Ad-Engine ⏰ onMount ⏰ cleanup",
+      `🔹 [var] ➤ listAdWidgetElements.length ${listAdWidgetElements.length}`,
+    ]);
 
-      // ╭─────
-      // │ NOTE:
-      // │ |: Destroy all dynamically created advert components
-      // ╰─────
-      for (const item of listAdWidgetElements)
-        item.$destroy();
-      ;
+    isDestroyed = true;
 
-      return;
+    if (initTimeoutId !== null) clearTimeout(initTimeoutId);
+    // ╭─────
+    // │ NOTE:
+    // │ |: Only remove/restore the global if this instance still owns it.
+    // │ |:   A later-mounted instance or host code may have overwritten it.
+    // ╰─────
+    if ((window as any).betarenaAdEngine?.refreshAds === refreshAds) {
+      if (prevWindowApi !== undefined)
+        (window as any).betarenaAdEngine = prevWindowApi;
+      else delete (window as any).betarenaAdEngine;
     }
-  );
 
-  // #endregion ➤ 🔄 LIFECYCLE [SVELTE]
+    // ╭─────
+    // │ NOTE:
+    // │ |: Destroy all dynamically created advert components
+    // ╰─────
+    for (const item of listAdWidgetElements) item.$destroy();
+    return;
+  });
 
+  // #endregion ➤ 🔄 LIFECYCLE [SVELTE]
 </script>
 
 <svelte:window
-  on:resize=
-  {
-    () =>
-    {
-      detectDeviceWithUA();
-      return;
-    }
-  }
+  on:resize={() => {
+    detectDeviceWithUA();
+    return;
+  }}
 />
 
-<svelte:head>
-
-  {#if isStandalone}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-  {/if}
-
-</svelte:head>
-
 <!--
 ╭──────────────────────────────────────────────────────────────────────────────────╮
 │ 💠 Svelte Component HTML                                                         │
@@ -1162,7 +904,7 @@
   >
   </div> -->
 
-  <hr>
+  <hr />
 
   <!-- <div
     data-betarena-zone-id=2,3
@@ -1174,10 +916,7 @@
     {/each}
   </div> -->
 
-  <div
-    data-betarena-zone-id=4
-  >
-  </div>
+  <div data-betarena-zone-id="4"></div>
 {/if}
 
 <!--
@@ -1190,20 +929,3 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-<style lang="scss">
-
-  :global
-  {
-    // ╭─────
-    // │ NOTE:
-    // │ |: Use purged styles for production build
-    // ╰─────
-    @import '../style/app.purged.min.scss';
-    // ╭─────
-    // │ NOTE:
-    // │ |: Import main styles (uncomment for development)
-    // ╰─────
-    // @import '../style/app.scss';
-  }
-
-</style>