MineSeeker/assets/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,
            bombTargetArea: null,
            icons: {
                root: '/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'
                },
                left: 'bg-left-mine-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
            ? "/images/bg-last-red-outbg.png"
            : "/images/bg-last-blue-outbg.png";
    }

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

    createBombTarget() {
        if (this.state.bombTargetArea !== null) {
            var vert = '', hor = '';

            switch (this.state.bombTargetArea[0]) {
                case 0:
                    vert = 'left';
                    break;
                case 1:
                    vert = 'center';
                    break;
                case 2:
                    vert = 'right';
                    break;
                default:
                    vert = null;
                    break;
            }

            switch (this.state.bombTargetArea[1]) {
                case 0:
                    hor = 'top';
                    break;
                case 1:
                    hor = 'middle';
                    break;
                case 2:
                    hor = 'bottom';
                    break;
                default:
                    vert = null;
                    break;
            }

            var src = vert === null
                ? '/images/bg-bomb-empty-outbg.png'
                : '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';

            return <img className="field-bomb-target"
                        src={src}
                        alt="bomb target"/>
        }
    }

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

export default GridField;