Merge pull request #34 from Infinity-Times-Two/dev

Bug Fix for Fill In The Blank Challenge & some minor upgrades

README.md

@@ -1,12 +1,12 @@
-<h1 align="center">Escape Room Builder</h1>
+<h1 align="center">Quiz Buddies</h1>
 
-<h2 align="center">Create and Share Escape Rooms</h2>
+<h2 align="center">Create and Share Quizzes</h2>
 
 <p align="center"><a href="https://cloud.cypress.io/projects/f968uc/runs"><img src="https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/detailed/f968uc&style=flat&logo=cypress" /></a><a href="https://codecov.io/gh/Infinity-Times-Two/escape-room-builder-frontend" > 
  <img src="https://codecov.io/gh/Infinity-Times-Two/escape-room-builder-frontend/graph/badge.svg?token=USH6GNBN4U"/> 
  </a></p>
 
-Escape Room Builder is a full-stack web app that allows users to create and play escape rooms. Logged-out users may browse public escape rooms by other users, and create and play their own - the data is saved to local storage on their device. Users may optionally log in to save their escape rooms so they can be shared publically and across devices.
+Quiz Buddies is a full-stack web app that allows users to create and quizzes to share with their friends, and take publically shared quizzes. Logged-out users may browse public quizzes by other users, and create and play their own - the data is saved to local storage on their device. Users may optionally log in to save their quizzes so they can be shared publically and across devices.
 
 ## Tech Stack
 

src/app/__tests__/new-game-form.test.jsx

@@ -55,9 +55,9 @@ describe('New Game Form', () => {
   it('renders all inputs', () => {
     const { getByLabelText } = render(<NewGameForm />);
 
-    const gameTitle = getByLabelText('Name your Escape room');
+    const gameTitle = getByLabelText('Name your Quiz');
     expect(gameTitle).toBeInTheDocument();
-    const gameDescription = getByLabelText('Describe your Escape room');
+    const gameDescription = getByLabelText('Describe your Quiz');
     expect(gameDescription).toBeInTheDocument();
   });
 });
