@@ -50,10 +48,10 @@ function Navbar() {
key={item.name}
href={item.href}
className={classNames(
- item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+ item.href === window.location.pathname ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'rounded-md px-3 py-2 text-sm font-medium'
)}
- aria-current={item.current ? 'page' : undefined}
+ aria-current={item.href === window.location.pathname ? 'page' : undefined}
>
{item.name}
@@ -72,11 +70,11 @@ function Navbar() {
as="a"
href={item.href}
className={classNames(
- item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+ item.href === window.location.pathname ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'block rounded-md px-3 py-2 text-base font-medium'
)}
- aria-current={item.current ? 'page' : undefined}
- >
+ aria-current={item.href === window.location.pathname ? 'page' : undefined}
+ >
{item.name}
))}
diff --git a/src/Route/Charts/Charts.css b/src/Route/Charts/Charts.css
index f1acfe8..0c2eabe 100644
--- a/src/Route/Charts/Charts.css
+++ b/src/Route/Charts/Charts.css
@@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
justify-content: space-around;
+ flex-wrap: wrap;
padding: 10px;
margin: 0;
}
diff --git a/src/Route/Index/Index.jsx b/src/Route/Index/Index.jsx
index 4ebf2b6..17b4919 100644
--- a/src/Route/Index/Index.jsx
+++ b/src/Route/Index/Index.jsx
@@ -1,9 +1,62 @@
import './Index.css';
+import Yuki from './../../assets/yuki.png';
+import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
+import { useEffect, useState } from 'react';
function Index() {
+
+ const [charts, setCharts] = useState([]);
+
+ const getCharts = async () => {
+ const db = getFirestore();
+ const chartRef = collection(db, "Chart");
+ const snapshot = await getDocs(chartRef);
+ const charts = snapshot.docs.map(doc => doc.data());
+
+ return charts;
+ }
+
+ useEffect(() => {
+ async function fetchData() {
+ const data = await getCharts();
+ setCharts(data);
+ }
+ fetchData();
+ }, []);
+
return (
-
Hello world
+
+
+
+
+
+
+
+ {charts.length} Charts
+
+
+ 0 Score
+
+
+
+
+ Welcome to MaiScore, a website that allows you to view your score from Maimai.
+ You will be able to submit your score for each chart and see other score from other players.
+
+
+
+
+
+
+
);
}
diff --git a/src/assets/yuki.png b/src/assets/yuki.png
new file mode 100644
index 0000000..eab4815
Binary files /dev/null and b/src/assets/yuki.png differ
diff --git a/src/index.css b/src/index.css
index bd6213e..b5c61c9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/src/router.jsx b/src/router.jsx
index 517cd07..48b5339 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -17,6 +17,10 @@ const router = [
path: "/charts/:chartId/score",
element:
,
},
+ {
+ path: "/how-to",
+ element:
How to - Work In progress
,
+ },
{
path: "/admin/charts/add",
element:
,