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

var React = require('react');
var State = require('../State');

module.exports = React.createClass({
    getInitialState() {
        return {
            currentScore: 0,
            highScore: 0
        };
    },

    componentDidMount() {
        State.subscribe('munch/successful', this.updateScore);
    },

    updateScore() {
        var score = this.state.currentScore;
        this.setState({ currentScore: score + 10 });
    },

    render() {
        return (<div className='scorebar'>
            <div className='item current-score'>{this.state.currentScore}</div>
            <div className='item high-score'>{this.state.highScore}</div>
            <div className='item lives'>
                <div className='life'></div>
                <div className='life'></div>
                <div className='life'></div>
            </div>
        </div>);
    }
});