diff --git a/src/App.css b/src/App.css index f5af61e6..f8d5504e 100644 --- a/src/App.css +++ b/src/App.css @@ -6,6 +6,7 @@ grid-template-columns: 2fr 3fr; align-items: flex-end; margin-bottom: 3rem; + border-bottom: dashed; } .App__intro-text { diff --git a/src/App.js b/src/App.js index 8f64627a..54159a65 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import Game from './components/Game.js'; const App = () => { + console.log("--APP"); return (
diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..bb0de9ec 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -8,6 +8,7 @@ padding: 1rem; border: 2px black solid; + border: dashed; box-shadow: 5px 10px black; transition: 0.25s; } @@ -17,5 +18,5 @@ } .FinalPoem__poem { - border-bottom: 2px gray dashed; + border-bottom: 2px gray; } diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..94af4c66 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -1,4 +1,4 @@ .Game__format-example { text-align: center; font-style: italic; -} +} \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..470282d9 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -4,7 +4,7 @@ .PlayerSubmissionForm__form { margin: 2rem auto 3rem auto; -} +}s .PlayerSubmissionForm__poem-inputs { display: flex; @@ -23,16 +23,17 @@ padding: 0.5rem; border: 2px black solid; + border-style: dashed; box-shadow: 5px 10px black; transition: 0.25s; } .PlayerSubmissionForm__submit-btn:hover { - background-color: tomato; + background-color: rgb(116, 254, 212); } .PlayerSubmissionFormt__input--invalid { - background-color: #FFE9E9; + background-color: rgb(254, 124, 124); } .PlayerSubmissionForm__input--invalid::placeholder { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..408680a5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,101 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { + + const [form, setFormTemplate] = useState( + { + adjOne: "", + nounOne: "", + advOne: "", + verbOne: "", + adjTwo: "", + nounTwo: "" + } + ); + + const [poet, setPoet] = useState(1) + + const poetCount = () => { + setPoet (poet++); + }; + + const onClickSubmit = (event) => { + event.preventDefault(); + console.log("Your poem has been submitted.") + //... + }; + + //Things this file needs to do: + //Send a poem submission into a data collection in Game.js + //Reset the state of the form fields so they're back to placeholder values after onClickSubmit. + // + + + + + + + + + + const render = () => { return (
-

Player Submission Form for Player #{ }

- +

Player Submission Form for Player #{/*poetCount()*/} :

-
+ - { - // Put your form inputs here... We've put in one below as an example - } - + + + + + + + +
- +
+
); + } } + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..ae0a3f86 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -4,7 +4,7 @@ import './RecentSubmission.css'; const RecentSubmission = (props) => { return (
-

The Most Recent Submission

+

The Most Recent Submission:

{ }

);