Stats

app/account/page.tsx

@@ -13,6 +13,9 @@ import updateProfileType from "@/utils/firebase/db/updateProfileType";
 import deleteAccount from "@/utils/firebase/account/deleteAccount";
 import googleSignOut from "@/utils/firebase/account/googleSignOut";
 import { useRouter } from "next/navigation";
+import getAverageScore from "@/utils/score/getAverageScore";
+import countTotalSplits from "@/utils/score/countTotalSplits";
+import StatBox from "@/components/account/statBox";
 
 export default function History() {
   // general
@@ -21,6 +24,13 @@ export default function History() {
   const { user } = useAuthContext() as { user: any };
   const router = useRouter();
 
+  // stats
+  const [averageScore, setAverageScore] = useState(0);
+  const [highScore, setHighScore] = useState(0);
+  const [lowScore, setLowScore] = useState(0);
+  const [totalGames, setTotalGames] = useState(0);
+  const [totalSplits, setTotalSplits] = useState(0);
+
   // account
   const [name, setName] = useState("");
   const [namePlaceholder, setNamePlaceholder] = useState("");
@@ -39,6 +49,11 @@ export default function History() {
       setUserDoc(doc);
       setNamePlaceholder(doc.displayName);
       setProfileType(doc.profileType);
+      setAverageScore(getAverageScore(doc.allScores));
+      setTotalSplits(countTotalSplits(doc.allScores));
+      setTotalGames(doc.allScores.length);
+      setHighScore(doc.highScore);
+      setLowScore(doc.lowScore);
     });
   }, []);
 
@@ -77,7 +92,15 @@ export default function History() {
           selected={currentWindow == "account" ? true : false}
         />
       </div>
-      {currentWindow == "stats" ? <h1>Stats</h1> : null}
+      {currentWindow == "stats" ? (
+        <section className='flex flex-wrap justify-center gap-2'>
+          <StatBox name='Average Score' value={averageScore} />
+          <StatBox name='High Score' value={highScore} />
+          <StatBox name='Low Score' value={lowScore} />
+          <StatBox name='Total Games' value={totalGames} />
+          <StatBox name='Total Splits' value={totalSplits} />
+        </section>
+      ) : null}
       {currentWindow == "social" ? <h1>Social</h1> : null}
       {currentWindow == "account" ? (
         <section className='shadow-card p-10 border border-gray-300 rounded-md flex gap-2 w-full max-mdLg:flex-col max-mdLg:items-center'>

components/account/statBox.tsx

@@ -0,0 +1,8 @@
+export default function StatBox({ name, value }: { name: string; value: number }) {
+  return (
+    <div className='border-gray-300 rounded-md flex flex-col justify-center gap-2 shadow-card w-48 h-48'>
+      <h1 className='text-center text-lg'>{name}</h1>
+      <h1 className='text-center text-lg'>{value}</h1>
+    </div>
+  );
+}

utils/score/countTotalSplits.ts

@@ -0,0 +1,6 @@
+export default function countTotalSplits(allScores: any) {
+  return allScores.reduce((count: any, score: any) => {
+    score = JSON.parse(score);
+    return count + score.length;
+  }, 0);
+}

utils/score/getAverageScore.ts

@@ -0,0 +1,14 @@
+import countTotalSplits from "./countTotalSplits";
+
+export default function getAverageScore(allScores: any) {
+  let total = 0;
+
+  allScores.forEach((score: any) => {
+    score = score.replace(/[[\]]/g, "").split(",").map(Number);
+    total += score.reduce((a: any, b: any) => a + b);
+  });
+
+  let average = total / countTotalSplits(allScores);
+
+  return Math.round(average * 10) / 10;
+}