more cleanup and added hover labels to player labels
All checks were successful
deploy / deploy (push) Successful in 58s
All checks were successful
deploy / deploy (push) Successful in 58s
This commit is contained in:
parent
a54b3d64fe
commit
f03ac7809d
@ -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("");
|
Loading…
Reference in New Issue
Block a user