diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..e268b89f 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,43 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from "prop-types"; const FinalPoem = (props) => { - + + const result = props.finalPoem.map((poem, i) => { + const {firstAdjective, firstNoun, adverb, verb, secondAdjective, secondNoun} = poem; + return

The {firstAdjective} {firstNoun} {adverb} {verb} the {secondAdjective} {secondNoun} .

+ }) + + const onFinalSubmit = () => { + props.onClickCallback() + } return (
-
-

Final Poem

- -
+ {props.revealFinalPoem?
+

{'Final Poem'}

+ {result} +
: ""} -
- -
+ {props.revealFinalPoem? "" :
+ +
}
); } +FinalPoem.propTypes = { + finalPoem: PropTypes.arrayOf( + PropTypes.shape({ + firstAdjective: PropTypes.string.isRequired, + firstNoun: PropTypes.string.isRequired, + adverb: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + secondAdjective: PropTypes.string.isRequired, + secondNoun: PropTypes.string.isRequired, + }) + ), + revealFinalPoem: PropTypes.bool.isRequired, + onClickCallback: PropTypes.func.isRequired, +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..11110d14 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,31 @@ const Game = () => { } }).join(" "); + const [revealSubmission, setRevealSubmission] = useState(false) + const [revealFinalPoem, setRevealFinalPoem] = useState(false) + const [poems, setPoems] = useState([]); + + + const createPoems = (poemsCreated) => { + const newPoems = [...poems]; + + newPoems.push({ + firstAdjective: poemsCreated.firstAdjective, + firstNoun: poemsCreated.firstNoun, + adverb: poemsCreated.adverb, + verb: poemsCreated.verb, + secondAdjective: poemsCreated.secondAdjective, + secondNoun: poemsCreated.secondNoun, + }); + + setRevealSubmission(true); + setPoems(newPoems); + }; + + const onFinalPoemClick = () => { + setRevealFinalPoem(true) + } + return (

Game

@@ -25,11 +50,11 @@ const Game = () => { { exampleFormat }

- + { !revealFinalPoem && revealSubmission? : ""} - + {revealFinalPoem? "" : } - +
); diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..a45fec75 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,10 @@ background-color: #FFE9E9; } +.PlayerSubmissionFormt__input--valid { + background-color: white; +} + .PlayerSubmissionForm__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..0267870c 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,22 +1,114 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from "prop-types"; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { + const [count, setCount] = useState(1) + const [formFields, setFormFields] = useState({ + firstAdjective: '', + firstNoun: '', + adverb: '', + verb: '', + secondAdjective: '', + secondNoun: '', + }); + + const onInputChange = (event) => { + const newFormFields = { + ...formFields + } + + + newFormFields[event.target.name] = event.target.value; + setFormFields(newFormFields); + } + + const isValid = (name) => { + if (formFields[name].match(/[a-zA-Z]+ |[^\W-9+)]/)) { + return true + } else { + return false + } + } + + const onFormSubmit = (event) => { + setCount(count + 1) + event.preventDefault(); + + props.addPoemCallback(formFields); + + setFormFields({ + firstAdjective: '', + firstNoun: '', + adverb: '', + verb: '', + secondAdjective: '', + secondNoun: '', + }); + }; return ( -
-

Player Submission Form for Player #{ }

+
+

Player Submission Form for Player #{count}

-
+
+ The + - { - // Put your form inputs here... We've put in one below as an example - } + name="firstNoun" + onChange={onInputChange} + value={formFields.firstNoun} + placeholder="noun" + type="text" + className= {isValid("firstNoun")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"} + /> + + + + + the + + + + .
@@ -27,5 +119,8 @@ const PlayerSubmissionForm = () => { ); } +PlayerSubmissionForm.propTypes = { + addPoemCallback: PropTypes.func.isRequired, +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..e6523f7d 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,24 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from "prop-types"; const RecentSubmission = (props) => { return (
-

The Most Recent Submission

-

{ }

+

'The Most Recent Submission'

+

{`The ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} the ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun}.`}

); } +RecentSubmission.propTypes = { + recentPoem: PropTypes.shape({ + firstAdjective: PropTypes.string.isRequired, + firstNoun: PropTypes.string.isRequired, + adverb: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + secondAdjective: PropTypes.string.isRequired, + secondNoun: PropTypes.string.isRequired, + }) +}; export default RecentSubmission;