diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..672950ad 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,17 +1,35 @@ -import React from 'react'; +import React, {useState} from 'react'; import './FinalPoem.css'; + const FinalPoem = (props) => { + const emptyList =

+ const listOfSentences = props.submissions.map(submission => { + return ( +

The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.ajd2} {submission.noun2}.

+ ); + }) + + const [reveal, setReveal] = useState(false) + + const revealSentences = () => { + props.setGameOverCallback(true); + setReveal(true); + } + + + + return (

Final Poem

- + {reveal ? listOfSentences : emptyList}
- + {reveal ? "" : }
); diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..04bd4fad 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,6 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; + const Game = () => { const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -13,6 +14,27 @@ const Game = () => { } }).join(" "); + const [submissions, setSubmissionList] = useState([]) + + const addSubmission = (newSubmission) => { + + const newSubmissionList = [...submissions]; + + newSubmissionList.push(newSubmission) + setSubmissionList(newSubmissionList) + console.log(newSubmissionList) + + }; + + let mostRecentSubmissionSentence = "" + + if (submissions.length > 0){ + let mostRecentSubmission = submissions[submissions.length-1] + mostRecentSubmissionSentence = "The " + mostRecentSubmission.adj1 + " " + mostRecentSubmission.noun1 + " " + mostRecentSubmission.adv + " " + mostRecentSubmission.verb + " the " + mostRecentSubmission.adj2 + " " + mostRecentSubmission.noun2 + "." + } + + const [gameOver, setGameOver] = useState(false) + return (

Game

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

- + {gameOver || submissions.length === 0 ? "" : } + - + {gameOver ? "" : } - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..cf6eb870 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,21 +1,110 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { + +const PlayerSubmissionForm = (props) => { + + const [submission, setSubmission] = useState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + + const onFormSubmit = (event) => { + event.preventDefault(); + + console.log(event.target) + + props.onSubmitCallback(submission) + + setSubmission({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }) + + }; + + const onInputChange = (event) => { + console.log(`Changing field ${ event.target.name } to ${ event.target.value }`); + + const newSubmissionFields = { + ...submission, + } + + newSubmissionFields[event.target.name] = event.target.value; + setSubmission(newSubmissionFields); + } + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{props.playerNumber}

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

{props.fields[0]}

+ + placeholder={props.fields[1].placeholder} + value={submission.adj1} + name="adj1" + type="text" + onChange={onInputChange} + className={ submission.adj1 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"} + /> + + + + + + + +

{props.fields[5]}

+ + + +
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..a34c1fe2 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,11 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + return (

The Most Recent Submission

-

{ }

+

{props.mostRecentSubmission}

); }