@betarena/ad-engine 0.0.23 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.23",
+	"version": "0.0.24",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -31,9 +31,9 @@
 	},
 	"scripts": {
 		"build": "vite build",
-		"start": "vite build",
-		"vite|:|dev": "vite",
-		"vite|:|dev|:|1-click": "npm run 'npm|:|link|:|@betarena/scores-lib' && npm ls --link --global & npm run 'vite|:|dev'",
+		"start": "node dist/index.js",
+		"vite|:|dev": "vite --host",
+		"vite|:|dev|:|1-click": "npm run 'npm|:|link|:|@betarena/scores-lib' && npm ls --link --global & npm run 'sass|:|watch' & npm run 'vite|:|dev'",
 		"vite|:|preview": "vite preview",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
 		"run|:|script-package": "npx tsx misc/package.ts",
@@ -41,27 +41,28 @@
 		"npm|:|link|:|@betarena/scores-lib": "npm link @betarena/scores-lib",
 		"npm|:|link": "npm link",
 		"npm|:|bump+publish": "npm version patch && npm publish",
-		"sass|:|watch": "sass --watch static/app.scss static/app.css"
+		"sass|:|watch": "sass --watch src/style/app.scss src/style/app.css"
 	},
 	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "3.0.2",
+		"@tsconfig/svelte": "5.0.2",
 		"@typescript-eslint/eslint-plugin": "5.59.1",
 		"@typescript-eslint/parser": "5.59.1",
 		"eslint": "8.51.0",
 		"eslint-config-prettier": "8.8.0",
 		"eslint-plugin-svelte": "2.34.0",
-		"@sveltejs/vite-plugin-svelte": "3.0.2",
-		"@tsconfig/svelte": "5.0.2",
+		"json5": "2.2.3",
+		"sass": "1.72.0",
 		"svelte": "4.2.12",
-		"typescript": "5.2.2",
-		"tslib": "2.6.2",
-		"vite": "5.1.6",
 		"svelte-check": "3.6.6",
-		"json5": "2.2.3",
-		"sass": "1.72.0"
+		"tslib": "2.6.2",
+		"typescript": "5.2.2",
+		"vite": "5.1.6"
 	},
 	"dependencies": {
 		"@betarena/scores-lib": "1.11.0-alpha.15",
-		"@fontsource/roboto": "5.0.12"
+		"@fontsource/roboto": "5.0.12",
+		"svelte-preprocess": "5.1.3"
 	},
 	"main": "./dist/index.js",
 	"svelte": "./src/index.js",

package/src/App.svelte

@@ -0,0 +1,44 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🟦 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 AdvertEngineWidget from "./lib/Advert-Engine-Widget.svelte";
+
+  // #endregion ➤ 📦 Package Imports
+
+</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.                                                                │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<AdvertEngineWidget />

package/src/index.ts

@@ -0,0 +1,29 @@
+import AdvertEngineWidget from './lib/Advert-Engine-Widget.svelte'
+
+let
+  /**
+   * @description
+   */
+  app
+;
+
+// ╭─────
+// │ CHECK |:| running on 'browser'
+// ╰─────
+if (typeof document !== 'undefined')
+  app
+    = new AdvertEngineWidget
+    (
+      {
+        target: document.body,
+        props:
+        {
+          // authorId: 1
+          authorArticleTagIds: [1]
+        }
+      }
+    )
+  ;
+;
+
+export default app;

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

@@ -8,7 +8,7 @@
 ┣──────────────────────────────────────────────────────────────────────────────────┫
 │ 📝 Description                                                                   │
 ┣──────────────────────────────────────────────────────────────────────────────────┫
-│ Betarena Ad-Engine Component                                                     │
+│ Betarena Ad-Engine Component (Entrypoint)                                        │
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
@@ -40,6 +40,8 @@
 
   import { onMount } from 'svelte';
 
+  import '@fontsource/roboto';
+
   import { betarenaEndpoint } from './constants/instance.js';
   import { betarenaAdEngineStore } from './_store.js';
   import { postMod } from './utils/fetch.js';
@@ -50,11 +52,12 @@
   import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
   import WidgetAdGeneral from './Advert-General-Child.svelte';
 
-  import '@fontsource/roboto';
+  import '../style/app.scss';
 
-  // import type { IAdsRequestBody, IAdsResponseBody } from '@betarena/scores-lib/types/ad-engine/index.js';
-  // import type { GeoJsResponse } from './types/geojs.js';
-  // 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 { GeoJsResponse } from './types/geojs.js';
+  import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
+  import DevInfoBox from './misc/admin/Dev-Info-Box.svelte';
 
   // #endregion ➤ 📦 Package Imports
 
