@betarena/ad-engine 0.0.53 → 0.0.55

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

@@ -0,0 +1,428 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 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
+    );
+
+    setTimeout
+    (
+      () =>
+      {
+        window.addEventListener('scroll', handleScroll);
+        return;
+      },
+      1000
+    );
+
+    return;
+  }
+
+  /**
+   * @author
+   *  @ivanzob
+   * @summary
+   *  🟦 HELPER
+   * @description
+   *  📝 Handle Scroll Listener
+   * @returns { void }
+   */
+  function handleScroll
+  (
+  ): void
+  {
+    if (!instanceAdvertInterscroller) return;
+
+    if (instanceAdvertInterscroller.getBoundingClientRect().bottom < 0)
+    {
+      instanceAdvertInterscroller.style.display = 'none';
+      window.removeEventListener
+      (
+        'scroll',
+        handleScroll
+      );
+    }
+
+    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;
+  "
+>
+  <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-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;
+  }
+
+  .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: 100% !important;
+    max-height: 100% !important;
+  }
+
+  /*
+  ╭──────────────────────────────────────────────────────────────────────────────╮
+  │ ⚡️ 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>