Branches - Julia Bouvier

src/components/FinalPoem.js

@@ -1,20 +1,36 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+class FinalPoem extends React.Component {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  onButtonClick = () => {
+    this.props.onFinalButtonClickCallback();
+  }
+
+  render() {
+    const poemLines = this.props.lines.map((line, i) => {
+      return (
+        <section key={i}>
+          <p>{line}</p>
+        </section>
+      )
+    });
 
-      </section>
+    const gameResult = this.props.gameOver ? 
+      (<section className="FinalPoem__poem">
+        <h3>Final Poem</h3>
+        {poemLines}
+      </section>) :
+      (<div className="FinalPoem__reveal-btn-container">
+        <input onClick={this.onButtonClick} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      </div>)
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+    return (
+      <div className="FinalPoem">
+        {gameResult}
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -5,13 +5,36 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
+
 
   constructor(props) {
     super(props);
+      this.state = {
+        submissions: [],
+        lastSubmission: '',
+        gameOver: false,
+      }
   }
 
-  render() {
+  addSubmission = (submission) => {
+    const string = `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}`
+
+    const subs = this.state.submissions;
+    subs.push(string)
+
+    this.setState({
+      submissions: subs,
+      lastSubmission: string,
+    })
+  }
+
+  onFinalButtonClick = () => {
+    this.setState({
+      gameOver: true,
+    })
+  }
 
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -20,6 +43,13 @@ class Game extends Component {
       }
     }).join(" ");
 
+    console.log(this.state.submissions)
+
+    const mostRecentSubmission = (!this.state.gameOver && this.state.submissions.length !== 0) ? (<RecentSubmission lastSubmission={this.state.lastSubmission} />) : null;
+
+
+    const submissionForm = (!this.state.gameOver) ? (<PlayerSubmissionForm playerNumber={this.state.submissions.length + 1} addSubmissionCallback={this.addSubmission}/>) : null;
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +62,12 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        {mostRecentSubmission}
+
+        {submissionForm}
 
-        <FinalPoem />
+        <FinalPoem lines={this.state.submissions} gameOver={this.state.gameOver} onFinalButtonClickCallback={this.onFinalButtonClick}/>
 
       </div>
     );

src/components/PlayerSubmissionForm.css

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

src/components/PlayerSubmissionForm.js

@@ -5,27 +5,126 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    };
+  }
+
+  resetState = () => {
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  classStyle = (input) => {
+    const style = (input === "") ? "PlayerSubmissionForm__input--invalid" : "PlayerSubmissionForm__input"
+    return style;
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+
+    const newSubmission = {
+      adj1: this.state.adj1,
+      noun1: this.state.noun1,
+      adv: this.state.adv,
+      verb: this.state.verb,
+      adj2: this.state.adj2,
+      noun2: this.state.noun2,
+    };
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    })
+
+    this.props.addSubmissionCallback(newSubmission)
+    this.resetState();
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.playerNumber }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit}className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
-              type="text" />
-
+              placeholder="adjective"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adj1}
+              name="adj1"
+              className={this.classStyle(this.state.adj1)}
+            />
+            <input
+              placeholder="noun"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.noun1}
+              name="noun1"
+              className={this.classStyle(this.state.noun1)}
+            />
+            <input
+              placeholder="adverb"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adv}
+              name="adv"
+              className={this.classStyle(this.state.adv)}
+            />
+            <input
+              placeholder="verb"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.verb}
+              name="verb"
+              className={this.classStyle(this.state.verb)}
+            />
+            <input
+              placeholder="adjective"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adj2}
+              name="adj2"
+              className={this.classStyle(this.state.adj2)}
+            />
+            <input
+              placeholder="noun"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.noun2}
+              name="noun2"
+              className={this.classStyle(this.state.noun2)}
+            />
           </div>
-
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </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.lastSubmission }</p>
     </div>
   );
 }