more cleanup and added hover labels to player labels
All checks were successful
deploy / deploy (push) Successful in 58s

This commit is contained in:
Lee 2023-10-22 03:47:22 +01:00
parent a54b3d64fe
commit f03ac7809d
9 changed files with 31 additions and 13 deletions

@ -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";

@ -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 = {

@ -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>

@ -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`}
/>
</>
)}

@ -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"

@ -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;

@ -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("");