Sockets - Riyo

src/components/FinalPoem.css

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

src/components/FinalPoem.js

@@ -1,20 +1,44 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  const poem = (lines) => {
+    const fullPoem = lines.map((line) => {
+      return (<div> The {line.adjective1} {line.noun1} {line.adverb} {line.verb} the {line.adjective2} {line.noun2}
+      </div>);
+    });
+    return fullPoem
+  }
+
+  // let display = 'hidden';
+  const onButtonClick = () => {
+    props.finalPoemClicked()
+
+  }
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+
+      <div className={!props.isFinalPoemClicked ? "FinalPoem__reveal-btn-container" : "hidden"}>
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClick} />
+      </div>
+      <div className={props.isFinalPoemClicked ? "FinalPoem__poem" : "hidden"}>
+        {poem(props.poem)}
       </div>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  poem: PropTypes.array,
+  isFinalPoemClicked: PropTypes.bool,
+  finalPoemClicked: PropTypes.func
+}
+
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,31 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      submissions: [] ,
+      recentSubmission: "",
+      isFinalPoemClicked: false
+    }
+  }
+
+  addLine = (line) => {
+    const newState = this.state;
+    newState.submissions.push(line);
+
+    this.setState(newState);
+  }
+
+  newRecentSubmission = (submission) => {
+    this.setState({
+      recentSubmission: submission,
+    });
+  }
+
+  finalPoemClickedFunc = () => {
+    this.setState({
+      isFinalPoemClicked: true,
+    });
   }
 
   render() {
@@ -32,11 +57,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission line={this.state.recentSubmission} numberofSubmissions={this.state.submissions.length} isFinalPoemClicked={this.state.isFinalPoemClicked} />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={this.addLine} recentSubmission={this.newRecentSubmission} isFinalPoemClicked={this.state.isFinalPoemClicked}  />
 
-        <FinalPoem />
+        <FinalPoem poem={this.state.submissions} finalPoemClicked={this.finalPoemClickedFunc} isFinalPoemClicked={this.state.isFinalPoemClicked}  />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -38,3 +38,8 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.hidden {
+  display: none; 
+}
+

src/components/PlayerSubmissionForm.js

@@ -5,29 +5,153 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective1: "",
+      noun1: "",
+      adverb: "",
+      verb: "",
+      adjective2: "",
+      noun2: "",
+      currentplayer: 1,
+    }
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  getInputClassName = (value) => {
+    if (value.trim().length > 0) {
+      return "";
+    }
+    return "PlayerSubmissionFormt__input--invalid";
+  }
+
+  clearForm = () => {
+    this.setState({
+      adjective1: "",
+      noun1: "",
+      adverb: "",
+      verb: "",
+      adjective2: "",
+      noun2: "",
+    });
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newLine = {
+      adjective1: this.state.adjective1,
+      noun1: this.state.noun1,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adjective2: this.state.adjective2,
+      noun2: this.state.noun2,
+    }
+
+    let newCurrentPlayer = this.state.currentplayer + 1
+    this.setState({
+      currentplayer: newCurrentPlayer,
+    });
+
+    this.props.addLineCallback(newLine);
+    this.props.recentSubmission(newLine);
+
+    this.clearForm()
   }
 
   render() {
 
     return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+      <div className={!this.props.isFinalPoemClicked ? "PlayerSubmissionForm" : "hidden"}>
+        <h3>Player Submission Form for Player #{this.state.currentplayer}</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" />
+            <div>
+              The
+            </div>
+            <div>
+              <input
+                name="adjective1"
+                value={this.state.adjective1}
+                placeholder="adjective"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.adjective1)}
+              />
+            </div>
+            <div>
+              <input
+                name="noun1"
+                value={this.state.noun1}
+                placeholder="noun"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.noun1)}
+              />
+            </div>
+            <div>
+              <input
+                name="adverb"
+                value={this.state.adverb}
+                placeholder="adverb"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.adverb)}
+              />
+            </div>
+            <div>
+              <input
+                name="verb"
+                value={this.state.verb}
+                placeholder="verb"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.verb)}
+              />
+            </div>
+            <div>
+              the
+            </div>
+            <div>
+              <input
+                name="adjective2"
+                value={this.state.adjective2}
+                placeholder="adjective"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.adjective2)}
+              />
+            </div>
+            <div>
+              <input
+                name="noun2"
+                value={this.state.noun2}
+                placeholder="noun"
+                type="text"
+                onChange={this.onInputChange}
+                className={this.getInputClassName(this.state.noun2)}
+              />
+            </div>
 
           </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.css

@@ -6,3 +6,9 @@
   text-align: center;
   line-height: 3rem;
 }
+
+
+.hidden { 
+  display: none; 
+}
+

src/components/RecentSubmission.js

@@ -1,13 +1,24 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
+  let display = ""
+  if (props.numberofSubmissions < 1 || props.isFinalPoemClicked === true) {
+    display = `hidden`
+  }
   return (
-    <div className="RecentSubmission">
+    <div className={`RecentSubmission ${display}`} >
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission"> The {`${props.line.adjective1} ${props.line.noun1} ${props.line.adverb} ${props.line.verb}`} the {`${props.line.adjective2} ${props.line.noun2}`}</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  numberofSubmissions: PropTypes.number.isRequired,
+  isFinalPoemClicked: PropTypes.bool,
+  line: PropTypes.string
+}
+
 export default RecentSubmission;