diff --git a/src/App.js b/src/App.js index 8f64627a..350445b6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,10 @@ import React from 'react'; import './App.css'; import Game from './components/Game.js'; +//Create a callback function for onSubmitCallback + const App = () => { + return (
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..a8396336 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,38 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const arrayOfStrings = props.submissions.map((input) =>{ + return ( +

The {input.adjective1} {input.noun1} {input.adverb} {input.verb} the {input.adjective2} {input.noun2} .

+ ) + }) + const onButtonClick = () =>{ + props.onClickCallback() + } return (
-
+ {props.showComponent &&

Final Poem

- -
- -
- -
+

{arrayOfStrings}

+
} + {!props.showComponent &&
+ +
}
); } +FinalPoem.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.object), + onClickCallback: PropTypes.func, + showComponent: PropTypes.bool +} export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..eae08ce8 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,7 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; -const Game = () => { +const Game = (props) => { const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -12,30 +12,42 @@ const Game = () => { return field; } }).join(" "); + const [mostRecentSubmissionText, setMostRecentSubmissionText] = useState("") + const [submissions, setSubmissions] = useState([]) + const [showComponent, setShowComponent] = useState(false) + const createPoem = (poem) =>{ + const newSubmissions = [...submissions] + newSubmissions.push({ + adjective1:poem.adjective1, + noun1: poem.noun1, + adverb: poem.adverb, + verb: poem.verb, + adjective2: poem.adjective2, + noun2:poem.noun2 + }); + setSubmissions(newSubmissions); + setMostRecentSubmissionText("The Most Recent Submission") + } + const displayFinalPoem = () =>{ + setShowComponent(!showComponent); + } + return (

Game

-

Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.

-

Please follow the following format for your poetry submission:

-

{ exampleFormat }

- - - - - - - + {!showComponent && } + {!showComponent && } + {}
- ); + ); } - const FIELDS = [ "The", { diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..45d91b07 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -1,17 +1,24 @@ .PlayerSubmissionForm { line-height: 3rem; + } .PlayerSubmissionForm__form { - margin: 2rem auto 3rem auto; + margin: 2rem auto 3rem auto; } .PlayerSubmissionForm__poem-inputs { display: flex; flex-wrap: wrap; justify-content: space-around; + } +.PlayerSubmissionForm__poem-inputs input { + + width: 150px; + height: 50px; +} .PlayerSubmissionForm__submit { display: flex; justify-content: center; @@ -35,6 +42,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..72cb1988 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,24 +1,146 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { + //create a useState hook for the input changes + const [poem, setPoem] = useState({ + adjective1: "", + noun1: "", + adverb: "", + verb: "", + adjective2: "", + noun2: "" + }) + + const [currentPlayer, setPlayer] = useState(1) + //create an event handler function for the onChange event listener + const onInputChange = (event) =>{ + const newPoem = { + ...poem + } + newPoem[event.target.name] = [event.target.value.toLowerCase()] + setPoem(newPoem) + } + //create an event handler function for onSubmit event listener + const onSubmitForm = (event) =>{ + if (isEmpty()) return // to prevent the user if they miss filling out any field + event.preventDefault(); + console.log("creating a poem"); + console.log(poem); + + //send call back function to RecentSubmission + props.onSubmitCallback(poem) + setPoem({ + adjective1:"", + noun1:"", + adverb:"", + verb:"", + adjective2:"", + noun2:""}) + setPlayer(currentPlayer + 1) + } + // Field validation + const inputs = { + adjective1:{ + validation: /.+/, + message: "Field must have 1 or more letters" + }, + noun1:{ + validation: /.+/, + message: "Field must have 1 or more letters" + }, + adverb: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + verb: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + adjective2: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + noun2: { + validation: /.+/, + message: "Field must have 1 or more letters" + } + } + //Validate function + const fieldValid = (fieldName) =>{ + return inputs[fieldName].validation.test(poem[fieldName]) + } + const isEmpty = () =>{ + return( + poem.adjective1 === "" || + poem.noun1 === "" || + poem.adverb === "" || + poem.verb === "" || + poem.adjective2 === ""|| + poem.noun2 === "" + ) + } + return ( +
+

Player Submission Form for Player #{ currentPlayer }

-
- - { - // Put your form inputs here... We've put in one below as an example - } +

The

- + placeholder="adjective" + type="text" + name = "adjective1" + value = {poem.adjective1} + onChange = {onInputChange} + className = {fieldValid("adjective1")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'} + /> + + + +

the

+ + +

.

-
@@ -27,5 +149,8 @@ const PlayerSubmissionForm = () => { ); } +PlayerSubmissionForm.proptype = { + onSubmitCallback: PropTypes.func, +} export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..348ffd9a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,29 @@ import React from 'react'; import './RecentSubmission.css'; - +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { + const submissions = props.submissions.map(input =>{ + return( + `The ${input.adjective1} + ${input.noun1} + ${input.adverb} + ${input.verb} the + ${input.adjective2} + ${input.noun2} .` + ) + }) + return (
-

The Most Recent Submission

-

{ }

-
+

{props.mostRecentSubmissionText}

+

{submissions[submissions.length - 1]}

+
); } +RecentSubmission.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.object), + mostRecentSubmissionText: PropTypes.string +} + export default RecentSubmission;