// Join mechanic, multiple particles // ????? Chase, maybe? // ???? Occupied? // called each frame update // find if going to hit a wall // find if palette nearby import Rx, { Observable } from 'rxjs'; import AnimationBase from './animation0'; 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;