Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

add weekly rank change and change the design a bit
All checks were successful
Deploy Website / deploy (push) Successful in 3m20s
Details

Browse Source
This commit is contained in:
Lee 2024-10-11 03:31:52 +01:00
parent e35c1c77d3
commit e4f0376af3
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
projects/website/src/components/ranking/player-ranking.tsx
View File

@ -7,6 +7,7 @@ import Link from "next/link";
import useDatabase from "@/hooks/use-database"; import useDatabase from "@/hooks/use-database";
import { useLiveQuery } from "dexie-react-hooks"; import { useLiveQuery } from "dexie-react-hooks";
import { Avatar, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { clsx } from "clsx";
type PlayerRankingProps = { type PlayerRankingProps = {
player: ScoreSaberPlayerToken; player: ScoreSaberPlayerToken;
@ -17,6 +18,9 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
const database = useDatabase(); const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings()); const settings = useLiveQuery(() => database.getSettings());
const history = player.histories.split(",").map(Number);
const weeklyRankChange = history[history?.length - 6] - player.rank;
return ( return (
<> <>
<td className="px-4 py-2"> <td className="px-4 py-2">
@ -41,10 +45,18 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
</p> </p>
</Link> </Link>
</td> </td>
<td className="px-4 py-2 text-pp-blue">{formatPp(player.pp)}pp</td> <td className="px-4 py-2 text-pp-blue text-center">{formatPp(player.pp)}pp</td>
<td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td> <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
<td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td> <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
<td className="px-4 py-2">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td> <td className="px-4 py-2 text-center">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>
<td
className={clsx(
"px-4 py-2 text-center",
weeklyRankChange >= 0 ? weeklyRankChange != 0 && "text-green-500" : "text-red-500"
)}
>
{weeklyRankChange}
</td>
</> </>
); );
} }

13
projects/website/src/components/ranking/ranking-data.tsx
View File

@ -84,14 +84,15 @@ export default function RankingData({ initialPage, country, initialPageData }: R
<thead> <thead>
<tr> <tr>
<th className="px-4 py-2">Rank</th> <th className="px-4 py-2">Rank</th>
<th className="px-4 py-2">Profile</th> <th className="px-4 py-2">Player</th>
<th className="px-4 py-2">Performance Points</th> <th className="px-4 py-2 text-center">Performance Points</th>
<th className="px-4 py-2">Total Plays</th> <th className="px-4 py-2 text-center">Total Plays</th>
<th className="px-4 py-2">Total Ranked Plays</th> <th className="px-4 py-2 text-center">Total Ranked Plays</th>
<th className="px-4 py-2">Avg Ranked Accuracy</th> <th className="px-4 py-2 text-center">Avg Ranked Accuracy</th>
<th className="px-4 py-2 text-center">Weekly Change</th>
</tr> </tr>
</thead> </thead>
<tbody className="border-none"> <tbody className="border-none overflow-x-scroll w-full">
{players.map(player => ( {players.map(player => (
<tr key={player.rank} className="border-b border-border"> <tr key={player.rank} className="border-b border-border">
<PlayerRanking isCountry={country != undefined} player={player} /> <PlayerRanking isCountry={country != undefined} player={player} />