diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..179c1822 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,11 +3,36 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + function showSentence(sentenceArray) { + if (sentenceArray) { + console.log(sentenceArray); + return ( +
+ The  + {sentenceArray[0]}  + {sentenceArray[1]}  + {sentenceArray[2]}  + {sentenceArray[3]} the  + {sentenceArray[4]}  + {sentenceArray[5]} + . +
+ ); + } else { + return null; + } + } + + function mapSentences(props) {props.finalPoemLines.map((sentenceArray) => { + return
{showSentence(sentenceArray)}
; + })}; + return (

Final Poem

- + {mapSentences(props)} + {/* I'm able to see the state via console.log, but the sentences won't display */}
diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..44510505 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,16 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + playerInputs: [], // This will be an array of arrays + }; + } + + addPlayerInputWordsArray = (inputWordsArray) => { + this.setState((state, props) => ({ + playerInputs: [...state.playerInputs, inputWordsArray] + })); } render() { @@ -32,11 +42,11 @@ class Game extends Component { { exampleFormat }

- + - + - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..832657f9 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,24 +5,79 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + [0]: "", // Initialize value for each input to empty string + [1]: "", + [2]: "", + [3]: "", + [4]: "", + [5]: "", + }; + } + + textInputChange(event, inputId) { + this.setState({[inputId]: event.target.value}); + } + + sendPlayerInputWordsArray = (e) => { + e.preventDefault(); + const inputWords = [this.state[0], this.state[1], this.state[2], this.state[3], this.state[4], this.state[5]]; + this.props.addPlayerInputWordsArray(inputWords); } render() { return (
-

Player Submission Form for Player #{ }

- -
+

Player Submission Form for Player #{this.props.playerNumber}

+
{ // Put your form inputs here... We've put in one below as an example } + The + {this.textInputChange(event, 0) }} + /> + + {this.textInputChange(event, 1) }} + /> + + {this.textInputChange(event, 2) }} + /> + + {this.textInputChange(event, 3) }} + /> + + the + {this.textInputChange(event, 4) }} + /> + + placeholder="noun" + type="text" + onChange={(event) => {this.textInputChange(event, 5) }} + /> + .
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..792e58eb 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,11 +1,34 @@ import React from 'react'; import './RecentSubmission.css'; + +function showLine(props) { + if (props.recentSubmissionWordsArray) { + return ( + + The  + {props.recentSubmissionWordsArray[0]}  + {props.recentSubmissionWordsArray[1]}  + {props.recentSubmissionWordsArray[2]}  + {props.recentSubmissionWordsArray[3]} the  + {props.recentSubmissionWordsArray[4]}  + {props.recentSubmissionWordsArray[5]} + . + {/*magical spaces: https://stackoverflow.com/questions/46656476/rendering-empty-space-in-react */} + + ); + } else { + return null; + } +} + const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

+ {showLine(props)} +

); }