dust/js/animation4.js

// Join mechanic, multiple particles
// ????? Chase, maybe?
// ???? Occupied?

// called each frame update
// find if going to hit a wall
// find if palette nearby

// const grid = {};
// for (let x = 0; x <= 600; x += 5) {
//     grid[x] = {};
//     for (let y = 0; y <= 600; y += 5) {
//         grid[x][y] = { type: null };
//
//         if (x === 0 || y === 0 || x === 600 || y === 600) {
//             grid[x][y] = { type: 'wall' };
//         }
//     }
// }

import Rx, { Observable } from 'rxjs';
import AnimationBase from './animationBase';
import DOM from './dom';
import Store from './store';

const evtScare = (detail) => new CustomEvent('scare', { detail });

const [particles, state] = (new Array(5)).fill(null).reduce((acc, v, i) => {
    const div = document.createElement('div');
    div.className = 'anim3-particle';
    div.innerHTML = ''

    const x = 0;
    const y = i * 25;

    div.style.left = 0
    div.style.top = `${y}px`;

    acc[0].push(div);
    acc[1].push({ x, y });

    return acc;
}, [[], []]);

const palettes = (new Array(1)).fill(null).reduce((acc, v, i) => {
    const div = document.createElement('div');
    div.className = 'palette';
    div.style.left = '200px';
    div.style.top = '200px';

    acc.push(div);

    return acc;
}, []);

function scare(evt) {
    const bounds = DOM.container.getBoundingClientRect();
    const { evtX: x, evtY: y } = DOM.getEventOffsetCoords(evt, bounds);
    const scareRadius = 50;

    state.forEach((coord, i) => {
        const diffX = Math.abs(coord.x - x + 10);
        const diffY = Math.abs(coord.y - y + 10);

        if (diffX < 100 && diffY < 100) {
            coord.lastScare = { x, y }  // TODO set state with last scare, then judge per frame based on that number to avoid jump
            DOM.container.dispatchEvent(evtScare({ x, y, i }));
        }
    });
}

function reset() {
    while (DOM.container.childNodes.length) {
        DOM.container.removeChild(DOM.container.firstChild);
    }

    particles.forEach((div) => {
        div.innerHTML = '';
        DOM.container.appendChild(div)
    });

    console.warn(palettes)

    palettes.forEach((div) => {
        DOM.container.appendChild(div)
    });
};

function init() {
    reset();

    const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
    const scare$ = Rx.Observable.fromEvent(DOM.container, 'scare').auditTime(100);

    scare$.subscribe(evt => {
        particles[evt.detail.i].innerHTML = 'S'
        DOM.addClass(particles[evt.detail.i], 'scared');
        const p = particles[evt.detail.i];
        setTimeout(() => {
            p.innerHTML = '';
            DOM.removeClass(p, 'scared');
        }, 1000);
    });

    click$.subscribe(scare);
};

const Animation3 = Object.assign({}, AnimationBase, { init, reset });

export default Animation3;