@betarena/ad-engine 0.0.67 → 0.0.68

package/package.json

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

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

@@ -52,7 +52,7 @@
 
   import WidgetAdGeneral from './Advert-General-Child.svelte';
   import AdvertInterScrollerChild from './Advert-InterScroller-Child.svelte';
-  import AdvertLeftSide from './Advert-LeftSide.svelte';
+  import AdvertLeftSide from './Advert-LeftSide-Child.svelte';
   import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
   import DevInfoBox from './misc/admin/Dev-Info-Box.svelte';
 
@@ -344,7 +344,7 @@
     // │ ➤ [1] loop over retrieved/fetched elements identified in 'document',
     // │ ➤ [2] and inject target 'ADVERTS' in target specific locations.
     // ┣─────
-    // ┃ ZONE-ID :: 1,2,3
+    // ┃ ZONE-ID :: 1,2,3,4
     // ╰─────
     for (const [zoneId, element] of mapBetarenaAdvertStandardElement)
     {
@@ -432,25 +432,32 @@
       else if (zoneId == 2 || zoneId == 3)
       {
         for (const adData of (creativeAdData ?? []))
-          if (adData.targeting.device.includes('desktop'))
-            new AdvertLeftSide({
+          new AdvertInterScrollerChild
+          (
+            {
               target: element,
-              props: {
-                objectAdvertData: adData
-              }
-            })
-          else
-            new AdvertInterScrollerChild
-            (
-              {
-                target: element,
-                props:
+              props:
+            {
+              instanceNode: element,
+              objectAdvertData: adData
+            }
+            }
+          );
+        ;
+      }
+      else if (zoneId == 4)
+      {
+        for (const adData of (creativeAdData ?? []))
+          new AdvertLeftSide
+          (
+            {
+              target: document.body,
+              props:
               {
-                instanceNode: element,
                 objectAdvertData: adData
               }
-              }
-            );
+            }
+          );
         ;
       }
     }
@@ -691,10 +698,10 @@
     injectBetarenaAds
     (
       {
-        deviceType,
-        // deviceType: 'mobile',
-        isoCountryCode: geoLocation.country_code ?? 'EN',
-        // isoCountryCode: 'BR',
+        // deviceType,
+        deviceType: 'desktop',
+        // isoCountryCode: geoLocation.country_code ?? 'EN',
+        isoCountryCode: 'BR',
         authorId,
         tagIds: authorArticleTagIds,
         zoneIds: [...mapBetarenaAdvertStandardElement.keys()]
@@ -802,7 +809,7 @@
 
   <hr>
 
-  <div
+  <!-- <div
     data-betarena-zone-id=2,3
   >
     {#each { length: 25 } as _, i}
@@ -810,5 +817,10 @@
         Loren ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum mi id.
       </p>
     {/each}
+  </div> -->
+
+  <div
+    data-betarena-zone-id=4
+  >
   </div>
 {/if}

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

@@ -0,0 +1,166 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 High Order Component Overview                                                 │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+│ ➤ Status :|: 🔒 LOCKED                                                           │
+│ ➤ Author(s) :|: @migbash                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ 📝 Description                                                                   │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ Betarena Ad-Engine Component (Entrypoint)                                        │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🟦 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 { storeAdmin } from './store/admin';
+
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0';
+  import { ServiceAdEngine } from '@betarena/scores-lib/dist/classes/_service.adengine.js';
+  import { betarenaEndpoint } from './constants/instance.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
+    /**
+     * @augments AdsCreativeMain
+     */
+    objectAdvertData: AdsCreativeMain
+  ;
+
+  // #endregion ➤ 📌 VARIABLES
+
+  // #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
+  (
+    () =>
+    {
+      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.                                                                │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<a
+  target='_blank'
+  href={objectAdvertData.data?.cta_link}
+  on:click=
+  {
+    () =>
+    {
+      new ServiceAdEngine
+      (
+        betarenaEndpoint
+      ).updateAdEngineClickCounter
+      (
+        {
+          query: {
+            creativeId: objectAdvertData.id
+          },
+          body: {}
+        }
+      );
+      return;
+    }
+  }
+>
+  <img
+    alt="ad_image"
+    src={objectAdvertData.data?.media}
+    class="desktop_ad"
+  />
+</a>
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🌊 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">
+
+  .desktop_ad
+  {
+    position: fixed;
+    right: 0 !important;
+    max-height: 100% !important;
+    top: 0 !important;
+    width: initial !important;
+  }
+
+</style>

package/src/lib/Advert-LeftSide.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0';
-  import { onMount } from 'svelte';
-  import { storeAdmin } from './store/admin';
-
-  export let /**
-     * @augments AdsCreativeMain
-     */
-    objectAdvertData: AdsCreativeMain;
-
-  onMount(() => 
-  {
-    storeAdmin.updateData([['numberOfAdvertsActive', null]]);
-    return;
-  });
-</script>
-
-<a
-  target="_blank"
-  href={objectAdvertData.data?.cta_link}
-  on:click={() => 
-  {
-
-  }}
->
-  <img alt="ad_image" src={objectAdvertData.data?.media} class="desktop_ad" />
-</a>
-
-<style>
-  .desktop_ad {
-    position: fixed;
-    right: 0 !important;
-    max-height: 100% !important;
-    top: 0 !important;
-    width: initial !important;
-  }
-</style>