@everymatrix/player-reality-check 0.0.162 → 0.0.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-reality-check",
-  "version": "0.0.162",
+  "version": "0.0.166",
   "main": "dist/player-reality-check.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0ae2ffa2c984a3f90ab2eea42992f92e6acf725"
+  "gitHead": "cc5cea8f5d4ed68bf0b052d98cc82ce69e97fc45"
 }

package/src/PlayerRealityCheck.svelte

@@ -1,32 +1,75 @@
 <svelte:options tag={null} />
+
 <script lang="typescript">
+  import { onMount } from "svelte";
   import { getDevice } from 'rvhelper';
 
+  export let realitycheck:any = '';
+
   let userAgent:String = window.navigator.userAgent;
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
-  let frequency = 'never';
-
-  let options = [
-    {value: 'never', text: 'Never'},
-    {value: 'oneHour', text: '1 Hour'},
-    {value: 'twoHours', text: '2 Hours'},
-    {value: 'threeHours', text: '3 Hours'},
-    {value: 'fourHours', text: '4 Hours'}
+  let frequency = '';
+  let receivedData:any = {};
+  let realityCheckData:any = {};
+
+  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'}
   ]
 
-  //TODO: this should be used when api will be done
-  // const submitFrequency = () => {
-  //   window.postMessage({ type: '' }, window.location.href);
-  // }
+  // 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 initialLoad = () => {
+    if(realitycheck) {
+      frequency = realitycheck;
+    } else {
+      frequency = realityCheckOptions[0].value;
+    }
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'RealityCheckValueUpdated':
+          realityCheckSuccess = true;
+          setTimeout(() => {
+            realityCheckSuccess = false;
+          }, 2000)
+          break;
+      }
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: realitycheck && initialLoad();
 </script>
 
+
   <div class="PlayerRealityCheckWrapper { isMobile ? 'PlayerRealityCheckWrapperMobile' : '' }">
     {#if isMobile}
+      {#if realityCheckSuccess}
+        <div class="successMessageMobile">{realityCheckSuccessMessage}</div>
+      {/if}
     <div class="MenuReturnButton" on:click={() => toggleScreen()}>
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:#d0046c;}</style></defs><g transform="translate(-20 -158)">
         <g transform="translate(20 158)">
@@ -36,13 +79,15 @@
       <h2 class="RealityCheckTitleMobile">Reality Check</h2>
     </div>
     {/if}
-
+    {#if realityCheckSuccess}
+      <div class="successMessage {isMobile ? 'successMessageMobile' : ''}">{realityCheckSuccessMessage}</div>
+    {/if}
     <h2 class="RealityCheckTitle {isMobile ? 'RealityCheckTitleNone' : ''}">Reality Check</h2>
       <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 options as {value, text}, idx}
+          {#each realityCheckOptions as {value, text}, idx}
             <div>
               <input type="radio" id="{value}" {value} bind:group={frequency} />
               <label for="{value}">{text}</label>
@@ -51,7 +96,7 @@
         </form>
       </div>
       <div class="BottomButtonsArea {isMobile ? 'BottomButtonsAreaMobile' : ''}">
-        <button class="PlayerRealityCheckButton">Set frequency</button>
+        <button class="PlayerRealityCheckButton" on:click={() => submitFrequency()}>Set frequency</button>
       </div>
   </div>
 
@@ -64,6 +109,33 @@
     @return $value * $multiplicator;
   }
 
+  .successMessage {
+    position: absolute;
+    display: block;
+    top: 25px;
+    left: 50px;
+    background: #16CE16;
+    font-size: 14px;
+    border-radius: 5px;
+    padding: 10px;
+    color: #FFF;
+    &.successMessageMobile {
+      display: none;
+    }
+  }
+
+  .successMessageMobile {
+    display: block;
+    background: #16CE16;
+    font-size: 14px;
+    border-radius: 5px;
+    padding: 10px;
+    color: #FFF;
+    &.successMessage {
+      display: none;
+    }
+  }
+
   .TextContainer {
     display: flex;
     flex-direction: column;
@@ -72,7 +144,7 @@
 
   // Custom Radio Button
   .customRadio {
-    margin-top: 30px;
+    margin-top: 15px;
   }
 
   .customRadio div {
@@ -140,6 +212,7 @@
   }
 
   .PlayerRealityCheckWrapper {
+    position: relative;
     color: #07072A;
     padding: 50px;
     max-width: 760px;