@everymatrix/player-reality-check 0.0.192 → 0.0.196

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-reality-check",
-  "version": "0.0.192",
+  "version": "0.0.196",
   "main": "dist/player-reality-check.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "90772f9f46872463853a444005e5adbfb07fc973"
+  "gitHead": "9809bd993cd1842fb5832ca5b3269eb33d0be029"
 }

package/src/PlayerRealityCheck.svelte

@@ -5,34 +5,67 @@
   import { getDevice } from 'rvhelper';
 
   export let realitycheck:any = '';
+  export let endpoint:string = '';
+  export let playerid:string = '';
+  export let session:string = '';
 
   let userAgent:String = window.navigator.userAgent;
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
   let frequency = '';
   let receivedData:any = {};
   let realityCheckData:any = {};
+  let isLoading:boolean = true;
 
   let realityCheckSuccess:boolean = false;
-  let realityCheckSuccessMessage:string = 'Reality check ha been successfully updated.';
-
-  let realityCheckOptions = [
-    {value: '0', text: 'Never'},
-    {value: '60', text: '1 Hour'},
-    {value: '120', text: '2 Hours'},
-    {value: '180', text: '3 Hours'},
-    {value: '240', text: '4 Hours'}
-  ]
-
-  // Send Frequency period and date
-  const submitFrequency = () => {
-    window.postMessage({ type: 'SubmittedRealityCheck', realityCheckUpdatedValue: frequency }, window.location.href);
+  let realityCheckSuccessMessage:string = 'Reality check has been successfully updated.';
+  let realityCheckValues:Array<Object> = [];
+  let realityCheckOptions:Array<Object> = [];
+
+  // Get Reality Check Values From NW
+  const getRealityCheckValues = () => {
+    let url = new URL(`${endpoint}/player/${playerid}/availablerealityvalues`);
+
+    let options = {
+      method: "GET",
+      headers: {
+        'playerId': playerid,
+        'X-SessionId': session,
+        'accept': 'application/json'
+      },
+    };
+
+    fetch(url, options)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+
+        realityCheckValues = data.AvailableRealityCheckValues;
+
+        createRealityCheckOptions();
+        verifyFrequency();
+
+        isLoading = false;
+      }, (err:any) => {
+        console.error(err);
+      });
   }
 
-  const toggleScreen = () => {
-    window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
+  // Create Reality Check Options Array
+  const createRealityCheckOptions = () => {
+    realityCheckValues.forEach((value) => {
+      if (value == 0) {
+        realityCheckOptions.push({'value': value.toString(), 'text': 'Never'});
+      } else if (value < 60) {
+        realityCheckOptions.push({'value': value.toString(), 'text': value + ' Minutes'});
+      } else if (value == 60) {
+        realityCheckOptions.push({'value': value.toString(), 'text': '1 Hour'});
+      } else if (value > 60) {
+        realityCheckOptions.push({'value': value.toString(), 'text': value / 60 + ' Hours'});
+      }
+    });
   }
 
-  const initialLoad = () => {
+  // Verify if frequency exists
+  const verifyFrequency = () => {
     if(realitycheck) {
       frequency = realitycheck;
     } else {
@@ -40,6 +73,15 @@
     }
   }
 
+  // Send Frequency period and date
+  const submitFrequency = () => {
+    window.postMessage({ type: 'SubmittedRealityCheck', realityCheckUpdatedValue: frequency }, window.location.href);
+  }
+
+  const toggleScreen = () => {
+    window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
+  }
+
   const messageHandler = (e:any) => {
     if (e.data) {
       switch(e.data.type) {
@@ -61,7 +103,7 @@
     }
   });
 
-  $: realitycheck && initialLoad();
+  $: endpoint && playerid && session && getRealityCheckValues();
 </script>
 
 
@@ -86,14 +128,18 @@
       <div class="RealityCheckDescription {isMobile ? 'RealityCheckDescriptionMobile' : ''}">
         <p>The Reality Check facility allows you to set the frequency at which you will see a Reality Check on the screen within your gaming session. A Reality Check means a display of the time elapsed since your session began.<br><br>
           You are able to control the frequency at which the Reality Check will appear on your screen.</p>
-        <form class="customRadio">
-          {#each realityCheckOptions as {value, text}, idx}
-            <div>
-              <input type="radio" id="{value}" {value} bind:group={frequency} />
-              <label for="{value}">{text}</label>
-            </div>
-          {/each}
-        </form>
+        {#if isLoading}
+          <p>Loading items, please wait ...</p>
+          {:else}
+          <form class="customRadio">
+            {#each realityCheckOptions as {value, text}, idx}
+              <div>
+                <input type="radio" id="{value}" {value} bind:group={frequency} />
+                <label for="{value}">{text}</label>
+              </div>
+            {/each}
+          </form>
+        {/if}
       </div>
       <div class="BottomButtonsArea {isMobile ? 'BottomButtonsAreaMobile' : ''}">
         <button class="PlayerRealityCheckButton" on:click={() => submitFrequency()}>Set frequency</button>
@@ -109,6 +155,10 @@
     @return $value * $multiplicator;
   }
 
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
   .successMessage {
     position: absolute;
     display: block;