React Basics

/*Downloaded from https://www.codeseek.co/-J0hn-/react-basics-JENBXg */
body {
  background: #d5d5d5; 
  font-family: arial;
  color: #FAFAFA;
  text-transform: uppercase;
}

.scoreboard {
  background: #333;
  width: 700px;
  margin: 70px auto;
  box-shadow: 0 4px 0px #333;
  border-radius: 15px;

}

.header {
  padding: 5px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: #222;
  border-radius: 15px 15px 0 0;
  border-bottom: solid 2px #444;
}

.header h1 {
  flex-grow: 1;
  font-size: 1.5em;
  letter-spacing: 3px;
  font-weight: normal;
}

.header .stats,
.header .stopwatch {
  width: 170px;
}

.stats {
  margin-top: 0;
  font-weight: normal;
}

  .stats td:first-child {
    text-align: right;
    font-weight: normal;
    letter-spacing: 2px;
    color: #666;
    font-size: .7em;
  }

  .stats td:last-child {
    text-align: left;
  }

.stopwatch {
  padding: 15px 10px 5px 10px;
  margin: -5px -10px -5px 10px;
  background: #2f2f2f;
  border-radius: 0 15px 0 0;
}

  .stopwatch-time {
    font-family: monospace;
    font-size: 2em;
  }

  .stopwatch button {
    margin: 8px 5px;
    background-color: #222;
    border-radius: 5px;
    padding: 7px 8px;
    border: none;
    color: #999;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: none;
    text-transform: uppercase;
  }

  .stopwatch button:hover {
    background: #4b71b5;
    color: #fafafa;
    cursor: pointer;
  }

  .stopwatch h2 {
    font-size: .6em;
    margin: 0;
    font-weight: normal;
    letter-spacing: 2px;
    color: #666;
  }

.player {
  display: flex;
  font-size: 1.2em;
  border-bottom: solid 2px #444;
  letter-spacing: 2px;
}

  .remove-player {
    visibility: hidden;
    margin-right: 10px;
    color: #e57373;
    cursor: pointer;
  }

  .player-name:hover .remove-player {
    visibility: visible;
  }

  .player-name {
    flex-grow: 1;
    padding: 20px 10px 10px 10px;
  }

  .player-score {
    width: 190px;
    background: blue;
  }

  .counter {
    display: flex;
  }

  .counter-action {
    border: none;
    font-weight: bold;
    color: #FAFAFA;
    display: block;
    padding: 20px 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .counter-action.increment {
    background: #66BB6A;
  }

  .counter-action.increment:hover {
    background: #549d59;
    cursor: pointer;
  }

  .counter-action.decrement {
    background: #ef5350;
  }

  .counter-action.decrement:hover {
    background: #c44442;
    cursor: pointer;
  }

  .counter-score {
    flex-grow: 1;
    background: #2b2b2b;
    color: #FAFAFA;
    text-align: center;
    font-family: monospace;
    padding: 10px;
    font-size: 2em;
  }


.add-player-form form {
  display: flex;
  background-color: #222;
  border-radius: 0 0 20px 20px
}

  .add-player-form input[type=text] {
    flex-grow: 1;
    border-width: 0 0 1px 0;
    margin: 15px 10px 15px 15px;
    padding: 10px;
    border-radius: 5px;
    background-color: #333;
    border-style: none;
    text-shadow: none;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 2px;
    outline: none;
  }

  .add-player-form input[type=text]::-webkit-input-placeholder{
    color: #666;
    letter-spacing: 2px;
  }

  .add-player-form input[type=text]:focus{
    background-color: #444;
  }

  .add-player-form input[type=submit] {
    display: block;
    font-size: .6em;
    margin: 15px 15px 15px 0; 
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    border: none;
    color: #999;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: none;
    text-transform: uppercase;
  }

  .add-player-form input[type=submit]:hover{
    background: #4b71b5;
    color: #fafafa;
    cursor: pointer;
  }

/*Downloaded from https://www.codeseek.co/-J0hn-/react-basics-JENBXg */
var PLAYERS = [{
  name: "John",
  score: 31,
  id: 1
}, {
  name: "Dale",
  score: 33,
  id: 2
}, {
  name: "bill",
  score: 43,
  id: 3
}];

var nextId = 4;

var Stopwatch = React.createClass({
  displayName: "Stopwatch",

  getInitialState: function getInitialState() {
    return {
      running: false,
      elapsedTime: 0,
      previousTime: 0
    };
  },

  componentDidMount: function componentDidMount() {
    this.interval = setInterval(this.onTick, 100);
  },
  componentWillUnmount: function componentWillUnmount() {
    clearInterval(this.interval);
  },
  onTick: function onTick() {
    if (this.state.running) {
      var now = Date.now();
      this.setState({
        previousTime: now,
        elapsedTime: this.state.elapsedTime + (now - this.state.previousTime)
      });
    }
  },

  onStart: function onStart() {
    this.setState({
      running: true,
      previousTime: Date.now()
    });
  },
  onStop: function onStop() {
    this.setState({ running: false });
  },
  onReset: function onReset() {
    this.setState({
      elapsedTime: 0,
      previousTime: Date.now()
    });
  },

  render: function render(props) {
    var seconds = Math.floor(this.state.elapsedTime / 1000);

    return React.createElement(
      "div",
      { className: "stopwatch" },
      React.createElement(
        "h2",
        null,
        "Stopwatch"
      ),
      React.createElement(
        "div",
        { className: "stopwatch-time" },
        seconds
      ),
      this.state.running ? React.createElement(
        "button",
        { onClick: this.onStop },
        "Stop"
      ) : React.createElement(
        "button",
        { onClick: this.onStart },
        "Start"
      ),
      React.createElement(
        "button",
        { onClick: this.onReset },
        "Reset"
      )
    );
  }
});

var AddPlayerForm = React.createClass({
  displayName: "AddPlayerForm",

  propTypes: {
    onAdd: React.PropTypes.func.isRequired
  },

  getInitialState: function getInitialState() {
    return {
      name: ""
    };
  },

  onNameChange: function onNameChange(e) {
    // console.log('onNameChange', e.target.value);
    this.setState({ name: e.target.value });
  },

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

    this.props.onAdd(this.state.name);
    this.setState({ name: "" });
  },

  render: function render() {
    return React.createElement(
      "div",
      { className: "add-player-form" },
      React.createElement(
        "form",
        { onSubmit: this.onSubmit },
        React.createElement("input", { type: "text", value: this.state.name, onChange: this.onNameChange }),
        React.createElement("input", { type: "submit", value: "Add Player" })
      )
    );
  }
});

