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

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

export class Scorebar extends Component {
    render() {
        var lives = [];
        for (var i = 0; i < this.props.lives; i++) {
            lives.push(<div className='life' key={i}></div>);
        }

        return (<div className='scorebar'>
            <div className='item current-score'>{this.props.current}</div>
            <div className='item high-score'>{this.props.high}</div>
            <div className='item lives'>{lives}</div>
        </div>);
    };
};

const select = (state) => {
    return state.scorebar;
};

export default connect(select)(Scorebar);