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';
import Logging from './system/logging';

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

        var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
        var channel = "acme/channel/" + gameAssoc;
        var log = new Logging();
        log.state.logging = props.env === 'dev';

        var grid = new Grid();

        this.state = {
            gameInherited: props.gameId !== '',
            gameAssoc: gameAssoc,
            log: log,
            websocket: null,
            channel: channel,
            createGrid: false,
            grid: grid.state.grid
        }
    }

    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;
    }

    topicProcess(payload, grid) {
        var log = this.state.log;

        /** It is a PUBLISH */
        if (typeof payload.data !== 'undefined') {
            log.i([payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[0], payload]);

            /** because the activePlayer has been changed before the data come */
            if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
                this.refs.gridControl.stepEvent(payload.data.coords, true);
            }
        } else {
            /** It is a SUBSCRIBE */
            log.i(["Something happened on the channel!", payload]);

            if (this.refs.gridControl.state.webPlayer === null) {
                if (payload.userCnt === 1) {
                    this.refs.gridControl.state.webPlayer = 'red';
                }

                if (payload.userCnt === 2) {
                    this.refs.gridControl.state.webPlayer = 'blue';
                    this.refs.gridControl.state.grid = JSON.parse(grid);
                }
            }
        }
    }

    /** after rendering */
    componentDidMount() {
        this.state.websocket = WS.connect("ws://mine.dev:6450");

        var log = this.state.log;

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

            /**
             * Connect
             * Send grid information to the server
             */
            session
                .call(
                    this.state.gameInherited ? "sample/connectGame" : "sample/startGame",
                    [this.state.grid, this.state.gameAssoc]
                )
                .then(
                    (grid) => {
                        log.l(["Grid has been created! Return w/ gameAssoc."]);

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

                                /** Create GridControl class */
                                if (this.state.createGrid) {
                                    this.topicProcess(payload, grid);
                                } else {
                                    this.setState({createGrid: true}, () => {
                                        /** Start GridControl tag */
                                        this.refs.gridControl.setState({grid: this.state.grid}, () => {
                                            this.refs.gridControl.state.session = session;
                                            this.refs.gridControl.state.channel = this.state.channel;

                                            this.topicProcess(payload, grid);
                                        });
                                    });
                                }
                            }
                        );
                    },
                    (error, desc) => log.e(["RPC Error", error, desc])
                );
        });

        /**
         * Connect
         * Error provides us with some insight into the disconnection: error.reason and error.code
         */
        this.state.websocket.on("socket/disconnect", function (error) {
            log.w("Disconnected for " + error.reason + " with code " + error.code);
        });
    }

    createGrid() {
        return this.state.createGrid
            ? <GridControl ref="gridControl"
                           env={this.props.env === 'dev'}
                           log={this.state.log}/>
            : '';
    }

    /** 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>
                {this.createGrid()}
                {/*<GridControl ref="gridControl"*/}
                {/*env={this.props.env === 'dev'}*/}
                {/*log={this.state.log}/>*/}
            </div>
        );
    }
}

export default MineSeeker;