@betarena/ad-engine 0.0.63 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.63",
+	"version": "0.0.64",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -61,8 +61,9 @@
 		"vite": "5.1.6"
 	},
 	"dependencies": {
-		"@betarena/scores-lib": "1.11.0-alpha.17",
+		"@betarena/scores-lib": "4.1.0",
 		"@fontsource/roboto": "5.0.12",
+		"chalk": "5.3.0",
 		"colorthief": "2.6.0",
 		"device-detector-js": "3.0.3",
 		"svelte-preprocess": "5.1.3",

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

@@ -39,27 +39,27 @@
   // ╰────────────────────────────────────────────────────────────────────────╯
 
   import { onMount } from 'svelte';
-
   // import '@fontsource/roboto';
 
-  import { removeNull } from '@betarena/scores-lib/dist/functions/func.common.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 { postMod } from './utils/fetch.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.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 { 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
@@ -98,7 +98,12 @@
      * @description
      * 📝 Dark theme value
      */
-    isDarkTheme: boolean = false
+    isDarkTheme: boolean = false,
+    /**
+     * @description
+     * 📝 Translation target
+     */
+    strTranslationTarget = 'es'
   ;
 
   /**
@@ -243,13 +248,13 @@
    *  🟦 HELPER
    * @description
    *  📝 Generates adverts (+ complementary data) for appropiate zones
-   * @param { IAdsRequestBody } opts
+   * @param { IAdsServiceData } opts
    *  💠 **[required]** `list` of zone ids
    * @returns { Promise < void > }
    */
   async function injectBetarenaAds
   (
-    opts: IAdsRequestBody
+    opts: IAdsServiceData['request']['body']
   ): Promise < void >
   {
     if (!document) return;
@@ -259,15 +264,33 @@
        * @description
        * 📝 Response from `fetch`
        */
-      response
-        = await postMod
-        <
-          IAdsRequestBody,
-          IAdsResponseBody
-        >
+      dataRes0
+        = await new ServiceAdEngine
+        (
+          betarenaEndpoint
+        ).getAdEngineData
+        (
+          {
+            query: {},
+            body: opts
+          }
+        ),
+      /**
+       * @description
+       * 📝 Response from `fetch`
+       */
+      dataRes1
+        = await new ServiceAdEngine
         (
-          `${betarenaEndpoint}/ads`,
-          opts
+          betarenaEndpoint
+        ).getAdEgnineTranslationData
+        (
+          {
+            query: {
+              language: strTranslationTarget
+            },
+            body: {}
+          }
         )
     ;
 
@@ -276,33 +299,44 @@
     (
       [
         '🚏 checkpoint ➤ injectBetarenaAds(..) // START',
-        `🔹 [var] ➤ response ${JSON.stringify(response)}`
+        `🔹 [var] ➤ dataRes0 ${JSON.stringify(dataRes0)}`,
+        `🔹 [var] ➤ dataRes1 ${JSON.stringify(dataRes1)}`
       ]
     );
 
-    mapCreative = new Map((response as IAdsResponseBody).ads ?? []);
+    storeSession.updateData
+    (
+      [
+        [
+          'setTranslation',
+          dataRes1.success.data
+        ]
+      ]
+    );
+
+    mapCreative = new Map(dataRes0.success.data.ads ?? []);
 
     const
       /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listCampaignId`
        */
-      mapZoneIdToCampaignId = new Map ((response as IAdsResponseBody).mapZoneIdToCampaignId),
+      mapZoneIdToCampaignId = new Map (dataRes0.success.data.mapZoneIdToCampaignId),
       /**
        * @description
        * 📝 `Map` where, `key=CampaignId` and `value=listCreativeId`
        */
-      mapCampaignIdToCreativeId = new Map ((response as IAdsResponseBody).mapCampaignIdToCreativeId),
+      mapCampaignIdToCreativeId = new Map (dataRes0.success.data.mapCampaignIdToCreativeId),
       /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listAuthorId`
        */
-      mapZoneToAuthorIds = new Map ((response as IAdsResponseBody).mapZoneIdToAuthorIds),
+      mapZoneToAuthorIds = new Map (dataRes0.success.data.mapZoneIdToAuthorIds),
       /**
        * @description
        * 📝 `Map` where, `key=ZoneId` and `value=listTagId`
        */
-      mapZoneToTagIds = new Map ((response as IAdsResponseBody).mapZoneIdToTagIds)
+      mapZoneToTagIds = new Map (dataRes0.success.data.mapZoneIdToTagIds)
     ;
 
     // ╭─────
@@ -398,17 +432,25 @@
       else if (zoneId == 2 || zoneId == 3)
       {
         for (const adData of (creativeAdData ?? []))
-          new AdvertInterScrollerChild
-          (
-            {
+          if (adData.targeting.device.includes('desktop'))
+            new AdvertLeftSide({
               target: element,
-              props:
+              props: {
+                objectAdvertData: adData
+              }
+            })
+          else
+            new AdvertInterScrollerChild
+            (
+              {
+                target: element,
+                props:
               {
                 instanceNode: element,
-                objectAdverData: adData
+                objectAdvertData: adData
               }
-            }
-          );
+              }
+            );
         ;
       }
     }

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

@@ -40,12 +40,13 @@
 
   import { onMount } from 'svelte';
 
+  import { ServiceAdEngine } from '@betarena/scores-lib/dist/classes/_service.adengine.js';
   import { betarenaEndpoint } from './constants/instance.js';
   import { storeAdmin } from './store/admin.js';
-  import { postMod } from './utils/fetch.js';
+  import { storeSession } from './store/session.js';
   import { getImageBgColor } from './utils/npm.colorthief.js';
 
-  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0.js';
 
   // #endregion ➤ 📦 Package Imports
 
@@ -72,7 +73,7 @@
     /**
      * @augments AdsCreativeMain
      */
-    objectAdverData: AdsCreativeMain,
+    objectAdvertData: AdsCreativeMain,
     /**
      * @description
      * 📝
@@ -88,6 +89,8 @@
     instanceAdvertInterscroller: HTMLDivElement
   ;
 
+  $: ({ data: { translation } } = $storeSession);
+
   // #endregion ➤ 📌 VARIABLES
 
   // #region ➤ 🛠️ METHODS
@@ -201,7 +204,7 @@
     {
       getImageBgColor
       (
-        objectAdverData.data?.media ?? '',
+        objectAdvertData.data?.media ?? '',
         '--betarena-ad-engine-interscroller-advert-background-image-'
       );
 
@@ -242,7 +245,7 @@
   '
 >
   <h2 class='info-box'>
-    Advertisement
+    {translation.translation.advertisement ?? 'ADVERTISEMENT'}
   </h2>
 
   <div
@@ -263,22 +266,28 @@
         {
           () =>
           {
-            postMod
+            new ServiceAdEngine
+            (
+              betarenaEndpoint
+            ).updateAdEngineClickCounter
             (
-              `${betarenaEndpoint}/ad/update/click`,
               {
-                creativeId: objectAdverData.id
+                query: {
+                  creativeId: objectAdvertData.id
+                },
+                body: {}
               }
             );
+            return;
           }
         }
-        href={objectAdverData.data?.cta_link}
+        href={objectAdvertData.data?.cta_link}
       >
         <div
           id='advert'
           style=
           '
-          background: url({objectAdverData.data?.media});
+          background: url({objectAdvertData.data?.media});
           background-repeat: no-repeat;
           background-size: 100vw 100vh;
           '
@@ -288,7 +297,7 @@
   </div>
 
   <h2 class='info-box'>
-    Scroll to continue
+    {translation.translation.scroll ?? 'SCROLL TO CONTINUE'}
   </h2>
 </div>
 

package/src/lib/Advert-LeftSide.svelte

@@ -0,0 +1,37 @@
+<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>

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

@@ -41,16 +41,17 @@
   import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
 
+  import { ServiceAdEngine } from '@betarena/scores-lib/dist/classes/_service.adengine.js';
   import { betarenaAdEngineStore } from './_store.js';
-  import { storeAdmin } from './store/admin.js';
-  import { postMod } from './utils/fetch.js';
   import { betarenaEndpoint } from './constants/instance.js';
+  import { storeAdmin } from './store/admin.js';
   import { storeSession } from './store/session.js';
 
   import iconClose from './assets/icon-close.svg';
   import iconArrow from './assets/icon-external-link.svg';
 
-  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
+
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0.js';
 
   // #endregion ➤ 📦 Package Imports
 
@@ -240,7 +241,7 @@
     -->
     {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
       <a
-        href={adData.data?.video_link}
+        href={adData.data.video_link}
         target="_blank"
         rel=
         "
@@ -251,13 +252,19 @@
         {
           () =>
           {
-            postMod
+            new ServiceAdEngine
+            (
+              betarenaEndpoint
+            ).updateAdEngineClickCounter
             (
-              `${betarenaEndpoint}/ad/update/click`,
               {
-                creativeId: adData.id
+                query: {
+                  creativeId: adData.id
+                },
+                body: {}
               }
             );
+            return;
           }
         }
       >
@@ -272,7 +279,7 @@
           id="banner"
           width=250
           height=250
-          src={adData.data?.media}
+          src={adData.data.media}
           autoplay={true}
           muted={true}
           playsinline={true}
@@ -336,13 +343,19 @@
         {
           () =>
           {
-            postMod
+            new ServiceAdEngine
+            (
+              betarenaEndpoint
+            ).updateAdEngineClickCounter
             (
-              `${betarenaEndpoint}/ad/update/click`,
               {
-                creativeId: adData.id
+                query: {
+                  creativeId: adData.id
+                },
+                body: {}
               }
             );
+            return;
           }
         }
       >

package/src/lib/constants/instance.ts

@@ -11,5 +11,5 @@ export const
    *  ➤ prod|:|live
    *    "http://49.13.201.19:8500" | "https://ads.betarena.com/"
    */
-  betarenaEndpoint = 'https://ads.betarena.com'
+  betarenaEndpoint = 'https://devads.betarena.com'
 ;

package/src/lib/store/session.ts

@@ -30,7 +30,16 @@ const
    */
   storeObject: IAdEngineSessionStore
     = {
-      isDarkTheme: false
+      isDarkTheme: false,
+      data:
+      {
+        translation:
+        {
+          language: 'en',
+          // @ts-expect-error - 📝 translation object
+          translations: {},
+        },
+      }
     }
 ;
 
@@ -111,6 +120,8 @@ function createLocalStore
 
             if (dataTarget == 'darkTheme')
               storeObject.isDarkTheme = !storeObject.isDarkTheme;
+            else if (dataTarget == 'setTranslation')
+              storeObject.data.translation = dataPoint;
             ;
           }
 

package/src/lib/types/session.d.ts

@@ -1,3 +1,5 @@
+import type { IAdsServiceTranslations } from "@betarena/scores-lib/types/ad-engine/index.js";
+
 /**
  * @author
  *  @migbash
@@ -15,6 +17,18 @@ export interface IAdEngineSessionStore
    * :: false
    */
   isDarkTheme: boolean;
+  /**
+   * @description
+   * 📝 store data proerty (to be updated)
+   */
+  data:
+  {
+    /**
+     * @description
+     * 📝 store data proerty (to be updated)
+     */
+    translation: IAdsServiceTranslations['response']['success']['data'];
+  }
 }
 
 /**
@@ -23,4 +37,5 @@ export interface IAdEngineSessionStore
  */
 type IAdEngineSessionDataProp =
   | 'darkTheme'
