Reformat code

.eslintrc.json

@@ -1,28 +1,29 @@
 {
-    "root": true,
-    "env": {
-      "browser": true,
-      "es2020": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "prettier",
-      "prettier/@typescript-eslint"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "ecmaVersion": 11,
-      "sourceType": "module"
-    },
-    "plugins": ["unused-imports", "@typescript-eslint", "prettier"],
-    "rules": {
-      "prettier/prettier": "error",
-      "no-unused-vars": "off",
-      "unused-imports/no-unused-imports-ts": "error",
-      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off"
-    }
-  }
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["unused-imports", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports-ts": "error",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
+  }
+}

.prettierrc

@@ -1,6 +1,7 @@
 {
   "trailingComma": "es5",
   "tabWidth": 2,
+  "printWidth": 90,
   "singleQuote": true,
   "endOfLine": "lf"
 }

src/framework/container-page.ts

@@ -4,9 +4,7 @@ import { OnLoadEvent } from './events/concrete-events/on-load-event';
 
 export class ContainerPage extends PageElement {
   public constructor(rootElement: HTMLElement, children: Array<PageElement>) {
-    children
-      .filter(e => e.element)
-      .forEach(e => rootElement.appendChild(e.element));
+    children.filter(e => e.element).forEach(e => rootElement.appendChild(e.element));
     super(rootElement, children);
   }
 

src/framework/events/event-handler.ts

@@ -26,9 +26,7 @@ export abstract class EventHandler {
     return event;
   }
 
-  public handleOnPageThemeChangedEvent(
-    event: OnPageThemeChangedEvent
-  ): OptionalEvent {
+  public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
     return event;
   }
 }

src/framework/helper/get-height.ts

