@betarena/ad-engine 0.0.41 → 0.0.43

package/package.json

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

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

@@ -48,6 +48,7 @@
   import { detectDeviceType } from './utils/device.js';
   import { getUserLocation } from './utils/geo.js';
   import { removeNull } from '@betarena/scores-lib/dist/functions/func.common.js';
+  import { storeSession } from './store/session.js';
 
   import WidgetAdvertSlide from './Advert-Slide-Child.svelte';
   import WidgetAdGeneral from './Advert-General-Child.svelte';
@@ -90,7 +91,12 @@
      * @description
      * 📝 `List` of **tag ids**
      */
-    authorArticleTagIds: number[] = []
+    authorArticleTagIds: number[] = [],
+    /**
+     * @description
+     * 📝 Dark theme value
+     */
+    isDarkTheme: boolean = false
   ;
 
   /**
@@ -103,6 +109,8 @@
     | 'mobile'
   ;
 
+  $: $storeSession.isDarkTheme = isDarkTheme;
+
   let
     /**
      * @description

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

@@ -45,6 +45,7 @@
   import { storeAdmin } from './store/admin.js';
   import { postMod } from './utils/fetch.js';
   import { betarenaEndpoint } from './constants/instance.js';
+  import { storeSession } from './store/session.js';
 
   import iconClose from './assets/icon-close.svg';
   import iconArrow from './assets/icon-external-link.svg';
@@ -110,6 +111,7 @@
   ;
 
   $: ({ isBetarenaAdShownForToday } = { ...$betarenaAdEngineStore });
+  $: ({ isDarkTheme } = { ...$storeSession });
 
   // #endregion ➤ 📌 VARIABLES
 
@@ -187,6 +189,7 @@
     id={CNAME}
     in:fly={{ y: 500, duration: 500 }}
     out:fly={{ y: 500, duration: 500 }}
+    class:dark-theme={isDarkTheme}
   >
 
     <!--
@@ -395,7 +398,7 @@
     /* 🎨 style */
     overflow: hidden;
     border-radius: 40px 40px 0px 0px;
-    background-color: var(--dark-theme-1-4-shade);
+    background-color: var(--white);
 
     @mixin banner
     {
@@ -403,6 +406,7 @@
       max-height: 355px;
       min-height: 355px;
       width: 100%;
+      background-color: black;
       object-fit: cover;
     }
 
@@ -446,7 +450,7 @@
         &#title
         {
           /* 🎨 style */
-          color: var(--white);
+          color: var(--dark-theme);
         }
       }
 
@@ -473,4 +477,22 @@
     }
   }
 
+  /*
+  ╭──────────────────────────────────────────────────────────────────────────────╮
+  │ 🌒 DARK-THEME                                                                │
+  ╰──────────────────────────────────────────────────────────────────────────────╯
+  */
+
+  div#global⮕widget⮕betarenaAdEngine⮕main.dark-theme
+  {
+    /* 🎨 style */
+    background-color: var(--dark-theme-1-4-shade);
+
+    p
+    {
+      /* 🎨 style */
+      color: var(--white) !important;
+    }
+  }
+
 </style>

package/src/lib/store/admin.ts

@@ -16,7 +16,6 @@
 // #region ➤ 📦 Package Imports
 
 import { writable } from 'svelte/store';
-import { passByValue } from '@betarena/scores-lib/dist/functions/func.common.js';
 
 // #endregion ➤ 📦 Package Imports
 

package/src/lib/store/session.ts

@@ -0,0 +1,138 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Component Overview                                                 │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+// │ ➤ Status :|: 🔒 LOCKED                                                           │
+// │ ➤ Author(s) :|: @migbash                                                         │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ > Client 'Svelte/Store'                                                          │
+// │ > Main Betarena Ad-Engine Session ('Ephermal') Store                             │
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+/* eslint-disable max-len */
+
+// #region ➤ 📦 Package Imports
+
+import { writable } from 'svelte/store';
+
+import type { IAdEngineSessionDataProp, IAdEngineSessionStore } from '../types/session.js';
+
+// #endregion ➤ 📦 Package Imports
+
+// #region ➤ 📌 VARIABLES
+
+const
+  /**
+   * @description
+   * 📝 store object instance
+   */
+  storeObject: IAdEngineSessionStore
+    = {
+      isDarkTheme: false
+    }
+;
+
+// #endregion ➤ 📌 VARIABLES
+
+// #region ➤ 🛠️ METHODS
+
+/**
+ * @author
+ *  @migbash
+ * @summary
+ *  💠 STORE
+ * @description
+ *  📝 SvelteJs store declaration
+ * @returns
+ *  📤 SvelteJs store
+ */
+function createLocalStore
+(
+)
+{
+  const
+    // ╭─────
+    // │ NOTE: |:| 📣 default 'svelte/store' exports.
+    // ╰─────
+    {
+      subscribe,
+      set,
+      update
+    } = writable
+    (
+      storeObject
+    ),
+    /**
+     * @description
+     *  📣 Complementary 'store' added methods.
+     */
+    methods
+      = {
+
+        // ╭──────────────────────────────────────────────────────────────────────────────────╮
+        // │ 📣 Main Logic                                                                    │
+        // ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+        /**
+         * @author
+         *  @migbash
+         * @summary
+         *  - 🔹 HELPER
+         *  - IMPORTANT
+         * @description
+         *  📣 Update **target** `list` data of target `properties` to update.
+         * @param { [ IAdEngineSessionDataProp, any] [] } data
+         *  💠 **[required]** data point to update.
+         * @return { void }
+         */
+        updateData:
+        (
+          data: [IAdEngineSessionDataProp, any][]
+        ): void =>
+        {
+          // ╭─────
+          // │ NOTE: |:| loop over each data property to update
+          // ╰─────
+          for (const iterator of data)
+          {
+            const
+              /**
+               * @description
+               */
+              dataTarget = iterator[0],
+              /**
+               * @description
+               */
+              // eslint-disable-next-line no-unused-vars
+              dataPoint = iterator[1]
+            ;
+
+            if (dataTarget == 'darkTheme')
+              storeObject.isDarkTheme = !storeObject.isDarkTheme;
+            ;
+          }
+
+          set
+          (
+            storeObject
+          );
+
+          return;
+        },
+
+      }
+  ;
+
+  return {
+    subscribe,
+    set,
+    update,
+    ...methods
+  };
+}
+
+// #endregion ➤ 🛠️ METHODS
+
+export const storeSession = createLocalStore();

package/src/lib/types/ad-engine.d.ts

@@ -1,5 +1,3 @@
-import { IBetarenaUser } from "@betarena/scores-lib/types/_FIREBASE_.js";
-
 /**
  * @author
  *  @migbash

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

@@ -0,0 +1,26 @@
+/**
+ * @author
+ *  @migbash
+ * @summary
+ *  🔹 INTERFACE
+ */
+export interface IAdEngineSessionStore
+{
+  /**
+   * @description
+   * 📝 Wether theme is dark
+   * @example
+   * :: false
+   * @default
+   * :: false
+   */
+  isDarkTheme: boolean;
+}
+
+/**
+ * @description
+ * 📝 store data proerty (to be updated)
+ */
+type IAdEngineSessionDataProp =
+  | 'darkTheme'
+;