+  | 'setTranslation';
 ;

package/src/lib/utils/fetch.ts

@@ -1,107 +0,0 @@
-// #region ➤ 📦 Package Imports
-
-import { tryCatchAsyncV2 } from '@betarena/scores-lib/dist/util/util.common.js';
-
-// #endregion ➤ 📦 Package Imports
-
-interface IResponseError
-{
-  /**
-   * @description
-   * 📝
-   */
-  error: boolean;
-  /**
-   * @description
-   * 📝
-   */
-  errorLogs: unknown;
-}
-
-/**
- * @author
- *  @migbash
- * @summary
- *  - 🔹 HELPER
- *  - 🟥 IMPORTANT
- * @description
- *  📣 PROXY Fetch type POST
- * @param { string } path
- *  💠 **[required]** `endpoint/url` to fetch data from.
- * @param { T2 } data
- *  💠 [optional] Target data to pass as `body`.
- * @returns { Promise < T1 | NullUndef | unknown | IResponseError > }
- *  📤 Returns an `unkown`.
- */
-export async function postMod
-<
-  T1,
-  T2
->
-(
-  path: string,
-  data: T1
-): Promise < T2 | IResponseError >
-{
-  console.log('path', path);
-  console.log('data', data);
-
-  return await tryCatchAsyncV2
-  <
-    T2
-  >
-  (
-    async (
-    ): Promise < T2 > =>
-    {
-      const
-        /**
-         * @description
-         * 📝 Target endpoint response.
-         */
-        res: Response
-          = await fetch
-          (
-            path,
-            {
-              method: 'POST',
-              credentials: 'include',
-              body: JSON.stringify(data),
-              mode: 'cors',
-              headers:
-              {
-                Accept: 'application/json',
-                'Content-Type': 'application/json'
-              }
-            }
-          ),
-        /**
-         * @description
-         * 📝 Target `json` resonse from `endpoint`.
-         */
-        resJson = await res.json()
-      ;
-
-      if (!res.ok)
-        throw new Error
-        (
-          JSON.stringify(resJson) ?? 'network response was not ok'
-        );
-      ;
-
-      return resJson;
-    },
-    (
-      ex: unknown
-    ): IResponseError =>
-    {
-      // [🐞]
-      console.error(`💀 Unhandled :: ${ex}`);
-
-      return {
-        error: true,
-        errorLogs: ex
-      };
-    }
-  );
-}