You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.4 KiB
117 lines
3.4 KiB
// Join mechanic, multiple particles.
|
|
// Goal: per-frame decisions
|
|
// 20 x 20 grid
|
|
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 evtMove = (detail) => new CustomEvent('move', { 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 * 20;
|
|
// //
|
|
// // div.style.left = 0
|
|
// // div.style.top = `${y}px`;
|
|
// //
|
|
// // acc[0].push(div);
|
|
// // acc[1].push({ x, y });
|
|
// //
|
|
// // acc[1][`${x}-${y}`] = { occupied: true, type: 'palette', x, y, i };
|
|
// //
|
|
// // return acc;
|
|
// }, [[], []]);
|
|
//
|
|
// const palettes = (new Array(1)).fill(null).reduce((acc, v, i) => {
|
|
// const initialX = 200;
|
|
// const initialY = 200;
|
|
// const w = 167;
|
|
// const h = 100;
|
|
// const maxX = initialX + w;
|
|
// const maxY = initialY + h;
|
|
// const s = 20;
|
|
//
|
|
// for (let y = initialY; y < maxY; y += s) {
|
|
// for (let x = initialX; x < maxX; x += s) {
|
|
// state[`${x}-${y}`] = { occupied: true, type: 'palette', i };
|
|
// }
|
|
// }
|
|
//
|
|
// const div = document.createElement('div');
|
|
// div.className = 'palette';
|
|
// div.style.left = `${initialX}px`;
|
|
// div.style.top = `${initialY}px`;
|
|
//
|
|
// 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 < scareRadius && diffY < scareRadius) {
|
|
// 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 move(evt) {
|
|
//
|
|
// }
|
|
//
|
|
// function flee(evt) {
|
|
// particles[evt.detail.i].innerHTML = 'S'
|
|
// DOM.addClass(particles[evt.detail.i], 'scared');
|
|
// const p = particles[evt.detail.i];
|
|
// DOM.container.dispatchEvent(evtMove(evt.detail));
|
|
//
|
|
// setTimeout(() => {
|
|
// p.innerHTML = '';
|
|
// DOM.removeClass(p, 'scared');
|
|
// }, 1000);
|
|
// }
|
|
//
|
|
function reset() {
|
|
// while (DOM.container.childNodes.length) {
|
|
// DOM.container.removeChild(DOM.container.firstChild);
|
|
// }
|
|
//
|
|
// particles.forEach((div) => {
|
|
// div.innerHTML = '';
|
|
// DOM.container.appendChild(div)
|
|
// });
|
|
//
|
|
// 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);
|
|
// const move$ = Rx.Observable.fromEvent(DOM.container, 'move');
|
|
//
|
|
// click$.subscribe(scare);
|
|
// scare$.subscribe(flee);
|
|
// move$.subscribe(console.info);
|
|
};
|
|
|
|
const Animation5 = Object.assign({}, AnimationBase, { init, reset });
|
|
|
|
export default Animation5;
|
|
|