@@ -103,12 +106,12 @@
   let
     /**
      * @description
-     * 📝 Device type detected
+     * 📝 device type detected
      */
     deviceType: IDeviceType = 'desktop',
     /**
      * @description
-     * 📝 Geo-Location response
+     * 📝 geo-location response
      */
     geoLocation: GeoJsResponse | null = null,
     /**
@@ -481,30 +484,42 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-<!--
-╭─────
-│ ➤ 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>
--->
+{#if import.meta.env.DEV}
+  <!--
+  ╭─────
+  │ [🐞]
+  │ ➤ Testing Configuration(s)
+  ╰─────
+  -->
+  <DevInfoBox>
+    <p>
+      Device Type :|: {deviceType}
+    </p>
+    <p>
+      Geo-Location :|: {geoLocation?.country_code}
+    </p>
+    <p>
+      Number of Adverts Detected :|: {betarenaAdsInjectMap.size}
+    </p>
+  </DevInfoBox>
+
+  <!--
+  ╭─────
+  │ [🐞]
+  │ ➤ Testing Advert(s)
+  ╰─────
+  -->
+  <!--
+  <div
+    data-betarena-zone-id=1
+  >
+  </div>
+
+  <hr>
+
+  <div
+    data-betarena-zone-id=2
+  >
+  </div>
+  -->
+{/if}

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

@@ -8,7 +8,7 @@
 ┣──────────────────────────────────────────────────────────────────────────────────┫
 │ 📝 Description                                                                   │
 ┣──────────────────────────────────────────────────────────────────────────────────┫
-│ Betarena Ad-Engine Component                                                     │
+│ Betarena Ad-Engine Component |:| Standard Advert (X1)                            │
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
@@ -90,15 +90,6 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-<p
-  style=
-  "
-  color: violet;
-  "
->
-  General Advert Sample is Triggered
-</p>
-
 <div
   id={CNAME}
   in:fly={{ y: 500, duration: 500 }}
@@ -163,8 +154,12 @@
     <a
       href={adData.data?.cta_link}
       target="_blank"
-      rel="noopener
-      noreferrer">
+      rel=
+      "
+      noopener
+      noreferrer
+      "
+    >
       <button
       >
         {adData.data?.cta_title ?? 'Recieve Bonus'}
@@ -174,9 +169,9 @@
           alt='icon-arrow'
           title='icon-arrow'
           loading='lazy'
-          style=
+          class=
           "
-          margin-left: 10px;
+          m-l-10
           "
         />
       </button>
@@ -208,30 +203,9 @@
   {
     /* 🎨 style */
     overflow: hidden;
-    border-radius: 40px 40px 0px 0px;
+    border-radius: 10px 10px 10px 10px;
     background-color: #383838;
 
-    a
-    {
-      text-decoration: none !important;
-      color: inherit;
-      display: flex;
-    }
-
-    button
-    {
-      /* 🎨 style */
-      outline: none !important;
-      border: none !important;
-      opacity: 1;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      align-items: center;
-      white-space: nowrap;
-      display: flex;
-      justify-content: center;
-    }
-
     p
     {
       /* 🎨 style */
@@ -257,19 +231,14 @@
     div#main-box
     {
       /* 🎨 style */
-      text-align: center;
       padding: 20px 20px 35px 20px;
 
       p
       {
-        /* 🎨 style */
-        margin: 0;
-        margin-bottom: 25px;
-
         &#title
         {
           /* 🎨 style */
-          color: #FFFFFF;
+          color: var(--white);
         }
       }
 
@@ -281,7 +250,7 @@
         width: 100%;
         padding: 10px;
         background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
-        color: #FFFFFF;
+        color: var(--white);
       }
     }
   }

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

@@ -8,7 +8,7 @@
 ┣──────────────────────────────────────────────────────────────────────────────────┫
 │ 📝 Description                                                                   │
 ┣──────────────────────────────────────────────────────────────────────────────────┫
-│ Betarena Ad-Engine Component                                                     │
+│ Betarena Ad-Engine Component |:| Slider Advert (X1)                              │
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
@@ -41,9 +41,11 @@
   import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
 
+  import { betarenaAdEngineStore } from './_store.js';
+  import { storeAdmin } from './store/admin.js';
+
   import iconClose from './assets/icon-close.svg';
   import iconArrow from './assets/icon-external-link.svg';
-  import { betarenaAdEngineStore } from './_store.js';
 
   import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
 
@@ -75,19 +77,33 @@
      * @description
      *  📣 `this` component **main** `id` and `data-testid` prefix.
      */ // eslint-disable-next-line no-unused-vars
-    CNAME = 'global⮕widget⮕betarenaAdEngine⮕main'
+    CNAME = 'global⮕widget⮕betarenaAdEngine⮕main',
+    /**
+     * @description
+     * 📝 number of `milliseconds` for advert show
+     * @example
+     * => 10000 (10 seconds)
+     */
+    timeoutForAdvertShow = 0, // 10000
+    /**
+     * @description
+     * 📝 number of `milliseconds` for advert close action show
+     * @example
+     * => 15000 (15 seconds)
+     */
+    timeoutForAdvertCloseAction = 0 // 15000
   ;
 
   let
     /**
      * @description
-     * 📝
+     * 📝 wether advert can be shown
      */
     isAdvertShown: boolean = false,
     /**
      * @description
-     * 📝
-    */
+     * 📝 wether advert (close button) can be shown
+     */
     isAdvertCloseBtnShown: boolean = false
   ;
 
