基于React实现的交互式积分（记分）牌

ReactJS Interactive Scoreboard

react, board

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1599
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

/////GO CUBS IN 2016 POSTSEASON!/////

//variables

//button texts
var game = "Next Half Inning";
var newGame = "Play Ball!";
var endGame = "Refresh for New Game!";

//teams
var brewers = "Brewers";
var cardinals = "Cardinals";
var pirates = "Pirates";
var reds = "Reds";
var cubs = "Cubs";

//scores and results
var initial = "";
var awayInn1Score = 0;
var inning = 0;
var totalAwayScore = 0;
var totalHomeScore = 0;
var result = "";

//result img
var resultImg = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/cubbies-bear-logo.gif";
var winSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/cubsflag.png";
var lostSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/lossflag.png";

//end variables
var Scoreboard = React.createClass({
    displayName: "Scoreboard",

//set initial teams and score
    /////////////////////////////////
    getInitialState: function getInitialState() {

var teams = [brewers, cardinals, pirates, reds],
            teamToUse = teams[Math.floor(Math.random() * teams.length)];

initial = teamToUse;

return {
            resultImg: resultImg,
            result: result,
            awayTeam: initial,
            homeTeam: cubs,
            awayInn1Score: awayInn1Score,
            buttonText: newGame,
            awayTotalScore: totalAwayScore,
            homeTotalScore: totalHomeScore
        };
    },
    ////////////////////////////////
    //change inning score on button click
    changeScore: function changeScore() {

//update button
        this.setState({
            buttonText: game
        });

//update inning each time called
        inning = inning + .5;

//generate score 1 - 5 (to keep simple)
        var score = Math.floor(Math.random() * 5 + 1);

//make chance to score harder depending on score generated   
        if (score == 1) {

var test1 = Math.floor(Math.random() * 2 + 1);

if (test1 == 1) {

score = 0;
            }
        } else if (score == 2) {

var test2 = Math.floor(Math.random() * 3 + 1);

if (test2 == 1 || test2 == 2) {

score = 0;
            }
        } else if (score == 3) {

var test3 = Math.floor(Math.random() * 4 + 1);

if (test3 == 1 || test3 == 2 || test3 == 3) {

score = 0;
            }
        } else if (score == 4) {

var test4 = Math.floor(Math.random() * 5 + 1);

if (test4 == 1 || test4 == 2 || test4 == 3 || test4 == 4) {

score = 0;
            }
        } else if (score == 5) {

var test5 = Math.floor(Math.random() * 6 + 1);

if (test5 == 1 || test5 == 2 || test5 == 3 || test5 == 4 || test5 == 5) {

score = 0;
            }
        }

//if away inning, get away score   
        if (inning == 0.5 || inning == 1.5 || inning == 2.5 || inning == 3.5 || inning == 4.5 || inning == 5.5 || inning == 6.5 || inning == 7.5 || inning == 8.5) {

totalAwayScore = totalAwayScore + score;
        }
        //else if home, get home score, exclude 9th
        else if (inning == 1 || inning == 2 || inning == 3 || inning == 4 || inning == 5 || inning == 6 || inning == 7 || inning == 8) {

totalHomeScore = totalHomeScore + score;
        }

////////AWAY TEAM//////////

//if inning 1
        if (inning == 0.5) {
            this.setState({
                awayInn1Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 2
        else if (inning == 1.5) {
            this.setState({
                awayInn2Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 3
        else if (inning == 2.5) {
            this.setState({
                awayInn3Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 4
        else if (inning == 3.5) {
            this.setState({
                awayInn4Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 5
        else if (inning == 4.5) {
            this.setState({
                awayInn5Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 6
        else if (inning == 5.5) {
            this.setState({
                awayInn6Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 7
        else if (inning == 6.5) {
            this.setState({
                awayInn7Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 8
        else if (inning == 7.5) {
            this.setState({
                awayInn8Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning 9
        else if (inning == 8.5) {
            this.setState({
                awayInn9Score: score,
                awayTotalScore: totalAwayScore
            });
        }

//if inning > 9
        else if (inning > 9) {}
        //do something

////////Home TEAM//////////

//if inning 1
        if (inning == 1) {
            this.setState({
                homeInn1Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 2
        else if (inning == 2) {
            this.setState({
                homeInn2Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 3
        else if (inning == 3) {
            this.setState({
                homeInn3Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 4
        else if (inning == 4) {
            this.setState({
                homeInn4Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 5
        else if (inning == 5) {
            this.setState({
                homeInn5Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 6
        else if (inning == 6) {
            this.setState({
                homeInn6Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 7
        else if (inning == 7) {
            this.setState({
                homeInn7Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 8
        else if (inning == 8) {
            this.setState({
                homeInn8Score: score,
                homeTotalScore: totalHomeScore
            });
        }

//if inning 9
        else if (inning == 9) {

/////////WIN CALCULATIONS/////////
            //check score, if 9th needed
            if (totalAwayScore < totalHomeScore) {

//display winning message
                result = "Cubs Win, Fly the W!";
                resultImg = winSrc;
            }
            //else get 9th score and check score after
            else if (totalHomeScore == totalAwayScore || totalHomeScore < totalAwayScore) {

//check score, who won?  
                totalHomeScore = totalHomeScore + score;

//if going to be tie, give game to Cubs
                if (totalAwayScore == totalHomeScore) {

totalHomeScore = totalHomeScore + 1;
                }

//actions based on win/loss result
                //win
                if (totalAwayScore < totalHomeScore) {

resultImg = winSrc;
                    result = "Cubs Win, Fly the W!";
                }
                //loss    
                else {
                    //this.setState({homeTotalScore: homeTotalScore, buttonText: endGame});
                    resultImg = lostSrc;
                    result = "Cubs Lost...Next Game!";
                }
            }
            //update button and score state
            this.setState({
                resultImg: resultImg,
                result: result,
                homeTotalScore: totalHomeScore,
                homeInn9Score: score,
                buttonText: endGame
            });
        }

//end change score
    },
    ///////////////////////////////////

render: function render() {

return React.createElement(
            "div",
            null,
            React.createElement(
                "h1", {
                    className: "title"
                },
                this.state.result
            ),
            React.createElement("img", {
                src: this.state.resultImg
            }),
            React.createElement(
                "div", {
                    className: "tbl-content"
                },
                React.createElement(
                    "table",
                    null,
                    React.createElement(
                        "tbody",
                        null,
                        React.createElement(
                            "tr",
                            null,
                            React.createElement(
                                "td",
                                null,
                                this.state.awayTeam
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn1Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn2Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn3Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn4Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn5Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn6Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn7Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn8Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayInn9Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.awayTotalScore
                            )
                        ),
                        React.createElement(
                            "tr",
                            null,
                            React.createElement(
                                "td",
                                null,
                                this.state.homeTeam
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn1Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn2Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn3Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn4Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn5Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn6Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn7Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn8Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeInn9Score
                            ),
                            React.createElement(
                                "td",
                                null,
                                this.state.homeTotalScore
                            )
                        )
                    )
                ),
                React.createElement(
                    "button", {
                        onClick: this.changeScore
                    },
                    this.state.buttonText
                )
            )
        );
    }

});

React.render(React.createElement(Scoreboard, null), document.getElementById('app'));

编译

CSS

#scoreboard {
    width: 28%;
    height: 23%;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 20px;
    margin-bottom: 30px;
    z-index: 2;
}
#city {
    position: absolute;
    z-index: -1;
    bottom: -1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 20px;
    margin-bottom: 30px;
}
#welcome {
    font-family: "Lato";
    font-weight: 800px;
    color: white;
    text-align: center;
    margin-top: 20px;
}
img {
    position: absolute;
    right: 40px;
    top: 25px;
    width: 134px;
    height: 120px;
    border: none;
    overflow: hidden;
}
#title {
    font-family: "Lato";
    font-weight: 800px;
    color: white;
    text-align: center;
    margin-top: 10px;
}
.title {
    font-family: "Lato";
    font-weight: 800px;
    color: #005395;
    text-align: center;
    margin-top: 10px;
}
h2 {
    font-family: "Lato";
    font-weight: 200px;
    color: white;
    text-align: center;
}
button {
    padding: 15px;
    font-family: "lato";
    font-size: 18px;
    cursor: pointer;
    color: white;
    border: none;
    text-transform: uppercase;
    background: #E51937;
    margin-top: 10px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
table {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    table-layout: fixed;
    background: #07794F;
    margin-bottom: 30px;
    z-index: 2;
}
.tbl-content {
    height: 300px;
    overflow-x: auto;
    margin-top: 0px;
}
td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
}
td {
    border: 4px solid white;
}
tr {
    border: 4px solid red;
}
body {
    background: #B5E4F6;
    font-family: 'Lato', sans-serif;
}

HTML

ReactJS Interactive Scoreboard

react, board

编辑器支持Emmet

快捷键

ReactJS Interactive Scoreboard

react, board

基于React实现的交互式BB-8机器人

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：