Animation II WIP.

js/animation0.js

@@ -0,0 +1,6 @@
+const Animation0 = {
+    init: () => { console.error('init() not implemented.'); },
+    reset: () => { console.error('reset() not implemented.'); },
+};
+
+export default Animation0;

js/animation2.js

@@ -0,0 +1,76 @@
+import Rx, { Observable } from 'rxjs';
+import AnimationBase from './animation0';
+import DOM from './dom';
+import Store from './store';
+
+const evtScare = (scareX, scareY) => new CustomEvent("scare", { detail: { scareX, scareY } });
+
+const particleDiv = document.createElement('div');
+particleDiv.className = 'particle';
+
+function checkScare([evt, store]) {
+    const state = store.get();
+
+    const { evtX, evtY } = DOM.getEventOffsetCoords(evt, DOM.containerBounds);
+    const diffX = Math.abs(state.x - evtX);
+    const diffY = Math.abs(state.y - evtY);
+
+    if (diffX < 50 && diffY < 50) {
+        DOM.container.dispatchEvent(evtScare(evtX, evtY));
+    }
+};
+
+function flee([evt, store]) {
+    const initialState = store.get();
+    const { scareX, scareY } = evt.detail;
+    const fps$ = Rx.Observable.interval(1000 / 32);
+
+    fps$
+        .scan((acc, i) => {
+            return store.set({ x: acc.x + acc.dx, y: acc.y + acc.dy })
+        }, initialState)
+        .takeWhile(state => {
+            const xDanger = Math.abs(initialState.x - state.x) < 150;
+            const yDanger = Math.abs(initialState.y - state.y) < 150;
+
+            return xDanger && yDanger;
+        })
+        .subscribe(state => {
+            particleDiv.style.left = `${state.x}px`;
+            particleDiv.style.top = `${state.y}px`;
+        })
+};
+
+function reset() {
+    if (particleDiv.parentNode) {
+        DOM.container.removeChild(particleDiv);
+    }
+
+    const store = new Store({ x: 10, y: 10, dx: 5, dy: 5 });
+    const state = store.get();
+
+    particleDiv.style.top = `${state.y}px`;
+    particleDiv.style.left = `${state.x}px`;
+
+    DOM.container.appendChild(particleDiv);
+
+    return store;
+};
+
+function init() {
+    const store = reset();
+
+    const click$ = Rx.Observable
+        .fromEvent(DOM.container, 'click')
+        .map(evt => [evt, store])
+        .subscribe(checkScare);
+
+    Rx.Observable
+        .fromEvent(DOM.container, 'scare')
+        .map(evt => [evt, store])
+        .subscribe(flee);
+};
+
+const Animation2 = Object.assign(AnimationBase, { init, reset });
+
+export default Animation2;

js/animation3.js

@@ -0,0 +1,47 @@
+import Rx, { Observable } from 'rxjs';
+
+const Animation2 = {
+    init: () => {
+        const container = document.querySelector('.particles');
+        const { left: containerX, top: containerY } = container.getBoundingClientRect();
+
+        const state = { x: 0, y: 75 };
+
+        const particleDivs = Array.apply(null, { length: 1 }).map((v, i) => {
+            const div = document.createElement('div');
+            div.className = 'particle';
+            // div.style.top = `${i * 75}px`;
+            // div.style.left = 0;
+            div.style.top = `${state.y}px`;
+            div.style.left = `${state.x}px`;
+
+            container.appendChild(div);
+            return div;
+        });
+
+        const evtScare = new CustomEvent("scare");
+
+        const strFps = Rx.Observable.interval(1000 / 32);
+        const strParticles = Rx.Observable.from(particleDivs);
+        const strScare = Rx.Observable.fromEvent(container, 'scare');
+
+        strScare.subscribe(console.log)
+
+        const strClick = Rx.Observable
+            .fromEvent(container, 'click');
+
+        strClick.subscribe(evt => {
+            const { pageX, pageY } = evt;
+            const offsetX = pageX - containerX;
+            const offsetY = pageY - containerY;
+            const diffX = Math.abs(state.x - offsetX);
+            const diffY = Math.abs(state.y - offsetY);
+
+            if (diffX < 50 && diffY < 50) {
+                container.dispatchEvent(evtScare);
+            }
+        });
+    },
+};
+
+export default Animation2;

js/dom.js

@@ -0,0 +1,19 @@
+const container = document.querySelector('.particles');
+const containerBounds = document.querySelector('.particles').getBoundingClientRect();
+
+const DOM = {
+    container,
+
+    containerBounds,
+
+    getEventOffsetCoords: (evt, containerCoords) => {
+        const { pageX, pageY } = evt;
+
+        return {
+            evtX: (pageX - containerCoords.left),
+            evtY: (pageY - containerCoords.top)
+        };
+    }
+};
+
+export default DOM;

js/index.js

@@ -1,8 +1,13 @@
+import Rx, { Observable } from 'rxjs';
 import Animation1 from './animation1';
+import Animation2 from './animation2';
 
 require('../css/index.scss');
 require('../css/reset.scss');
 
+Animation2.init();
+
+
 
 // TODO
 // PR: https://github.com/ReactiveX/rxjs/blob/master/doc/decision-tree-widget/tree.yml#L122 "...time past since the last..."

js/store.js

@@ -0,0 +1,14 @@
+const Store = function(initialProps) {
+    this.state = Object.freeze(initialProps);
+}
+
+Store.prototype.set = function(props) {
+    this.state = Object.freeze(Object.assign({}, this.state, props));
+    return this.state;
+};
+
+Store.prototype.get = function() {
+    return this.state;
+}
+
+export default Store;