8-player-input

Author: tylermcginnis

app/components/Battle.jsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+function Instructions() {
+  return (
+    <section className="instructions-container">
+      <h2>Instructions</h2>
+      <ol>
+        <li>Enter 2 Github users</li>
+        <li>Battle</li>
+        <li>See the winners</li>
+      </ol>
+    </section>
+  );
+}
+
+class PlayerInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: "",
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+
+    this.props.onSubmit(this.state.username);
+  }
+  handleChange(event) {
+    this.setState({
+      username: event.target.value,
+    });
+  }
+  render() {
+    return (
+      <form className="card" onSubmit={this.handleSubmit}>
+        <label htmlFor="username" className="player-label">
+          {this.props.label}
+        </label>
+        <div className="input-row">
+          <input
+            type="text"
+            id="username"
+            placeholder="github username"
+            autoComplete="off"
+            value={this.state.username}
+            onChange={this.handleChange}
+          />
+          <button
+            className="btn link"
+            type="submit"
+            disabled={!this.state.username}
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default class Battle extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      playerOne: null,
+      playerTwo: null,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleSubmit(id, player) {
+    this.setState({
+      [id]: player,
+    });
+  }
+  render() {
+    const { playerOne, playerTwo } = this.state;
+    const disabled = !playerOne || !playerTwo;
+
+    return (
+      <main className="stack main-stack animate-in">
+        <div className="split">
+          <h1>Players</h1>
+          <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          <a href="#" className={`btn primary ${disabled ? "disabled" : ""}`}>
+            Battle
+          </a>
+        </div>
+        <section className="grid">
+          {playerOne === null ? (
+            <PlayerInput
+              label="Player One"
+              onSubmit={(player) => this.handleSubmit("playerOne", player)}
+            />
+          ) : null}
+          {playerTwo === null ? (
+            <PlayerInput
+              label="Player Two"
+              onSubmit={(player) => this.handleSubmit("playerTwo", player)}
+            />
+          ) : null}
+        </section>
+        <Instructions />
+      </main>
+    );
+  }
+}

app/index.jsx

@@ -2,13 +2,14 @@ import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import "./index.css";
 import Popular from "./components/Popular";
+import Battle from "./components/Battle";
 
 class App extends React.Component {
   render() {
     return (
       <div className="light">
         <div className="container">
-          <Popular />
+          <Battle />
         </div>
       </div>
     );