ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Another try

Browse Source
This commit is contained in:
Zakary Timson
2019-08-24 22:59:34 -04:00
parent 1fd814d054
commit a996f18f15
4 changed files with 3327 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/animatedBackground/animatedBackground.component.scss
View File

@@ -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{

141
src/app/components/animatedBackground/animatedBackground.component.ts
View File

@@ -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($('<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();
}
}
}

9
src/app/views/home/home.component.ts
View File

@@ -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<string>;
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;