lindsay - edges - exquisite-react

src/components/FinalPoem.css

@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.Hide_element {
+  display: none;
+}

src/components/FinalPoem.js

@@ -1,20 +1,43 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+class FinalPoem extends React.Component {
 
-      </section>
+  constructor(props) {
+    super(props);
+    this.state = {
+      poemClass: 'Hide_element',
+      buttonClass: 'FinalPoem__reveal-btn'
+    }
+  }
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  render () {
+
+    const showPoem = () => {
+        this.setState({ poemClass: 'FinalPoem_poem', buttonClass: 'Hide_element'})
+        this.props.hideComponentsCallback()
+    }
+
+    const finalPoem = this.props.lines.map((line) =>
+        <p>{line.line}</p>
+    );
+
+    return (
+      <div className="FinalPoem">
+        <section className= {this.state.poemClass}>
+          <h3>Final Poem</h3>
+          {finalPoem}
+
+        </section>
+
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className= {this.state.buttonClass} onClick={showPoem} />
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
+
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,22 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [
+      ],
+      hidden: false
+    }
+  }
+
+  addRecentSubmission = (newRecentSubmission) => {
+    const submissions = this.state.submissions;
+    submissions.push(newRecentSubmission);
+    this.setState({newRecentSubmission: newRecentSubmission})
+  }
+
+  hideComponents =() => {
+    console.log('here is the callback!')
+    this.setState({hidden: true})
   }
 
   render() {
@@ -20,6 +36,14 @@ class Game extends Component {
       }
     }).join(" ");
 
+
+    let lastSubmission;
+    if (this.state.submissions.length !== 0) {
+      lastSubmission = <RecentSubmission recentSubmission={this.state.submissions.slice(-1)[0].line}/>
+    } else {
+      lastSubmission = undefined;
+    };
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +56,17 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        {!this.state.hidden ?
+            <div>
+              <div>{lastSubmission}</div>
+              <div><PlayerSubmissionForm addRecentSubmissionCallback={this.addRecentSubmission}/></div>
+            </div>
+            : <p></p>
+        }
 
-        <FinalPoem />
+        <FinalPoem
+          lines={this.state.submissions}
+          hideComponentsCallback={this.hideComponents} />
 
       </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,30 +5,87 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      number: 1
+    }
+  }
+
+  onInputChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const newState = {}
+    newState[field] = value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newRecentSubmission =
+
+    {line: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
+    }
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      number: this.state.number + 1
+    });
+
+    this.props.addRecentSubmissionCallback(newRecentSubmission);
+  }
+
+  createInput = (inputName, placeholder) => {
+    return (<input name = {inputName}   placeholder={placeholder}
+        type="text"
+        className={this.inputValid(inputName) ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+        value={this.state[inputName]}
+        onChange={this.onInputChange} />)
+  }
+
+  inputValid = (input) => {
+    return this.state[input].match(/[a-zA-Z]+/);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.state.number}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form"
+          onSubmit={this.onFormSubmit} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+              The
+              {this.createInput('adj1', 'adjective')}
+              {this.createInput('noun1', 'noun')}
+              {this.createInput('adv', 'adverb')}
+              {this.createInput('verb', 'verb')}
+              the
+              {this.createInput('adj2', 'adjective')}
+              {this.createInput('noun2', 'noun')}
+              .
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
+
         </form>
       </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.recentSubmission}</p>
     </div>
   );
 }