@betarena/ad-engine 0.3.3 → 1.0.0

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

@@ -187,21 +187,17 @@
       noreferrer
       "
     >
-      <button
-      >
-        {adData.data?.cta_title ?? 'Recieve Bonus'}
-        <img
-          id=''
-          src={iconArrow}
-          alt='icon-arrow'
-          title='icon-arrow'
-          loading='lazy'
-          class=
-          "
-          m-l-10
-          "
-        />
-      </button>
+      {adData.data?.cta_title ?? 'Receive Bonus'}
+      <img
+        src={iconArrow}
+        alt='icon-arrow'
+        title='icon-arrow'
+        loading='lazy'
+        class=
+        "
+        icon-arrow
+        "
+      />
     </a>
 
   </div>
@@ -230,13 +226,27 @@
   {
     /* 🎨 style */
     overflow: hidden;
-    border-radius: 10px 10px 10px 10px;
-    background-color: #383838;
+    border-radius: 10px;
+    background-color: var(--colors-background-bg-tertiary, #EBEDEF);
+
+    *, *::before, *::after
+    {
+      box-sizing: border-box;
+    }
 
     p
     {
       /* 🎨 style */
-      font-family: "Roboto";
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      margin: 0;
+    }
+
+    a
+    {
+      text-decoration: none;
+      color: inherit;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      cursor: pointer;
     }
 
     img
@@ -253,6 +263,7 @@
     {
       /* 🎨 style */
       width: 100%;
+      border: none;
     }
 
     div#main-box
@@ -265,19 +276,25 @@
         &#title
         {
           /* 🎨 style */
-          color: var(--white);
+          color: var(--colors-text-text-primary-900, #1F2328);
         }
       }
 
-      button
+      a
       {
         /* 🎨 style */
+        display: block;
         border-radius: 7.57px;
         max-height: 50px;
         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: var(--white);
+        background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, var(--colors-success-700, #087443) 0%, var(--colors-success-500, #17B26A) 100%);
+        color: var(--colors-foreground-fg-primary-900, #1F2328);
+
+        .icon-arrow
+        {
+          margin-left: 10px;
+        }
       }
     }
   }

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

@@ -345,16 +345,16 @@
       z-index: 1;
       /* 🎨 style */
       width: 100%;
-      color: var(--colors-text-text-primary-900, #fbfbfb);
+      color: var(--colors-text-text-primary-900, #1F2328);
       text-align: center;
-      font-family: Roboto;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       font-size: 12px !important;
       font-style: normal;
       font-weight: 700 !important;
       line-height: 38px !important; /* 190% */
       text-transform: uppercase;
       margin: 0 !important;
-      background: var(--colors-background-bg-secondary, #313131);
+      background: var(--colors-background-bg-secondary, #F5F6F7);
     }
 
     .interscroller-bg-wrapper
@@ -387,6 +387,7 @@
         {
           /* 🎨 style */
           text-decoration: none;
+          color: inherit;
           height: inherit;
           /* 🛝 layout */
           display: block;

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

@@ -45,7 +45,6 @@
   import { betarenaAdEngineStore } from './_store.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 { logger } from './utils/debug.js';
@@ -72,7 +71,12 @@
     /**
      * @augments AdsCreativeMain
      */
-    adData: AdsCreativeMain
+    adData: AdsCreativeMain,
+    /**
+     * @description
+     * 📝 Logged-in users should not wait for the initial advert show delay.
+     */
+    isLoggedIn = false
   ;
 
   const
@@ -111,7 +115,6 @@
   ;
 
   $: ({ isBetarenaAdShownForToday } = { ...$betarenaAdEngineStore });
-  $: ({ isDarkTheme } = { ...$storeSession });
 
   // #endregion ➤ 📌 VARIABLES
 
@@ -138,12 +141,8 @@
     {
       if (!isBetarenaAdShownForToday)
       {
-        // ╭─────
-        // │ NOTE: |:| Advert timeour start
-        // ╰─────
-        intTimeoutForAdvertShow = setTimeout
-        (
-          () =>
+        const
+          showAdvert = () =>
           {
             isAdvertShown = true;
 
@@ -166,9 +165,21 @@
             );
 
             return;
-          },
-          timeoutForAdvertShow
-        );
+          }
+        ;
+
+        // ╭─────
+        // │ NOTE: |:| Advert timeout start
+        // ╰─────
+        if (isLoggedIn)
+          showAdvert();
+        else
+          intTimeoutForAdvertShow = setTimeout
+          (
+            showAdvert,
+            timeoutForAdvertShow
+          )
+        ;
 
         storeAdmin.updateData
         (
@@ -229,16 +240,9 @@
     id={CNAME}
     in:fly={{ y: 500, duration: 500 }}
     out:fly={{ y: 500, duration: 500 }}
-    class:dark-theme={isDarkTheme}
   >
     <div
-      style=
-      "
-        position: relative;
-        height: 280px;
-        width: auto;
-        margin: 20px 19.5px 0 19.5px;
-      "
+      class="ad-banner-wrapper"
     >
 
       <!--
@@ -250,8 +254,7 @@
         <button
           type="button"
           aria-label="Close advert"
-          class="cursor-pointer"
-          style="background:none;border:none;padding:0;"
+          class="ad-close-btn"
           on:click=
           {
             () =>
@@ -397,15 +400,7 @@
       -->
       <p
         id="title"
-        class=
-        "
-        s-18
-        w-700
-        m-0
-        m-b-20
-        text-center
-        color-white
-        "
+        class="ad-title"
       >
         {@html adData.data?.title}
       </p>
@@ -423,10 +418,7 @@
         noopener
         noreferrer
         "
-        style=
-        "
-        justify-content: center;
-        "
+        class="ad-cta-link ad-cta-btn"
         on:click=
         {
           () =>
@@ -448,24 +440,11 @@
           }
         }
       >
-        <button
-          class=
-          "
-          btn-primary
-          "
+        <span
+          class="ad-cta-text"
         >
-          <span
-            class=
-            "
-            s-16
-            w-500
-            color-white
-            uppercase
-            "
-          >
-            {adData.data?.cta_title ?? 'Recieve Bonus'}
-          </span>
-        </button>
+          {adData.data?.cta_title ?? 'Receive Bonus'}
+        </span>
       </a>
 
     </div>
@@ -491,6 +470,12 @@
   ╰──────────────────────────────────────────────────────────────────────────────╯
   */
 
+  :global(body.disable-scroll)
+  {
+    overflow: hidden !important;
+    height: 100%;
+  }
+
   div#global⮕widget⮕betarenaAdEngine⮕main
   {
     /* 📌 position */
@@ -502,7 +487,35 @@
     /* 🎨 style */
     overflow: hidden;
     border-radius: 20px 20px 0px 0px;
-    background-color: #232323;
+    background-color: var(--colors-background-bg-secondary, #F5F6F7FF);
+
+    /* Shadows/shadow-xl */
+    box-shadow: 0 20px 24px -4px var(--colors-effects-shadows-shadow-xl_01, rgba(255, 255, 255, 0.00)), 0 8px 8px -4px var(--colors-effects-shadows-shadow-xl_02, rgba(255, 255, 255, 0.00)), 0 3px 3px -1.5px var(--colors-effects-shadows-shadow-xl_03, rgba(255, 255, 255, 0.00));
+
+    *, *::before, *::after
+    {
+      box-sizing: border-box;
+    }
+
+    p
+    {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      margin: 0;
+    }
+
+    a
+    {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    button
+    {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
 
     @mixin banner
     {
@@ -522,6 +535,22 @@
       margin: 0;
     }
 
+    .ad-banner-wrapper
+    {
+      position: relative;
+      height: 280px;
+      width: auto;
+      margin: 20px 19.5px 0 19.5px;
+    }
+
+    .ad-close-btn
+    {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    }
+
     img
     {
       &.close-btn
@@ -536,19 +565,16 @@
       &#banner
       {
         @include banner;
-        /* 🎨 style */
       }
     }
 
     iframe
     {
-      /* 🎨 style */
       @include banner;
     }
 
     video
     {
-      /* 🎨 style */
       @include banner;
     }
 
@@ -557,25 +583,51 @@
       /* 🎨 style */
       padding: 20px 12.5px 60px 12.5px;
 
-      p
+      .ad-title
       {
-        &#title
-        {
-          /* 🎨 style */
-          color: var(--dark-theme);
-        }
+        font-size: 18px;
+        font-weight: 700;
+        margin: 0 0 20px 0;
+        text-align: center;
+        color: var(--colors-text-text-primary-900, #1F2328);
+      }
+
+      .ad-cta-link
+      {
+        display: flex;
+        justify-content: center;
+        text-decoration: none;
+        color: inherit;
       }
 
-      button
+      .ad-cta-btn
       {
         /* 🎨 style */
         border-radius: 8px;
         max-height: 48px;
         min-height: 48px;
         width: 100%;
-        padding: 12px;
-        // 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: var(--dark-theme-1-7-shade);
+        text-align: center;
+        font-style: normal;
+        font-weight: 500;
+        padding: 9px 20px;
+        color: var(--colors-foreground-fg-primary-900, #161A28);
+        background: var(--colors-background-bg-brand-solid, #CFE61A);
+        border: 2px solid transparent;
+        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%) 1;
+      
+        &:hover {
+          background: var(--colors-background-bg-brand-solid_hover, #B3C912);
+        }
+
+      }
+
+      .ad-cta-text
+      {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--colors-foreground-fg-primary-900, #1F2328);
+        text-transform: uppercase;
       }
     }
 
@@ -584,15 +636,9 @@
       span.custom-betarena-advert-x1
       {
         /* 🎨 style */
-        color: var(--primary) !important;
+        color: var(--colors-text-text-primary_on-brand, #E4FF30) !important;
       }
     }
   }
 
-  /*
-  ╭──────────────────────────────────────────────────────────────────────────────╮
-  │ 🌒 DARK-THEME                                                                │
-  ╰──────────────────────────────────────────────────────────────────────────────╯
-  */
-
 </style>

package/src/lib/misc/admin/Dev-Info-Box.svelte

@@ -166,7 +166,7 @@
     <button
       class=
       "
-      btn-dark
+      ad-debug-btn
       "
       on:click=
       {
@@ -246,6 +246,16 @@
           font-weight: bold;
         }
       }
+
+      .ad-debug-btn
+      {
+        padding: 10px 17px;
+        border-radius: 12px;
+        background-color: #e6e6e6;
+        cursor: pointer;
+        border: none;
+        outline: none;
+      }
     }
   }
 

package/src/lib/store/session.ts

@@ -30,14 +30,15 @@ const
    */
   storeObject: IAdEngineSessionStore
     = {
-      isDarkTheme: false,
       data:
       {
         translation:
         {
           language: 'en',
-          // @ts-expect-error - 📝 translation object
-          translations: {},
+          translation: {
+            advertisement: 'ADVERTISEMENT',
+            scroll: 'SCROLL TO CONTINUE',
+          },
         },
       }
     }
@@ -114,13 +115,10 @@ function createLocalStore
               /**
                * @description
                */
-              // eslint-disable-next-line no-unused-vars
               dataPoint = iterator[1]
             ;
 
-            if (dataTarget == 'darkTheme')
-              storeObject.isDarkTheme = !storeObject.isDarkTheme;
-            else if (dataTarget == 'setTranslation')
+            if (dataTarget == 'setTranslation')
               storeObject.data.translation = dataPoint;
             ;
           }

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

@@ -8,15 +8,6 @@ import type { IAdsServiceTranslations } from "@betarena/scores-lib/types/ad-engi
  */
 export interface IAdEngineSessionStore
 {
-  /**
-   * @description
-   * 📝 Wether theme is dark
-   * @example
-   * :: false
-   * @default
-   * :: false
-   */
-  isDarkTheme: boolean;
   /**
    * @description
    * 📝 store data proerty (to be updated)
@@ -36,6 +27,5 @@ export interface IAdEngineSessionStore
  * 📝 store data proerty (to be updated)
  */
 type IAdEngineSessionDataProp =
-  | 'darkTheme'
   | 'setTranslation';
 ;