@@ -1,6 +1,6 @@
 export const getHeight = (e: HTMLElement): number => {
   // ignores margin collapse
-  const computedStyle = window.getComputedStyle(e);
+  const computedStyle = getComputedStyle(e);
   return (
     e.clientHeight +
     parseInt(computedStyle.marginTop) +

src/framework/helper/mix-colors.ts

@@ -1,11 +1,7 @@
 export type hex = string;
 export type rgb = [number, number, number];
 
-export const mixColors = (
-  hexColorA: hex,
-  hexColorB: hex,
-  quantityA: number
-): hex => {
+export const mixColors = (hexColorA: hex, hexColorB: hex, quantityA: number): hex => {
   const colorA = hexToRGB(hexColorA);
   const colorB = hexToRGB(hexColorB);
 

src/framework/helper/random.ts

@@ -7,9 +7,7 @@ export class Random {
 
   public get next(): number {
     // result is in [0, 1)
-    return (
-      ((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31
-    );
+    return ((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31;
   }
 
   public choose<T>(list: Array<T>): T {

src/framework/helper/sum.ts

@@ -1,2 +1,2 @@
 export const sum = (list: ArrayLike<number>): number =>
-  Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);
+  Array.prototype.reduce.call(list, (a: number, sum: number) => a + sum, 0);

src/framework/page-element.ts

@@ -5,8 +5,7 @@ import { Event } from './events/event';
 import { OnLoadEvent } from './events/concrete-events/on-load-event';
 import { OptionalEvent } from './events/optional-event';
 
-export abstract class PageElement extends EventHandler
-  implements EventBroadcaster {
+export abstract class PageElement extends EventHandler implements EventBroadcaster {
   protected eventBroadcaster: EventBroadcaster;
 
   protected constructor(

src/framework/primitives/implementations/anchor.ts

@@ -2,10 +2,7 @@ import { Primitive } from '../primitive';
 import { html, url } from '../../model/misc';
 
 export class Anchor implements Primitive {
-  public constructor(
-    private readonly href: url,
-    private readonly text: string
-  ) {}
+  public constructor(private readonly href: url, private readonly text: string) {}
 
   public toHTML(): html {
     return `
@@ -14,6 +11,7 @@ export class Anchor implements Primitive {
            rel="noreferrer"
            target="_blank"
         >${this.text}</a>
+        <br/>
     `;
   }
 }

src/framework/primitives/implementations/image.ts

@@ -26,10 +26,7 @@ export class Image implements Primitive {
     return (
       this.image.images
         .slice(0, -1)
-        .map(
-          d =>
-            `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${d.width}px,`
-        )
+        .map(d => `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${d.width}px,`)
         .join('\n') + `\n${last(this.image.images).width}px`
     );
   }

src/framework/primitives/implementations/video.ts

@@ -11,9 +11,7 @@ export class Video implements Primitive {
   public toHTML(container = false): string {
     return `
         ${container ? `<div class="figure-container">` : ''}
-          <video ${this.options} ${
-      this.poster ? `poster="${this.poster}` : ''
-    }" >
+          <video ${this.options} ${this.poster ? `poster="${this.poster}` : ''}" >
               <source src="${this.webm}" type="video/webm"/>
               <source src="${this.mp4}" type="video/mp4"/>
           </video>

src/framework/styles/dark-mode/dark-mode.ts

@@ -1,6 +1,5 @@
 export const isSystemLevelDarkModeEnabled = (): boolean =>
-  window.matchMedia &&
-  window.matchMedia('(prefers-color-scheme: dark)').matches;
+  matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
 
 export const turnOnDarkMode = () =>
   document.body.parentElement.setAttribute('theme', 'dark');

src/page/background/animation.ts

@@ -17,10 +17,7 @@ export class Animation<T> {
       return;
     }
 
-    this.elapsedTime = Math.min(
-      this.elapsedTime + deltaTimeInMs,
-      this.intervalInMs
-    );
+    this.elapsedTime = Math.min(this.elapsedTime + deltaTimeInMs, this.intervalInMs);
 
     const q = this.elapsedTime / this.intervalInMs;
     this._value = this.interpolator(this.from, this.to, q);

src/page/background/background.ts

@@ -51,22 +51,33 @@ export class PageBackground extends PageElement {
     return super.handleOnBodyDimensionsChangedEvent(event);
   }
 
-  public handleOnPageThemeChangedEvent(
-    event: OnPageThemeChangedEvent
-  ): OptionalEvent {
+  public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
     Blob.changeTheme(event.isDark);
     this.blobs.forEach(b => b.decideColor());
     return super.handleOnPageThemeChangedEvent(event);
   }
 
   private bindListeners() {
-    window.addEventListener('resize', () => this.resize());
-    window.addEventListener('load', e => {
+    addEventListener('resize', () => this.resize());
+    addEventListener('load', e => {
       this.resize();
+      this.createBlobs();
       this.redraw(e.timeStamp);
     });
   }
 
+  private createBlobs() {
+    const requiredBlobCount = Math.max(
+      PageBackground.MIN_BLOB_COUNT,
+      (this.backgroundSize.value.x * this.backgroundSize.value.y) /
+        PageBackground.BLOB_SPACING ** 2
+    );
+
+    while (requiredBlobCount > this.blobs.length) {
+      this.blobs.push(new Blob());
+    }
+  }
+
   private resize(heightChange?: number) {
     this.resizeCanvas();
     this.resizeBackground(heightChange);
@@ -106,10 +117,7 @@ export class PageBackground extends PageElement {
                   q
             );
           const topOffset = variableOffset(getHeight(this.start.element), 1);
-          const topLeft = this.convertFrom2Dto3D(
-            new Vec2(0, topOffset),
-            blob.z
-          );
+          const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z);
 
           const bottomOffset = variableOffset(getHeight(this.end.element), 0.2);
 
@@ -137,19 +145,10 @@ export class PageBackground extends PageElement {
     this.blobs.forEach(b => b.step(deltaTime));
 
     this.scrollPosition = this.parent.element.scrollTop;
-    const requiredBlobCount = this.requiredBlobCount;
-
-    while (requiredBlobCount > this.blobs.length) {
-      this.blobs.push(new Blob());
-    }
 
     this.blobs.sort((b1, b2) => b2.z - b1.z);
 
-    this.blobs.forEach((blob, i) => {
-      if (i >= requiredBlobCount) {
-        return;
-      }
-
+    this.blobs.forEach(blob => {
       const topLeft = this.convertFrom3Dto2D(blob.topLeft);
       const bottomRight = this.convertFrom3Dto2D(
         blob.topLeft.add(Vec3.from(blob.size, 0))
@@ -160,23 +159,18 @@ export class PageBackground extends PageElement {
       }
     });
 
-    window.requestAnimationFrame(timestamp => this.redraw(timestamp));
+    requestAnimationFrame(timestamp => this.redraw(timestamp));
   }
 
   private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
-    const deltaTime = this.previousTimestamp
-      ? timestamp - this.previousTimestamp
-      : 0;
+    const deltaTime = this.previousTimestamp ? timestamp - this.previousTimestamp : 0;
     this.previousTimestamp = timestamp;
     return Math.max(0, deltaTime);
   }
 
   private convertFrom3Dto2D(p: Vec3): Vec2 {
     const m = PageBackground.PERSPECTIVE / (PageBackground.PERSPECTIVE + p.z);
-    return new Vec2(
-      m * (p.z / 2 + p.x),
-      m * (p.z / 2 + p.y - this.scrollPosition)
-    );
+    return new Vec2(m * (p.z / 2 + p.x), m * (p.z / 2 + p.y - this.scrollPosition));
   }
 
   private convertFrom2Dto3D(p: Vec2, z: number, scrollPosition = 0): Vec2 {
@@ -192,14 +186,4 @@ export class PageBackground extends PageElement {
         (0 <= bottomRight.y && bottomRight.y <= this.canvas.height))
     );
   }
-
-  private get requiredBlobCount(): number {
-    return Math.max(
-      PageBackground.MIN_BLOB_COUNT,
-      Math.round(
-        (this.backgroundSize.value.x * this.backgroundSize.value.y) /
-          PageBackground.BLOB_SPACING ** 2
-      )
-    );
-  }
 }

src/page/background/blob.ts

@@ -32,10 +32,7 @@ export class Blob {
   private _positionScale = new Vec2(0, 0);
   private _positionOffset = new Vec2(0, 0);
 
-  private readonly _size = new Vec2(
-    140,
-    Blob.CREATOR_RANDOM.randomInInterval(260, 740)
-  );
+  private readonly _size = new Vec2(140, Blob.CREATOR_RANDOM.randomInInterval(260, 740));
 
   public constructor() {
     this.decideColor();
@@ -47,8 +44,7 @@ export class Blob {
       Blob.colorPickerRandom.choose(
         Blob.isDarkThemed ? Blob.DARK_COLORS : Blob.LIGHT_COLORS
       ),
-      (this.z - PageBackground.Z_MIN) /
-        (PageBackground.Z_MAX - PageBackground.Z_MIN)
+      (this.z - PageBackground.Z_MIN) / (PageBackground.Z_MAX - PageBackground.Z_MIN)
     );
 
     this.color = new Animation<string>(

src/page/image-viewer/image-viewer.ts

@@ -18,9 +18,7 @@ export class PageImageViewer extends PageElement {
 
     media
       .filter((e: HTMLElement) => e.parentElement !== this.element)
-      .forEach(
-        (e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))
-      );
+      .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this)));
     return super.handleOnLoadEvent(event);
   }
 

src/page/theme-switcher/theme-switcher.ts

@@ -21,8 +21,7 @@ export class PageThemeSwitcher extends PageElement {
     super(createElement(generate()));
 
     const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
-    const isDark =
-      storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
+    const isDark = storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
 
     if (isDark) {
       (this.element as HTMLInputElement).checked = true;
@@ -53,7 +52,7 @@ export class PageThemeSwitcher extends PageElement {
   }
 
   private static saveToLocalStorage(darkModeEnabled: boolean) {
-    window.localStorage?.setItem(
+    localStorage?.setItem(
       PageThemeSwitcher.LOCAL_STORAGE_KEY,
       JSON.stringify(darkModeEnabled)
     );
@@ -61,9 +60,7 @@ export class PageThemeSwitcher extends PageElement {
 
   private static loadFromLocalStorage(): boolean | null {
     try {
-      return JSON.parse(
-        window.localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY)
-      );
+      return JSON.parse(localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY));
     } catch {
       return null;
     }

src/static/icons/fullscreen.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 482.239 482.239" height="512" viewBox="0 0 482.239 482.239" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m0 17.223v120.56h34.446v-103.337h103.337v-34.446h-120.56c-9.52 0-17.223 7.703-17.223 17.223z"/><path d="m465.016 0h-120.56v34.446h103.337v103.337h34.446v-120.56c0-9.52-7.703-17.223-17.223-17.223z"/><path d="m447.793 447.793h-103.337v34.446h120.56c9.52 0 17.223-7.703 17.223-17.223v-120.56h-34.446z"/><path d="m34.446 344.456h-34.446v120.56c0 9.52 7.703 17.223 17.223 17.223h120.56v-34.446h-103.337z"/></svg>

src/static/icons/play-button.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+			<path d="M256,0C114.833,0,0,114.844,0,256s114.833,256,256,256s256-114.844,256-256S397.167,0,256,0z M256,490.667
+				C126.604,490.667,21.333,385.396,21.333,256S126.604,21.333,256,21.333S490.667,126.604,490.667,256S385.396,490.667,256,490.667
+				z"/>
+			<path d="M357.771,247.031l-149.333-96c-3.271-2.135-7.5-2.25-10.875-0.396C194.125,152.51,192,156.094,192,160v192
+				c0,3.906,2.125,7.49,5.563,9.365c1.583,0.865,3.354,1.302,5.104,1.302c2,0,4.021-0.563,5.771-1.698l149.333-96
+				c3.042-1.958,4.896-5.344,4.896-8.969S360.813,248.99,357.771,247.031z M213.333,332.458V179.542L332.271,256L213.333,332.458z"
+				/>
+</svg>

src/styles.scss

@@ -52,23 +52,19 @@ html {
   hyphens: auto;
 }
 
-img,
-video,
-.figure-container {
-  width: 100%;
-  height: auto;
-}
-
 .figure-container {
   font-size: 0;
   box-shadow: var(--inset-shadow);
   pointer-events: none;
   cursor: pointer;
 
-  * {
+  img,
+  video,
+  iframe {
     pointer-events: all;
     position: relative;
     z-index: -2;
+    width: 100%;
   }
 }