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

import React from 'react';
import Grid from './grid/grid';
import GridControl from './grid/grid-control';

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

        var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
        var channel = "mineseeker/channel/" + gameAssoc;

        this.state = {
            gameInherited: props.gameId !== '',
            gameAssoc: gameAssoc,
            channel: channel,
            session: null,
            createGrid: false,
            stepCache: null
        }
    }

    makeGameAssoc(len) {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < len; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return text;
    }

    /** STEP */
    makePointsCalcAndStep(coords) {
        let users = this.refs.gridControl.refs.userControl,
            activePlayer = users.state.activePlayer ? 'blue' : 'red',
            inactivePlayer = users.state.activePlayer ? 'red' : 'blue',
            redPoints = activePlayer === 'red'
                ? users.refs[activePlayer].state.mines
                : users.refs[inactivePlayer].state.mines,
            bluePoints = activePlayer === 'blue'
                ? users.refs[activePlayer].state.mines
                : users.refs[inactivePlayer].state.mines;

        this.refs.gridControl.stepEvent(coords);

        let mineCache = this.refs.gridControl.state.foundUserMineCache;
        redPoints += activePlayer === 'red' ? mineCache : 0;
        bluePoints += activePlayer === 'blue' ? mineCache : 0;

        return {red: bluePoints, blue: redPoints};
    }

    /** THE END */
    makeGameEndIfItEnds(bluePoints, redPoints) {
        var redWins = redPoints > 2,
            blueWins = bluePoints > 2;

        if (redWins || blueWins) {
            this.refs.gridControl.state.sound.won.play();

            this.refs.gridControl.setState({
                overlay: true,
                overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
                overlaySubTitle: "Play again!"
            });

            this.refs.gridControl.showLeftMines();

            this.refs.gridControl.refs.userControl.setState({activePlayer: false});
            this.refs.gridControl.refs.userControl.refs.red.setState({desc: ""});
            this.refs.gridControl.refs.userControl.refs.blue.setState({desc: ""});
        }
    }

    /** after rendering */
    componentDidMount() {
        /** Create Websocket w/ Bahnhof.js */
        var websocket = WS.connect("ws://mine.dev:6450");

        /**
         * Connect
         * Session is an Autobahn JS WAMP session.
         */
        websocket.on("socket/connect", (session) => {
            console.info("Successfully connected to the Server!");

            var gridClient = this.state.gameInherited || new Grid().state.grid;

            /**
             * Connect - RPC
             * Send grid information to the server
             */
            session
                .call(
                    this.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
                    this.state.gameInherited ? this.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), this.state.gameAssoc]
                )
                .then(
                    (gridServer) => {
                        console.info("Grid has been created! Return w/ gameAssoc.");

                        this.setState({session: session});

                        /** save session to GridControl */
                        /** render grid fields - #12 */
                        this.refs.gridControl.setState({
                            grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
                            channel: this.state.channel,
                            desc: {
                                buddy: <div>
                                    Your buddy is <br/>
                                    making a <br/>
                                    move.
                                </div>,
                                you: <div>
                                    It is your turn! <br/>
                                    Make a move.
                                </div>
                            },
                            overlay: true,
                            overlayTitle: "We are waiting for your opponent...",
                            overlaySubTitle: this.state.gameAssoc
                                ?
                                <div>
                                    <div className="clippy">
                                        <input id="foo"
                                               defaultValue={window.location.href + '/' + this.state.gameAssoc}/>
                                        <button className="btn">
                                            <img src="/bundles/mineseeker/images/clippy.svg" alt="Copy to clipboard"/>
                                        </button>
                                    </div>
                                    <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
                                </div>
                                : '',
                            renderGridFields: this.state.gameAssoc
                        });

                        /** Connect - Subscribe */
                        this.state.session.subscribe(
                            this.state.channel,
                            (uri, payload, log) => {

                                var isTopicEvent = typeof payload.data !== 'undefined',
                                    isNotUnsubscribe = typeof payload.msg === 'undefined';

                                if (isTopicEvent) {
                                    console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);

                                    /** Auto-Step if this player is not the current user */
                                    if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
                                        console.warn('Opponent stepped: Auto-Step process');

                                        this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});

                                        /** STEP */
                                        let points = this.makePointsCalcAndStep(payload.data.coords);

                                        /** THE END */
                                        this.makeGameEndIfItEnds(points.blue, points.red);
                                    }
                                } else {

                                    /** It is subscribe or unsubscribe */
                                    if (isNotUnsubscribe) {
                                        console.info(
                                            (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
                                        );

                                        /** setup the web player */
                                        null === this.refs.gridControl.state.webPlayer && this.refs.gridControl.setState({
                                            webPlayer: payload.user === payload.users.blue || payload.user === payload.users.blueAnon
                                                ? 'blue'
                                                : 'red'
                                        });

                                        /** every user has been came */
                                        if (payload.userCnt === 2) {
                                            /** every time the blue starts */
                                            this.refs.gridControl.refs.userControl.setState({activePlayer: 1});

                                            /** Set up player names w/ server data */
                                            this.refs.gridControl.refs.userControl.refs.red.setState({
                                                name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon,
                                            });

                                            this.refs.gridControl.refs.userControl.refs.blue.setState({
                                                name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon,
                                                desc: this.refs.gridControl.state.webPlayer === 'blue'
                                                    ? this.refs.gridControl.state.desc.you
                                                    : this.refs.gridControl.state.desc.buddy,
                                                active: true,
                                            });

                                            this.refs.gridControl.setState({overlay: false});
                                        }
                                    } else {
                                        console.info(payload.msg);

                                        this.refs.gridControl.setState({
                                            overlay: true,
                                            overlayTitle: "The connection has been lost...",
                                            overlaySubTitle: "Please, restart the game!"
                                        });
                                    }
                                }
                            }
                        );
                    },
                    (error, desc) => console.error(["RPC Error", error, desc])
                );
        });

        /**
         * DisConnect
         * Error provides us with some insight into the disconnection: error.reason and error.code
         */
        websocket.on("socket/disconnect", (error) => console.error("Disconnected for " + error.reason + " with code " + error.code));
    }

    onClick(coords) {
        var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';

        /** if the clicked field is NEVER CLICKED */
        if (this.refs.gridControl.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
            /** Player step and it is the current player */
            if (activePlayer === this.refs.gridControl.state.webPlayer) {
                /** STEP */
                let points = this.makePointsCalcAndStep(coords);

                /** THE END */
                this.makeGameEndIfItEnds(points.blue, points.red);

                this.state.session
                    .publish(this.state.channel, {
                        'coords': coords,
                        'player': activePlayer,
                        'bomb': this.refs.gridControl.refs.userControl.state.bombSelected,
                        'redPoints': points.red,
                        'bluePoints': points.blue
                    });
            }
        }
    }

    render() {
        return (
            <GridControl ref="gridControl"
                         env={this.props.env === 'dev'}
                         onClick={this.onClick.bind(this)}/>
        );
    }
}

export default MineSeeker;