Another try

src/app/components/animatedBackground/animatedBackground.component.scss

@@ -1,5 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
-
 .cover {
   position: absolute;
   top: 0;
@@ -10,14 +8,6 @@
   background-color: black;
 }
 
-/* Global Styles
-  ---------------------------------------------- */
-html {font-family: 'Open Sans', sans-serif; background: #0D133A; height:100%; font-size: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-smoothing: antialiased;overflow: hidden;position: relative;}
-body {height:100%;overflow: hidden; margin: 0; font-size: 1em; line-height: 1.4; position: relative;}
-img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
-svg:not(:root) { overflow: hidden; }
-a{color: white;text-decoration: none;}
-
 /* Animation globals
   ---------------------------------------------- */
 #landscape, .land, #bottom, .stags,.stag, .counter:before, #lensFlare, .sunMask{

src/app/components/animatedBackground/animatedBackground.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewChecked, Component} from "@angular/core";
+import {Component} from "@angular/core";
 import {fadeOut} from "../../animations";
 
 @Component({
@@ -7,147 +7,10 @@ import {fadeOut} from "../../animations";
     styleUrls: ['animatedBackground.component.scss'],
     animations: [fadeOut]
 })
-export class AnimatedBackgroundComponent implements AfterViewChecked {
+export class AnimatedBackgroundComponent {
-    private once = true;
-
     splash = true;
 
     constructor() {
         setTimeout(() => this.splash = false, 1000);
     }
-
-    ngAfterViewChecked() {
-        const $ = window['$'];
-        if (this.once && !!$) {
-            this.once = false;
-            (function () {
-                var WIDTH, HEIGHT, canvas, con, g;
-                var pxs = [];
-                var rint = 50;
-
-                $.fn.sprites = function () {
-                    this.append($('<canvas id="sprites"></canvas>'));
-                    setup(this);
-                };
-
-                function setup(container) {
-                    let windowSize = function () {
-                        WIDTH = container.innerWidth();
-                        HEIGHT = container.innerHeight();
-                        canvas = container.find('#sprites');
-                        canvas.attr('width', WIDTH).attr('height', HEIGHT);
-                    };
-
-                    windowSize();
-
-                    $(window).resize(function () {
-                        windowSize();
-                    });
-
-                    con = canvas[0].getContext('2d');
-
-                    for (let i = 0; i < 100; i++) {
-                        pxs[i] = new Circle();
-                        pxs[i].reset();
-                    }
-
-                    requestAnimationFrame(draw);
-                }
-
-                function draw() {
-                    con.clearRect(0, 0, WIDTH, HEIGHT);
-                    con.globalCompositeOperation = "lighter";
-
-                    for (var i = 0; i < pxs.length; i++) {
-                        pxs[i].fade();
-                        pxs[i].move();
-                        pxs[i].draw();
-                    }
-
-                    requestAnimationFrame(draw);
-                }
-
-                function Circle() {
-                    this.s = {
-                        ttl: 15000,
-                        xmax: 5,
-                        ymax: 2,
-                        rmax: 7,
-                        rt: 1,
-                        xdef: 960,
-                        ydef: 540,
-                        xdrift: 4,
-                        ydrift: 4,
-                        random: true,
-                        blink: true
-                    };
-
-                    this.reset = function () {
-                        this.x = (this.s.random ? WIDTH * Math.random() : this.s.xdef);
-                        this.y = (this.s.random ? HEIGHT * Math.random() : this.s.ydef);
-                        this.r = ((this.s.rmax - 1) * Math.random()) + 1;
-
-                        this.dx = (Math.random() * this.s.xmax) * (Math.random() < 0.5 ? -1 : 1);
-                        this.dy = (Math.random() * this.s.ymax) * (Math.random() < 0.5 ? -1 : 1);
-
-                        this.hl = (this.s.ttl / rint) * (this.r / this.s.rmax);
-                        this.rt = Math.random() * this.hl;
-
-                        this.stop = Math.random() * 0.2 + 0.4;
-
-                        this.s.rt = Math.random() + 1;
-                        this.s.xdrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
-                        this.s.ydrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
-                    };
-
-                    this.fade = function () {
-                        this.rt += this.s.rt;
-                    };
-
-                    this.draw = function () {
-                        let newo, cr;
-
-                        if (this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) {
-                            this.s.rt = this.s.rt * -1;
-                        } else if (this.rt >= this.hl) {
-                            this.reset();
-                        }
-
-                        newo = 1 - (this.rt / this.hl);
-
-                        con.beginPath();
-                        con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
-                        con.closePath();
-
-                        cr = this.r * newo;
-
-                        g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
-                        g.addColorStop(0.0, 'rgba(193,254,254,' + newo + ')');
-                        g.addColorStop(this.stop, 'rgba(193,254,254,' + (newo * 0.2) + ')');
-                        g.addColorStop(1.0, 'rgba(193,254,254,0)');
-
-                        con.fillStyle = g;
-                        con.fill();
-                    };
-
-                    this.move = function () {
-                        this.x += (this.rt / this.hl) * this.dx;
-                        this.y += (this.rt / this.hl) * this.dy;
-                        if (this.x > WIDTH || this.x < 0) this.dx *= -1;
-                        if (this.y > HEIGHT || this.y < 0) this.dy *= -1;
-                    };
-
-                    this.getX = function () {
-                        return this.x;
-                    };
-
-                    this.getY = function () {
-                        return this.y;
-                    };
-                };
-            })();
-
-            $('.spriteWrap').sprites();
-        }
-    }
 }

src/app/views/home/home.component.ts

@@ -1,6 +1,4 @@
 import {Component} from "@angular/core";
-import {Observable, timer} from "rxjs";
-import {map, take} from "rxjs/operators";
 import {Router} from "@angular/router";
 import {SyncService} from "../../services/sync.service";
 
@@ -12,12 +10,9 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
     styleUrls: ['home.component.scss']
 })
 export class HomeComponent {
-    phrase = 'If you\'re into that';
+    splash = true;
-    typedText: Observable<string>;
 
-    constructor(private syncService: SyncService, private router: Router) {
+    constructor(private syncService: SyncService, private router: Router) { }
-        this.typedText = timer(750, 50).pipe(take(this.phrase.length), map((i: number) => this.phrase.substring(0, i + 1)));
-    }
 
     async new() {
         let mapCode: string;