Add info page

src/page/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/page/info-page-handler.ts

@@ -0,0 +1,10 @@
+export class InfoPageHandler {
+  public constructor(
+    private readonly infoButton: HTMLButtonElement,
+    private readonly infoPage: HTMLElement
+  ) {
+    infoButton.addEventListener('click', () => {
+      infoPage.classList.toggle('hidden');
+    });
+  }
+}

src/page/menu-hider.ts

@@ -0,0 +1,17 @@
+export class MenuHider {
+  private static readonly DEFAULT_TIME_TO_LIVE = 3500;
+  private static readonly INTERVAL = 50;
+  private timeToLive = MenuHider.DEFAULT_TIME_TO_LIVE;
+
+  public constructor(element: HTMLElement, shouldBeHidden: () => boolean) {
+    setInterval(() => {
+      this.timeToLive = Math.max(0, this.timeToLive - MenuHider.INTERVAL);
+      element.style.opacity = this.timeToLive == 0 && shouldBeHidden() ? '0' : '1';
+    }, MenuHider.INTERVAL);
+
+    element.addEventListener(
+      'mouseover',
+      () => (this.timeToLive = MenuHider.DEFAULT_TIME_TO_LIVE)
+    );
+  }
+}