Improve full-screen mode

src/index.html

@@ -38,14 +38,13 @@
             <noscript>JavaScript is required for this website.</noscript>
           </pre>
       </section>
-
-      <button class="minimize-full-screen"></button>
     </main>
 
     <aside>
       <nav class="buttons">
         <button class="info"></button>
         <button class="maximize-full-screen"></button>
+        <button class="minimize-full-screen"></button>
         <button class="restart"></button>
       </nav>
 

src/index.scss

@@ -27,21 +27,14 @@ html {
 
     > .canvas-container {
       height: 100%;
-      display: flex;
       width: 100%;
+      display: flex;
 
       > canvas {
         height: 100%;
         width: 100%;
       }
 
-      > button.minimize-full-screen {
-        @include image-button(url('../assets/icons/minimize.svg'));
-        position: absolute;
-        bottom: var(--small-margin);
-        right: var(--small-margin);
-      }
-
       > .errors-container {
         color: red;
         position: absolute;
@@ -56,12 +49,13 @@ html {
     }
 
     > aside {
+      @include blurred-background;
+
       position: absolute;
       top: 50%;
       left: 0;
       transform: translateY(-50%);
-
+      transition: opacity var(--transition-time-long);
-      @include blurred-background;
       border-radius: var(--border-radius);
       margin: var(--small-margin);
 
@@ -79,6 +73,10 @@ html {
           @include image-button(url('../assets/icons/maximize.svg'));
         }
 
+        > button.minimize-full-screen {
+          @include image-button(url('../assets/icons/minimize.svg'));
+        }
+
         > button.restart {
           @include image-button(url('../assets/icons/restart.svg'));
         }

src/index.ts

@@ -2,8 +2,8 @@ import '../assets/icons/info.svg';
 import GameLoop from './game-loop/game-loop';
 import './index.scss';
 import { applyArrayPlugins } from './utils/array';
+import { FullScreenHandler } from './utils/full-screen-handler';
 import { initializeGPU } from './utils/graphics/initialize-gpu';
-import { handleFullScreen } from './utils/handle-full-screen';
 
 declare global {
   interface Array<T> {
@@ -23,6 +23,7 @@ declare global {
 }
 
 const getElements = () => ({
+  aside: document.querySelector('aside') as HTMLDivElement,
   infoButton: document.querySelector('button.info') as HTMLButtonElement,
   minimizeFullScreenButton: document.querySelector(
     'button.minimize-full-screen'
@@ -40,11 +41,22 @@ const main = async () => {
   applyArrayPlugins();
   const elements = getElements();
 
-  handleFullScreen({
+  const defaultTimeToLive = 3500;
-    minimizeButton: elements.minimizeFullScreenButton,
+  const interval = 50;
-    maximizeButton: elements.maximizeFullScreenButton,
+  let timeToLive = defaultTimeToLive;
-    target: elements.canvasContainer,
+  setInterval(() => {
-  });
+    timeToLive = Math.max(0, timeToLive - interval);
+    elements.aside.style.opacity =
+      timeToLive == 0 && FullScreenHandler.isInFullScreenMode() ? '0' : '1';
+  }, interval);
+
+  elements.aside.addEventListener('mouseover', () => (timeToLive = defaultTimeToLive));
+
+  new FullScreenHandler(
+    elements.minimizeFullScreenButton,
+    elements.maximizeFullScreenButton,
+    document.body
+  );
 
   const gpu = await initializeGPU();
 

src/utils/full-screen-handler.ts

@@ -0,0 +1,41 @@
+export class FullScreenHandler {
+  public constructor(
+    private readonly minimizeButton: HTMLElement,
+    private readonly maximizeButton: HTMLElement,
+    target: HTMLElement
+  ) {
+    if (!document.fullscreenEnabled) {
+      minimizeButton.style.display = 'none';
+      maximizeButton.style.display = 'none';
+      return;
+    }
+
+    this.updateButtons();
+
+    addEventListener('keydown', (e) => {
+      // on full screen request, only apply it to the target
+      if (e.key === 'F11') {
+        e.preventDefault();
+        FullScreenHandler.isInFullScreenMode()
+          ? document.exitFullscreen()
+          : target.requestFullscreen();
+      }
+    });
+    addEventListener('fullscreenchange', this.updateButtons.bind(this));
+    maximizeButton.addEventListener('click', target.requestFullscreen.bind(target));
+    minimizeButton.addEventListener('click', document.exitFullscreen.bind(document));
+  }
+
+  public static isInFullScreenMode(): boolean {
+    return document.fullscreenElement !== null;
+  }
+
+  private updateButtons() {
+    this.minimizeButton.style.display = FullScreenHandler.isInFullScreenMode()
+      ? 'block'
+      : 'none';
+    this.maximizeButton.style.display = FullScreenHandler.isInFullScreenMode()
+      ? 'none'
+      : 'block';
+  }
+}

src/utils/handle-full-screen.ts

@@ -1,36 +0,0 @@
-export const handleFullScreen = ({
-  minimizeButton,
-  maximizeButton,
-  target,
-}: {
-  minimizeButton: HTMLElement;
-  maximizeButton: HTMLElement;
-  target: HTMLElement;
-}) => {
-  if (!document.fullscreenEnabled) {
-    minimizeButton.style.visibility = 'hidden';
-    maximizeButton.style.visibility = 'hidden';
-    return;
-  }
-
-  const isInFullScreen = (): boolean => document.fullscreenElement !== null;
-  const updateButtons = () => {
-    minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
-    maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
-  };
-
-  updateButtons();
-
-  addEventListener('keydown', (e) => {
-    // on full screen request, only apply it to the target
-    if (e.key === 'F11') {
-      e.preventDefault();
-      isInFullScreen() ? document.exitFullscreen() : target.requestFullscreen();
-    }
-  });
-
-  addEventListener('fullscreenchange', updateButtons);
-
-  maximizeButton.addEventListener('click', target.requestFullscreen.bind(target));
-  minimizeButton.addEventListener('click', document.exitFullscreen.bind(document));
-};