ReactJS - zdrojové kódy k ukážkovej aplikácii Pexeso

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="sk" xml:lang="sk">
<head>
    <meta charset="utf-8" />
    <title>ReactJS - Pexeso</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
  </head>
  <body style="margin:0px;"]>
    <div id="app-content"></div>
    <script type="text/babel">

      var Game = React.createClass({

        getInitialState:function(){
            console.log(new Date());
            var field = this.generateField();

            return{running:true, field: field, time:0, points:0, }
        },

        setTimer:function(timer){
            this.state.time = timer;
        },

        generateField:function(){
            var field = [];
            //var field = new Field();

            //var pairs = [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
            var pairs = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];

            for (var i=0; i<16; i++){

                var pairID = Math.floor(Math.random()*pairs.length);

                var idValue = pairs[pairID];

                pairs.splice(pairID, 1);

                //console.log(pairID, idValue, pairs);

                field[i] = {
                    id : idValue,
                    opened: false,
                    solved: false,
                };
            }

            //console.log(field);

            return field;
        },

        restartGame:function(e){
            e.preventDefault();
            this.setState(this.getInitialState());
            this.forceUpdate();
        },

        changePoints:function(value){
            var newPoints = this.state.points + value;

            var toSolve = 0;
            for (var i=0; i<16; i++){
                if(!this.state.field[i].solved)
                    toSolve++;
            }

            if (toSolve == 0)
                this.state.running = false;

            this.setState({points: newPoints});
        },

        render:function(){


            var divStyle = {
                color: 'white',
                //backgroundColor: 'black',
                background: 'linear-gradient(141deg, rgb(142, 7, 7) 0%, rgb(121, 62, 62) 51%, rgb(99, 11, 11) 75%)',
                textAlign: 'center',
                width: '100%',
                height: '20vh',
            };

            var fieldStyle = {
                background: 'linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%)',
                width: '100%',
                height: '75vh',
            };

            var mainPanelStyle = {
                //paddingTop: '0.5em',
                textAlign: 'center',
                width: '100%',
                height: '5vh',
                //background: 'linear-gradient(-141deg, #666666 30%, rgba(117, 14, 14, 0.9) 50%, #666666 70%)',
                background: '#666666',
                //background: 'black',
                //borderTop: '1px solid black',
                //borderBottom: '1px solid black',
            };

            var buttonStyle ={
                height: '100%',

                margin: '0 1em ',
                fontWeight: 'bold',
                color: 'ivory',
                //background: 'linear-gradient(-141deg, #666666 30%, rgba(117, 14, 14, 0.9) 50%, #666666 70%)',
                background: '#700000',
                border: 'none',
                cursor: 'pointer',
                float: 'left',
            };

            var textStyle ={
                //height: '100%',

                margin: '0.4em 1em',
                fontWeight: 'bold',
                color: 'ivory',
                //background: 'linear-gradient(-141deg, #666666 30%, rgba(117, 14, 14, 0.9) 50%, #666666 70%)',

                border: 'none',

                float: 'left',
            };

            var winnerStyle = {
                //margin: '1em 0',
                //padding: '1em 0',
                //height: '100%',
                height: '100%',
                width: '100%',
                fontWeight: 'bold',
                display: 'table',
                textAlign: 'center'
            };

            var innerStyle = {
                display: 'table-cell',
                verticalAlign: 'middle',
                margin: '0px',
            };

            return (
                <div>
                    <div style={divStyle}>
                        <br/>
                        <h1 id='title'>.P..E..X..E..S..O.</h1>
                        <h3 id='title-description'>by ReactJS</h3>
                        <br/>

                    </div>

                    <div id='main-panel' style={mainPanelStyle}>
                        <div style={{width: '40%', height: '100%', margin: '0px auto'}}>
                            <button onClick={this.restartGame} style={buttonStyle}>{this.state.running ? "Reštartovať hru" : "Hrať novú hru"}</button>

                            { this.state.running ?
                            <p style={textStyle}>Počet bodov: {this.state.points}</p> : ""}
                            { this.state.running ?
                            <Timer timer={this.setTimer} style={textStyle} running={this.state.running} /> : ""
                            }

                        </div>
                    </div>


                    <div id="field" style={fieldStyle}>


                    {!this.state.running ?
                    <div style={winnerStyle}>
                    <p style={innerStyle}>
                    Gratulujeme, hru ste úspešne vyriešili v celkovom čase  {(this.state.time-(this.state.time%60))/60}  minút a {this.state.time%60} sekúnd...<br/>
                    Dosiahnuté skóre: {this.state.points} bodov
                    </p>
                    </div>
                    : null }

                    {this.state.running ? <Field game={this.state} changePoints={this.changePoints}/> : ""}

                    </div>
                </div>
            )
        },
      });

      var Timer = React.createClass({

         _tick: function() {
            if (!this.props.running) {
              clearInterval(this.interval);
            } else {
              this.setState({ timePassed: this.state.timePassed + 1 });
              this.props.timer(this.state.timePassed);
            }
          },

          getInitialState: function() {
            return { timePassed: 0 };
          },
          componentWillUnmount: function() {
            clearInterval(this.interval);
          },
          componentDidMount: function() {
            this.interval = setInterval(this._tick, 1000);
          },
          render: function() {
            var sec = this.state.timePassed%60;
            var min = (this.state.timePassed-sec)/60;
            return (
                <p style={this.props.style}>
                    Čas: {min<10 ? "0" + min : min}:{sec < 10 ? "0" + sec : sec}
                </p>
            )
          }

      });

      var Field = React.createClass({

        getInitialState:function(){

            return{first:null, second: null}
        },

        handleClick:function(e){
            e.preventDefault();

        },

        tileHandleClick:function(tile){

            if (this.state.first != tile){
                    tile.opened = !tile.opened;

            if (this.state.first != null && this.state.second != null) {

                    //najprv zmenime stav
                    this.state.first.opened = !this.state.first.opened;
                    this.state.second.opened = !this.state.second.opened;

                    this.state.second = null;
                    this.state.first = tile;
                } else {
                    if (this.state.first != null){ //first je obsadena, zaplname second
                        this.state.second = tile;


                        if (this.state.first.id == tile.id){
                            this.state.first.solved = true;
                            tile.solved = true;
                            this.props.changePoints(100);
                            this.state.first = null;
                            this.state.second = null;
                        } else if (this.props.game.points >= 10){
                            this.props.changePoints(-10);
                        }


                    } else { //obe su volne, zaplname first
                        this.state.first = tile;
                    }
                }


                this.forceUpdate();
            } else {
                window.alert("dlazdicu nemozno odznacit");
            }

        },

        render:function(){

            var game = this.props.game;

            var opened = {
                    first: this.state.first,
                    second: this.state.second,
            };

            var tileHandleClick = this.tileHandleClick;

            var tiles = game.field.map(function(tile){

                return <Tile tile={tile} opened={opened} clickHandler={tileHandleClick} />
            });

            var style = {
                height: '73vh',
                width: '73vh',
                margin: '0 auto',
                textAlign: 'center',
            };

            return (
                <div style={style}>
                    {tiles}
                </div>
            )
        },

      });

      var Tile = React.createClass({

        handleClick:function(e){
            e.preventDefault();

            if (this.props.opened.first != null && this.props.opened.second != null) {

                //najprv zmenime stav

                this.props.opened.first.opened = !this.props.opened.first.opened;
                this.props.opened.second.opened = !this.props.opened.second.opened;

                console.log(this.props.opened.first);
                console.log(this.props.opened.first.opened);

                this.props.opened.second = null;
                this.props.opened.first = this.props.tile;
                console.log("zmena");
            } else {
                if (this.props.opened.first != null){ //first je obsadena, zaplname second
                    this.props.opened.second = this.props.tile;
                } else { //obe su volne, zaplname first
                    this.props.opened.first = this.props.tile;
                }
            }
            this.props.tile.opened = !this.props.tile.opened;
            this.forceUpdate();
        },

        clickHandler:function(){
            this.props.clickHandler(this.props.tile);
        },

        render:function(){

            var colors = ["#3333cc", "#ff0066", "#008000", "#ff9900", "#100000", "#66004d", "#4d1a00", "#ffff00"];

            var openedStyle = {
                color: 'white',
                backgroundColor: colors[this.props.tile.id-1],
                height: '20%',
                width: '20%',
                margin: '2.1%',
                float: 'left',
                border: '1px solid grey',
                display: 'table',
                cursor: 'pointer',
            };

            var closedStyle = {
                color: 'red',
                background: 'white',
                height: '20%',
                width: '20%',
                margin: '2.1%',
                float: 'left',
                border: '1px solid grey',
                display: 'table',
                cursor: 'pointer',
            };

            var innerStyle = {
                display: 'table-cell',
                verticalAlign: 'middle',
                fontSize: '4em',
            };

            return (
                <div style={this.props.tile.opened ? openedStyle : closedStyle}
                    onClick={this.props.tile.solved ? null : this.clickHandler}>

                    <div style={innerStyle}>
                        {this.props.tile.opened ? this.props.tile.id : "?"}
                    </div>
                </div>
            )
        },

      });

    ReactDOM.render(
            <Game />,
        document.getElementById('app-content')
        );
    </script>
  </body>

</html>