diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..cf710cdc --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}\\src\\components\\Game.js" + } + ] +} \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..99fcb64f 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,32 @@ -import React from 'react'; +import React, {useState} from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = props => { + const [seePoem, setSeePoem] = useState(false) + + const finalPoem = props.sentences.map((sentence, i) => { + return

+ The {sentence[0]} {sentence[1]} {sentence[2]} {sentence[3]} the {sentence[4]} {sentence[5]}. +

+ }); + + const toSee = () => { + setSeePoem(true); + } return (

Final Poem

- + {seePoem == true ? finalPoem : '' }
-
- +
+
); + } export default FinalPoem; diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..8b51353e 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,8 @@ text-align: center; font-style: italic; } + +.sentenceStructure { + text-align: center; + font-style: italic; +} diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..f641dcc6 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,13 +5,33 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { - const exampleFormat = FIELDS.map((field) => { - if (field.key) { - return field.placeholder; - } else { - return field; + + const [turnNumber, setTurnNumber] = useState(0); + const [submissions, setSubmissions] = useState([]); + const [sentences, setSentences] = useState([]); + + const handleSubmit = (submit) => { + setSubmissions(submissions => submissions.concat(submit)) + setTurnNumber(turnNumber >= FIELDS.length - 1 ? 0 : (turnNumber + 1)) + }; + + const checkSubmissionsArrayLength = () => { + if (submissions.length === 6) { + setSentences([...sentences, submissions]) + setSubmissions([]) + } + }; + + const placeholderText = () => { + return FIELDS[turnNumber].placeholder + }; + + const renderRecentSubmissions = () => { + if (submissions.length > 0) { + return () } - }).join(" "); + return
+ }; return (
@@ -21,15 +41,20 @@ const Game = () => {

Please follow the following format for your poetry submission:

-

- { exampleFormat } -

+

"The adjective noun adverb verb the adjective noun."

- + {renderRecentSubmissions()} + {checkSubmissionsArrayLength()} - + - +
); @@ -37,7 +62,6 @@ const Game = () => { const FIELDS = [ - "The", { key: 'adj1', placeholder: 'adjective', @@ -54,7 +78,6 @@ const FIELDS = [ key: 'verb', placeholder: 'verb', }, - "the", { key: 'adj2', placeholder: 'adjective', @@ -62,8 +85,7 @@ const FIELDS = [ { key: 'noun2', placeholder: 'noun', - }, - ".", + } ]; export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..099f05d2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,20 +1,29 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = props => { + + + const [value, setValue] = useState(''); + + const handleSubmit = (event) => { + event.preventDefault(); + props.handleSubmit(value); + setValue('') + } + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{props.turnNumber + 1}

-
+
- { - // Put your form inputs here... We've put in one below as an example - } setValue(e.target.value)} type="text" />
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..bd9d70ff 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.submission }

); }