diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..953ff9d5 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -19,3 +19,7 @@ .FinalPoem__poem { border-bottom: 2px gray dashed; } + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index b466d849..c1f0712d 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,16 +3,29 @@ import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = (props) => { + // variables + const revealState = props.revealState + // creat list of all submissions + const finalPoem = props.submissions.map(sentence => { + return

{sentence}

+ }) + +// event handler + const onPoemReveal = () => { + props.onRevealPoemCallback(revealState) + } + + return (
-
+

Final Poem

- + {finalPoem}
- +
); diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..a65847df 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,7 @@ text-align: center; font-style: italic; } + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index ef28c693..68aa0427 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,11 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + // state + const [allSubmissions, setAllSubmissions] = useState([]) + const [revealed, setRevealed] = useState(false) + + // dynamically make example sentence const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +18,17 @@ const Game = () => { } }).join(' '); + // helper functions + const addLineToPoem = (line) => { + const newSubmission = [...allSubmissions]; + newSubmission.push(line); + setAllSubmissions(newSubmission); + } + + const revealFinalPoem = () => { + setRevealed(true) + } + return (

Game

@@ -24,13 +40,15 @@ const Game = () => {

{ exampleFormat }

- - - - - - - +
+ +
+
+ +
+
+ +
); } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 370a1f75..733c55d6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,22 +3,107 @@ import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +// initial values for formFields +const emptySentence = { + articleOne: 'The', + adj1: '', + noun1: '', + adv: '', + verb: '', + articleTwo:'the', + adj2: '', + noun2: '', + puncOne: '.' +} + +const PlayerSubmissionForm = (props) => { + // states + const [formFields, setFormFields] = useState({...emptySentence}); + const [currentPlayer, setCurrentPlayer] = useState(1) + + // event handlers + const onInputChange = (event) => { + const newFormFields = {...formFields} + newFormFields[event.target.id] = event.target.value; + setFormFields(newFormFields); + } + + const onFormSubmit = (event) => { + event.preventDefault(); + + const newSentence = Object.values(formFields).join(' '); + + props.sendSubmission(newSentence); + + setCurrentPlayer(currentPlayer + 1) + setFormFields({...emptySentence}) + }; + + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ currentPlayer }

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } + The - + id="adj1" + name="adj1" + placeholder="adjective" + type="text" + onChange={onInputChange} + value={formFields.adj1} + className={formFields.adj1 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} + /> + + + + the + + + .
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 4cf7b542..7b00c2ed 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -6,7 +6,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.mostRecentSubmission }

); }