WebXR (untested) support and fix bug with Fast drop

gameblabla · Nov 9, 2024 · d9a8f73 · d9a8f73
1 parent 096609c
commit d9a8f73
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 44 deletions.
diff --git a/game.js b/game.js
@@ -1,10 +1,9 @@
 import * as THREE from 'three';
-import {
-    FontLoader
-} from 'three/addons/loaders/FontLoader.js';
-import {
-    TextGeometry
-} from 'three/addons/geometries/TextGeometry.js';
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+import { VRButton } from 'three/addons/webxr/VRButton.js';
+
+const supportsXR = 'xr' in window.navigator;
 
 // Initialize variables
 let scene, camera, renderer;
@@ -188,7 +187,9 @@ let introMusic; // Intro music
 let allResourcesLoadedCalled = false;
 
 init();
-animate();
+//animate();
+renderer.setAnimationLoop(animate);
+
 
 function init() {
     // Show the loading screen
@@ -215,6 +216,12 @@ function init() {
     addEventListeners();
 
     loadKeyBindings();
+
+    // Create VR button only if WebXR Is poss
+    if (supportsXR)
+	{
+		document.body.appendChild( VRButton.createButton( renderer ) );
+	}
 
     // Set up the scene
     scene = new THREE.Scene();
@@ -236,8 +243,83 @@ function init() {
     });
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
+
+    document.body.appendChild( getFullscreenButton( renderer ) );
+
+    if (supportsXR)
+    {
+		renderer.xr.enabled = true;
+	}
+	else
+	{
+		// Reference to the fullscreen button
+		const fullscreenButton = document.getElementById('fullscreen-button');
+
+		// Function to hide the fullscreen button with transition
+		function hideFullscreenButton() {
+			fullscreenButton.classList.add('hidden');
+			fullscreenButton.classList.remove('visible');
+		}
+
+		// Function to show the fullscreen button with transition
+		function showFullscreenButton() {
+			fullscreenButton.classList.add('visible');
+			fullscreenButton.classList.remove('hidden');
+		}
+
+		// Initialize the button as visible
+		fullscreenButton.classList.add('visible');
+
+		// Listen for fullscreen change events
+		document.addEventListener('fullscreenchange', () => {
+			if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
+				hideFullscreenButton();
+			} else {
+				showFullscreenButton();
+			}
+		});
+	}
+}
+
+
+function getFullscreenButton(renderer) {
+    var button = document.createElement('button');
+    button.id = 'fullscreen-button'; // Assign an ID for easy reference
+    button.style.position = 'absolute';
+    button.style.right = '20px';
+    button.style.bottom = '20px';
+    button.style.width = '100px';
+    button.style.border = '0';
+    button.style.padding = '8px';
+    button.style.cursor = 'pointer';
+    button.style.backgroundColor = '#000';
+    button.style.color = '#fff';
+    button.style.fontFamily = 'sans-serif';
+    button.style.fontSize = '13px';
+    button.style.fontStyle = 'normal';
+    button.style.textAlign = 'center';
+    button.style.zIndex = '999';
+    button.textContent = 'FULLSCREEN';
+
+    button.onclick = function() {
+        let fullscreenElement = document.getElementById('main-container');
+        if (!document.fullscreenElement) {
+            if (fullscreenElement.requestFullscreen) {
+                fullscreenElement.requestFullscreen();
+            }
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+        }
+    };
+
+    return button;
 }
 
