From a996f18f154391f7c8133370d20ff0c3f83aa1fd Mon Sep 17 00:00:00 2001 From: ztimson Date: Sat, 24 Aug 2019 22:59:34 -0400 Subject: [PATCH] Another try --- .../animatedBackground.component.scss | 10 - .../animatedBackground.component.ts | 141 +- src/app/views/home/home.component.ts | 9 +- src/assets/images/nature.svg | 3323 +++++++++++++++++ 4 files changed, 3327 insertions(+), 156 deletions(-) create mode 100644 src/assets/images/nature.svg diff --git a/src/app/components/animatedBackground/animatedBackground.component.scss b/src/app/components/animatedBackground/animatedBackground.component.scss index 784db15..2e25b90 100644 --- a/src/app/components/animatedBackground/animatedBackground.component.scss +++ b/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{ diff --git a/src/app/components/animatedBackground/animatedBackground.component.ts b/src/app/components/animatedBackground/animatedBackground.component.ts index f5c9dad..f1536d4 100644 --- a/src/app/components/animatedBackground/animatedBackground.component.ts +++ b/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 { - private once = true; - +export class AnimatedBackgroundComponent { 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($('')); - 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(); - } - } } diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index 4f7c978..50165d0 100644 --- a/src/app/views/home/home.component.ts +++ b/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'; - typedText: Observable; + splash = true; - 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))); - } + constructor(private syncService: SyncService, private router: Router) { } async new() { let mapCode: string; diff --git a/src/assets/images/nature.svg b/src/assets/images/nature.svg new file mode 100644 index 0000000..ed2a4e1 --- /dev/null +++ b/src/assets/images/nature.svg @@ -0,0 +1,3323 @@ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + > + + + + + + + + + + +
+ + +
+
+
+
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + + + + + + + + + + +
+
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +