Add vr button + experiment with ads

cabanier · Oct 28, 2023 · 6b01bc3 · 6b01bc3
1 parent 4116449
commit 6b01bc3
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
     <script src="web.js"></script>
     <script src="gradient.js"></script>
     <script src="radio.js"></script>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1562826659403412" crossorigin="anonymous"></script>
   </head>
   <style>
     .slider-checkbox {
@@ -94,6 +95,77 @@
         width: 18px;
       }
     }
+
+    /* CSS */
+    .button-17 {
+      align-items: center;
+      appearance: none;
+      background-color: #fff;
+      border-radius: 24px;
+      border-style: none;
+      box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
+      box-sizing: border-box;
+      color: #3c4043;
+      cursor: pointer;
+      display: inline-flex;
+      fill: currentcolor;
+      font-family: "Google Sans",Roboto,Arial,sans-serif;
+      font-size: 40px;
+      font-weight: 500;
+      height: 48px;
+      justify-content: center;
+      letter-spacing: .25px;
+      line-height: normal;
+      max-width: 100%;
+      overflow: visible;
+      padding: 2px 24px;
+      position: relative;
+      text-align: center;
+      text-transform: none;
+      transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+      width: 60%;
+      will-change: transform,opacity;
+      z-index: 0;
+      transform: translateX(50%);
+    }
+
+    .button-17:hover {
+      background: #F6F9FE;
+      color: #174ea6;
+    }
+
+    .button-17:active {
+      box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
+      outline: none;
+    }
+
+    .button-17:focus {
+      outline: none;
+      border: 2px solid #4285f4;
+    }
+
+    .button-17:not(:disabled) {
+      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+    }
+
+    .button-17:not(:disabled):hover {
+      box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
+    }
+
+    .button-17:not(:disabled):focus {
+      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+    }
+
+    .button-17:not(:disabled):active {
+      box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
+    }
+
+    .button-17:disabled {
+      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+    }
   </style>
 
   <body style="position: relative">
@@ -243,7 +315,7 @@
         font-size: 20px;
         font-weight: 300;
         background-repeat: no-repeat;
-        background-color: #5b5b5b;
+        background-color: #7b7b7b;
         background-position-x: right;
         background-size: contain;
         border-radius: 20px;
@@ -262,13 +334,20 @@
         before shooting to control length. Hold grip button for sharper turns.
       </p>
       <p style="color: white">
-        Click the VR button on the bottom right to start! Browser with WebXR
+        Click the VR button to start! Browser with WebXR
         support required.
       </p>
       <section class="slider-checkbox">
         <input type="checkbox" id="advanced" aria-label="Advanced setting"/>
         <label class="label" style="color: white">Advanced mode. Reset score if you hit the ground or a building</label>
       </section>
+
+      <br>
+
+      <button class="button-17" id="startXRButton" role="button">Enter VR</button>
+
+      <br>
+
       <p style="font-size: 12px">
         Unofficial, fan-made, open source -
         <a
@@ -280,4 +359,23 @@
       <p style="font-size: 12px;">Originally created by - <a href="https://github.com/talkol" style="font-size: 12px; color: black;">Tal Kol</a>. Updated by - <a href="https://github.com/cabanier" style="font-size: 12px; color: black;">Rik Cabanier</a></p>
     </div>
   </body>
+  <script>
+    // Get a reference to the button
+    const startXRButton = document.getElementById("startXRButton");
+    if ('xr' in navigator) {
+      // Add a click event listener to the button
+      startXRButton.addEventListener("click", () => {
+        // Check if WebXR is supported by the browser
+        if ('xr' in navigator) {
+          // Request a WebXR session
+          const scene = document.querySelector("a-scene");
+          scene.enterVR();
+        } else {
+          console.error('WebXR is not supported in this browser.');
+        }
+      });
+    } else {
+      startXRButton.hidden = true;
+    }
+  </script>
 </html>
diff --git a/map.js b/map.js
@@ -51,6 +51,9 @@ AFRAME.registerComponent("map", {
         this.renderer.xr.setFoveation(0);
       }
 
+      fetch("https://cvs95jiqa7.execute-api.us-east-1.amazonaws.com/IncreaseUsageCounter?key=citysling_entervr", {
+        method: "GET",
+        mode: "cors"});
 
       this.XRStart = Date.now();
     });
@@ -72,6 +75,10 @@ AFRAME.registerComponent("map", {
         timeSpent = Math.floor(d/60) + " minutes";
 
       gtag('event', 'exit-vr', { time_spent: timeSpent });
+      fetch("https://cvs95jiqa7.execute-api.us-east-1.amazonaws.com/IncreaseUsageCounter?key=citysling_leavevr", {
+        method: "GET",
+        mode: "cors"});
+
       this.XRStart = 0;
     });