function Stats(props) {
  var totalPlayers = props.players.length;
  var totalPoints = props.players.reduce(function (total, player) {
    return total + player.score;
  }, 0);

  return React.createElement(
    "table",
    { className: "stats" },
    React.createElement(
      "tbody",
      null,
      React.createElement(
        "tr",
        null,
        React.createElement(
          "td",
          null,
          "Players:"
        ),
        React.createElement(
          "td",
          null,
          totalPlayers
        )
      ),
      React.createElement(
        "tr",
        null,
        React.createElement(
          "td",
          null,
          "Total Points:"
        ),
        React.createElement(
          "td",
          null,
          totalPoints
        )
      )
    )
  );
}
Stats.propTypes = {
  players: React.PropTypes.array.isRequired
};

function Header(props) {
  return React.createElement(
    "div",
    { className: "header" },
    React.createElement(Stats, { players: props.players }),
    React.createElement(
      "h1",
      null,
      props.title
    ),
    React.createElement(Stopwatch, null)
  );
}
Header.propTypes = {
  title: React.PropTypes.string.isRequired, //EXPECTS ONLY STRINGS IN TITLE ATTRIBUTE
  players: React.PropTypes.array.isRequired
};

function Counter(props) {
  return React.createElement(
    "div",
    { className: "counter" },
    React.createElement(
      "button",
      { className: "counter-action decrement", onClick: function onClick() {
          props.onChange(-1);
        } },
      "-"
    ),
    React.createElement(
      "div",
      { className: "counter-score" },
      props.score
    ),
    React.createElement(
      "button",
      { className: "counter-action increment", onClick: function onClick() {
          props.onChange(1);
        } },
      "+"
    )
  );
}
Counter.propTypes = {
  score: React.PropTypes.number.isRequired,
  onChange: React.PropTypes.func.isRequired
};

function Player(props) {
  return React.createElement(
    "div",
    { className: "players" },
    React.createElement(
      "div",
      { className: "player" },
      React.createElement(
        "div",
        { className: "player-name" },
        React.createElement(
          "a",
          { className: "remove-player", onClick: props.onRemove },
          "x"
        ),
        props.name
      ),
      React.createElement(
        "div",
        { className: "player-score" },
        React.createElement(Counter, { score: props.score, onChange: props.onScoreChange })
      )
    )
  );
};
Player.propTypes = {
  name: React.PropTypes.string.isRequired,
  score: React.PropTypes.number.isRequired,
  onScoreChange: React.PropTypes.func.isRequired,
  onRemove: React.PropTypes.func.isRequired
};

var Application = React.createClass({
  displayName: "Application",


  propTypes: {
    title: React.PropTypes.string, //EXPECTS ONLY STRINGS IN TITLE ATTRIBUTE
    InitialPlayers: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      score: React.PropTypes.number.isRequired,
      id: React.PropTypes.number.isRequired
    })).isRequired
  },

  getDefaultProps: function getDefaultProps() {
    return {
      title: "Scoreboard"
    };
  },

  getInitialState: function getInitialState() {
    return {
      players: this.props.InitialPlayers
    };
  },

  onScoreChange: function onScoreChange(index, delta) {
    // console.log('onScoreChange',index,delta);
    this.state.players[index].score += delta;
    this.setState(this.state);
  },

  onPlayerAdd: function onPlayerAdd(name) {
    // console.log('Player Added', name);
    this.state.players.push({
      name: name,
      score: 0,
      id: nextId
    });
    this.setState(this.state);
    nextId += 1;
  },

  onRemovePlayer: function onRemovePlayer(index) {
    this.state.players.splice(index, 1);
    this.setState(this.state);
    // console.log('remove',index);
  },

  render: function render() {
    return React.createElement(
      "div",
      { className: "scoreboard" },
      React.createElement(Header, { title: this.props.title, players: this.state.players }),
      React.createElement(
        "div",
        { className: "players" },
        this.state.players.map(function (player, index) {
          return React.createElement(Player, {
            onScoreChange: function (delta) {
              this.onScoreChange(index, delta);
            }.bind(this),
            onRemove: function () {
              this.onRemovePlayer(index);
            }.bind(this),
            name: player.name,
            score: player.score,
            key: player.id
          });
        }.bind(this))
      ),
      React.createElement(AddPlayerForm, { onAdd: this.onPlayerAdd })
    );
  }
});

ReactDOM.render(React.createElement(Application, { InitialPlayers: PLAYERS }), document.getElementById('container'));