Fixed out of order bug and improved some ux

src/components/StoryEngine.tsx

@@ -1,9 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import StoryTemplate from "./StoryTemplate";
-import WordInputs from "./WordInputs";
 import { Button } from "./ui/button";
 
-
 interface Props {
   templateProp: string;
   wordsList: WordInput[];
@@ -13,6 +11,9 @@ export interface WordInput {
   word: string;
   partOfSpeech: string;
   refPath?: string;
+  user?: string;
+  index: number;
+  status?: string;
 }
 
 export const parseTemplate = (template: string): WordInput[] => {
@@ -29,27 +30,29 @@ export const parseTemplate = (template: string): WordInput[] => {
 
 const StoryEngine = ({ templateProp, wordsList }: Props) => {
   const [template /*, setTemplate*/] = useState<string>(templateProp);
-  const [wordInputs, setWordInputs] = useState<WordInput[]>(wordsList);
+  //const [wordInputs, setWordInputs] = useState<WordInput[]>(wordsList);
   const [revealIndex, setRevealIndex] = useState(0);
   const [showStory, setShowStory] = useState(false);
 
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const newWordInputs = [...wordInputs];
-    newWordInputs[index].word = e.target.value;
-    setWordInputs(newWordInputs);
-  };
+  // const handleInputChange = (
+  //   e: React.ChangeEvent<HTMLInputElement>,
+  //   index: number
+  // ) => {
+  //   const newWordInputs = [...wordInputs];
+  //   newWordInputs[index].word = e.target.value;
+  //   setWordInputs(newWordInputs);
+  // };
 
-  useEffect(() => {
-    setWordInputs(parseTemplate(template));
-  }, [template]);
+  // useEffect(() => {
+  //   setWordInputs(parseTemplate(template));
+  // }, [template]);
 
   return (
     <div className=" flex-col">
-      <WordInputs wordsList={wordsList} onChange={handleInputChange} />
-
+      {/* <WordInputs wordsList={wordsList} onChange={handleInputChange} /> */}
+      <h3>
+        Recieved {wordsList.filter((item) => item.status == "submitted").length}
+      </h3>
       {showStory && (
         <>
           <StoryTemplate
@@ -58,7 +61,10 @@ const StoryEngine = ({ templateProp, wordsList }: Props) => {
             revealIndex={revealIndex}
           />{" "}
           <br />
-          <Button  className="m-auto" onClick={() => setRevealIndex(revealIndex + 1)}>
+          <Button
+            className="m-auto"
+            onClick={() => setRevealIndex(revealIndex + 1)}
+          >
             Reveal Next Word
           </Button>
           {/* 
@@ -71,7 +77,11 @@ const StoryEngine = ({ templateProp, wordsList }: Props) => {
           ></Input> */}
         </>
       )}
-      <Button className="m-auto" id="revealStoryButton" onClick={() => setShowStory(!showStory)}>
+      <Button
+        className="m-auto"
+        id="revealStoryButton"
+        onClick={() => setShowStory(!showStory)}
+      >
         {showStory ? "Hide the Story" : "Reveal the Story"}
       </Button>
     </div>

src/components/StoryTemplate.tsx

@@ -25,7 +25,11 @@ const StoryTemplate = ({ template, words, revealIndex }: Props) => {
                     : "filledWord hiddenWord"
                 }
               >
-                {words[wordIndex].word}{" "}
+                {
+                  words.filter((word) => {
+                    return word.index == wordIndex;
+                  })[0].word
+                }{" "}
                 <div className="posTooltip" hidden>
                   {part}
                 </div>

src/components/WordInputs.tsx

@@ -1,28 +1,28 @@
-import { WordInput } from "./StoryEngine"
+import { WordInput } from "./StoryEngine";
 import { Input } from "./ui/input";
 
-interface Props{
-    wordsList:WordInput[];
-    onChange: (e:React.ChangeEvent<HTMLInputElement>, index:number)=>void;
+interface Props {
+  wordsList: WordInput[];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
 }
-const WordInputs = ({wordsList, onChange}:Props) => {
+const WordInputs = ({ wordsList, onChange }: Props) => {
   return (
     <div className="wordInputs">
-    {wordsList.map((input, index) => (
-        <div key={index}>
-          <label>
+      {wordsList
+        .sort((a, b) => a.index - b.index)
+        .map((input, index) => (
+          <label key={index}>
             {input.partOfSpeech}:
             <Input
+              id={"word" + index}
               type="text"
               value={input.word}
               onChange={(e) => onChange(e, index)}
             />
           </label>
-          <br />
-        </div>
-      ))}
-  </div>
-  )
-}
+        ))}
+    </div>
+  );
+};
 
-export default WordInputs
+export default WordInputs;

src/routes/HostGame.tsx

@@ -18,7 +18,13 @@ import StoryEngine, {
 import madlib from "../assets/madlibs.json";
 import { useAuth } from "../contexts/AuthContext";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 const HostGame = () => {
   const params = useParams();
@@ -55,6 +61,8 @@ const HostGame = () => {
             word: data.word,
             partOfSpeech: data.partOfSpeech,
             refPath: doc.ref.path,
+            index: data.index,
+            status: data.status,
           });
         });
         setWordsList(wordSnaps);
@@ -86,7 +94,7 @@ const HostGame = () => {
         doc(db, ref),
         {
           status: newRoomStatus,
-          storyTemplate: madlib[0].template,
+          storyTemplate: madlib[1].template,
         },
         { merge: true }
       );
@@ -95,20 +103,22 @@ const HostGame = () => {
 
     updateRoomStatus("play");
     setGameStatus("play");
-    const newWordsList = parseTemplate(madlib[0].template);
+    const newWordsList = parseTemplate(madlib[1].template);
     console.table(newWordsList);
     if (!newWordsList.length) {
       return;
     }
     const ref = `rooms/${params.gameId}/words`;
     newWordsList.forEach((wordInput, index) => {
       const assignedUser = users[index % users.length];
+      console.log(wordInput.word, index)
       addDoc(collection(db, ref), {
         word: wordInput.word,
         partOfSpeech: wordInput.partOfSpeech,
         timeAdded: new Date().getTime(),
         status: "new",
         user: assignedUser,
+        index: wordInput.index,
       });
     });
   };
@@ -153,11 +163,13 @@ const HostGame = () => {
           <Card>
             <CardHeader>
               <CardTitle>Story</CardTitle>
-              <CardDescription>Players Choose Words and then a story is created here!</CardDescription>
+              <CardDescription>
+                Players Choose Words and then a story is created here!
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <StoryEngine
-                templateProp={madlib[0].template || "Error Loading Template"}
+                templateProp={madlib[1].template || "Error Loading Template"}
                 wordsList={wordsList}
               />
             </CardContent>

src/routes/PlayGame.tsx

@@ -25,6 +25,7 @@ const PlayGame = () => {
   const params = useParams();
   const { currentUser } = useAuth();
   const [wordAssignments, setWordAssignments] = useState<WordInput[]>([]);
+  const [status, setStatus] = useState("collectwords");
   useEffect(() => {
     if (!currentUser) {
       console.log(
@@ -53,6 +54,9 @@ const PlayGame = () => {
             word: data.word,
             partOfSpeech: data.partOfSpeech,
             refPath: doc.ref.path,
+            index: data.index,
+            status: data.status,
+            user: data.user,
           });
         });
         setWordAssignments(wordSnaps);
@@ -70,7 +74,11 @@ const PlayGame = () => {
     index: number
   ) => {
     const newWordInputs = [...wordAssignments];
-    newWordInputs[index].word = e.target.value;
+    newWordInputs.filter((item) => {
+      console.table(item);
+      console.log(index);
+      return item.index == index;
+    })[0].word = e.target.value;
     setWordAssignments(newWordInputs);
   };
   const handleSubmitWords = async () => {
@@ -87,6 +95,7 @@ const PlayGame = () => {
         { merge: true }
       );
     });
+    setStatus("submitted");
   };
   return (
     <div>
@@ -100,7 +109,9 @@ const PlayGame = () => {
             wordsList={wordAssignments}
             onChange={handleInputChange}
           />
-          <Button onClick={handleSubmitWords}>Submit words</Button>
+          <Button onClick={handleSubmitWords}>
+            {status == "submitted" ? "Resubmit" : "Submit words"}
+          </Button>
         </CardContent>
       </Card>
     </div>