particles.js

import Plugin from '../core/plugin';
import Component from '../core/component';
import System from '../core/system';

import quantity from '../core/components/quantity';
import texture from '../core/components/texture';

const particle = new Component({
    all: Component.types.array,
    color: Component.types.string,
    size: Component.types.number
});

export default new Plugin(engine => {
    const { width, height } = engine.world;

    engine.on('chunk', new System([ particle, quantity ], entity => {
        const { value } = quantity.of(entity);
        const all = Array.from(Array(value), () => ({
            velocity: { x: 0, y: 0 },
            x: 0,
            y: 0
        }));

        Object.assign(particle.of(entity), { all });
    }));

    engine.on('update', new System([ particle, texture ], entity => {
        const { all, color, size } = particle.of(entity);
        const data = document.createElement('canvas');
        const context = data.getContexst('2d');

        cache.width = width;
        cache.height = height;

        all.forEach(particle => {
            // TODO update position of single particle
            context.fillStyle = color;
            context.fillRect(particle.x, particle.y, size, size);
        });

        Object.assign(texture.of(entity), { data });
    }));
});