diff --git a/package-lock.json b/package-lock.json index 46aea217..d186a875 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4565,6 +4565,11 @@ "minimalistic-crypto-utils": "^1.0.0" } }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -5528,6 +5533,30 @@ "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", "optional": true }, + "filename-reserved-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz", + "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=" + }, + "filenamify": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz", + "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=", + "requires": { + "filename-reserved-regex": "^1.0.0", + "strip-outer": "^1.0.0", + "trim-repeated": "^1.0.0" + } + }, + "filenamify-url": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz", + "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=", + "requires": { + "filenamify": "^1.0.0", + "humanize-url": "^1.0.0" + } + }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -5883,6 +5912,38 @@ "assert-plus": "^1.0.0" } }, + "gh-pages": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-2.2.0.tgz", + "integrity": "sha512-c+yPkNOPMFGNisYg9r4qvsMIjVYikJv7ImFOhPIVPt0+AcRUamZ7zkGRLHz7FKB0xrlZ+ddSOJsZv9XAFVXLmA==", + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify-url": "^1.0.0", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "dependencies": { + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" + } + } + }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -6318,6 +6379,15 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "humanize-url": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz", + "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=", + "requires": { + "normalize-url": "^1.0.0", + "strip-url-auth": "^1.0.0" + } + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -12512,6 +12582,19 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz", "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==" }, + "strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, + "strip-url-auth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz", + "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=" + }, "style-loader": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", @@ -12912,6 +12995,14 @@ "punycode": "^2.1.0" } }, + "trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "ts-pnp": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", diff --git a/package.json b/package.json index de451c95..ee68ff67 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,12 @@ "name": "exquisite-react", "version": "0.1.0", "private": true, + "homepage": "https://seaweeddol.github.io/exquisite-react/", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "gh-pages": "^2.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" @@ -14,6 +16,8 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "eject": "react-scripts eject" }, "eslintConfig": { diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..9add2dd2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,44 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = (props) => { + let increment = 0; + let finalPoem = props.submissions.map(sentence => { + increment += 1 + return (

{sentence}

) + }); + + const onReveal = () => { + props.onFinalPoemCallback(true); + } + return (
-
-

Final Poem

- -
+ {/* if display is true, show final poem */} + { props.submitted ? +
+

Final Poem

+ {finalPoem} +
: + null + } -
- -
+ { props.submitted ? + null : +
+ +
+ }
); } +FinalPoem.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.string), + submitted: PropTypes.bool.isRequired, + onFinalPoemCallback: PropTypes.func, +} + export default FinalPoem; diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..a65847df 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,7 @@ text-align: center; font-style: italic; } + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..535834a9 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,32 @@ const Game = () => { } }).join(" "); + const [player, setPlayer] = useState(1); + const [submissionsList, setsubmissionsList] = useState([]); + const [submitted, setSubmitted] = useState(false); + + + const onPlayerSubmissionCallback = (playerSubmission) => { + // make a copy of submissionsList + const newSubmissions = [...submissionsList]; + + // create sentence structure + const sentence = "The " + playerSubmission.adjective1 + " " + playerSubmission.noun1 + " " + playerSubmission.adverb + " " + playerSubmission.verb + " the " + playerSubmission.adjective2 + " " + playerSubmission.noun2 + "."; + + newSubmissions.push(sentence); + // update state of submissionsList to new list + setsubmissionsList(newSubmissions); + // increment player + setPlayer(player + 1); + } + + const onFinalPoemCallback = (bool) => { + setSubmitted(bool); + } + + // on reset + // setPlayer(1) + return (

Game

@@ -25,21 +51,26 @@ const Game = () => { { exampleFormat }

- +
+ { + submissionsList.length > 0 ? + : + null + } + + +
- - - +
); } - const FIELDS = [ "The", { - key: 'adj1', + key: 'adjective1', placeholder: 'adjective', }, { @@ -47,7 +78,7 @@ const FIELDS = [ placeholder: 'noun', }, { - key: 'adv', + key: 'adverb', placeholder: 'adverb', }, { @@ -56,7 +87,7 @@ const FIELDS = [ }, "the", { - key: 'adj2', + key: 'adjective2', placeholder: 'adjective', }, { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..15a21693 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,94 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { + + const [sentence, setSentence] = useState({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }); + + const onInputChange = (event) => { + const newSentence = { + ...sentence, + } + + newSentence[event.target.name] = event.target.value; + setSentence(newSentence); + } + + const onSubmitLine = (event) => { + // prevents form from submitting by default + event.preventDefault(); + + // prevent user from submitting empty fields + if (sentence.adjective1 !== '') { + //send that data back up to App + props.onSubmit(sentence); + + setSentence({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }) + } + } -
+ let increment = 0; + const renderInputs = props.fields.map((field) => { + increment += 1 + if (field.key) { + increment += 1 + return (); + } else { + return (

{field}

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

Player Submission Form for Player #{ props.player }

+ + -
+
+ {renderInputs} +
-
- -
- -
+
+ +
+ +
); } +PlayerSubmissionForm.propTypes = { + player: PropTypes.number.isRequired, + onPlayerSubmissionCallback: PropTypes.func, + fields: PropTypes.arrayOf(PropTypes.oneOfType([ + PropTypes.string, + PropTypes.object, + ]) + ), +} + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..4b477502 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,19 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.recentSubmission }

); } +RecentSubmission.propTypes = { + recentSubmission: PropTypes.string, +} + + export default RecentSubmission;