feat: add navbar (#24)

* feat: add navbar * feat: replace header with navbar * fix: set user state on load * fix: fix warning about viewport meta tag * feat: add styling to index page sections * add styles for history page
GoogleCloudPlatform · Mar 21, 2023 · cb3dce3 · cb3dce3
1 parent ace207e
commit cb3dce3
Show file tree

Hide file tree

Showing 26 changed files with 894 additions and 398 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@google-cloud/firestore": "^6.5.0",
+    "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.16",
     "@reduxjs/toolkit": "^1.9.3",
     "next": "13.2.2",
     "next-auth": "^4.20.1",
@@ -25,11 +27,14 @@
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "autoprefixer": "^10.4.14",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.2",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jest": "^27.2.1",
     "jest": "^29.5.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
     "ts-jest": "^29.0.5",
     "typescript": "4.9.5"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/Google_Cloud_logo.svg b/public/Google_Cloud_logo.svg
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,4 +1,3 @@
-import styles from 'src/styles/Mission.module.css'
 import { useGetUserQuery } from 'src/redux/apiSlice'
 
 
@@ -15,7 +14,7 @@ export default function Component() {
     return <div>Loading...</div>
   } else if (isSuccess) {
     return (
-      <footer className={styles.footer}>
+      <footer className="">
         {user.completedMissions.length}
         {' '}
         Completed Missions:
@@ -28,7 +27,7 @@ export default function Component() {
   }
 
   // TODO: Better fall through logic, but can't return 'Element | undefined'
-  return <></>
+  return <div>Something has gone terribly wrong with footer.tsx</div>
 }
 
 

diff --git a/src/components/game-controls.tsx b/src/components/game-controls.tsx
@@ -1,11 +1,10 @@
-import styles from 'src/styles/Mission.module.css'
-
 // Redux
 import { RootState } from '../redux/store'
 import { useAppSelector, useAppDispatch } from '../redux/hooks'
 import { moveUp, moveDown, moveLeft, moveRight, collectItem, startMission, setIsSavingMission } from '../redux/gameSlice'
 import { useEffect } from 'react';
 import { useAddCompletedMissionMutation, useGetUserQuery } from 'src/redux/apiSlice';
+import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon } from '@heroicons/react/24/outline'
 
 export default function Component() {
   const { playerPosition, allItemsCollected, mission, isSavingMission } = useAppSelector((state: RootState) => state.game)
@@ -63,35 +62,41 @@ export default function Component() {
   });
 
   return (
-    <section className={styles.controls}>
+    <section className="bg-slate-800 text-slate-100 rounded-r-xl p-8 col-span-2 space-y-4">
       <h2>Controls</h2>
-      <div>WASD</div>
-      <span>{JSON.stringify(playerPosition)}</span>
-      <button
-        aria-label="Move player up"
-        onClick={() => dispatch(moveUp())}
-      >
-        Move up
-      </button>
-      <button
-        aria-label="Move player down"
-        onClick={() => dispatch(moveDown())}
-      >
-        Move down
-      </button>
-      <button
-        aria-label="Move player left"
-        onClick={() => dispatch(moveLeft())}
-      >
-        Move left
-      </button>
-      <button
-        aria-label="Move player right"
-        onClick={() => dispatch(moveRight())}
-      >
-        Move right
-      </button>
-    </section>
+      <section className="grid grid-cols-3 gap-3 w-fit text-slate-100">
+        <div />
+        <button
+          className='bg-slate-100 text-slate-900 hover:bg-slate-200 text-white font-bold py-2 px-4 rounded'
+          aria-label="Move player up"
+          onClick={() => dispatch(moveUp())}
+        >
+          <ArrowUpIcon className="block h-6 w-6" aria-hidden="true" />
+        </button>
+        <div />
+        <button
+          className='bg-slate-100 text-slate-900 hover:bg-slate-200 text-white font-bold py-2 px-4 rounded'
+          aria-label="Move player left"
+          onClick={() => dispatch(moveLeft())}
+        >
+          <ArrowLeftIcon className="block h-6 w-6" aria-hidden="true" />
+        </button>
+        <button
+          className='bg-slate-100 text-slate-900 hover:bg-slate-200 text-white font-bold py-2 px-4 rounded'
+          aria-label="Move player down"
+          onClick={() => dispatch(moveDown())}
+        >
+          <ArrowDownIcon className="block h-6 w-6" aria-hidden="true" />
+        </button>
+        <button
+          className='bg-slate-100 text-slate-900 hover:bg-slate-200 text-white font-bold py-2 px-4 rounded'
+          aria-label="Move player right"
+          onClick={() => dispatch(moveRight())}
+        >
+          <ArrowRightIcon className="block h-6 w-6" aria-hidden="true" />
+        </button>
+      </section>
+    </section >
   )
 }
 

