Add info page

src/index.html

@@ -46,7 +46,7 @@
         <button class="restart"></button>
       </nav>
 
-      <main class="pages">
+      <main class="pages hidden">
         <section class="info-page">
           <h1>Title</h1>
           <p>

src/index.scss

@@ -15,6 +15,19 @@
   }
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Comfortaa', sans-serif;
+}
+
+p {
+  font-family: 'Open Sans', sans-serif;
+}
+
 html {
   height: 100%;
   -webkit-font-smooth: antialiased;
@@ -61,6 +74,8 @@ html {
       border-radius: var(--border-radius);
       margin: var(--small-margin);
 
+      display: flex;
+
       > nav.buttons {
         @include center-children;
         flex-direction: column;
@@ -85,7 +100,18 @@ html {
       }
 
       > main.pages {
-        display: none;
+        width: max(500px, 70vw);
+        overflow: hidden;
+        transition: width var(--transition-time-long);
+
+        &.hidden {
+          width: 0;
+        }
+
+        .info-page {
+          padding: var(--normal-margin);
+          width: max(500px, 70vw);
+        }
       }
     }
   }

src/index.ts

@@ -1,9 +1,11 @@
 import '../assets/icons/info.svg';
 import GameLoop from './game-loop/game-loop';
 import './index.scss';
+import { FullScreenHandler } from './page/full-screen-handler';
+import { InfoPageHandler } from './page/info-page-handler';
+import { MenuHider } from './page/menu-hider';
 import { applyArrayPlugins } from './utils/array';
 import { ErrorHandler, Severity } from './utils/error-handler';
-import { FullScreenHandler } from './utils/full-screen-handler';
 import { initializeGpu } from './utils/graphics/initialize-gpu';
 
 declare global {
@@ -26,6 +28,7 @@ declare global {
 const getElements = () => ({
   aside: document.querySelector('aside') as HTMLDivElement,
   infoButton: document.querySelector('button.info') as HTMLButtonElement,
+  infoElement: document.querySelector('.pages') as HTMLDivElement,
   minimizeFullScreenButton: document.querySelector(
     'button.minimize-full-screen'
   ) as HTMLButtonElement,
@@ -55,16 +58,8 @@ const main = async () => {
   try {
     applyArrayPlugins();
 
-    const defaultTimeToLive = 3500;
+    new InfoPageHandler(elements.infoButton, elements.infoElement);
-    const interval = 50;
+    new MenuHider(elements.aside, FullScreenHandler.isInFullScreenMode);
-    let timeToLive = defaultTimeToLive;
-    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,

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)
+    );
+  }
+}

src/settings.ts

@@ -29,7 +29,7 @@ export const settings: GameLoopSettings &
   brushWidthRandomness: 8,
 
   brushTrailWeight: 5,
-  moveSpeed: 80,
+  moveSpeed: 50,
   turnSpeed: 10,
   sensorOffsetAngle: 30,
   sensorOffsetDistance: 60,