MineSeeker/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js

import React from 'react';

class GridField extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            currentObj: 'w',
            currentImage: null,
            active: false,
            lastClickedRed: false,
            lastClickedBlue: false,
            icons: {
                root: 'bundles/mineseeker/images/',
                water: {
                    1: 'bg-wave-1-outbg.png',
                    2: 'bg-wave-1-outbg.png',
                    3: 'bg-wave-2-outbg.png'
                },
                flag: {
                    red: 'bg-flag-red-outbg.png',
                    blue: 'bg-flag-blue-outbg.png'
                },
                target: {
                    lastBlue: 'bg-last-blue-outbg.png',
                    lastRed: 'bg-last-red-outbg.png',
                    crosshair: 'bg-target-outbg.png',
                    crosshairBomb: 'bg-target-bomb-outbg.png'
                }
            }
        };
    }

    componentWillMount() {
        var wave = Math.floor(Math.random() * 3) + 1;

        this.setState({
            currentImage: this.state.icons.root + this.state.icons.water[wave]
        });
    }

    classNameWhenActive() {
        return 'field'
            + (this.state.active === true ? ' active' : '')
            + (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
            + ' color-' + this.state.currentObj;
    }

    currentImage() {
        return isNaN(this.state.currentImage)
            ?
            <div className="flag-mine">
                <img src={this.state.currentImage}/>
                <div className="flag-mine-base"></div>
            </div>
            : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
    }

    lastClickedClass() {
        return 'field-'
            + (this.state.lastClickedRed ? 'red' : '')
            + (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
    }

    lastClickedSrc() {
        return this.state.lastClickedRed
            ? "/bundles/mineseeker/images/bg-last-red-outbg.png"
            : "/bundles/mineseeker/images/bg-last-blue-outbg.png";
    }

    currentLastClicked() {
        return this.state.lastClickedRed || this.state.lastClickedBlue
            ? <img className={this.lastClickedClass()}
                   src={this.lastClickedSrc()}
                   alt="blue last"/>
            : '';
    }

    render() {
        return (
            <div className="field-wrapper">
                <img className="field-target"
                     src="/bundles/mineseeker/images/bg-target-outbg.png"
                     alt="target"
                     onClick={this.props.onClick}/>
                {this.currentLastClicked()}
                <div className={this.classNameWhenActive()}>
                    <div className="field-corner">
                        {this.currentImage()}
                    </div>
                </div>
            </div>
        );
    }
}

export default GridField;