This commit is contained in:
Joonas 2023-01-22 14:23:30 +02:00
parent 62b61630c9
commit 0b4d96402a
1 changed files with 59 additions and 61 deletions

View File

@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useState } from "react";
export function County({ county }) {
const [sort, setSort] = useState({
@ -6,31 +6,6 @@ export function County({ county }) {
type: "desc",
});
const sortMemo = useMemo(
() =>
county.players.sort((a, b) => {
if (sort.field === "rank")
return sort.type === "desc"
? parseInt(a.rank) - parseInt(b.rank)
: parseInt(b.rank) - parseInt(a.rank);
if (sort.field === "score")
return sort.type === "desc" ? a.score - b.score : b.score - a.score;
if (sort.field === "SS")
return sort.type === "desc"
? a.SSranks - b.SSranks
: b.SSranks - a.SSranks;
if (sort.field === "S")
return sort.type === "desc"
? a.Sranks - b.Sranks
: b.Sranks - a.Sranks;
if (sort.field === "A")
return sort.type === "desc"
? a.Aranks - b.Aranks
: b.Aranks - a.Aranks;
}),
[sort.field, sort.type, county.players]
);
return (
<li
className="mx-0 my-4 flex w-full max-w-3xl flex-shrink-0 flex-col space-y-4 overflow-auto
@ -152,41 +127,64 @@ export function County({ county }) {
</tr>
</thead>
<tbody>
{sortMemo.map((player, index) => (
<tr
key={player.id}
className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
>
<td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
{index + 1}.
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
<a
className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
href={`https://osu.ppy.sh/u/${player.playerName}`}
referrerPolicy="no-referrer"
target="_blank"
>
{player.playerName}
</a>
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.rank ? `#${player.rank}` : "-"}
</td>
<td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
{new Intl.NumberFormat().format(player.score)}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.SSranks}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.Sranks}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.Aranks}
</td>
</tr>
))}
{county.players
.sort((a, b) => {
if (sort.field === "rank")
return sort.type === "desc"
? parseInt(a.rank) - parseInt(b.rank)
: parseInt(b.rank) - parseInt(a.rank);
if (sort.field === "score")
return sort.type === "desc"
? a.score - b.score
: b.score - a.score;
if (sort.field === "SS")
return sort.type === "desc"
? a.SSranks - b.SSranks
: b.SSranks - a.SSranks;
if (sort.field === "S")
return sort.type === "desc"
? a.Sranks - b.Sranks
: b.Sranks - a.Sranks;
if (sort.field === "A")
return sort.type === "desc"
? a.Aranks - b.Aranks
: b.Aranks - a.Aranks;
})
.map((player, index) => (
<tr
key={player.id}
className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
>
<td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
{index + 1}.
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
<a
className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
href={`https://osu.ppy.sh/u/${player.playerName}`}
referrerPolicy="no-referrer"
target="_blank"
>
{player.playerName}
</a>
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.rank ? `#${player.rank}` : "-"}
</td>
<td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
{new Intl.NumberFormat().format(player.score)}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.SSranks}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.Sranks}
</td>
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
{player.Aranks}
</td>
</tr>
))}
</tbody>
</table>
) : (