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 d516184e..5f532c07 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,18 +3,27 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + const onPoemReveal = (event) => { + props.onPoemFinishCallback(false); + } + return (
+ + { props.gameStatus ? "" :

Final Poem

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

{line}

)} +
+
} - - + { props.gameStatus ?
- -
+ +
: "" } ); } -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 ad27105b..33f67da2 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,30 @@ 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) => { + const newSubmissions = []; + + submissions.forEach( (submission) => { + newSubmissions.push(submission); + }) + + newSubmissions.push(line); + + setSubmissions(newSubmissions); + setCurrentPlayer(currentPlayer + 1); + } + + const updateGameStatus = (bool) =>{ + if(bool === false){ + setGameOn(!gameOn); + } + } + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -25,11 +49,11 @@ const Game = () => { { exampleFormat }

- + { gameOn && submissions.length >=1 ? : ""} - + {gameOn ? : ""} - + ); @@ -66,4 +90,4 @@ const FIELDS = [ ".", ]; -export default Game; +export default Game; \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..00cacb70 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -10,6 +10,15 @@ display: flex; flex-wrap: wrap; justify-content: space-around; + line-height: 32px; +} + +.PlayerSubmissionForm__poem-inputs-unfilled { + background-color: rgb(255, 233, 233); +} + +.PlayerSubmissionForm__poem-inputs-filled { + background-color: white; } .PlayerSubmissionForm__submit { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..7d755fc0 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

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

the

+ + + + +

.

@@ -27,5 +112,4 @@ const PlayerSubmissionForm = () => { ); } - -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..0bdce7b0 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,9 +5,9 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.mostRecentSub}

); } -export default RecentSubmission; +export default RecentSubmission; \ No newline at end of file