dust/js/animation1.js

import Rx, { Observable } from 'rxjs';
import Particle from './particle';
import Store from './store';
import Controls from './controls';

function Animation1() {
    this.options = {
        count: 1,
        animating: false
    };

    this.container = document.getElementById('animation1');
    this.bounds = this.container.getBoundingClientRect();
    this.controls = new Controls(document.getElementById('controls1'), this.options);

    const eventStack = this.controls.mount();

    eventStack.subscribe(this.subscriber.bind(this));

    this.particles = [];

    this.updateCount();
    this.updateAnimating(true);

    // TODO Change animal pic
    // TODO show movement circle
    // TODO add core UI

    // TODO ANIM2 Show vision grid (including touches!)
};

Animation1.prototype.subscriber = function({ key, value }) {
    switch(key) {
        case 'count':
            this.updateCount();
            break;
        case 'animating':
            this.updateAnimating(!this.options.animating);
            break;
    }
}

Animation1.prototype.nextFrame = function() {
    this.particles.forEach(p => p.nextFrame());
}

Animation1.prototype.updateCount = function() {
    while (this.particles.length >= this.options.count) {
        const p = this.particles.pop();
        this.container.removeChild(p.node);
    }

    while (this.particles.length < this.options.count) {
        const p = new Particle(this.container, this.bounds);
        this.particles.push(p);
    }
};

Animation1.prototype.updateAnimating = function(animating) {
    Object.assign(this.options, { animating });
    this.controls.updateOptions(this.options);

    if (animating) {
        const fps$ = Rx.Observable.interval(1000 / 32)
            .takeWhile(_ => this.options.animating)
            .finally(() => { console.error("Stopped."); })

        fps$.subscribe(this.nextFrame.bind(this));
    }
};

export default Animation1;