Add AddScore part + show score in ChartScore part :D

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
+    "@tailwindcss/forms": "^0.5.3",
     "firebase": "^9.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/Route/Admin/AddChart/AddChart.jsx

@@ -8,7 +8,6 @@ function AddChart() {
         const form = e.target;
         const formData = new FormData(form);
 
-        let date = new Date();
         let id = `${formData.get('title').slice(0, 3).toLowerCase()}` + 
         `${formData.get('title').length}` + 
         `${formData.get('artist').length}` + 
@@ -62,7 +61,6 @@ function AddChart() {
                         <option value="niconico">niconico & Vocaloid</option>
                         <option value="touhou">Touhou Project</option>
                         <option value="game">Game & Variety</option> 
-                        <option value="maimai">Maimai</option>
                         <option value="original">Original & Joypolis</option>
                         <option value="utage">Utage</option>
                     </select>

src/Route/ChartAddScore/ChartAddScore.css

@@ -0,0 +1,33 @@
+hr {
+    border: none;
+    border-top: 2px solid #333;
+    color: #333;
+    overflow: visible;
+    text-align: center;
+    margin-top: 10px;
+    height: 5px;
+}
+
+.easy {
+    background-color: #1fecf0;
+}
+
+.basic{
+    background-color: #8cc20f;
+}
+
+.advance{
+    background-color: #e5cd18;
+}
+
+.expert{
+    background-color: #ed1f1f;
+}
+
+.master{
+    background-color: #d42ccf;
+}
+
+.remaster{
+    background: linear-gradient(110deg, #d42ccf 48%, #ffffff 52%);;
+}

src/Route/ChartAddScore/ChartAddScore.jsx

@@ -0,0 +1,130 @@
+import { useParams } from 'react-router-dom';
+import { getFirestore, collection, addDoc } from "firebase/firestore";
+import './ChartAddScore.css';
+
+function AddScore() {
+  const { chartId } = useParams(); 
+
+  async function handleForm(e) {
+    e.preventDefault();
+
+    const date = new Date();
+    const form = e.target;
+    const formData = new FormData(form);
+
+    const data = {
+      chartId: chartId,
+      difficulty: formData.get('difficulty'),
+      rank: formData.get('rank'),
+      pseudo: formData.get('pseudo'),
+      score: formData.get('score'),
+      accuracy: formData.get('accuracy'),
+      date: date,
+    }
+
+    const db = getFirestore();
+    const scoreRef = collection(db, "Score");
+    addDoc(scoreRef, data).then(() => {
+      console.log("Document successfully written!");
+      window.location.href = `/charts/${chartId}/score`;
+    }).catch((error) => {
+      console.error("Error writing document: ", error);
+    });
+  }
+
+
+  return (
+    <div className="App">
+      <div className="flex justify-center m-5">
+        <div className="bg-white px-4 py-5 sm:p-6 overflow-hidden shadow sm:rounded-md">
+          <form onSubmit={handleForm}>
+            <div className="m-2">
+              <label htmlFor="pseudo" className="block text-sm font-medium leading-6 text-gray-900">
+                Pseudo
+              </label>
+              <input
+                type="string"
+                name="pseudo"
+                id="pseudo"
+                className="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+            <hr />
+
+            <div className="flex justify-center">
+              <div className="m-2">
+                <label htmlFor="difficulty" className="block text-sm font-medium leading-6 text-gray-900">
+                  Difficulty
+                </label>
+                <select
+                  id="difficulty"
+                  name="difficulty"
+                  className="mt-2 block w-full rounded-md border-0 bg-white py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                >
+                  <option value="Easy">Easy</option>
+                  <option value="Basic">Basic</option>
+                  <option value="Advance">Advance</option>
+                  <option value="Expert">Expert</option>
+                  <option value="Master">Master</option>
+                  <option value="Re:Master">Re:Master</option>
+                </select>
+              </div>
+              <div className="m-2">
+                <label htmlFor="rank" className="block text-sm font-medium leading-6 text-gray-900">
+                  Rank
+                </label>
+                <select
+                  id="rank"
+                  name="rank"
+                  className="mt-2 block w-full rounded-md border-0 bg-white py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                >
+                  <option value="A">A</option>
+                  <option value="AA">AA</option>
+                  <option value="AAA">AAA</option>
+                  <option value="S">S</option>
+                  <option value="S+">S+</option>
+                  <option value="SS">SS</option>
+                  <option value="SS+">SS+</option>
+                  <option value="SSS">SSS</option>
+                  <option value="Perfect">Perfect</option>
+                </select>
+              </div>
+            </div>
+
+            <hr />
+
+            <div className="m-2">
+              <label htmlFor="score" className="block text-sm font-medium leading-6 text-gray-900">
+                Score
+              </label>
+              <input
+                type="integer"
+                name="score"
+                id="score"
+                className="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+
+            <div className="m-2">
+              <label htmlFor="accuracy" className="block text-sm font-medium leading-6 text-gray-900">
+                Accuracy
+              </label>
+              <input
+                type="integer"
+                name="accuracy"
+                id="accuracy"
+                className="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+
+            <button type="submit" className="rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
+              Add Score
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddScore;

src/Route/ChartScore/ChartScore.css

@@ -0,0 +1,23 @@
+.easy {
+    background-color: #1fecf0;
+}
+
+.basic{
+    background-color: #8cc20f;
+}
+
+.advance{
+    background-color: #e5cd18;
+}
+
+.expert{
+    background-color: #ed1f1f;
+}
+
+.master{
+    background-color: #d42ccf;
+}
+
+.remaster{
+    background: linear-gradient(110deg, #d42ccf 48%, #ffffff 52%);;
+}

src/Route/ChartScore/ChartScore.jsx

@@ -1,14 +1,152 @@
-import { Link } from 'react-router-dom';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { getFirestore, collection, getDocs } from "firebase/firestore";
 import './ChartScore.css';
 
 function Score() {
   const { chartId } = useParams(); 
 
+  const [chart, setChart] = useState([]);
+  const [scores, setScores] = useState([]);
+
+  const getChart = async () => {
+    const db = getFirestore();
+    const chartRef = collection(db, "Chart");
+    const snapshot = await getDocs(chartRef);
+    const chart = snapshot.docs.map(doc => doc.data());
+
+    return chart;
+  }
+
+  const switchScoreDifficulty = async (difficulty) => {
+    const db = getFirestore();
+    const scoreRef = collection(db, "Score");
+    const snapshot = await getDocs(scoreRef);
+    const scores = snapshot.docs.map(doc => doc.data());
+    const score = scores.filter(item => item.chartId === chartId && item.difficulty === difficulty);
+    score.sort((a, b) => b.score - a.score);
+
+    setScores(score);
+  }
+
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getChart();
+      data.forEach(chart => {
+        if (chart.id === chartId) {
+          setChart(chart);
+        }
+      });
+    }
+    fetchData();
+  }, []);
+
+  console.log(scores)
+
+  const getCategory = () => {
+    switch (chart.category) {
+      case "pop":
+        return "Pop & Anime";
+      case "niconico":
+        return "Niconico & Vocaloid";
+      case "touhou":
+        return "Touhou Project";
+      case "game":
+        return "Game & Variety";
+      case "original":
+        return "Original & Joypolis";
+      case "utage":
+        return "Utage";
+    }
+  };
 
   return (
     <div className="App">
-      {chartId}
+      <div className="flex justify-center">
+        <div className="w-auto h-40 pr-4 bg-gray-200 rounded-lg border-2 border-indigo-800 m-2 flex flex-row">
+          <img src={chart.imageCover} alt={chart.title} className="rounded-lg mr-3" />
+          <div className="flex items-center">
+            <div className="flex flex-col">
+              <p className="font-bold text-xl">{chart.title}</p>
+              <p className="font-bold text-lg">{chart.artist}</p>
+              <hr />
+              <p>{chart.category && getCategory()}</p>
+              <div className="flex text-center">
+                {chart.difficulty && Array.isArray(chart.difficulty) && chart.difficulty.map((item, index) => {
+                  return (  
+                    <ul key={index} className="flex flex-row justify-center font-bold flex-wrap">
+                      <li onClick={() => switchScoreDifficulty("Easy")} className='rounded-lg w-10 m-1 easy'>{item.Easy}</li>
+                      <li onClick={() => switchScoreDifficulty("Basic")} className='rounded-lg w-10 m-1 basic'>{item.Basic}</li>
+                      <li onClick={() => switchScoreDifficulty("Advance")} className='rounded-lg w-10 m-1 advance'>{item.Advance}</li>
+                      <li onClick={() => switchScoreDifficulty("Expert")} className='rounded-lg w-10 m-1 expert'>{item.Expert}</li>
+                      <li onClick={() => switchScoreDifficulty("Master")} className='rounded-lg w-10 m-1 master'>{item.Master}</li>
+                      {item.Remaster ? <li onClick={() => switchScoreDifficulty("Re:Master")} className='difficulty-level remaster'>{item.Remaster}</li> : null}
+                    </ul> 
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <button className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">
+          <Link to={`/charts/${chartId}/score/add`}>
+            Add Score
+          </Link>
+        </button>
+      </div>
+
+      <hr  />
+
+      <div className="mt-8 flow-root">
+        <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                      Pseudo
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Score
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Accuracy
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Rank
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                  {scores && Array.isArray(scores) && scores.map((item, index) => {
+                    return (
+                      <tr key={index}>
+                        <td className="py-3.5 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                          {item.pseudo}
+                        </td>
+                        <td className="px-3 py-3.5 text-sm text-gray-900">
+                          {item.score}
+                        </td>
+                        <td className="px-3 py-3.5 text-sm text-gray-900">
+                          {item.accuracy}
+                        </td>
+                        <td className="px-3 py-3.5 text-sm text-gray-900">
+                          {item.rank}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
   );
 }

src/Route/Charts/Charts.css

@@ -1,7 +1,7 @@
 .songList {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: center;
   flex-wrap: wrap;
   padding: 10px;
   margin: 0;