Water - Iris

src/components/FinalPoem.js

@@ -1,26 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const [finalSentence, setFinalSentence] = useState('')
+
+  const onButtonClick = () => {
+    setFinalSentence(props.revealPoem())
+  }
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+            {finalSentence}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick = {onButtonClick} />
       </div>
     </div>
   );
 }
 
 FinalPoem.propTypes = {
-  isSubmitted: PropTypes.bool.isRequired,
-  submissions: PropTypes.arrayOf(PropTypes.string).isRequired,
   revealPoem: PropTypes.func.isRequired,
 };
 

src/components/Game.js

@@ -5,6 +5,9 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [sentences, setSentences] = useState([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [index, setIndex] = useState(1);
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +16,23 @@ const Game = () => {
     }
   }).join(' ');
 
+  const addSentence = (formFields) => {
+    const newSentences = [...sentences]
+    newSentences.push(`The ${formFields.adj1} ${formFields.noun1} ${formFields.adverb} ${formFields.verb} the ${formFields.adj2} ${formFields.noun2}`)
+    setIndex(index + 1)
+    setSentences(newSentences)
+  }
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+    return sentences.map( sentence => {
+      return(
+        <p>{sentence}</p>
+      )
+    })
+
+
+  }
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +45,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      {(sentences.length > 0) ? <RecentSubmission submission = {sentences[sentences.length - 1]}/> : ''}
 
-      <PlayerSubmissionForm />
+      {isSubmitted ? '' : <PlayerSubmissionForm sendSubmission = {addSentence} fields = {FIELDS} index = {index}/>}
 
-      <FinalPoem />
+      <FinalPoem revealPoem = {revealPoem} submissions = {sentences}/>
 
     </div>
   );

src/components/PlayerSubmissionForm.js

@@ -3,26 +3,79 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '', 
+    noun2: ''
+  });
+
+  const onInputChange = (event) => {
+    const newFormFields = {
+      ...formFields,
+    }
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const formInputs = (
+    props.fields.map(field => {
+      if(typeof field === 'string'){
+        return field 
+      }
+
+      else{
+        return (
+          <input className= {formFields[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : 'PlayerSubmissionForm__poem-input' }
+          placeholder = {field.placeholder}
+          onChange = {onInputChange}
+          value = {formFields[field.key]}
+          name = {field.key}
+        />
+        ) 
+      }
+    })
+  )
+
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    props.sendSubmission(formFields);
+
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '', 
+      noun2: ''
+    });
+  };
+
+  const areFieldsComplete = () => {
+    return !Object.values(formFields).includes('')
+  }
+  const outputForm = () => {
+
+  }
+  // 
+  //{...(areFieldsComplete && { onSubmit : onFormSubmit}) }
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.index}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" {...(areFieldsComplete() && { onSubmit : 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" />
-
+          {formInputs}
         </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

@@ -6,7 +6,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>
   );
 }