From b6e1622120d86268ace27b6c9ac755e1146fecb7 Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Tue, 10 Dec 2019 16:36:24 -0800 Subject: [PATCH 1/7] Initial setup & pseudocode --- src/components/FinalPoem.js | 2 ++ src/components/Game.js | 6 ++++++ src/components/PlayerSubmissionForm.js | 16 ++++++++++++++++ src/components/RecentSubmission.js | 2 ++ 4 files changed, 26 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..db167dfa 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,6 +12,8 @@ const FinalPoem = (props) => {
+ {/* this will reveal the final poem somehow */} + {/* the poem will be passed thru as a prop i think */}
); diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..bf0de7f3 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,12 @@ class Game extends Component { constructor(props) { super(props); + // up here in state + // we will add a property for Recent Submission + // (which will be filled with the result of the submitted PlayerSubmissionForm) + // and a property for Final Poem + // (which will contain all the Recent Submissions) + // ((which will be pushed in everytime they're updated)) } render() { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..8475cb89 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,6 +5,22 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + this.state = { + // words live in state until submit is clicked + adjectiveA: '', + nounA: '', + adverb: '', + verb: '', + adjectiveB: '', + nounB: '' + } + } + + onSubmitForm = () => { + // turn inputs into a string + // pass string up to Game to store it + // Game will pass it on down to Recent Submission & Final Poem + // then clear out the state } render() { diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..2df3d551 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,6 +5,8 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

+ {/* display the most recent submission */} + {/* this comes from props passed from Game */}

{ }

); From 719cc1304d2e3053293b653931cc15937e58aa49 Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Tue, 10 Dec 2019 16:51:54 -0800 Subject: [PATCH 2/7] Added inputs for poem words --- src/components/PlayerSubmissionForm.js | 28 +++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 8475cb89..0bd28152 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -33,12 +33,30 @@ class PlayerSubmissionForm extends Component {
- { - // Put your form inputs here... We've put in one below as an example - } + placeholder={this.state.adjectiveA === '' ? "adjective" : this.state.adjectiveA} + type="text" + /> + + + + +
From d1d88f9434c5de4cd1451eafe9d93a4857924469 Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Wed, 11 Dec 2019 15:06:17 -0800 Subject: [PATCH 3/7] Added function to create stanza submission & pass it to Game --- src/components/Game.js | 16 ++++++++++++++- src/components/PlayerSubmissionForm.css | 2 +- src/components/PlayerSubmissionForm.js | 27 +++++++++++++++++++++---- 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index bf0de7f3..f9ec463b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,10 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + currentSubmission: '', + finalPoem: [] + } // up here in state // we will add a property for Recent Submission // (which will be filled with the result of the submitted PlayerSubmissionForm) @@ -15,6 +19,16 @@ class Game extends Component { // (which will contain all the Recent Submissions) // ((which will be pushed in everytime they're updated)) } + addRecentSubmission = (stanza) => { + // add stanza to Game state + const {finalPoem} = this.state; + finalPoem.push(stanza); + this.setState({ + currentSubmission: stanza, + finalPoem, + }) + console.log(stanza); + } render() { @@ -40,7 +54,7 @@ class Game extends Component { - + { this.addRecentSubmission(stanza) }} /> diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..6d6f98eb 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -31,7 +31,7 @@ background-color: tomato; } -.PlayerSubmissionFormt__input--invalid { +.PlayerSubmissionForm__input--invalid { background-color: #FFE9E9; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0bd28152..77bd38a2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -4,19 +4,35 @@ import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { constructor(props) { - super(props); + super(props); + this.addRecentSubmission = props.addRecentSubmission; this.state = { // words live in state until submit is clicked + prefix: 'The', adjectiveA: '', nounA: '', adverb: '', verb: '', + midfix: 'the', adjectiveB: '', nounB: '' } } - onSubmitForm = () => { + updateWord = (word, event) => { + let value = event.target.value + this.setState({ + [word]: value + }) + } + + onSubmitForm = (event) => { + event.preventDefault(); + let submission = ''; + Object.keys(this.state).forEach((key) => { + submission += ' ' + this.state[key]; + }) + this.addRecentSubmission(submission); // turn inputs into a string // pass string up to Game to store it // Game will pass it on down to Recent Submission & Final Poem @@ -29,15 +45,18 @@ class PlayerSubmissionForm extends Component {

Player Submission Form for Player #{ }

-
+
{ this.updateWord('adjectiveA', event) }} placeholder={this.state.adjectiveA === '' ? "adjective" : this.state.adjectiveA} type="text" /> { this.updateWord('nounA', event) }} placeholder={this.state.nounA === '' ? "noun" : this.state.nounA} type="text" /> @@ -49,7 +68,7 @@ class PlayerSubmissionForm extends Component { placeholder={this.state.verb === '' ? "verb" : this.state.verb} type="text" /> - From 692624841e447a22419a76cfc3db2f5577347873 Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Wed, 11 Dec 2019 16:05:03 -0800 Subject: [PATCH 4/7] Clears state after stanza submitted; increases player num --- src/components/Game.js | 5 ++-- src/components/PlayerSubmissionForm.js | 32 ++++++++++++++++++-------- src/components/RecentSubmission.js | 2 +- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index f9ec463b..42eed1a0 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -26,8 +26,7 @@ class Game extends Component { this.setState({ currentSubmission: stanza, finalPoem, - }) - console.log(stanza); + }) } render() { @@ -52,7 +51,7 @@ class Game extends Component { { exampleFormat }

- + { this.addRecentSubmission(stanza) }} /> diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 77bd38a2..158601e7 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -6,6 +6,7 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); this.addRecentSubmission = props.addRecentSubmission; + this.playerNum = 1; this.state = { // words live in state until submit is clicked prefix: 'The', @@ -19,11 +20,11 @@ class PlayerSubmissionForm extends Component { } } - updateWord = (word, event) => { - let value = event.target.value + updateWord = (event) => { + const value = event.target.value this.setState({ - [word]: value - }) + [event.target.name]: value + }) } onSubmitForm = (event) => { @@ -31,8 +32,18 @@ class PlayerSubmissionForm extends Component { let submission = ''; Object.keys(this.state).forEach((key) => { submission += ' ' + this.state[key]; + }); + this.setState({ + adjectiveA: '', + nounA: '', + adverb: '', + verb: '', + adjectiveB: '', + nounB: '' }) + this.addRecentSubmission(submission); + this.playerNum += 1; // turn inputs into a string // pass string up to Game to store it // Game will pass it on down to Recent Submission & Final Poem @@ -43,20 +54,23 @@ class PlayerSubmissionForm extends Component { return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ this.playerNum }

+ >
{ this.updateWord('adjectiveA', event) }} + name="adjectiveA" + onChange={this.updateWord} placeholder={this.state.adjectiveA === '' ? "adjective" : this.state.adjectiveA} + value={this.state.adjectiveA} type="text" /> { this.updateWord('nounA', event) }} + name="nounA" + onChange={this.updateWord} placeholder={this.state.nounA === '' ? "noun" : this.state.nounA} type="text" /> @@ -80,7 +94,7 @@ class PlayerSubmissionForm extends Component {
- +
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 2df3d551..2232a8d6 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -7,7 +7,7 @@ const RecentSubmission = (props) => {

The Most Recent Submission

{/* display the most recent submission */} {/* this comes from props passed from Game */} -

{ }

+

{ props.recentSubmission }

); } From 269ef867bc09222e43691fec00d8d2ac6fa5f8dd Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Wed, 11 Dec 2019 16:42:27 -0800 Subject: [PATCH 5/7] Initial poem reveal function added --- src/components/FinalPoem.js | 40 +++++++++++++++++++++++++------------ src/components/Game.js | 10 ++++++++-- 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index db167dfa..6bdfd149 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,21 +2,35 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { - - return ( -
-
-

Final Poem

- -
- + const revealPoem = () => { + props.revealPoemCallback(); + } + const poemDisplay = props.finalPoem.map((stanza, i) => { + console.log(stanza); + return ( +

+ {stanza} +

+ ) + }) + console.log(props.displayPoem); + + if (props.displayPoem === true) { + return ( +
+
+

Final Poem

+ {poemDisplay} +
+
+ ) + } else { + return (
- - {/* this will reveal the final poem somehow */} - {/* the poem will be passed thru as a prop i think */} +
-
- ); + ); + } } export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index 42eed1a0..1aa35772 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -10,7 +10,8 @@ class Game extends Component { super(props); this.state = { currentSubmission: '', - finalPoem: [] + finalPoem: [], + displayPoem: false, } // up here in state // we will add a property for Recent Submission @@ -29,6 +30,11 @@ class Game extends Component { }) } + revealPoem = () => { + this.setState({ + displayPoem: true + }) + } render() { const exampleFormat = FIELDS.map((field) => { @@ -55,7 +61,7 @@ class Game extends Component { { this.addRecentSubmission(stanza) }} /> - +
); From b08f9e422487ad254780541573052ef95bae72fd Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Fri, 13 Dec 2019 10:08:52 -0800 Subject: [PATCH 6/7] Refactored inputs for player submission form --- src/components/PlayerSubmissionForm.js | 59 +++++++++----------------- 1 file changed, 19 insertions(+), 40 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 158601e7..a547a670 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -12,15 +12,18 @@ class PlayerSubmissionForm extends Component { prefix: 'The', adjectiveA: '', nounA: '', - adverb: '', - verb: '', + adverbA: '', + verbA: '', midfix: 'the', adjectiveB: '', nounB: '' - } + }; + this.inputs = Object.keys(this.state); + } updateWord = (event) => { + console.log(this.inputs); const value = event.target.value this.setState({ [event.target.name]: value @@ -36,18 +39,14 @@ class PlayerSubmissionForm extends Component { this.setState({ adjectiveA: '', nounA: '', - adverb: '', - verb: '', + adverbA: '', + verbA: '', adjectiveB: '', nounB: '' }) this.addRecentSubmission(submission); this.playerNum += 1; - // turn inputs into a string - // pass string up to Game to store it - // Game will pass it on down to Recent Submission & Final Poem - // then clear out the state } render() { @@ -60,37 +59,17 @@ class PlayerSubmissionForm extends Component { >
- - - - - - - - + {this.inputs.map((wordInput, i) => { + return ( + + ) + })}
From af2122ac80bf4fcaab57bf416cd6b584f629ca74 Mon Sep 17 00:00:00 2001 From: Kelsey Krippaehne Date: Fri, 13 Dec 2019 10:39:10 -0800 Subject: [PATCH 7/7] Fixed final components and wrote this meaningful commit message --- src/components/FinalPoem.js | 2 -- src/components/Game.js | 18 +++++++++++------- src/components/PlayerSubmissionForm.js | 1 + src/components/RecentSubmission.js | 14 +++++++++++--- 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 6bdfd149..1befd8bd 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -6,14 +6,12 @@ const FinalPoem = (props) => { props.revealPoemCallback(); } const poemDisplay = props.finalPoem.map((stanza, i) => { - console.log(stanza); return (

{stanza}

) }) - console.log(props.displayPoem); if (props.displayPoem === true) { return ( diff --git a/src/components/Game.js b/src/components/Game.js index 1aa35772..b5086f02 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,12 +13,6 @@ class Game extends Component { finalPoem: [], displayPoem: false, } - // up here in state - // we will add a property for Recent Submission - // (which will be filled with the result of the submitted PlayerSubmissionForm) - // and a property for Final Poem - // (which will contain all the Recent Submissions) - // ((which will be pushed in everytime they're updated)) } addRecentSubmission = (stanza) => { // add stanza to Game state @@ -45,6 +39,14 @@ class Game extends Component { } }).join(" "); + if (this.state.displayPoem === true) { + return ( +
+ +
+ ) + } else { + return (

Game

@@ -64,7 +66,9 @@ class Game extends Component {
- ); + ) + } + } } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index a547a670..eeaf7dd3 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -66,6 +66,7 @@ class PlayerSubmissionForm extends Component { name={wordInput} onChange={this.updateWord} placeholder={this.state[wordInput] === '' ? wordInput.slice('A', -1).slice('B') : this.state[wordInput]} + value={this.state[wordInput]} className={this.state[wordInput] === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input'} /> ) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 2232a8d6..e4a9a130 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,14 +2,22 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + if (props.recentSubmission === '') { + return ( +
+ +
+ ); + } else { + return (

The Most Recent Submission

- {/* display the most recent submission */} - {/* this comes from props passed from Game */}

{ props.recentSubmission }

- ); + ) +} + } export default RecentSubmission;