diff --git a/src/components/header.tsx b/src/components/header.tsx
diff --git a/src/components/inventory.tsx b/src/components/inventory.tsx
@@ -1,15 +1,14 @@
 import Image from 'next/image'
 import { useAppSelector } from 'src/redux/hooks';
 import { RootState } from 'src/redux/store';
-import styles from 'src/styles/Mission.module.css'
 
 export default function Component() {
   const { inventory } = useAppSelector((state: RootState) => state.game)
 
   return (
-    <section className={styles.inventory}>
+    <section className="bg-slate-800 text-slate-100 rounded-l-xl p-8 col-span-3 space-y-4">
       <h2>Inventory</h2>
-      <div>
+      <div className='flex'>
         {inventory.filter(item => item.status === 'COLLECTED').map(({title}) => (
           <Image
             key={title}

diff --git a/src/components/login-btn.tsx b/src/components/login-btn.tsx
diff --git a/src/components/mission-history.tsx b/src/components/mission-history.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import styles from 'src/styles/Mission.module.css'
 import { missions } from 'src/initialData.ts/missions'
 import { useGetUserQuery } from 'src/redux/apiSlice';
 
@@ -17,57 +16,58 @@ export default function MissionHistory() {
   } else if (isSuccess) {
 
     return (
-      <div className={styles.missionHistory}>
-        Completed Missions:
-        <table>
-          <thead>
-            <tr>
-              <th>Title</th>
-              <th>Technologies</th>
-              <th>Learning Resources</th>
-            </tr>
-          </thead>
-          <tbody>
-            {user.completedMissions.map((missionId, index) => {
-              const mission = missions.find(mission => mission.id === missionId);
-              if (!mission) return null;
-              return (
-                <tr key={`${mission.id}${index}`}>
-                  <td>{mission.title}</td>
-                  <td>
-                    {mission.technologies.map(technology => (
-                      <Image
-                        key={technology}
-                        src={`./google-cloud-icons/${technology}.svg`}
-                        alt={`icon of ${technology}`}
-                        width='50'
-                        height='50'
-                      />
-                    ))}
-                  </td>
-                  <td>
-                    {mission.learningResources.map(learningResource => (
-                      <a
-                        key={learningResource.link}
-                        href={learningResource.link}
-                      >
-                        {learningResource.title}
-                      </a>
-                    ))}
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
+      <section className="bg-slate-100 text-slate-100 rounded-r-xl p-8 dark:bg-slate-800 my-4 col-span-11 space-y-4">
+        <div className="relative overflow-x-auto">
+          <table className="w-full text-sm text-left text-gray-400">
+            <thead className="text-xs uppercase bg-gray-700 text-gray-400">
+              <tr>
+                <th scope="col" className="px-6 py-3">Mission</th>
+                <th scope="col" className="px-6 py-3">Technologies</th>
+                <th scope="col" className="px-6 py-3">Learning Resources</th>
+              </tr>
+            </thead>
+            <tbody>
+              {user.completedMissions.map((missionId, index) => {
+                const mission = missions.find(mission => mission.id === missionId);
+                if (!mission) return null;
+                return (
+                  <tr key={`${mission.id}${index}`} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                    <td className="px-6 py-4">{mission.title}</td>
+                    <td className="px-6 py-4 flex">
+                      {mission.technologies.map(technology => (
+                        <Image
+                          key={technology}
+                          src={`./google-cloud-icons/${technology}.svg`}
+                          alt={`icon of ${technology}`}
+                          width='50'
+                          height='50'
+                        />
+                      ))}
+                    </td>
+                    <td className="px-6 py-4">
+                      {mission.learningResources.map(learningResource => (
+                        <a
+                          key={learningResource.link}
+                          href={learningResource.link}
+                        >
+                          {learningResource.title}
+                        </a>
+                      ))}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </section>
     )
   } else if (isError) {
     return <div>{error.toString()}</div>
   }
 
   // TODO: Better fall through logic, but can't return 'Element | undefined'
-  return <></>
+  return <div>Something has gone terribly wrong with mission-history.tsx</div>
 }