diff --git a/src/App.js b/src/App.js index 8f64627a..9a29838f 100644 --- a/src/App.js +++ b/src/App.js @@ -16,5 +16,4 @@ const App = () => { ); } - -export default App; +export default App; \ No newline at end of file diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..a56f4e22 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -5,7 +5,6 @@ .FinalPoem__reveal-btn { flex: 0.8; - padding: 1rem; border: 2px black solid; box-shadow: 5px 10px black; diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..6bf0c7b2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,47 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; +import { render } from '@testing-library/react'; const FinalPoem = (props) => { - return ( -
-
-

Final Poem

+ const recitePoem = (poem) => { + return poem.map((line, index) => { + return

{line}

+ }); + } -
+ if (props.isFinal){ -
- + return ( +
+
+

Final Poem

+
{recitePoem(props.poem)}
+
-
- ); + ); + + } else { + + return ( +
+
+ +
+
+ ); + } } -export default FinalPoem; +FinalPoem.propTypes = { + poem: PropTypes.array.isRequired, + isFinal: PropTypes.bool.isRequired, + onFinalClick: PropTypes.func.isRequired, +}; + +export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..c374dd05 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 = () => { + + const [player, setPlayer] = useState(1); + const [isFinal, setIsFinal] = useState(false); + const [poem, setPoem] = useState([]); + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,28 +18,56 @@ const Game = () => { } }).join(" "); + const formToPoem = (form) => { + return FIELDS.map((field) => { + if (field.key) { + return form[field.key]; + } else { + return field; + } + }).join(" "); + } + + const onFormSubmit = (formFields) => { + setPoem([...poem, formToPoem(formFields)]); + setPlayer(player + 1); + } + + const onFinalClick = () => { + setIsFinal(true); + } + 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 }

- + - + - +
+ ); -} +} const FIELDS = [ "The", @@ -66,4 +99,4 @@ const FIELDS = [ ".", ]; -export default Game; +export default Game; \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..8c3a95b9 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 = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { -
+ const emptyForm = { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }; -
+ const [formFields, setFormFields] = useState(emptyForm); - { - // Put your form inputs here... We've put in one below as an example - } - + const onFieldChange = (event) => { + console.log(`${event.target.name} Field updated ${ event.target.value }`); + setFormFields({ + ...formFields, + [event.target.name]: event.target.value, + }); + }; -
+ const inputClass = (input) => { + if (input === ""){ + return "PlayerSubmissionFormt__input--invalid"; + } else { + return "PlayerSubmissionFormt__input--valid"; + } + } -
- -
-
-
- ); + const onSubmit = (event) => { + event.preventDefault(); + console.log(`Form submitted`, formFields); + props.onFormSubmit(formFields); + setFormFields(emptyForm); + } + + if (props.isFinal){ + + return ( +
+
+ ) + + } else { + + return ( +
+

Player Submission Form for Player # {props.player}

+
+ +
+

The   + +   + + +   + + +   + + +   + + the   + + +   + + +

+ +
+ +
+ +
+ +
+
+ ); + } } +PlayerSubmissionForm.propTypes = { + player: PropTypes.number.isRequired, + isFinal: PropTypes.bool.isRequired, + onFormSubmit: PropTypes.func.isRequired, +}; -export default PlayerSubmissionForm; +export default PlayerSubmissionForm; \ No newline at end of file diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..00632000 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,29 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; const RecentSubmission = (props) => { - return ( -
-

The Most Recent Submission

-

{ }

-
- ); + + if (!props.isFinal && props.poem.length > 0){ + + return ( +
+

The Most Recent Submission

+

{ props.poem[props.poem.length - 1] }

+
+ ); + } else { + return ( +
+
+ ) + } + } -export default RecentSubmission; +RecentSubmission.propTypes = { + poem: PropTypes.array.isRequired, + isFinal: PropTypes.bool.isRequired, +}; + +export default RecentSubmission; \ No newline at end of file