feat : add elo estimation feature (#6)

* feat: ✨ add elo estimation feature

src/sections/analysis/panelBody/analysisTab/accuracies.tsx

@@ -1,8 +1,11 @@
 import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { gameEvalAtom } from "../../states";
+type props = {
+  params: "accurecy" | "rating";
+};
 
-export default function Accuracies() {
+export default function Accuracies(props: props) {
   const gameEval = useAtomValue(gameEvalAtom);
 
   if (!gameEval) return null;
@@ -24,11 +27,14 @@ export default function Accuracies() {
         fontWeight="bold"
         border="1px solid #424242"
       >
-        {`${gameEval?.accuracy.white.toFixed(1)} %`}
+        {props.params === "accurecy"
+          ? `${gameEval?.accuracy.white.toFixed(1)} %`
+          : `${Math.round(gameEval?.estimatedElo.white as number)}`}
       </Typography>
 
-      <Typography align="center">Accuracies</Typography>
-
+      <Typography align="center">
+        {props.params === "accurecy" ? "Accuracies" : "Estimated Elo"}
+      </Typography>
       <Typography
         align="center"
         sx={{ backgroundColor: "black", color: "white" }}
@@ -38,7 +44,9 @@ export default function Accuracies() {
         fontWeight="bold"
         border="1px solid #424242"
       >
-        {`${gameEval?.accuracy.black.toFixed(1)} %`}
+        {props.params === "accurecy"
+          ? `${gameEval?.accuracy.black.toFixed(1)} %`
+          : `${Math.round(gameEval?.estimatedElo.black as number)}`}
       </Typography>
     </Grid>
   );

src/sections/analysis/panelBody/analysisTab/index.tsx

@@ -57,7 +57,8 @@ export default function AnalysisTab(props: GridProps) {
           : { overflow: "hidden", overflowY: "auto", ...props.sx }
       }
     >
-      <Accuracies />
+      <Accuracies params={"accurecy"} />
+      <Accuracies params={"rating"} />
 
       <MoveInfo />