PC styles done

src/page/background/background.html.ts

@@ -1,34 +1,6 @@
 import { html } from "../../model/misc";
 import "./background.scss";
 
-export const generate = (
-  count: number,
-  z?: () => number,
-  color?: (z) => string,
-  height?: () => number,
-  isAnimated?: (index) => boolean,
-  transform?: (z) => string
-): html => {
-  return `
-    <section class="background">
-        ${
-          count > 0
-            ? new Array(count)
-                .fill(0, 0, count)
-                .map(_ => z())
-                .map(
-                  (zValue, i) => `
-                    <div class="${isAnimated(i) ? "animated" : ""}" style="
-                        background-color: ${color(zValue)};
-                        height: ${height()}px;
-                        z-index: ${-zValue};
-                        transform: ${transform(zValue)}"
-                    ></div>
-                `
-                )
-                .join("")
-            : ""
-        }
-    </section>
+export const generate = (): html => `
+    <section id="background"></section>
 `;
-};

src/page/background/background.scss

@@ -1,7 +1,7 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-.background {
+#background {
   position: absolute;
   left: 0;
   top: 0;
@@ -18,17 +18,15 @@
     top: 0;
     width: 160px;
 
-    transition: transform $slow-transition-time;
+    transition: transform $slow-transition-time, opacity $slow-transition-time;
 
-    &.animated {
-      animation: fade-in 1s linear forwards;
-      @keyframes fade-in {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
+    animation: fade-in 1s linear;
+    @keyframes fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
       }
     }
   }

src/page/background/background.ts

@@ -1,120 +1,82 @@
 import { PageElement } from "../../framework/page-element";
-import { generate } from "./background.html";
 import {
-  choose,
   getHeight,
   createElement,
   randomFactory,
-  randomInInterval,
-  sum,
-  mixColors
+  sum
 } from "../../framework/helper";
 import { PageEvent, PageEventType } from "../../framework/page-event";
+import { Blob } from "./blob";
+import { generate } from "./background.html";
 
 export class PageBackground extends PageElement {
-  private colors = ["#fff9e0", "#ffd6d6"];
-  private blobSpacing = 200;
-  private perspective = 5;
-  private currentRealHeight = 0;
-  private currentRealWidth = 0;
-  private currentBlobCount = 0;
+  private blobs: Array<Blob> = [];
+  private blobSpacing = 300;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
-    this.setElement(createElement(generate(0)));
+    this.setElement(createElement(generate()));
+    Blob.initialize(20, 40, 5);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
     if (event.type === PageEventType.onLoad) {
       this.bindListeners(parent);
-    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
       this.resize(parent);
+    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
+      this.resize(parent, event.data.deltaHeight);
     }
   }
 
   private bindListeners(parent: PageElement) {
-    window.addEventListener("resize", this.resize.bind(this, parent));
-    window.addEventListener("load", this.resize.bind(this, parent));
+    window.addEventListener("resize", () => this.resize(parent));
+    window.addEventListener("load", () => this.resize(parent));
   }
 
-  private resize(parent: PageElement) {
-    const siblings: Array<HTMLElement> = Array.prototype.slice
-      .call(parent.getElement().children)
-      .filter(e => e !== this.getElement());
+  private resize(parent: PageElement, heightChange?: number) {
+    const siblings: Array<HTMLElement> = this.getSiblings(parent);
 
     const width = parent.getElement().clientWidth;
-    const height = sum(siblings.map(getHeight));
-
-    if (height > this.currentRealHeight || width > this.currentRealWidth) {
-      this.currentRealHeight = height;
-      this.currentRealWidth = width;
-
-      const random = randomFactory(46);
-
-      const zMin = 20;
-      const zMax = 40;
-
-      const count = Math.round((width * height) / this.blobSpacing ** 2);
-
-      const randomWithKnownZ = (
-        z: number,
-        viewportSize: number,
-        scrollSize: number,
-        startOffset = 0,
-        endOffset = 0
-      ): number => {
-        const m = 1 + z / this.perspective;
-
-        const variableOffset = (offset, q) =>
-          offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
-
-        startOffset = variableOffset(startOffset, 0.6);
-        endOffset = variableOffset(endOffset, 0.2);
-
-        const lowerBound =
-          viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
-        const l =
-          scrollSize -
-          viewportSize +
-          (viewportSize - startOffset - endOffset) * m;
-
-        return randomInInterval(lowerBound, lowerBound + l, random);
-      };
-
-      this.setElement(
-        createElement(
-          generate(
-            count,
-            () => randomInInterval(zMin, zMax, random),
-            z =>
-              "#" +
-              mixColors(
-                "#ffffff",
-                choose(this.colors, random),
-                (z - zMin) / (zMax - zMin)
-              ),
-            () => randomInInterval(160, 750, random),
-            i => i >= this.currentBlobCount,
-            z => `
-              translateX(${randomWithKnownZ(z, width, width)}px)
-              translateY(${randomWithKnownZ(
-                z,
-                parent.getElement().clientHeight,
-                height,
-                getHeight(this.start.getElement()),
-                getHeight(this.end.getElement())
-              )}px)
-              translateZ(${-z}px)
-              rotate(-20deg)
-            `
-          )
-        )
-      );
-
-      this.currentBlobCount = count;
-      console.log(count);
+    let height = sum(siblings.map(getHeight));
+    if (heightChange) {
+      height += heightChange;
     }
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;
+
+    const requiredBlobCount =
+      width > 900 ? Math.round((width * height) / this.blobSpacing ** 2) : 0;
+
+    console.log(requiredBlobCount);
+
+    while (requiredBlobCount > this.blobs.length) {
+      const blob = new Blob();
+      this.getElement().appendChild(blob.htmlElement);
+      this.blobs.push(blob);
+    }
+
+    const random = randomFactory(2322);
+
+    this.blobs.forEach((b, i) => {
+      if (i >= requiredBlobCount) {
+        b.hide();
+      } else {
+        b.transform(
+          random,
+          width,
+          parent.getElement().clientHeight,
+          height,
+          getHeight(this.start.getElement()),
+          getHeight(this.end.getElement())
+        );
+        b.show();
+      }
+    });
+  }
+
+  private getSiblings(parent: PageElement): Array<HTMLElement> {
+    return Array.prototype.slice
+      .call(parent.getElement().children)
+      .filter(e => e !== this.getElement());
   }
 }

src/page/background/blob.ts

@@ -0,0 +1,102 @@
+import {
+  choose,
+  createElement,
+  mixColors,
+  randomFactory,
+  randomInInterval
+} from "../../framework/helper";
+
+export class Blob {
+  private static readonly creatorRandom = randomFactory(42);
+  private static readonly colors = ["#fff9e0", "#ffd6d6"];
+  private static zMin: number;
+  private static zMax: number;
+  private static perspective: number;
+  public static initialize(zMin: number, zMax: number, perspective: number) {
+    Blob.zMin = zMin;
+    Blob.zMax = zMax;
+    Blob.perspective = perspective;
+  }
+
+  private readonly z = randomInInterval(
+    Blob.zMin,
+    Blob.zMax,
+    Blob.creatorRandom
+  );
+
+  private readonly element: HTMLElement = createElement("<div></div>");
+  constructor() {
+    this.element.style.backgroundColor =
+      "#" +
+      mixColors(
+        "#ffffff",
+        choose(Blob.colors, Blob.creatorRandom),
+        (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
+      );
+    this.element.style.zIndex = (-this.z).toString();
+    this.element.style.height = `${randomInInterval(
+      160,
+      750,
+      Blob.creatorRandom
+    )}px`;
+  }
+
+  get htmlElement(): HTMLElement {
+    return this.element;
+  }
+
+  private randomWithKnownZ(
+    random: () => number,
+    viewportSize: number,
+    scrollSize: number,
+    startOffset = 0,
+    endOffset = 0
+  ): number {
+    const m = 1 + this.z / Blob.perspective;
+
+    const variableOffset = (offset, q) =>
+      Math.max(
+        0,
+        offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
+      );
+
+    startOffset = variableOffset(startOffset, 1);
+    endOffset = variableOffset(endOffset, 0.2);
+
+    const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
+    const l =
+      scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
+
+    return randomInInterval(lowerBound, lowerBound + l, random);
+  }
+
+  public show() {
+    this.element.style.opacity = "1";
+  }
+
+  public hide() {
+    this.element.style.opacity = "0";
+  }
+
+  public transform(
+    random: () => number,
+    width: number,
+    viewportHeight: number,
+    scrollHeight: number,
+    startOffset: number,
+    endOffset: number
+  ) {
+    this.element.style.transform = `
+      translateX(${this.randomWithKnownZ(random, width, width)}px)
+      translateY(${this.randomWithKnownZ(
+        random,
+        viewportHeight,
+        scrollHeight,
+        startOffset,
+        endOffset
+      )}px)
+      translateZ(${-this.z}px)
+      rotate(-20deg)
+    `;
+  }
+}