From 90dee19b5e90210878633a330cbb57b4ad200969 Mon Sep 17 00:00:00 2001 From: Yesenia Date: Wed, 22 Apr 2020 13:51:37 -0700 Subject: [PATCH 1/4] set state variables, functions for wave 1 $ 2 --- src/components/FinalPoem.js | 16 +++- src/components/Game.js | 36 ++++++++- src/components/PlayerSubmissionForm.css | 8 ++ src/components/PlayerSubmissionForm.js | 103 +++++++++++++++++++++--- 4 files changed, 147 insertions(+), 16 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..0dd438a2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,16 +3,24 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + const onPoemReveal = (event) => { + props.onPoemFinishCallback(false); + } + return (
+ + { props.gameStatus ? "" :

Final Poem

- -
+
+ {props.allSubmissions.map(line =>

{line}

)} +
+ }
- -
+ +
); } diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..f352e368 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,36 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + + const [currentPlayer, setCurrentPlayer] = useState(1); + const [submissions, setSubmissions] = useState([]); + const [gameOn, setGameOn] = useState(true); + + const updateSubmissions = (line) => { + // copy current submissions + const newSubmissions = []; + + submissions.forEach( (submission) => { + newSubmissions.push(submission); + }) + + // add new line + newSubmissions.push(line); + + + // update submissions state + setSubmissions(newSubmissions); + + // increase currentPlayer by 1 + setCurrentPlayer(currentPlayer + 1); + } + + const updateGameStatus = (bool) =>{ + if(bool === false){ + setGameOn(!gameOn); + } + } + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -25,11 +55,11 @@ const Game = () => { { exampleFormat }

- + { gameOn && submissions.length >=1 ? : ""} - + {gameOn ? : ""} - + ); diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..b37c3de7 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -12,6 +12,14 @@ justify-content: space-around; } +.PlayerSubmissionForm__poem-inputs-unfilled { + background-color: rgb(255, 233, 233); +} + +.PlayerSubmissionForm__poem-inputs-filled { + background-color: white; +} + .PlayerSubmissionForm__submit { display: flex; justify-content: center; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..41e0a94a 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,22 +1,107 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { + + const emptyLine = { + adj1 : '', + noun1 : '', + adverb : '', + verb: '', + adj2 : '', + noun2 : '' + } + + const [lineFields, setLineFields] = useState(emptyLine); + + const onInputChange = (event) => { + // duplicate lineFields into a new object + const newLineFields = { + ...lineFields, + } + + // identify which field to update + newLineFields[event.target.name] = event.target.value; + + // update state of the fields + setLineFields(newLineFields); + } + + const onSubmitLine = (event) => { + event.preventDefault(); + + // combine line fields into one string + const line = 'The'.concat(` ${lineFields.adj1}`).concat(` ${lineFields.noun1}`).concat(` ${lineFields.adverb}`).concat(` ${lineFields.verb}`).concat(' the').concat(` ${lineFields.adj2}`).concat(` ${lineFields.noun2}`).concat('.') + + // send submission back to Game.js + props.onSubmitCallback(line); + + // reset fields + setLineFields(emptyLine); + } + + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{props.currentPlayer}

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

The

+ + + + + + + + + +

the

+ + + + value = {lineFields.noun2} + onChange={onInputChange} + name={Object.keys(lineFields)[5]} + placeholder={Object.keys(lineFields)[5]} + type="text" + className={lineFields.noun2 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> +

.

@@ -28,4 +113,4 @@ const PlayerSubmissionForm = () => { } -export default PlayerSubmissionForm; +export default PlayerSubmissionForm; \ No newline at end of file From 7f2b5ffc69d4a1a69b12b0459c4bb9f585dcf164 Mon Sep 17 00:00:00 2001 From: Yesenia Date: Wed, 22 Apr 2020 13:57:23 -0700 Subject: [PATCH 2/4] hide Reveal Poem button after it has been clicked --- src/components/FinalPoem.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 0dd438a2..ae5bd638 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -18,9 +18,10 @@ const FinalPoem = (props) => {
} + { props.gameStatus ?
-
+
: "" } ); } From 5b853ffa571228a8fe9a703fa1454ec36f5c9656 Mon Sep 17 00:00:00 2001 From: Yesenia Date: Wed, 22 Apr 2020 14:05:08 -0700 Subject: [PATCH 3/4] updated RecentSubmission component to take props --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.css | 1 + src/components/PlayerSubmissionForm.js | 12 ++++++------ src/components/RecentSubmission.js | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index f352e368..48e21f61 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -55,7 +55,7 @@ const Game = () => { { exampleFormat }

- { gameOn && submissions.length >=1 ? : ""} + { gameOn && submissions.length >=1 ? : ""} {gameOn ? : ""} diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index b37c3de7..00cacb70 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -10,6 +10,7 @@ display: flex; flex-wrap: wrap; justify-content: space-around; + line-height: 32px; } .PlayerSubmissionForm__poem-inputs-unfilled { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 41e0a94a..752efde1 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -55,7 +55,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.adj1} onChange={onInputChange} name={Object.keys(lineFields)[0]} - placeholder={Object.keys(lineFields)[0]} + placeholder={'adjective'} type="text" className={lineFields.adj1 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> @@ -63,7 +63,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.noun1} onChange={onInputChange} name={Object.keys(lineFields)[1]} - placeholder={Object.keys(lineFields)[1]} + placeholder={'noun'} type="text" className={lineFields.noun1 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> @@ -71,7 +71,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.adverb} onChange={onInputChange} name={Object.keys(lineFields)[2]} - placeholder={Object.keys(lineFields)[2]} + placeholder={'adverb'} type="text" className={lineFields.adverb === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> @@ -79,7 +79,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.verb} onChange={onInputChange} name={Object.keys(lineFields)[3]} - placeholder={Object.keys(lineFields)[3]} + placeholder={'verb'} type="text" className={lineFields.verb === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> @@ -89,7 +89,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.adj2} onChange={onInputChange} name={Object.keys(lineFields)[4]} - placeholder={Object.keys(lineFields)[4]} + placeholder={'adjective'} type="text" className={lineFields.adj2 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> @@ -97,7 +97,7 @@ const PlayerSubmissionForm = (props) => { value = {lineFields.noun2} onChange={onInputChange} name={Object.keys(lineFields)[5]} - placeholder={Object.keys(lineFields)[5]} + placeholder={'noun'} type="text" className={lineFields.noun2 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/> diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..19406b69 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.mostRecentSub}

); } From 0b9cd9fd41189b44b2a7c2960b8750dd74175513 Mon Sep 17 00:00:00 2001 From: Yesenia Date: Wed, 22 Apr 2020 14:14:47 -0700 Subject: [PATCH 4/4] clean working version complete --- src/App.js | 2 +- src/components/FinalPoem.js | 2 +- src/components/Game.js | 8 +------- src/components/PlayerSubmissionForm.js | 1 - src/components/RecentSubmission.js | 2 +- 5 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 8f64627a..a48fed89 100644 --- a/src/App.js +++ b/src/App.js @@ -17,4 +17,4 @@ const App = () => { } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ae5bd638..5f532c07 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -26,4 +26,4 @@ const FinalPoem = (props) => { ); } -export default FinalPoem; +export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 48e21f61..33f67da2 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -11,21 +11,15 @@ const Game = () => { const [gameOn, setGameOn] = useState(true); const updateSubmissions = (line) => { - // copy current submissions const newSubmissions = []; submissions.forEach( (submission) => { newSubmissions.push(submission); }) - // add new line newSubmissions.push(line); - - // update submissions state setSubmissions(newSubmissions); - - // increase currentPlayer by 1 setCurrentPlayer(currentPlayer + 1); } @@ -96,4 +90,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 752efde1..7d755fc0 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -112,5 +112,4 @@ const PlayerSubmissionForm = (props) => { ); } - export default PlayerSubmissionForm; \ No newline at end of file diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 19406b69..0bdce7b0 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -10,4 +10,4 @@ const RecentSubmission = (props) => { ); } -export default RecentSubmission; +export default RecentSubmission; \ No newline at end of file