Dope new landing page

angular.json

@@ -37,7 +37,8 @@
               "./node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js",
               "./node_modules/leaflet-openweathermap/leaflet-openweathermap.js",
               "./node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js",
-              "./node_modules/esri-leaflet/dist/esri-leaflet.js"
+              "./node_modules/esri-leaflet/dist/esri-leaflet.js",
+              "./node_modules/jquery/dist/jquery.js"
             ]
           },
           "configurations": {

package.json

@@ -30,6 +30,7 @@
     "esri-leaflet": "^2.3.0",
     "firebase": "^6.3.0",
     "hammerjs": "^2.0.8",
+    "jquery": "^3.4.1",
     "leaflet": "^1.5.1",
     "leaflet-openweathermap": "^1.0.0",
     "leaflet-polylinedecorator": "^1.6.0",

src/app/animations.ts

@@ -26,7 +26,7 @@ export const fadeIn = trigger('fadeIn', [
 export const fadeOut = trigger('fadeOut', [
     transition(':leave', [
         style({ opacity: 1 }),
-        animate(defaultTiming, style({ opacity: 0 }))
+        animate(1500, style({ opacity: 0 }))
     ])
 ]);
 

src/app/app.module.ts

@@ -17,9 +17,11 @@ import {AngularFirestoreModule} from "@angular/fire/firestore";
 import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {PaletteComponent} from "./components/palette/palette.component";
 import {MarkerComponent} from "./components/marker/marker.component";
+import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component";
 
 @NgModule({
     declarations: [
+        AnimatedBackgroundComponent,
         AppComponent,
         CalibrateComponent,
         HomeComponent,

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

@@ -0,0 +1,153 @@
+import {AfterViewChecked, Component} from "@angular/core";
+import {fadeOut} from "../../animations";
+
+@Component({
+    selector: 'animated-background',
+    templateUrl: 'animatedBackground.component.html',
+    styleUrls: ['animatedBackground.component.scss'],
+    animations: [fadeOut]
+})
+export class AnimatedBackgroundComponent implements AfterViewChecked {
+    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.html

@@ -1,40 +1,13 @@
-<div class="d-flex w-100 h-100 flex-column justify-content-center align-items-center px-4" style="background-color: #1976d2">
+<animated-background></animated-background>
-    <div>
+<div class="badge">
-        <img src="assets/images/logo.png" width="100%" height="auto">
+    <img src="assets/images/logo.png" width="200px" height="auto">
-    </div>
+</div>
-    <div class="my-5 text-center">
+<div class="controls">
-        <h3 class="text-white">Collaborative map making... {{typedText | async}}</h3>
+    <div class="row">
-    </div>
+        <div class="col-12 col-md-6">
-    <div>
+            <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
-        <div class="row">
+                <mat-icon>add</mat-icon> New Map
-            <div class="col">
+            </button>
-                <button mat-flat-button class="w-100 text-white" style="background-color: #dd4b39">
-                    <i class="fab fa-google mr-2"></i> Sign in with Google
-                </button>
-                <button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #00acee">
-                    <i class="fab fa-twitter mr-2"></i> Sign in with Twitter
-                </button>
-                <button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #3b5998">
-                    <i class="fab fa-facebook mr-2"></i>Sign in with Facebook
-                </button>
-            </div>
-            <div class="col mt-5 mt-md-0">
-                <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
-                    <mat-icon>add</mat-icon> New Map
-                </button>
-                <div class="d-flex mt-2 align-items-baseline">
-                    <div class="flex-grow-1">
-                        <mat-form-field appearance="fill" class="w-100 text-white mat-padding-0">
-                            <input #mapCode matInput placeholder="Map Code">
-                        </mat-form-field>
-                    </div>
-                    <div class="ml-2">
-                        <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" [routerLink]="['/', mapCode.value]">
-                            <mat-icon>explore</mat-icon> Open
-                        </button>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>

src/app/views/home/home.component.scss

@@ -0,0 +1,15 @@
+.badge {
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  z-index: 500;
+  transform: translateX(-50%);
+}
+
+.controls {
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  z-index: 500;
+  transform: translateX(-50%);
+}

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

@@ -8,7 +8,8 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
 @Component({
     selector: 'home',
-    templateUrl: 'home.component.html'
+    templateUrl: 'home.component.html',
+    styleUrls: ['home.component.scss']
 })
 export class HomeComponent {
     phrase = 'If you\'re into that';

src/styles.scss

@@ -9,8 +9,10 @@ html, body {
   height: 100vh;
   overflow: hidden;
 }
+
 body {
   margin: 0;
   overscroll-behavior: none;
   font-family: Roboto, "Helvetica Neue", sans-serif;
+  background-color: black;
 }