add fullscreen option with doubleclick

Megaemce · Apr 2, 2024 · 498fe28 · 498fe28
1 parent 2e64af0
commit 498fe28
Showing 1 changed file with 54 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -5,18 +5,6 @@
         <link rel="stylesheet" type="text/css" href="fire.css" />
     </head>
     <body>
-        <script>
-            function startSound() {
-                const fireSound = document.getElementById("fireSound");
-                const startButton = document.getElementById("startButton");
-                const fire = document.getElementById("fire");
-
-                fire.classList.add("on");
-                startButton.style.display = "none";
-
-                fireSound.play();
-            }
-        </script>
         <div class="firebone">
             <div class="bonebackground"></div>
             <div id="fire" class="fire"></div>
@@ -30,5 +18,59 @@
         <audio id="fireSound" loop>
             <source src="fire-6699.mp3" type="audio/mpeg" />
         </audio>
+        <script>
+            function startSound() {
+                const fireSound = document.getElementById("fireSound");
+                const startButton = document.getElementById("startButton");
+                const fire = document.getElementById("fire");
+
+                fire.classList.add("on");
+                startButton.style.display = "none";
+
+                fireSound.play();
+            }
+
+            let lastClickTime = 0;
+            document.addEventListener("click", function (event) {
+                const currentTime = new Date().getTime();
+                const tapLength = currentTime - lastClickTime;
+                if (tapLength < 500 && tapLength > 0) {
+                    toggleFullScreen();
+                    event.preventDefault();
+                }
+                lastClickTime = currentTime;
+            });
+
+            // Toggle fullscreen mode
+            function toggleFullScreen() {
+                const element = document.documentElement;
+                const isFullScreen =
+                    document.fullscreenElement ||
+                    document.mozFullScreenElement ||
+                    document.webkitFullscreenElement ||
+                    document.msFullscreenElement;
+                if (!isFullScreen) {
+                    if (element.requestFullscreen) {
+                        element.requestFullscreen();
+                    } else if (element.mozRequestFullScreen) {
+                        element.mozRequestFullScreen();
+                    } else if (element.webkitRequestFullscreen) {
+                        element.webkitRequestFullscreen();
+                    } else if (element.msRequestFullscreen) {
+                        element.msRequestFullscreen();
+                    }
+                } else {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    } else if (document.mozCancelFullScreen) {
+                        document.mozCancelFullScreen();
+                    } else if (document.webkitExitFullscreen) {
+                        document.webkitExitFullscreen();
+                    } else if (document.msExitFullscreen) {
+                        document.msExitFullscreen();
+                    }
+                }
+            }
+        </script>
     </body>
 </html>