@@ -68,13 +68,13 @@ describe('Handle form inputs and submission', () => {
     const { getByLabelText, getByTestId } = render(<NewGameForm />);
 
     // Change title
-    const gameTitle = getByLabelText('Name your Escape room');
+    const gameTitle = getByLabelText('Name your Quiz');
     await user.click(gameTitle);
     await user.keyboard('New game title');
     expect(gameTitle.value).toBe('New game title');
 
     // Change description
-    const gameDescription = getByLabelText('Describe your Escape room');
+    const gameDescription = getByLabelText('Describe your Quiz');
     await user.click(gameDescription);
     await user.keyboard('New game description');
     expect(gameDescription.value).toBe('New game description');
@@ -210,8 +210,8 @@ describe('Handle form inputs and submission', () => {
   it('resets the form when Reset button is clicked', async () => {
     const { getByLabelText, getByRole } = render(<NewGameForm />);
 
-    const gameTitle = getByLabelText('Name your Escape room');
-    const gameDescription = getByLabelText('Describe your Escape room');
+    const gameTitle = getByLabelText('Name your Quiz');
+    const gameDescription = getByLabelText('Describe your Quiz');
     expect(gameTitle.value).toBe('New game title');
     expect(gameDescription.value).toBe('New game description');
 

src/app/about/page.tsx

@@ -3,7 +3,7 @@ export default function About() {
     <>
       <h1 className='text-4xl font-bold'>About</h1>
       <p className='text-xl'>
-        Escape Room Builder is a tool to help you build and play escape rooms
+        Quiz Buddies is a tool to help you create quizzes to share
         with your friends.
       </p>
     </>

src/app/components/challenges/FillInTheBlank.tsx

@@ -119,7 +119,6 @@ export default function FillInTheBlankChallenge({
         })
       : [];
     newRemovedWords = shuffle(newRemovedWords);
-
     setRemovedWords(newRemovedWords);
     // Remove extra words from the end of the answer
 
@@ -133,7 +132,11 @@ export default function FillInTheBlankChallenge({
     // find last index of the element containing lastWord
     const findLastIndexWithMatch = (array: string[], searchWord: string) => {
       for (let i = array.length - 1; i >= 0; i--) {
-        if (array[i] === searchWord) {
+        let queriedWord = array[i];
+        if (queriedWord[0] === '~') {
+          queriedWord = queriedWord.slice(1);
+        }
+        if (queriedWord === searchWord) {
           return i;
         }
       }
@@ -224,10 +227,6 @@ export default function FillInTheBlankChallenge({
     const challengeAnswer = currentChallenge.answer
       .toLowerCase()
       .replace(endPunctuationRegex, '');
-    console.table({
-      checkAnswer: checkAnswer,
-      'currentChallenge.answer': challengeAnswer,
-    });
     if (
       checkAnswer ===
       currentChallenge.answer.toLowerCase().replace(endPunctuationRegex, '')
@@ -244,86 +243,90 @@ export default function FillInTheBlankChallenge({
   };
 
   return (
-    <div className='flex flex-col gap-2 items-center max-w-full'>
-      <Card>
-        <div className='flex flex-row flex-wrap justify-center items-center'>
-          {!loading &&
-            answer.map((word: Word) =>
-              !word.hidden && !word.remove ? (
-                removedWordIndexes.some((index) => word.index === index) ? (
-                  <div key={word.index} className={`badge mr-0 orange`}>
-                    <span>{' ' /* one of the "blanks" to be filled */}</span>
-                  </div>
+    <>
+      <div className='flex flex-col gap-2 items-center max-w-full'>
+        <Card>
+          <div className='flex flex-row flex-wrap justify-center items-center'>
+            {!loading &&
+              answer.map((word: Word) =>
+                !word.hidden && !word.remove ? (
+                  removedWordIndexes.some((index) => word.index === index) ? (
+                    <div key={word.index} className={`badge mr-0 orange`}>
+                      <span>{' ' /* one of the "blanks" to be filled */}</span>
+                    </div>
+                  ) : (
+                    <span
+                      className={`text-xl ${
+                        word.word.match(punctuationRegex) ? `mr-1` : `mx-1`
+                      } font-bold`}
+                      key={word.index}
+                    >
+                      {word.word /* a regular word in the answer */}
+                    </span>
+                  )
                 ) : (
-                  <span
-                    className={`text-xl ${
-                      word.word.match(punctuationRegex) ? `mr-1` : `mx-1`
-                    } font-bold`}
+                  <div
                     key={word.index}
+                    className={`badge orange w-32 block`}
+                    onClick={() => handleAnswerClick(word)}
                   >
-                    {word.word /* a regular word in the answer */}
-                  </span>
+                    <span>
+                      {word.word /* a word added to a "blank space" */}
+                    </span>
+                  </div>
                 )
-              ) : (
-                <div
-                  key={word.index}
-                  className={`badge orange`}
-                  onClick={() => handleAnswerClick(word)}
-                >
-                  <span>{word.word /* a word added to a "blank space" */}</span>
-                </div>
-              )
+              )}
+            {loading && (
+              <div className='flex flex-row flex-wrap gap-y-6 gap-x-4 m-2 justify-center'>
+                <div className='skel h-8 w-20'></div>
+                <div className='skel h-8 w-14'></div>
+                <div className='skel h-8 w-32'></div>
+                <div className='skel h-8 w-20'></div>
+                <div className='skel h-8 w-28'></div>
+                <div className='skel h-8 w-32'></div>
+                <div className='skel h-8 w-20'></div>
+                <div className='skel h-8 w-14'></div>
+                <div className='skel h-8 w-20'></div>
+                <div className='skel h-8 w-28'></div>
+              </div>
+            )}
+          </div>
+        </Card>
+        <Card>
+          <p className='text-sm mb-2'>Choose the correct word(s):</p>
+          <div className='flex flex-row gap-2 flex-wrap justify-center'>
+            {removedWords.map((word: Word) => (
+              <div
+                key={word.index}
+                className={`badge orange ${word.hidden ? `invisible` : ''}`}
+                onClick={() => handleClueClick(word)}
+              >
+                <span>{word.word}</span>
+              </div>
+            ))}
+            {loading && (
+              // <div className='flex flex-row flex-wrap gap-y-4 gap-x-8 justify-center'>
+              <>
+                <div className='skel h-8 w-32 m-2'></div>
+                <div className='skel h-8 w-32 m-2'></div>
+                <div className='skel h-8 w-32 m-2'></div>
+                <div className='skel h-8 w-32 m-2'></div>
+                <div className='skel h-8 w-32 m-2``'></div>
+              </>
+              // </div>
             )}
-          {loading && (
-            <div className='flex flex-row flex-wrap gap-y-6 gap-x-4 m-2 justify-center'>
-              <div className='skel h-8 w-20'></div>
-              <div className='skel h-8 w-14'></div>
-              <div className='skel h-8 w-32'></div>
-              <div className='skel h-8 w-20'></div>
-              <div className='skel h-8 w-28'></div>
-              <div className='skel h-8 w-32'></div>
-              <div className='skel h-8 w-20'></div>
-              <div className='skel h-8 w-14'></div>
-              <div className='skel h-8 w-20'></div>
-              <div className='skel h-8 w-28'></div>
-            </div>
-          )}
-        </div>
-      </Card>
-      <Card>
-        <p className='text-sm mb-2'>Choose the correct word(s):</p>
-        <div className='flex flex-row gap-2 flex-wrap justify-center'>
-          {removedWords.map((word: Word) => (
-            <div
-              key={word.index}
-              className={`badge orange ${word.hidden ? `invisible` : ''}`}
-              onClick={() => handleClueClick(word)}
-            >
-              <span>{word.word}</span>
-            </div>
-          ))}
-          {loading && (
-            // <div className='flex flex-row flex-wrap gap-y-4 gap-x-8 justify-center'>
-            <>
-              <div className='skel h-8 w-32 m-2'></div>
-              <div className='skel h-8 w-32 m-2'></div>
-              <div className='skel h-8 w-32 m-2'></div>
-              <div className='skel h-8 w-32 m-2'></div>
-              <div className='skel h-8 w-32 m-2``'></div>
-            </>
-            // </div>
-          )}
-        </div>
-      </Card>
-      <button
-        className='large'
-        onClick={handleSubmit}
-        data-type='challenge-submit'
-      >
-        <span>Submit</span>
-      </button>
+          </div>
+        </Card>
+        <button
+          className='large'
+          onClick={handleSubmit}
+          data-type='challenge-submit'
+        >
+          <span>Submit</span>
+        </button>
+      </div>
       {incorrect && <Modal setIncorrect={setIncorrect}>Incorrect!</Modal>}
-    </div>
+    </>
   );
 }
 

src/app/components/createGame/NewGameForm.tsx

@@ -475,8 +475,8 @@ export default function NewGameForm({ editGame }: { editGame?: string }) {
       {/* Update to <form action={...}> when this has been refactored to a server action */}
       <form className='flex flex-col min-h-screen w-11/12 xs:w-4/5 md:w-3/4 gap-8'>
         <div className='flex flex-col gap-4'>
-          <h1>Create your escape room</h1>
-          <label htmlFor='gameTitle'>Name your Escape room</label>
+          <h1>Create your Quiz</h1>
+          <label htmlFor='gameTitle'>Name your Quiz</label>
           <Input
             fieldType='gameTitle'
             value={newGame.gameTitle}
@@ -487,7 +487,7 @@ export default function NewGameForm({ editGame }: { editGame?: string }) {
           />
         </div>
         <div className='flex flex-col gap-4 max-w-full'>
-          <label htmlFor='gameDescription'>Describe your Escape room</label>
+          <label htmlFor='gameDescription'>Describe your Quiz</label>
           <TextArea
             fieldType='gameDescription'
             value={newGame.gameDescription}

src/app/components/layout/Header.tsx

@@ -14,28 +14,23 @@ export default function Header() {
     const createUser = async (userId: string | undefined) => {
       const response = await fetch(`/api/createUser/${userId}`);
       const data = await response.json();
-      console.log('data from /api/createUser/{userId}: ', data);
       return data;
     };
 
     const updateUser = async (userId: string | undefined) => {
       const response = await fetch(`/api/updateUser/${userId}`);
       const data = await response.json();
-      console.log('data from /api/updateUser/{userId}: ', data);
       return data;
     };
 
     const fetchUser = async (id: string | undefined | null) => {
       if (id !== null && id !== undefined) {
         const response = await fetch(`/api/user/${id}`);
         const data = await response.json();
-        console.log('data from /api/user/{id}: ', data);
         if (data?.message === 'User not found') {
-          console.log('creating user...');
           const createdUser = await createUser(id);
           // const response = await fetch(`/api/user/${id}`);
           // const data = await response.json();
-          console.log('response from creating user: ', createdUser);
           setUser({
             id: createdUser.userId,
             firstName: createdUser.firstName,
@@ -53,16 +48,11 @@ export default function Header() {
             isAdmin: data.isAdmin,
             recentGameTimestamps: data.recentGameTimestamps,
           });
-
-          console.log(
-            `setUser: \n id: ${data.userId},\n firstName: ${data.firstName},\n savedGames: ${data.savedGames},\n createdGames: ${data.createdgames},\n isAdmin: ${data.isAdmin},\n recentgameTimeStamps: ${data.recentGameTimestamps}`
-          );
         }
         if (typeof data.firstName === 'undefined') {
           const firstName = await updateUser(id);
           setUser((prevUser: DBuser) => {
             const updatedUser = { ...prevUser, firstName: firstName };
-            console.log('updatedUser: ', updatedUser);
             return updatedUser;
           });
         }
@@ -84,7 +74,7 @@ export default function Header() {
     <header className='flex flex-col sm:flex-row items-center gap-4 bg-blue-400/25 border-b border-black py-4 sm:py-6 sm:px-16'>
       <p className='header text-4xl font-black text-center sm:text-left uppercase flex-grow'>
         <Link href='/' data-test='home-link'>
-          Escape Room Builder
+          Quiz Buddies
         </Link>
       </p>
       <div className='flex flex-row items-center justify-self-center sm:justify-self-end space-x-4 sm:space-x-8'>

src/app/components/ui/Modal.tsx

@@ -8,10 +8,10 @@ export default function Modal({
   children: React.ReactNode;
 }) {
   return (
-    <dialog id='my_modal_1' className='bg-slate-700/50' open>
+    <dialog id='my_modal_1' className='absolute top-0 w-full h-full grid place-items-center bg-slate-700/50 border-none' open>
       <div className='w-[500px] pr-8'>
         <Card>
-          <h3 className='font-bold text-lg'>{children}</h3>
+          <h3 className='font-bold text-lg text-neutral-800'>{children}</h3>
           <button className='small green' onClick={() => setIncorrect(false)}>
             <span>Close</span>
           </button>

src/app/contexts/savedGamesContext.tsx

@@ -30,11 +30,9 @@ const SavedGamesContextProvider = (props: PropsWithChildren<{}>) => {
   const { user } = useContext(UserContext);
 
   useEffect(() => {
-    // console.log('user: ', user);
     const fetchData = async () => {
       setLoadingSavedGames(true);
       const response = await fetch(`/api/games/${user.id}`);
-      console.log(`fetching saved games from /api/games/${user.id}`);
       const data = await response.json();
       setSavedGames(data.Items);
       setLoadingSavedGames(false);

src/app/game/[game]/[challenge]/page.tsx

@@ -96,7 +96,7 @@ export default function ChallengePage({
   }
 
   return (
-    <div className='pt-16 sm:pt-0 px-4'>
+    <div className='flex flex-col items-center justify-start min-h-screen gap-8 w-11/12 md:w-3/4 xl:w-1/2 pt-12 sm:pt-0'>
       <h2 className='mb-8 leading-10'>{currentChallenge?.type.replace('-', ' ')}: </h2>
       <p className='mb-4 text-center'> {currentChallenge?.description}</p>
       <SingleChallenge