number-munchers/components/board/message.component.js

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

import { Component } from 'react';
// var Values = require('./Values');

var exclamations = [
    'Congratulations!',
    'Yippee!',
    'Woohoo!',
    'Nice work!',
    'Great job!',
    'Boom!',
    'All finished!',
    'Shazam!'
];

export default class Message extends Component {
    // getInitialState() {
    //     return {
    //         message1: 'Congratulations!',
    //         message2: 'Press spacebar to continue.',
    //         hidden: true
    //     };
    // },

    componentDidMount() {
        // State.subscribe('level/complete', this.levelComplete);
        // State.subscribe('level/next', this.levelNext);
        // State.subscribe('munch/failed', this.munchFailed);
    };

    munchFailed(value) {
        var self = this;

        function keydown(e) {
            if (e.keyCode === 32) {
                window.removeEventListener('keydown', keydown);
                // self.setState({ hidden: true });
            }
        };

        // var msg = Values.getError(value, State.level);
        // this.setState({ hidden: false, message1: msg });
        window.addEventListener('keydown', keydown);
    };

    levelComplete() {
        function keydown(e) {
            if (e.keyCode === 32) {
                window.removeEventListener('keydown', keydown);
                // State.publish('level/next');
            }
        };

        var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
        // this.setState({ hidden: false, message1: msg });
        window.addEventListener('keydown', keydown);
    };

    levelNext() {
        // this.setState({ hidden: true });
    };

    render() {
        var classname = ['message', 'hidden'];
        const state = { message1: 'foo', message2: 'bar' };
        // if (this.state.hidden === true) {
        //     classname.push('hidden');
        // }

        return (
            <div className={classname.join(' ')}>
                {state.message1}
                <br />
                {state.message2}
            </div>
        );
    };
};