add all

app/app.component.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { SpawnComponent } from './app.spawner';
+import { Spawn, Direction } from './models/spawn';
+
+const clouds: Spawn = {
+	classname: 'cloud',
+	rarity: 0.5,
+	direction: Direction.Upper,
+	totalclasses: 4,
+	ticker: 1.5
+};
+
+const islands: Spawn = {
+	classname: 'island',
+	rarity: 0.3,
+	direction: Direction.Lower,
+	totalclasses: 5,
+	ticker: 4
+};
+
+const seagull: Spawn = {
+	classname: 'seagull',
+	rarity: 0.4,
+	direction: Direction.Upper,
+	totalclasses: 1,
+	ticker: 2
+};
+
+const fish: Spawn = {
+	classname: 'fish',
+	rarity: 0.2,
+	direction: Direction.Lower,
+	totalclasses: 1,
+	ticker: 3
+};
+
+var date = new Date().getHours();
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <div id="sun"></div>
+  <div id="sky" *ngIf="isNight" style="background: linear-gradient(#B48170 30%, #FD9F23)"></div>
+  <div id="sky" *ngIf="!isNight"></div>
+  <div id="sea">
+  	<div class="ripple duration-1"></div>
+  	<div class="ripple duration-2"></div>
+  	<div class="ripple duration-3"></div>
+  	<div class="ripple duration-4"></div>
+  	<div class="ripple duration-5"></div>
+  	<div class="ripple duration-6"></div>
+  	<div class="ripple duration-7"></div>
+  </div>
+  <div id="boat">
+  	<div id="person"><div id="wave"></div></div>
+  </div>
+  <div *ngIf="isNight" id="overlay"></div>
+  <spawner [spawn]="clouds"></spawner>
+  <spawner [spawn]="islands"></spawner>
+  <spawner [spawn]="seagull"></spawner>
+  <spawner [spawn]="fish"></spawner>
+  `,
+  directives: [SpawnComponent]
+})
+export class AppComponent {
+	clouds = clouds;
+	islands = islands;
+	seagull = seagull;
+	fish = fish;
+	isNight = date > 19 || date < 4;
+}

app/app.spawner.ts

@@ -0,0 +1,78 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgStyle } from '@angular/common';
+import { Spawn, Direction } from './models/spawn';
+import { Element } from './models/element';
+
+var w = window.innerWidth;
+var h = window.innerHeight;
+
+window.addEventListener('resize', () => {
+  w = window.innerWidth;
+  h = window.innerHeight;
+});
+
+const rand = (start: number, stop: number) => {
+  return Math.floor(Math.random() * stop) + start;
+}
+
+const convertRange = (value, r1, r2) => { 
+  return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
+}
+
+@Component({
+  selector: 'spawner',
+  template: `
+  <div class="container" *ngFor="let el of elements">
+    <div class="{{el.classname}}" [ngStyle]="{'left':el.x, 'top':el.y, 'zoom': el.zoom, '-moz-transform': el.scale, 'z-index': el.zindex}"></div>
+  </div>
+  `,
+  directives: [ NgStyle ]
+})
+export class SpawnComponent implements OnInit { 
+  @Input()
+  spawn: Spawn;
+  elements: Element[] = [];
+
+  ngOnInit(){
+     setInterval(this.generate.bind(this), this.spawn.ticker * 1000);
+     window.requestAnimationFrame(this.frame.bind(this));
+   }
+
+   private frame(){
+     var eliminations: number[] = [];
+     this.elements.forEach((el, i) => {
+       el.x += (1 * el.velocity);
+       if(el.x > w){
+         eliminations.push(i);
+       }
+     });
+
+     eliminations.forEach(i => this.elements.splice(i, 1));
+     window.requestAnimationFrame(this.frame.bind(this));
+   }
+
+   private generate(){
+     if(this.spawn.rarity < Math.random()){
+         var r = Math.random();
+         var z = convertRange(2 - r, [1, 2], [0.9, 2]);
+         var v = convertRange(r + 1, [1, 2], [1, 3]);
+         var initpoint = 0;
+         if(this.spawn.direction === Direction.Lower){
+           initpoint = h/2 - 50;
+           v = convertRange(2 - r, [1, 2], [0.4, 6]);
+         }
+         if (z < 1.4 && z > 1.05){
+           z = 1.4;
+         }
+
+        this.elements.push({
+          classname: `${this.spawn.classname}${rand(1, this.spawn.totalclasses)}`,
+          y: initpoint,
+          x: -100,
+          zoom: z,
+          velocity: v, 
+          zindex: Math.floor(z*10000)
+        });
+      }
+   }
+}

app/main.ts

@@ -0,0 +1,3 @@
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { AppComponent } from './app.component';
+bootstrap(AppComponent);

app/models/element.ts

@@ -0,0 +1,11 @@
+export class Element {
+	classname: string;
+	zoom: number;
+	zindex: number; 
+	velocity: number;
+	x: number;
+	y: number;
+	get scale(): string{
+	  return `scale(${this.zoom},${this.zoom})`;
+	}
+}

app/models/spawn.ts

@@ -0,0 +1,12 @@
+export class Spawn {
+  classname: string;
+  rarity: number;
+  direction: Direction;
+  totalclasses: number;
+  ticker: number;
+}
+
+export enum Direction {
+    Upper,
+    Lower,
+}