Space - Suely

src/App.js

@@ -16,5 +16,4 @@ const App = () => {
   );
 }
 
-
-export default App;
+export default App;

src/components/FinalPoem.css

@@ -5,7 +5,6 @@
 
 .FinalPoem__reveal-btn {
   flex: 0.8;
-
   padding: 1rem;
   border: 2px black solid;
   box-shadow: 5px 10px black;

src/components/FinalPoem.js

@@ -1,20 +1,47 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
+import { render } from '@testing-library/react';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const recitePoem = (poem) => {
+    return poem.map((line, index) => {
+      return <p key={index}>{line}</p>
+    });
+  }
 
-      </section>
+  if (props.isFinal){
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          <div>{recitePoem(props.poem)}</div>
+        </section>
       </div>
-    </div>
-  );
+    );
+
+  } else {
+
+    return (
+      <div className="FinalPoem">
+        <div className="FinalPoem__reveal-btn-container">
+          <input
+            type="button"
+            onClick={props.onFinalClick}
+            value="We are finished: Reveal the Poem"
+            className="FinalPoem__reveal-btn" />
+        </div>
+      </div>
+    );
+  }
 }
 
-export default FinalPoem;
+FinalPoem.propTypes = {
+  poem: PropTypes.array.isRequired,
+  isFinal: PropTypes.bool.isRequired,
+  onFinalClick: PropTypes.func.isRequired,
+};
+
+export default FinalPoem;

src/components/Game.js

@@ -5,6 +5,11 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  const [player, setPlayer]   = useState(1);
+  const [isFinal, setIsFinal] = useState(false);
+  const [poem, setPoem]       = useState([]);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,28 +18,56 @@ const Game = () => {
     }
   }).join(" ");
 
+  const formToPoem = (form) => {
+    return FIELDS.map((field) => {
+      if (field.key) {
+        return form[field.key];
+      } else {
+        return field;
+      }
+    }).join(" ");
+  }
+
+  const onFormSubmit = (formFields) => {
+    setPoem([...poem, formToPoem(formFields)]);
+    setPlayer(player + 1);
+  }
+
+  const onFinalClick = () => {
+    setIsFinal(true);
+  }
+
   return (
+
     <div className="Game">
       <h2>Game</h2>
 
       <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
-
       <p>Please follow the following format for your poetry submission:</p>
 
       <p className="Game__format-example">
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission
+        poem={poem}
+        isFinal={isFinal}/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm 
+        player={player} 
+        isFinal={isFinal} 
+        onFormSubmit={onFormSubmit} />
 
-      <FinalPoem />
+      <FinalPoem
+        poem={poem}
+        isFinal={isFinal}
+        onFinalClick={onFinalClick}/>
 
     </div>
+
   );
-}
 
+}
 
 const FIELDS = [
   "The",
@@ -66,4 +99,4 @@ const FIELDS = [
   ".",
 ];
 
-export default Game;
+export default Game;

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,131 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const PlayerSubmissionForm = (props) => {
 
-      <form className="PlayerSubmissionForm__form" >
+  const emptyForm = {
+    adj1:  '',
+    noun1: '',
+    adv:   '',
+    verb:  '',
+    adj2:  '',
+    noun2: '',
+  };
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  const [formFields, setFormFields] = useState(emptyForm);
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+  const onFieldChange = (event) => {
+    console.log(`${event.target.name} Field updated ${ event.target.value }`);
+    setFormFields({
+      ...formFields,
+      [event.target.name]: event.target.value,
+    });
+  };
 
-        </div>
+  const inputClass = (input) => {
+    if (input === ""){
+      return "PlayerSubmissionFormt__input--invalid";
+    } else {
+      return "PlayerSubmissionFormt__input--valid";
+    }
+  }
 
-        <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-        </div>
-      </form>
-    </div>
-  );
+  const onSubmit = (event) => {
+    event.preventDefault();
+    console.log(`Form submitted`, formFields);
+    props.onFormSubmit(formFields);
+    setFormFields(emptyForm);
+  }
+
+  if (props.isFinal){
+
+    return (
+      <div className="PlayerSubmissionForm">
+      </div>
+    )
+
+  } else {
+
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player # {props.player}</h3>
+        <form className="PlayerSubmissionForm__form" onSubmit={onSubmit}>
+
+          <div className="PlayerSubmissionForm__poem-inputs">
+            <p>The &nbsp;
+            <input
+              name="adj1"
+              className={inputClass(formFields.adj1)}
+              onChange={onFieldChange}
+              value={formFields.adj1}
+              placeholder="adjective"
+              type="text" />
+            &nbsp;
+
+            <input
+              name="noun1"
+              className={inputClass(formFields.noun1)}
+              onChange={onFieldChange}
+              value={formFields.noun1}
+              placeholder="noun"
+              type="text" />
+            &nbsp;
+
+            <input
+              name="adv"
+              className={inputClass(formFields.adv)}
+              onChange={onFieldChange}
+              value={formFields.adv}
+              placeholder="adverb"
+              type="text" />
+            &nbsp;
+
+            <input
+              name="verb"
+              className={inputClass(formFields.verb)}
+              onChange={onFieldChange}
+              value={formFields.verb}
+              placeholder="verb"
+              type="text" />
+            &nbsp;
+
+            the &nbsp;
+
+            <input
+              name="adj2"
+              className={inputClass(formFields.adj2)}
+              onChange={onFieldChange}
+              value={formFields.adj2}
+              placeholder="adjective"
+              type="text" />
+            &nbsp;
+
+            <input
+              name="noun2"
+              className={inputClass(formFields.noun2)}
+              onChange={onFieldChange}
+              value={formFields.noun2}
+              placeholder="noun"
+              type="text" />
+            </p>
+
+          </div>
+
+          <div className="PlayerSubmissionForm__submit">
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          </div>
+
+        </form>
+      </div>
+    );
+  }
 }
 
+PlayerSubmissionForm.propTypes = {
+  player: PropTypes.number.isRequired,
+  isFinal: PropTypes.bool.isRequired,
+  onFormSubmit: PropTypes.func.isRequired,
+};
 
-export default PlayerSubmissionForm;
+export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
-  );
+
+  if (!props.isFinal && props.poem.length > 0){
+
+    return (
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{ props.poem[props.poem.length - 1] }</p>
+      </div>
+    );
+  } else {
+    return (
+      <div className="RecentSubmission">
+      </div>
+    )
+  }
+
 }
 
-export default RecentSubmission;
+RecentSubmission.propTypes = {
+  poem: PropTypes.array.isRequired,
+  isFinal: PropTypes.bool.isRequired,
+};
+
+export default RecentSubmission;