diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..1744ef37 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,38 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = ({isDone, poem, onClickCallback}) => { return (
-
-

Final Poem

- -
- + { + isDone && ( +
+

Final Poem

+ {poem.map(line =>

{line}

)} +
+ ) + }
- + { + isDone || + + } +
); } +FinalPoem.propTypes = { + isDone: PropTypes.bool.isRequired, + poem: PropTypes.array.isRequired, + onClickCallback: PropTypes.func.isRequired, +}; + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..cf0adaca 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,25 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + const [poem, setPoem] = useState([]) + const [player, setPlayer] = useState(1) + const [gameOn, setGameOn] = useState(true) + + const onSubmitFormClickCallback = (line) => { + const newPoem = [...poem]; + const {adj1, noun1, adv, verb, adj2, noun2} = line; + newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`) + // newPoem.push(Object.values(line).join(" ")); + setPoem(newPoem); + console.log(newPoem); + const newPlayer = player + 1 + setPlayer(newPlayer); + } + + const onFinishPoem = () => { + setGameOn(false); + }; + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +32,14 @@ const Game = () => { } }).join(" "); + const lastLine = () => { + if (poem.length === 0 ) { + return ""; + } + + return poem[poem.length - 1]; + }; + return (

Game

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

- + - + - +
); @@ -67,3 +94,5 @@ const FIELDS = [ ]; export default Game; + + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..ff3c9b42 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,131 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => { + const [line, setLine] = useState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + + const {adj1, noun1, adv, verb, adj2, noun2} = line + + const onInputChange = (e) => { + const newSubmission = { + ...line, + } + newSubmission[e.target.name] = e.target.value; + // console.log(e.target.value); + setLine(newSubmission); + }; + + const onFormSubmit = (event) => { + event.preventDefault(); + + if ( + adj1 !== '' && + noun1 !== '' && + adv !== '' && + verb !== '' && + adj2 !== '' && + noun2 !== '' + ) { + onClickCallback(line); + console.log(line); + + setLine({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '' + }); + }; + }; + + const inputDisplay = (name) => { + return (name !== "") ? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"; + } + return ( -
-

Player Submission Form for Player #{ }

+ !isDone && ( +
+

Player Submission Form for Player #{player}

- - { - // Put your form inputs here... We've put in one below as an example - } + The + + - + + the + + + .
- +
+ ) + ); } +PlayerSubmissionForm.propTypes = { + isDone: PropTypes.bool.isRequired, + player: PropTypes.number.isRequired, + onClickCallback: PropTypes.func.isRequired, +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..dc697ee1 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,25 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; -const RecentSubmission = (props) => { +const RecentSubmission = ({isDone, lastLine}) => { + const shouldDisplay = () => { + return (!isDone && lastLine); + } return ( -
-

The Most Recent Submission

-

{ }

-
+ shouldDisplay() && ( +
+

The Most Recent Submission

+

{ lastLine }

+
+ ) ); } +RecentSubmission.propTypes = { + isDone: PropTypes.bool.isRequired, + lastLine: PropTypes.string.isRequired, +}; + export default RecentSubmission; +