require('../../sass/board/troggle.scss');

import { Component } from 'react';
import { connect } from 'react-redux';

import Troggle from './troggle.component';
import TroggleCtrl from '../../controllers/troggle.controller.js';

export class Troggles extends Component {
    componentWillUnmount() {
        TroggleCtrl.clearTimers();
    };

    render() {
        const { troggles, muncher } = this.props;

        const troggleElements = Array.from(Array(troggles.length), (v, i) => {
            return <Troggle x={troggles[i].x} y={troggles[i].y} mx={muncher.x} my={muncher.y} key={i} />;
        });

        return <div className='troggles'>{troggleElements}</div>
    };
};

const select = (state) => {
    return {
        troggles: state.troggles,
        muncher: state.muncher
    };
}

export default connect(select)(Troggles);