From f03ac7809d6fb690288cc17407257355dcb4e894 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 22 Oct 2023 03:47:22 +0100
Subject: [PATCH] more cleanup and added hover labels to player labels

---
 src/app/player/[id]/page.tsx                   |  4 ++--
 src/app/search/page.tsx                        |  2 +-
 src/components/Label.tsx                       | 10 +++++++++-
 src/components/{ => player}/PlayerChart.tsx    |  0
 src/components/{ => player}/PlayerInfo.tsx     | 13 +++++++++----
 src/components/{ => player}/Score.tsx          |  0
 src/components/{ => player}/ScoreStatLabel.tsx |  7 ++++++-
 src/components/{ => player}/Scores.tsx         |  6 +++---
 src/components/{ => player}/SearchPlayer.tsx   |  2 +-
 9 files changed, 31 insertions(+), 13 deletions(-)
 rename src/components/{ => player}/PlayerChart.tsx (100%)
 rename src/components/{ => player}/PlayerInfo.tsx (92%)
 rename src/components/{ => player}/Score.tsx (100%)
 rename src/components/{ => player}/ScoreStatLabel.tsx (81%)
 rename src/components/{ => player}/Scores.tsx (97%)
 rename src/components/{ => player}/SearchPlayer.tsx (98%)

diff --git a/src/app/player/[id]/page.tsx b/src/app/player/[id]/page.tsx
index 2c2cdbf..59410c9 100644
--- a/src/app/player/[id]/page.tsx
+++ b/src/app/player/[id]/page.tsx
@@ -3,9 +3,9 @@
 import Card from "@/components/Card";
 import Container from "@/components/Container";
 import Error from "@/components/Error";
-import PlayerInfo from "@/components/PlayerInfo";
-import Scores from "@/components/Scores";
 import { Spinner } from "@/components/Spinner";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 4d42868..17f32c6 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -2,7 +2,7 @@ import Avatar from "@/components/Avatar";
 import Card from "@/components/Card";
 import Container from "@/components/Container";
 
-import SearchPlayer from "@/components/SearchPlayer";
+import SearchPlayer from "@/components/player/SearchPlayer";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index 2b1a888..cfefc8c 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -3,16 +3,24 @@ import clsx from "clsx";
 type LabelProps = {
   title: string;
   value: any;
+  hoverValue?: string;
   className?: string;
 };
 
 export default function Label({
   title,
   value,
+  hoverValue,
   className = "bg-neutral-700",
 }: LabelProps) {
   return (
-    <div className={clsx("flex flex-col justify-center rounded-md", className)}>
+    <div
+      className={clsx(
+        "flex flex-col justify-center rounded-md hover:cursor-default",
+        className,
+      )}
+      title={hoverValue}
+    >
       <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
         <p>{title}</p>
         <div className="h-4 w-[1px] bg-neutral-100"></div>
diff --git a/src/components/PlayerChart.tsx b/src/components/player/PlayerChart.tsx
similarity index 100%
rename from src/components/PlayerChart.tsx
rename to src/components/player/PlayerChart.tsx
diff --git a/src/components/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx
similarity index 92%
rename from src/components/PlayerInfo.tsx
rename to src/components/player/PlayerInfo.tsx
index 7f47a56..ad441dc 100644
--- a/src/components/PlayerInfo.tsx
+++ b/src/components/player/PlayerInfo.tsx
@@ -8,9 +8,9 @@ import { useRef } from "react";
 import ReactCountryFlag from "react-country-flag";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
-import Avatar from "./Avatar";
-import Card from "./Card";
-import Label from "./Label";
+import Avatar from "../Avatar";
+import Card from "../Card";
+import Label from "../Label";
 import PlayerChart from "./PlayerChart";
 
 type PlayerInfoProps = {
@@ -119,16 +119,19 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             <Label
               title="Total play count"
               className="bg-blue-500"
+              hoverValue="Total ranked song play count"
               value={formatNumber(playerData.scoreStats.totalPlayCount)}
             />
             <Label
               title="Total score"
               className="bg-blue-500"
+              hoverValue="Total score of all your plays"
               value={formatNumber(playerData.scoreStats.totalScore)}
             />
             <Label
               title="Avg ranked acc"
               className="bg-blue-500"
+              hoverValue="Average accuracy of all your ranked plays"
               value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
                 2,
               )}%`}
@@ -139,6 +142,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                 <Label
                   title="Top PP"
                   className="bg-[#8992e8]"
+                  hoverValue="Highest pp play"
                   value={`${formatNumber(
                     getHighestPpPlay(playerId)?.toFixed(2),
                   )}pp`}
@@ -146,9 +150,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                 <Label
                   title="+ 1pp"
                   className="bg-[#8992e8]"
+                  hoverValue="Amount of raw pp required to increase your pp by 1pp"
                   value={`${formatNumber(
                     calcPpBoundary(playerId, 1)?.toFixed(2),
-                  )}pp per global raw`}
+                  )}pp per raw`}
                 />
               </>
             )}
diff --git a/src/components/Score.tsx b/src/components/player/Score.tsx
similarity index 100%
rename from src/components/Score.tsx
rename to src/components/player/Score.tsx
diff --git a/src/components/ScoreStatLabel.tsx b/src/components/player/ScoreStatLabel.tsx
similarity index 81%
rename from src/components/ScoreStatLabel.tsx
rename to src/components/player/ScoreStatLabel.tsx
index 988e757..7d0cf97 100644
--- a/src/components/ScoreStatLabel.tsx
+++ b/src/components/player/ScoreStatLabel.tsx
@@ -14,7 +14,12 @@ export default function ScoreStatLabel({
   className = "bg-neutral-700",
 }: LabelProps) {
   return (
-    <div className={clsx("flex flex-col rounded-md", className)}>
+    <div
+      className={clsx(
+        "flex flex-col rounded-md hover:cursor-default",
+        className,
+      )}
+    >
       <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
         <p
           className="flex w-full items-center justify-center gap-1"
diff --git a/src/components/Scores.tsx b/src/components/player/Scores.tsx
similarity index 97%
rename from src/components/Scores.tsx
rename to src/components/player/Scores.tsx
index 3a35eda..9bffeff 100644
--- a/src/components/Scores.tsx
+++ b/src/components/player/Scores.tsx
@@ -5,10 +5,10 @@ import { SortType, SortTypes } from "@/types/SortTypes";
 import { fetchScores } from "@/utils/scoresaber/api";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import Card from "./Card";
-import Pagination from "./Pagination";
+import Card from "../Card";
+import Pagination from "../Pagination";
+import { Spinner } from "../Spinner";
 import Score from "./Score";
-import { Spinner } from "./Spinner";
 
 type PageInfo = {
   loading: boolean;
diff --git a/src/components/SearchPlayer.tsx b/src/components/player/SearchPlayer.tsx
similarity index 98%
rename from src/components/SearchPlayer.tsx
rename to src/components/player/SearchPlayer.tsx
index 2f634b2..926b98c 100644
--- a/src/components/SearchPlayer.tsx
+++ b/src/components/player/SearchPlayer.tsx
@@ -6,7 +6,7 @@ import { getPlayerInfo, searchByName } from "@/utils/scoresaber/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import Avatar from "./Avatar";
+import Avatar from "../Avatar";
 
 export default function SearchPlayer() {
   const [search, setSearch] = useState("");