Liv - Space

.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": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}\\src\\components\\Game.js"
+        }
+    ]
+}

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 <p key={i}>
+      The {sentence[0]} {sentence[1]} {sentence[2]} {sentence[3]} the {sentence[4]} {sentence[5]}. 
+    </p>
+  });
+
+  const toSee = () => {
+    setSeePoem(true);
+  }
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {seePoem == true ? finalPoem : '' }
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <div className="FinalPoem__reveal-btn-container" >
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={toSee}/>
       </div>
     </div>
   );
+
 }
 
 export default FinalPoem;

src/components/Game.css

@@ -2,3 +2,8 @@
   text-align: center;
   font-style: italic;
 }
+
+.sentenceStructure {
+  text-align: center; 
+  font-style: italic;
+}

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 (<RecentSubmission submission={submissions[submissions.length - 1]} />)
     }
-  }).join(" ");
+    return <div />
+  };
 
   return (
     <div className="Game">
@@ -21,23 +41,27 @@ const Game = () => {
 
       <p>Please follow the following format for your poetry submission:</p>
 
-      <p className="Game__format-example">
-        { exampleFormat }
-      </p>
+      <p className="sentenceStructure">"The adjective noun adverb verb the adjective noun."</p>
 
-      <RecentSubmission />
+      {renderRecentSubmissions()}
+      {checkSubmissionsArrayLength()}
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm 
+        placeholderText={placeholderText()}
+        turnNumber={turnNumber}
+        handleSubmit={handleSubmit}
+      />
 
-      <FinalPoem />
+      <FinalPoem 
+        sentences={sentences}  
+      />
 
     </div>
   );
 }
 
 
 const FIELDS = [
-  "The",
   {
     key: 'adj1',
     placeholder: 'adjective',
@@ -54,16 +78,14 @@ const FIELDS = [
     key: 'verb',
     placeholder: 'verb',
   },
-  "the",
   {
     key: 'adj2',
     placeholder: 'adjective',
   },
   {
     key: 'noun2',
     placeholder: 'noun',
-  },
-  ".",
+  }
 ];
 
 export default Game;

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 (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.turnNumber + 1}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={handleSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
           <input
-            placeholder="hm..."
+            placeholder={props.placeholderText}
+            value={value}
+            onChange={e => setValue(e.target.value)}
             type="text" />
 
         </div>

src/components/RecentSubmission.js

@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
 }