@betarena/ad-engine 0.0.22 → 0.0.24

package/src/lib/constants/instance.ts

@@ -1,10 +1,13 @@
 export const
   /**
    * @description
-   * 📝 Respective Betarena API endpoint for Ad-Engine Data
+   * 📝 respective Betarena API endpoint for Ad-Engine Data
    * @example
-   *  - (local) http://localhost:58749
-   *  - (dev) http://betarena-test-e2748dab12f5.herokuapp.com
+   *  ➤ dev|:|local
+   *      "http://localhost:58749"
+   *      "http://192.168.1.236:58749"
+   *  ➤ dev|:|live|:|staging
+   *      "https://betarena-test-e2748dab12f5.herokuapp.com"
    */
   betarenaEndpoint = 'https://betarena-test-e2748dab12f5.herokuapp.com'
 ;

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

@@ -0,0 +1,199 @@
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 High Order Component Overview                                                 │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+│ ➤ Status :|: 🔒 LOCKED                                                           │
+│ ➤ Author(s) :|: @migbash                                                         │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ 📝 Description                                                                   │
+┣──────────────────────────────────────────────────────────────────────────────────┫
+│ Admin Dev Info                                                                   │
+╰──────────────────────────────────────────────────────────────────────────────────╯
+-->
+
+<!--
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 🟦 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 { storeAdmin } from '../../store/admin.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. $: [..]                                                             │
+  // ╰────────────────────────────────────────────────────────────────────────╯
+
+  const
+    /**
+     * @description
+     *  📣 `this` component **main** `id` and `data-testid` prefix.
+     */ // eslint-disable-next-line no-unused-vars
+    CNAME = 'developer-admin-infobox'
+  ;
+
+  $: ({ numberOfAdvertsActive } = { ...$storeAdmin });
+
+  // #endregion ➤ 📌 VARIABLES
+
+</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={CNAME}
+>
+
+  <!--
+  ╭─────
+  │ > [I] Adverts Information
+  ╰─────
+  -->
+  <div
+    class=
+    "
+    grid-box
+    "
+  >
+    <p
+      class=
+      "
+      title
+      "
+    >
+      Adverts
+    </p>
+
+    <p>
+      Number of Adverts Loaded :|: {numberOfAdvertsActive}
+    </p>
+  </div>
+
+  <!--
+  ╭─────
+  │ > [I] General Information
+  ╰─────
+  -->
+  <div
+    class=
+    "
+    grid-box
+    "
+  >
+    <p
+      class=
+      "
+      title
+      "
+    >
+      General
+    </p>
+
+    <slot/>
+  </div>
+
+</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                                                              │
+  ╰──────────────────────────────────────────────────────────────────────────────╯
+  */
+
+  div#developer-admin-infobox
+  {
+    /* 🎨 style */
+		width: 100%;
+		background: blue;
+		padding: 20px;
+		overflow: hidden;
+    /* 🛝 layout */
+    display: grid;
+    align-content: space-between;
+    /* 🛝 layout */
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+
+    div.grid-box
+    {
+      /* 🎨 style */
+      padding: 15px;
+
+      :global
+      {
+        p
+        {
+          /* 🎨 style */
+          color: white;
+        }
+      }
+
+      p
+      {
+        /* 🎨 style */
+        color: white;
+
+        &.title
+        {
+          /* 🎨 style */
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+</style>

package/src/lib/store/admin.ts

@@ -0,0 +1,132 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Component Overview                                                 │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+// │ ➤ Status :|: 🔒 LOCKED                                                           │
+// │ ➤ Author(s) :|: @migbash                                                         │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ > Client 'Svelte/Store'                                                          │
+// │ > Main Scores Platform Admin Session ('Ephermal') Store                          │
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+/* eslint-disable max-len */
+
+// #region ➤ 📦 Package Imports
+
+import { writable } from 'svelte/store';
+import { passByValue } from '@betarena/scores-lib/dist/functions/func.common.js';
+
+// #endregion ➤ 📦 Package Imports
+
+// #region ➤ 📌 VARIABLES
+
+const
+  /**
+   * @description
+   * 📝 store object instance
+   */
+  storeObject: IAdminControl
+    = {
+      admin: false,
+      numberOfAdvertsActive: 0
+    }
+;
+
+// #endregion ➤ 📌 VARIABLES
+
+// #region ➤ 🛠️ METHODS
+
+/**
+ * @summary
+ * @author
+ * @description
+ * @returns
+ */
+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 { [IAdminDataProp, any][] } data
+         *  💠 **[required]** Target data to update.
+         * @return { void }
+         */
+        updateData:
+        (
+          data: [IAdminDataProp, any][]
+        ): void =>
+        {
+          for (const iterator of data)
+          {
+            const
+              /**
+               * @description
+               */
+              dataTarget = iterator[0],
+              /**
+               * @description
+               */
+              dataPoint = iterator[1]
+            ;
+
+            if (dataTarget == 'admin')
+              storeObject.admin = dataPoint;
+            else if (dataTarget == 'numberOfAdvertsActive')
+              storeObject.numberOfAdvertsActive += 1;
+            ;
+          }
+
+          set
+          (
+            storeObject
+          );
+
+          return;
+        },
+
+      }
+  ;
+
+  return {
+    subscribe,
+    set,
+    update,
+    ...methods
+  };
+}
+
+// #endregion ➤ 🛠️ METHODS
+
+export const storeAdmin = createLocalStore();

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

@@ -0,0 +1,34 @@
+/**
+ * @description
+ * 📝 platform admin control
+ */
+interface IAdminControl
+{
+  /**
+   * @description
+   * 📝 track platform state
+   * @example
+   * :: false
+   * @default
+   * :: false
+   */
+  admin: boolean;
+  /**
+   * @description
+   * 📝 number of adverts being shown, on current page
+   * @example
+   * :: 0
+   * @default
+   * :: 0
+   */
+  numberOfAdvertsActive: number;
+}
+
+/**
+ * @description
+ * 📝 store data proerty (to be updated)
+ */
+type IAdminDataProp =
+  | 'admin'
+  | 'numberOfAdvertsActive'
+;

package/src/lib/utils/device.ts

@@ -34,4 +34,4 @@ export function detectDeviceType
   else
     return 'desktop';
   ;
-}
+}