Toy with hiding controls

fornwall · Jun 27, 2023 · 0abfccf · 0abfccf
1 parent 9e6ea95
commit 0abfccf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/site/index.html b/site/index.html
@@ -47,8 +47,6 @@
             border: 1px solid white;
             padding: 1em;
             border-radius: 0.5em;
-            margin-left: auto;
-            margin-right: auto;
             text-align: center;
         }
 
@@ -78,6 +76,7 @@
             right: 0px;
             background: black;
             opacity: 0.9;
+            transition: opacity 0.5s ease-in-out;
         }
 
         #overlay a {
@@ -88,6 +87,11 @@
             margin-block-end: 0;
         }
 
+        #overlay.hidden {
+            display: block !important;
+            opacity: 0;
+        }
+
         .hidden {
             display: none;
         }
@@ -122,7 +126,7 @@ <h2>About game of life</h2>
         </form>
     </dialog>
 
-    <div id="overlay" style="display: none" open="true">
+    <div id="overlay" open="true">
         <span id="overlay-buttons">
             <button id="pauseButton" style="width: 4em">Pause</button>
             <button id="resetButton">Reset</button>

diff --git a/site/index.js b/site/index.js
@@ -10,6 +10,7 @@ const pauseButton = document.getElementById("pauseButton");
 const generationsPerSecondInput = document.getElementById("generations-per-second");
 const generationsPerSecondDisplay = document.getElementById("generations-per-second-display");
 const aboutDialog = document.getElementById('about');
+const controls = document.getElementById("hideableControls");
 
 canvas.focus();
 
@@ -19,7 +20,6 @@ globalThis.setNewState = function (ruleIdx, size, seed, density, paused, generat
   ruleSelect.value = ruleIdx;
   const queryString = `?rule=${ruleIdx}&size=${size}&seed=${seed}&density=${density}&gps=${generationsPerSecond}&paused=${paused}` + (paused ? `&frame=${frame}` : '');
   window.history.replaceState({}, '', queryString);
-  overlayElement.style.display = 'block';
 
   pauseButton.textContent = paused ? 'Play' : 'Pause';
 
@@ -38,9 +38,35 @@ globalThis.toggleFullscreen = function () {
   }
 }
 
+document.documentElement.addEventListener("mousemove", () => {
+  overlayElement.classList.remove('hidden');
+  setHideTimeout();
+});
+document.documentElement.addEventListener("touchstart", () => {
+  overlayElement.classList.remove('hidden');
+  setHideTimeout();
+});
+let currentHideTimeout = null;
+function setHideTimeout() {
+  if (currentHideTimeout) {
+    clearTimeout(currentHideTimeout);
+    currentHideTimeout = null;
+  }
+  if (controls.classList.contains('hidden')) {
+    currentHideTimeout = setTimeout(() => {
+      if (controls.classList.contains('hidden')) {
+        overlayElement.classList.add('hidden');
+        canvas.focus();
+      }
+      currentHideTimeout = null;
+    }, 2000);
+  }
+}
+
 globalThis.toggleControls = function () {
-  const controls = document.getElementById("hideableControls");
   controls.classList.toggle('hidden');
+  if (controls.classList.contains('hidden')) canvas.focus();
+  setHideTimeout();
 }
 
 try {