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 Card from "@/components/Card";
|
||||||
import Container from "@/components/Container";
|
import Container from "@/components/Container";
|
||||||
import Error from "@/components/Error";
|
import Error from "@/components/Error";
|
||||||
import PlayerInfo from "@/components/PlayerInfo";
|
|
||||||
import Scores from "@/components/Scores";
|
|
||||||
import { Spinner } from "@/components/Spinner";
|
import { Spinner } from "@/components/Spinner";
|
||||||
|
import PlayerInfo from "@/components/player/PlayerInfo";
|
||||||
|
import Scores from "@/components/player/Scores";
|
||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||||
import { useSettingsStore } from "@/store/settingsStore";
|
import { useSettingsStore } from "@/store/settingsStore";
|
||||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||||
|
@ -2,7 +2,7 @@ import Avatar from "@/components/Avatar";
|
|||||||
import Card from "@/components/Card";
|
import Card from "@/components/Card";
|
||||||
import Container from "@/components/Container";
|
import Container from "@/components/Container";
|
||||||
|
|
||||||
import SearchPlayer from "@/components/SearchPlayer";
|
import SearchPlayer from "@/components/player/SearchPlayer";
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
|
@ -3,16 +3,24 @@ import clsx from "clsx";
|
|||||||
type LabelProps = {
|
type LabelProps = {
|
||||||
title: string;
|
title: string;
|
||||||
value: any;
|
value: any;
|
||||||
|
hoverValue?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Label({
|
export default function Label({
|
||||||
title,
|
title,
|
||||||
value,
|
value,
|
||||||
|
hoverValue,
|
||||||
className = "bg-neutral-700",
|
className = "bg-neutral-700",
|
||||||
}: LabelProps) {
|
}: LabelProps) {
|
||||||
return (
|
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]">
|
<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>
|
<p>{title}</p>
|
||||||
<div className="h-4 w-[1px] bg-neutral-100"></div>
|
<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 ReactCountryFlag from "react-country-flag";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { useStore } from "zustand";
|
import { useStore } from "zustand";
|
||||||
import Avatar from "./Avatar";
|
import Avatar from "../Avatar";
|
||||||
import Card from "./Card";
|
import Card from "../Card";
|
||||||
import Label from "./Label";
|
import Label from "../Label";
|
||||||
import PlayerChart from "./PlayerChart";
|
import PlayerChart from "./PlayerChart";
|
||||||
|
|
||||||
type PlayerInfoProps = {
|
type PlayerInfoProps = {
|
||||||
@ -119,16 +119,19 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
|||||||
<Label
|
<Label
|
||||||
title="Total play count"
|
title="Total play count"
|
||||||
className="bg-blue-500"
|
className="bg-blue-500"
|
||||||
|
hoverValue="Total ranked song play count"
|
||||||
value={formatNumber(playerData.scoreStats.totalPlayCount)}
|
value={formatNumber(playerData.scoreStats.totalPlayCount)}
|
||||||
/>
|
/>
|
||||||
<Label
|
<Label
|
||||||
title="Total score"
|
title="Total score"
|
||||||
className="bg-blue-500"
|
className="bg-blue-500"
|
||||||
|
hoverValue="Total score of all your plays"
|
||||||
value={formatNumber(playerData.scoreStats.totalScore)}
|
value={formatNumber(playerData.scoreStats.totalScore)}
|
||||||
/>
|
/>
|
||||||
<Label
|
<Label
|
||||||
title="Avg ranked acc"
|
title="Avg ranked acc"
|
||||||
className="bg-blue-500"
|
className="bg-blue-500"
|
||||||
|
hoverValue="Average accuracy of all your ranked plays"
|
||||||
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
|
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
|
||||||
2,
|
2,
|
||||||
)}%`}
|
)}%`}
|
||||||
@ -139,6 +142,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
|||||||
<Label
|
<Label
|
||||||
title="Top PP"
|
title="Top PP"
|
||||||
className="bg-[#8992e8]"
|
className="bg-[#8992e8]"
|
||||||
|
hoverValue="Highest pp play"
|
||||||
value={`${formatNumber(
|
value={`${formatNumber(
|
||||||
getHighestPpPlay(playerId)?.toFixed(2),
|
getHighestPpPlay(playerId)?.toFixed(2),
|
||||||
)}pp`}
|
)}pp`}
|
||||||
@ -146,9 +150,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
|||||||
<Label
|
<Label
|
||||||
title="+ 1pp"
|
title="+ 1pp"
|
||||||
className="bg-[#8992e8]"
|
className="bg-[#8992e8]"
|
||||||
|
hoverValue="Amount of raw pp required to increase your pp by 1pp"
|
||||||
value={`${formatNumber(
|
value={`${formatNumber(
|
||||||
calcPpBoundary(playerId, 1)?.toFixed(2),
|
calcPpBoundary(playerId, 1)?.toFixed(2),
|
||||||
)}pp per global raw`}
|
)}pp per raw`}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
@ -14,7 +14,12 @@ export default function ScoreStatLabel({
|
|||||||
className = "bg-neutral-700",
|
className = "bg-neutral-700",
|
||||||
}: LabelProps) {
|
}: LabelProps) {
|
||||||
return (
|
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]">
|
<div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
|
||||||
<p
|
<p
|
||||||
className="flex w-full items-center justify-center gap-1"
|
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 { fetchScores } from "@/utils/scoresaber/api";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import Card from "./Card";
|
import Card from "../Card";
|
||||||
import Pagination from "./Pagination";
|
import Pagination from "../Pagination";
|
||||||
|
import { Spinner } from "../Spinner";
|
||||||
import Score from "./Score";
|
import Score from "./Score";
|
||||||
import { Spinner } from "./Spinner";
|
|
||||||
|
|
||||||
type PageInfo = {
|
type PageInfo = {
|
||||||
loading: boolean;
|
loading: boolean;
|
@ -6,7 +6,7 @@ import { getPlayerInfo, searchByName } from "@/utils/scoresaber/api";
|
|||||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Avatar from "./Avatar";
|
import Avatar from "../Avatar";
|
||||||
|
|
||||||
export default function SearchPlayer() {
|
export default function SearchPlayer() {
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
Loading…
Reference in New Issue
Block a user