Sockets - Amy

src/components/FinalPoem.js

@@ -3,16 +3,31 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const showPoemButton =
+    <div className="FinalPoem__reveal-btn-container">
+      <input
+        type="button"
+        value="We are finished: Reveal the Poem"
+        className="FinalPoem__reveal-btn"
+        onClick={props.showFinalPoem}
+      />
+    </div>;
+
+  const finalPoemLines = props.submissions.map((line, i) => {
+    return <p key={i}>{line}</p>;
+  });
 
-      </section>
+  const finalPoem =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      {finalPoemLines}
+    </section>;
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+  const gameDisplay = props.poemFinished ? finalPoem : showPoemButton;
+
+  return (
+    <div className="FinalPoem">
+      {gameDisplay}
     </div>
   );
 }

src/components/Game.js

@@ -8,10 +8,31 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      submissions: [],
+      poemFinished: false
+    };
   }
 
-  render() {
+  addNewLine = (line) => {
+    const newSubmission = this.state.submissions;
+    newSubmission.push(line);
+
+    this.setState({
+      submissions: newSubmission,
+    })
+  };
+
+  showFinalPoem = (event) => {
+    event.preventDefault();
 
+    this.setState({
+      poemFinished: true
+    })
+  }
+
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -29,14 +50,23 @@ class Game extends Component {
         <p>Please follow the following format for your poetry submission:</p>
 
         <p className="Game__format-example">
-          { exampleFormat }
+          {exampleFormat}
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission
+          submission={this.state.submissions[this.state.submissions.length - 1]}
+        />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm
+          fields={FIELDS}
+          addNewLineCallback={this.addNewLine}
+        />
 
-        <FinalPoem />
+        <FinalPoem
+          poemFinished={this.state.poemFinished}
+          submissions={this.state.submissions}
+          showFinalPoem={this.showFinalPoem}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -5,32 +5,98 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    const initialState = {
+      player: 1
+    };
+    props.fields.forEach((field) => {
+      if (field.key) {
+        initialState[field.key] = "";
+      }
+    });
+    this.state = initialState;
   }
 
-  render() {
+  onValueChange = (event) => {
+    console.log(`${event.target} Updated ${event.target.value}`);
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+    const fields = {};
+    fields[event.target.name] = event.target.value;
+    this.setState(fields);
+  }
 
-        <form className="PlayerSubmissionForm__form" >
+  resetForm = () => {
+    const clearedState = {};
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        clearedState[field.key] = "";
+      }
+    });
+    this.setState(clearedState);
+  }
 
-          <div className="PlayerSubmissionForm__poem-inputs">
+  onFormSubmit = (event) => {
+    event.preventDefault();
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+    let newSubmission = "";
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        newSubmission += this.state[field.key];
+      } else {
+        return field;
+      }
+      return newSubmission;
+    });
 
-          </div>
+    let playerNumber = this.state.player;
+    playerNumber += 1
+
+    this.setState({
+      player: playerNumber
+    })
+    this.props.addNewLineCallback(newSubmission);
+    this.resetForm();
+  }
 
+  render() {
+
+    const formFields = this.props.fields.map((field, i) => {
+      if (field.key) {
+        return <input
+          key={i}
+          name={field.key}
+          placeholder={field.placeholder}
+          value={this.state[field.key]}
+          onChange={this.onValueChange}
+          type="text"
+          className={this.state[field.key].length > 0 ? "" : "PlayerSubmissionForm__input--invalid"}
+        />;
+      } else {
+        return field;
+      }
+    })
+
+
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{this.state.player}</h3>
+
+        <form
+          className="PlayerSubmissionForm"
+          onSubmit={this.onFormSubmit} >
+          <div className="PlayerSubmissionForm__inputs" >
+            {formFields}
+          </div>
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input
+              name="submit"
+              type="submit"
+              className="PlayerSubmissionForm__submit-btn"
+              value="Submit Line"
+            />
           </div>
         </form>
-      </div>
+      </div >
     );
   }
 }

src/components/RecentSubmission.js

@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
 }