+
+
+
 function loadKeyBindings() {
     let storedBindings = localStorage.getItem('keyBindings');
     if (storedBindings) {
@@ -1516,8 +1598,6 @@ function detectShadowCollision() {
 }
 
 function animate() {
-    requestAnimationFrame(animate);
-
 
     // Update background
     if (backgroundGeometry) {
@@ -1986,7 +2066,7 @@ function onDocumentKeyDown(event) {
             playSFX('move');
             break;
         case 'Fast Drop':
-            isFastDropping = true;
+            isFastDropping ^= 1;
             break;
         case 'Rotate Y Negative':
             handleRotation({

diff --git a/index.html b/index.html
@@ -218,7 +218,22 @@
 			transition: width 0.2s ease-in-out;
 		}
 
+		/* Fullscreen Button Transition Styles */
+		#fullscreen-button {
+			transition: opacity 0.5s ease, visibility 0.5s ease;
+			opacity: 1;
+			visibility: visible;
+		}
+
+		#fullscreen-button.hidden {
+			opacity: 0;
+			visibility: hidden;
+		}
 
+		#fullscreen-button.visible {
+			opacity: 1;
+			visibility: visible;
+		}
     </style>
     <!-- Import map for module imports -->
     <script type="importmap">
@@ -233,43 +248,46 @@
     <!-- Include Howler.js -->
     <script src="howler.min.js"></script>
 </head>
-<body class="prevent-select">
-    <!-- Intro Video -->
-    <video id="intro-video" autoplay muted playsinline>
-        <source src="video/intro-video.mp4" type="video/mp4">
-        <source src="video/intro-video.av1" type='video/mp4; codecs="av01.0.05M.08"'>
-        Your browser does not support the video tag.
-    </video>
-
-    <!-- Ending Video -->
-    <video id="cutscene-video" muted playsinline class="hidden">
-        <source src="video/woman.mp4" type="video/mp4">
-        <source src="video/woman.av1" type='video/mp4; codecs="av01.0.05M.08"'>
-        Your browser does not support the video tag.
-    </video>
-
-    <div id="overlay"></div>
-    <div id="next-piece"></div>
-    <div id="score">Score: 0</div>
-    <div id="opponent-hp">Opponent HP: 100</div>
-    <div id="time-remaining">Time: 120</div>
-
-	<div id="story-text" style="position: absolute; bottom: 10%; width: 100%; text-align: center; color: #fff; font-size: 24px;">
-		<div id="story-text-background">
-			<!-- Text will be inserted here -->
+<body class="prevent-select" id="main-container">
+
+		<!-- Intro Video -->
+		<video id="intro-video" autoplay muted playsinline>
+			<source src="video/intro-video.mp4" type="video/mp4">
+			<source src="video/intro-video.av1" type='video/mp4; codecs="av01.0.05M.08"'>
+			Your browser does not support the video tag.
+		</video>
+
+		<!-- Ending Video -->
+		<video id="cutscene-video" muted playsinline class="hidden">
+			<source src="video/woman.mp4" type="video/mp4">
+			<source src="video/woman.av1" type='video/mp4; codecs="av01.0.05M.08"'>
+			Your browser does not support the video tag.
+		</video>
+
+		<div id="overlay"></div>
+		<div id="next-piece"></div>
+		<div id="score">Score: 0</div>
+		<div id="opponent-hp">Opponent HP: 100</div>
+		<div id="time-remaining">Time: 120</div>
+
+		<div id="story-text" style="position: absolute; bottom: 10%; width: 100%; text-align: center; color: #fff; font-size: 24px;">
+			<div id="story-text-background">
+				<!-- Text will be inserted here -->
+			</div>
 		</div>
-	</div>
-
-	<!-- Loading Screen -->
-	<div id="loading-screen">
-		<div id="loading-content">
-			<img src="images/walrus.png">
-			<p style="font-size: 24px;">Please wait for the game to load resources</p>
-			<div id="loading-bar-container">
-				<div id="loading-bar"></div>
+
+
+		<!-- Loading Screen -->
+		<div id="loading-screen">
+			<div id="loading-content">
+				<img src="images/walrus.png">
+				<p style="font-size: 24px;">Please wait for the game to load resources</p>
+				<div id="loading-bar-container">
+					<div id="loading-bar"></div>
+				</div>
 			</div>
 		</div>
-	</div>
+
 
     <!-- Main JavaScript code -->
     <script type="module" src="game.js"></script>