@betarena/ad-engine 0.0.6 → 0.0.8

package/src/lib/Widget-AdEngine.svelte

@@ -0,0 +1,492 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 High Order Component Overview                                                 │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+│ ➤ Status :|: 🔒 LOCKED                                                           │
+│ ➤ Author(s) :|: @migbash                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ 📝 Description                                                                   │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ Betarena Ad-Engine Component                                                     │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🟦 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 { betarenaAdEngineStore } from './store.js';
+  import { postMod } from './utils/fetch.js';
+  import { detectDeviceType } from './utils/device.js';
+  import { getUserLocation } from './utils/geo.js';
+
+  import WidgetAdvertSlide from './Widget-AdvertSlide.svelte';
+  import WidgetAdGeneral from './Widget-AdGeneral.svelte';
+
+  import type { IAdsRequestBody, IAdsResponseBody } from '@betarena/scores-lib/types/ad-engine/index.js';
+  import type { GeoJsResponse } from './types/geojs.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
+     * 📝 Width device change onset number
+     */
+    deviceWidthList: [number, number] = [768, 1024],
+    /**
+     * @description
+     * 📝 **author id**
+     */
+    authorId: number | null = null,
+    /**
+     * @description
+     * 📝 `List` of **tag ids**
+     */
+    authorArticleTagIds: number[] = []
+  ;
+
+  /**
+   * @description
+   * 📝 Component Local Interface
+   */
+  type IDeviceType =
+    | 'desktop'
+    | 'tablet'
+    | 'mobile'
+  ;
+
+  let
+    /**
+     * @description
+     * 📝 Device type detected
+     */
+    deviceType: IDeviceType = 'desktop',
+    /**
+     * @description
+     * 📝 Geo-Location response
+     */
+    geoLocation: GeoJsResponse | null = null,
+    /**
+     * @description
+     * 📝 `Map` where, `key=ZoneId` and `value=HTMLElement`
+     */
+    betarenaAdsInjectMap: Map < number, Element > = new Map()
+  ;
+
+  // #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
+   *  @migbash
+   * @summary
+   *  🟥 MAIN
+   * @description
+   * 📝 `Map` generation for `HTMLElements`.
+   * @returns { void }
+   */
+  function generateElementMap
+  (
+  ): void
+  {
+    const
+      /**
+       * @description
+       * 📝 `List` of `HTMLElements` identified on `page` for a target `zone`.
+       */
+      htmlElementList = document.querySelectorAll('[data-betarena-zone-id]')
+    ;
+
+    // ╭─────
+    // │ NOTE: |:| loop over elements detected as betarena elegible ads
+    // ╰─────
+    for (const elem of htmlElementList)
+    {
+      const
+        /**
+         * @description
+         * 📝 Value of Betarena Zone Id
+         */
+        value = elem.attributes.getNamedItem('data-betarena-zone-id')?.value
+      ;
+
+      if (!value) continue;
+
+      betarenaAdsInjectMap.set(parseInt(value), elem);
+    }
+
+    return
+  }
+
+  /**
+   * @author
+   *  @migbash
+   * @summary
+   *  🟦 HELPER
+   * @description
+   *  📝 Generates adverts (+ complementary data) for appropiate zones
+   * @param { IAdsRequestBody } opts
+   *  💠 **[required]** `list` of zone ids
+   * @returns { Promise < void > }
+   */
+  async function injectBetarenaAds
+  (
+    opts: IAdsRequestBody
+  ): Promise < void >
+  {
+    if (!document) return;
+
+    const
+      /**
+       * @description
+       * 📝 Response from `fetch`
+       */
+      response
+        = await postMod
+        <
+          IAdsRequestBody,
+          IAdsResponseBody
+        >
+        (
+          `${betarenaEndpoint}/ads`,
+          opts
+        )
+    ;
+
+    // [🐞]
+    console.log(response);
+
+    const
+      /**
+       * @description
+       * 📝 `Map`
+       */
+      dataMap = new Map((response as IAdsResponseBody).ads ?? []),
+      /**
+       * @description
+       * 📝 `Map`
+       */
+      mapZoneIdToCampaignId = new Map ((response as IAdsResponseBody).mapZoneIdToCampaignId),
+      /**
+       * @description
+       * 📝 `Map`
+       */
+      mapCreativeIdToCampaignId = new Map ((response as IAdsResponseBody).mapCampaignIdToCreativeId),
+      /**
+       * @description
+       * 📝 `Map`
+       */
+      mapZoneToAuthorIds = new Map ((response as IAdsResponseBody).mapZoneIdToAuthorIds),
+      /**
+       * @description
+       * 📝 `Map`
+       */
+       mapZoneToTagIds = new Map ((response as IAdsResponseBody).mapZoneIdToTagIds)
+    ;
+
+    // ╭─────
+    // │ NOTE:
+    // │ ➤ [1] loop over retrieved/fetched elements, and
+    // │ ➤ [2] inject target `ads` in specific locations
+    // ╰─────
+    for (const [zoneId, element] of betarenaAdsInjectMap)
+    {
+      if (!geoLocation) continue;
+
+      const
+        /**
+         * @description
+         * 📝 **campaign ids** of respective **zone id**
+         */
+        zoneIdCampaignIds
+          = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+        /**
+         * @description
+         * 📝 `List` of creative data point(s)
+         */
+        creativeAdData
+          = zoneIdCampaignIds.map
+          (
+            x =>
+            {
+              if (dataMap.has(x))
+                return dataMap.get(x);
+            }
+          )
+      ;
+
+      for (const adData of creativeAdData ?? [])
+      {
+        new WidgetAdGeneral
+        (
+          {
+            target: element,
+            props:
+            {
+              adData
+            }
+          }
+        );
+      }
+    }
+
+    // ╭─────
+    // │ NOTE:
+    // │ ➤ inject of 'global' placements ads (based on global page data)
+    // ╰─────
+    if (authorId || authorArticleTagIds.length > 0)
+    {
+      for (const [zoneId, authorIds] of mapZoneToAuthorIds)
+      {
+        if (authorId && !authorIds.includes(authorId))
+          continue;
+        ;
+
+        const
+          /**
+           * @description
+           * 📝 **campaign ids** of respective **zone id**
+           */
+          zoneIdCampaignIds
+            = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+          /**
+           * @description
+           * 📝 `List` of creative data point(s)
+           */
+          creativeAdData
+            = zoneIdCampaignIds.map
+            (
+              x =>
+              {
+                if (dataMap.has(x))
+                  return dataMap.get(x);
+              }
+            )
+        ;
+
+        for (const adData of creativeAdData)
+        {
+          new WidgetAdvertSlide
+          (
+            {
+              target: document.body,
+              props:
+              {
+                adData
+              }
+            }
+          );
+        }
+      }
+
+      for (const [zoneId, tagIds] of mapZoneToTagIds)
+      {
+        if (authorId && !tagIds.includes(authorId))
+          continue;
+        ;
+
+        const
+          /**
+           * @description
+           * 📝 **campaign ids** of respective **zone id**
+           */
+          zoneIdCampaignIds
+            = (mapZoneIdToCampaignId.get(zoneId) ?? []),
+          /**
+           * @description
+           * 📝 `List` of creative data point(s)
+           */
+          creativeAdData
+            = zoneIdCampaignIds.map
+            (
+              x =>
+              {
+                if (dataMap.has(x))
+                  return dataMap.get(x);
+              }
+            )
+        ;
+
+        for (const adData of creativeAdData)
+        {
+          new WidgetAdvertSlide
+          (
+            {
+              target: document.body,
+              props:
+              {
+                adData
+              }
+            }
+          );
+        }
+      }
+    }
+
+    return;
+  }
+
+  /**
+   * @author
+   *  @migbash
+   * @summary
+   *  🟥 MAIN
+   * @description
+   *  📝 Logic bundle for advert initialization
+   * @returns { Promise < void > }
+   */
+  async function initialize
+  (
+  ): Promise < void >
+  {
+    detectDeviceType();
+    geoLocation = await getUserLocation();
+    generateElementMap();
+
+    // [🐞]
+    // console.log('elements', betarenaAdsInjectMap);
+    // console.log('elements', zoneIds);
+
+    injectBetarenaAds
+    (
+      {
+        deviceType,
+        isoCountryCode: geoLocation?.country_code ?? 'EB',
+        authorId,
+        tagIds: authorArticleTagIds,
+        zoneIds: [...betarenaAdsInjectMap.keys()]
+      }
+    );
+
+    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
+  (
+    async () =>
+    {
+      betarenaAdEngineStore.useLocalStorage();
+      await initialize();
+      return;
+    }
+  );
+
+  // #endregion ➤ 🔄 LIFECYCLE [SVELTE]
+
+</script>
+
+<svelte:window
+  on:resize=
+  {
+    () =>
+    {
+      detectDeviceType();
+      return;
+    }
+  }
+/>
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 💠 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.                                                                │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<!--
+╭─────
+│ ➤ Testing [🐞]
+╰─────
+-->
+<div>
+
+  <p>
+    Device Type: {deviceType}
+  </p>
+
+  <p>
+    {geoLocation?.country_code}
+  </p>
+
+</div>
+
+<div
+  data-betarena-zone-id=1
+>
+</div>
+
+<!--
+<hr>
+
+<div
+  data-betarena-zone-id=2
+>
+</div>
+-->