Sockets-Bita

src/components/FinalPoem.js

@@ -3,18 +3,31 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const poem = props.submissions.map((line, i) => {
+    return <p key={i}> {line}</p>
+  })
+  const handleClick = () => {
+    console.log("I am clicking")
+    props.poemCallback();
+  }
+  const poemButton =
+    <div className="FinalPoem__reveal-btn-container" >
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={handleClick} />
+    </div>
 
-      </section>
+  const showpoem =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      <div>{poem}</div>
+      </section>;
+      const content = props.isSubmitted? showpoem : poemButton
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
-  );
-}
+      return (
+    <div className="FinalPoem">
+      {content}
 
-export default FinalPoem;
+    </div>
+      );
+    }
+
+    export default FinalPoem;

src/components/Game.js

@@ -8,8 +8,35 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [],
+      isSubmitted: false,
+      counter: 1,
+    }
   }
 
+  addSubmission = (newSentence)=> {
+    console.log(newSentence)
+    let nextSubmission = this.state.submissions
+    nextSubmission.push(newSentence)
+    this.setState({
+      submissions: nextSubmission,
+      counter: this.state.counter + 1
+    }) 
+    console.log(this.state.submissions)
+
+  }
+  setSubmitted=()=> {
+    this.setState({
+      isSubmitted: true,
+      counter: 1,
+    })
+  }
+
+
+
+
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -19,6 +46,9 @@ class Game extends Component {
         return field;
       }
     }).join(" ");
+    const playersubmissionform = this.state.isSubmitted? '' : <PlayerSubmissionForm onSubmissionCallback={this.addSubmission} Counter={this.state.counter}/>
+    const recentsubmission = this.state.isSubmitted? '' : <RecentSubmission recentSubmission= {this.state.submissions[this.state.submissions.length - 1]}  />
+
 
     return (
       <div className="Game">
@@ -31,12 +61,12 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        {recentsubmission}
+        {playersubmissionform}
+
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <FinalPoem  poemCallback={this.setSubmitted} submissions={this.state.submissions} isSubmitted={this.state.isSubmitted} />
+
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -35,6 +35,8 @@
   background-color: #FFE9E9;
 }
 
+
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -5,29 +5,119 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }
   }
 
-  render() {
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+  onFormSubmit = (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,
+    // };
+    const newSentence = "The " + this.state.adj1 + " " + this.state.noun1 + " " + this.state.adv + " " + this.state.verb + " the " + this.state.adj2 + " " + this.state.noun2
+    console.log(newSentence)
+
+
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+
+    this.props.onSubmissionCallback(newSentence)
+
+  }
+
+
 
+  render() {
+    // let classname = "PlayerSubmissionFormt__input--invalid"
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.props.Counter}</h3>
+
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+
+            <span>The</span>
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
+              placeholder="adjective"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="adj1"
+              onChange={this.onInputChange}
+              value={this.state.adj1}
+              type="text" />
+              <input
+              placeholder="noun"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="noun1"
+              onChange={this.onInputChange}
+              value={this.state.noun1}
+              type="text" />
+              <input
+              placeholder="adverb"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="adv"
+              onChange={this.onInputChange}
+              value={this.state.adv}
+              type="text" />
+              <input
+              placeholder="verb"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="verb"
+              onChange={this.onInputChange}
+              value={this.state.verb}
+              type="text" />
+              <span>the</span>
+              <input
+              placeholder="adjective"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="adj2"
+              onChange={this.onInputChange}
+              value={this.state.adj2}
+              type="text" />
+              <input
+              placeholder="noun"
+              className="PlayerSubmissionFormt__input--invalid"
+              name="noun2"
+              onChange={this.onInputChange}
+              value={this.state.noun2}
               type="text" />
+              <span>,</span>
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"  />
           </div>
         </form>
       </div>

src/components/RecentSubmission.js

@@ -2,10 +2,11 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  console.log(props)
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.recentSubmission}</p>
     </div>
   );
 }