@@ -108,27 +124,42 @@
   (
     () =>
     {
-      setTimeout
-      (
-        () =>
-        {
-          isAdvertShown = true;
-          return;
-        },
-        // 10000
-        0
-      );
-
-      setTimeout
-      (
-        () =>
-        {
-          isAdvertCloseBtnShown = true;
-          return;
-        },
-        // 15000
-        0
-      );
+      if (!isBetarenaAdShownForToday)
+      {
+        // ╭─────
+        // │ NOTE: |:| Advert timeour start
+        // ╰─────
+        setTimeout
+        (
+          () =>
+          {
+            isAdvertShown = true;
+
+            // ╭─────
+            // │ NOTE: |:| Advert timeout (close action) start
+            // ╰─────
+            setTimeout
+            (
+              () =>
+              {
+                isAdvertCloseBtnShown = true;
+                return;
+              },
+              timeoutForAdvertCloseAction
+            );
+
+            return;
+          },
+          timeoutForAdvertShow
+        );
+
+        storeAdmin.updateData
+        (
+          [
+            ['numberOfAdvertsActive', null]
+          ]
+        );
+      }
 
       return;
     }
@@ -149,15 +180,6 @@
 ╰──────────────────────────────────────────────────────────────────────────────────╯
 -->
 
-<p
-  style=
-  "
-  color: blueviolet;
-  "
->
-  Global Advert Sample is Triggered
-</p>
-
 {#if isAdvertShown && !isBetarenaAdShownForToday}
   <div
     id={CNAME}
@@ -177,6 +199,10 @@
         alt='icon-close'
         title='icon-close'
         loading='lazy'
+        class=
+        "
+        cursor-pointer
+        "
         on:click=
         {
           () =>
@@ -199,18 +225,19 @@
     ╰─────
     -->
     {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
-      <iframe
+      <!-- <iframe
         width=250
         height=250
         src={adData.data?.media}
-      />
-      <!--
+      /> -->
         <video
+          id="banner"
           width=250
           height=250
           src={adData.data?.media}
+          controls={false}
+          autoplay={true}
         />
-      -->
 
     {:else if (adData.type == 2)}
       <img
@@ -239,8 +266,16 @@
       -->
       <p
         id="title"
+        class=
+        "
+        s-20
+        w-600
+        m-0
+        m-b-20
+        text-center
+        "
       >
-        {adData.data?.title}
+        {@html adData.data?.title}
       </p>
 
       <!--
@@ -259,17 +294,27 @@
       >
         <button
         >
-          {adData.data?.cta_title ?? 'Recieve Bonus'}
+          <span
+            class=
+            "
+            s-18
+            w-500
+            "
+          >
+            {adData.data?.cta_title ?? 'Recieve Bonus'}
+          </span>
           <img
             id=''
             src={iconArrow}
             alt='icon-arrow'
             title='icon-arrow'
             loading='lazy'
-            style=
+            class=
             "
-            margin-left: 10px;
+            m-l-10
             "
+            width="12"
+            height="12"
           />
         </button>
       </a>
@@ -308,27 +353,7 @@
     /* 🎨 style */
     overflow: hidden;
     border-radius: 40px 40px 0px 0px;
-    background-color: #383838;
-
-    button
-    {
-      /* 🎨 style */
-      outline: none !important;
-      border: none !important;
-      opacity: 1;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      align-items: center;
-      white-space: nowrap;
-      display: flex;
-      justify-content: center;
-    }
-
-    p
-    {
-      /* 🎨 style */
-      font-family: "Roboto";
-    }
+    background-color: var(--dark-theme-1-4-shade);
 
     img
     {
@@ -338,6 +363,7 @@
         position: absolute;
         top: 10px;
         right: 10px;
+        z-index: 1;
       }
 
       &#banner
@@ -352,24 +378,27 @@
     {
       /* 🎨 style */
       width: 100%;
+      object-fit: cover;
+    }
+
+    video
+    {
+      /* 🎨 style */
+      width: 100%;
+      object-fit: cover;
     }
 
     div#main-box
     {
       /* 🎨 style */
-      text-align: center;
       padding: 20px 20px 35px 20px;
 
       p
       {
-        /* 🎨 style */
-        margin: 0;
-        margin-bottom: 25px;
-
         &#title
         {
           /* 🎨 style */
-          color: #FFFFFF;
+          color: var(--white);
         }
       }
 
@@ -381,7 +410,16 @@
         width: 100%;
         padding: 10px;
         background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
-        color: #FFFFFF;
+        color: var(--white);
+      }
+    }
+
+    :global
+    {
+      span.custom-betarena-advert-x1
+      {
+        /* 🎨 style */
+        color: var(--primary) !important;
       }
     }
   }