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 = "acme/channel/" + gameAssoc;
        var userName = props.userName;

        this.state = {
            gameInherited: props.gameId !== '',
            gameAssoc: gameAssoc,
            channel: channel,
            userName: userName,
            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;
    }

    /** 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!");

            if (!this.state.gameInherited) {
                var gridClient = new Grid().state.grid;
            }

            /**
             * Connect - RPC
             * Send grid information to the server
             */
            session
                .call(
                    this.state.gameInherited ? "sample/connectGame" : "sample/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.state.session = session;

                        /** save session to GridControl */
                        this.refs.gridControl.setState({
                            grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
                            session: this.state.session,
                            channel: this.state.channel,
                            overlay: true,
                            overlayTitle: "We are waiting for your opponent..."
                        });

                        /** setup the web player && save player name */
                        if (this.refs.gridControl.state.webPlayer === null) {
                            if (this.state.gameInherited) {
                                this.refs.gridControl.state.webPlayer = 'blue';
                                this.refs.gridControl.refs.userControl.refs.blue.setState({name: this.state.userName});
                            } else {
                                this.refs.gridControl.state.webPlayer = 'red';
                                this.refs.gridControl.refs.userControl.refs.red.setState({name: this.state.userName});
                            }
                        }

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

                                var isNotUnsubscribe = typeof payload.msg === 'undefined';

                                if (typeof payload.data !== 'undefined') {
                                    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.state.bombSelected = payload.data.bomb;
                                        this.refs.gridControl.stepEvent(payload.data.coords);
                                    }
                                } else {
                                    console.info(
                                        (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
                                    );

                                    /** remove overlay when every user has been came */
                                    if (isNotUnsubscribe) {
                                        this.refs.gridControl.setState({overlay: payload.userCnt < 2});
                                    }

                                    // /** Save the opponent's player name */
                                    // if (this.state.gameInherited) {
                                    //     this.refs.gridControl.refs.userControl.refs.blue.setState({name: payload.user});
                                    // }
                                }
                            }
                        );
                    },
                    (error, desc) => console.log(["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.log("Disconnected for " + error.reason + " with code " + error.code));
    }

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

        /** Player step and it is the current player */
        if (activePlayer === this.refs.gridControl.state.webPlayer) {
            this.refs.gridControl.stepEvent(coords);

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

    /** FOR DEVELOPMENT */
    createLink() {
        return this.state.gameAssoc
            ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
            : '';
    }

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

export default MineSeeker;