profile and stats improvements
This commit is contained in:
yohlo
@@ -11,12 +11,15 @@ import {
|
||||
Title,
|
||||
ScrollArea,
|
||||
Paper,
|
||||
Popover,
|
||||
ActionIcon,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
CaretUpIcon,
|
||||
CaretDownIcon,
|
||||
ChartBarIcon,
|
||||
InfoIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import { PlayerStats } from "../types";
|
||||
import { motion } from "framer-motion";
|
||||
@@ -25,7 +28,7 @@ interface PlayerStatsTableProps {
|
||||
playerStats: PlayerStats[];
|
||||
}
|
||||
|
||||
type SortKey = keyof PlayerStats;
|
||||
type SortKey = keyof PlayerStats | 'mmr';
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
|
||||
interface SortConfig {
|
||||
@@ -36,10 +39,42 @@ interface SortConfig {
|
||||
const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
const [search, setSearch] = useState("");
|
||||
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
||||
key: 'win_percentage',
|
||||
key: 'mmr' as SortKey,
|
||||
direction: 'desc'
|
||||
});
|
||||
|
||||
// Calculate MMR (Match Making Rating) based on multiple factors
|
||||
const calculateMMR = (stat: PlayerStats): number => {
|
||||
if (stat.matches === 0) return 0;
|
||||
|
||||
// Base score from win percentage (0-100)
|
||||
const winScore = stat.win_percentage;
|
||||
|
||||
// Match confidence factor (more matches = more reliable)
|
||||
// Cap at 20 matches for full confidence
|
||||
const matchConfidence = Math.min(stat.matches / 20, 1);
|
||||
|
||||
// Performance metrics
|
||||
const avgCupsScore = Math.min(stat.avg_cups_per_match * 10, 100); // Cap at 10 avg cups
|
||||
const marginScore = stat.margin_of_victory ? Math.min(stat.margin_of_victory * 20, 50) : 0; // Cap at 2.5 margin
|
||||
|
||||
// Volume bonus for active players (small bonus for playing more)
|
||||
const volumeBonus = Math.min(stat.matches * 0.5, 10); // Max 10 point bonus
|
||||
|
||||
// Weighted calculation
|
||||
const baseMMR = (
|
||||
winScore * 0.5 + // Win % is 50% of score
|
||||
avgCupsScore * 0.25 + // Avg cups is 25% of score
|
||||
marginScore * 0.15 + // Win margin is 15% of score
|
||||
volumeBonus * 0.1 // Volume bonus is 10% of score
|
||||
);
|
||||
|
||||
// Apply confidence factor (players with few matches get penalized)
|
||||
const finalMMR = baseMMR * matchConfidence;
|
||||
|
||||
return Math.round(finalMMR * 10) / 10; // Round to 1 decimal
|
||||
};
|
||||
|
||||
const handleSort = (key: SortKey) => {
|
||||
setSortConfig(prev => ({
|
||||
key,
|
||||
@@ -58,8 +93,17 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
);
|
||||
|
||||
return filtered.sort((a, b) => {
|
||||
const aValue = a[sortConfig.key];
|
||||
const bValue = b[sortConfig.key];
|
||||
let aValue: number | string;
|
||||
let bValue: number | string;
|
||||
|
||||
// Special handling for MMR
|
||||
if (sortConfig.key === 'mmr') {
|
||||
aValue = calculateMMR(a);
|
||||
bValue = calculateMMR(b);
|
||||
} else {
|
||||
aValue = a[sortConfig.key];
|
||||
bValue = b[sortConfig.key];
|
||||
}
|
||||
|
||||
if (typeof aValue === 'number' && typeof bValue === 'number') {
|
||||
return sortConfig.direction === 'desc' ? bValue - aValue : aValue - bValue;
|
||||
@@ -79,7 +123,8 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
const formatDecimal = (value: number) => value.toFixed(2);
|
||||
|
||||
const columns = [
|
||||
{ key: 'player_name' as SortKey, label: 'Player', width: 200 },
|
||||
{ key: 'player_name' as SortKey, label: 'Player', width: 175 },
|
||||
{ key: 'mmr' as SortKey, label: 'MMR', width: 90 },
|
||||
{ key: 'win_percentage' as SortKey, label: 'Win %', width: 110 },
|
||||
{ key: 'matches' as SortKey, label: 'Matches', width: 90 },
|
||||
{ key: 'wins' as SortKey, label: 'Wins', width: 80 },
|
||||
@@ -94,11 +139,15 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
const renderCellContent = (stat: PlayerStats, column: typeof columns[0], index: number) => {
|
||||
switch (column.key) {
|
||||
case 'player_name':
|
||||
return <Text size='sm' fw={600}>{stat.player_name}</Text>
|
||||
case 'mmr':
|
||||
const mmr = calculateMMR(stat);
|
||||
return (
|
||||
<Group gap="sm">
|
||||
<Text size="xs" c="dimmed" fw={500}>#{index + 1}</Text>
|
||||
<Text fw={600}>{stat.player_name}</Text>
|
||||
</Group>
|
||||
<Box>
|
||||
<Text fw={700} size="md" c={mmr >= 70 ? "green" : mmr >= 50 ? "blue" : mmr >= 30 ? "yellow" : "red"}>
|
||||
{mmr.toFixed(1)}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
case 'win_percentage':
|
||||
return (
|
||||
@@ -143,24 +192,19 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
|
||||
return (
|
||||
<Container size="100%" px={0}>
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between" align="flex-end" wrap="wrap">
|
||||
<Stack gap="xs">
|
||||
<Title order={2}>Player Statistics</Title>
|
||||
<Text c="dimmed">
|
||||
{filteredAndSortedStats.length} of {playerStats.length} players
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Stack gap="xs">
|
||||
<Text ml='auto' size='xs' c="dimmed">
|
||||
{filteredAndSortedStats.length} of {playerStats.length} players
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder="Search players..."
|
||||
placeholder="Search players"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
leftSection={<MagnifyingGlassIcon size={16} />}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
|
||||
<Paper withBorder radius="md" p={0} style={{ overflow: 'hidden' }}>
|
||||
<ScrollArea>
|
||||
<Table
|
||||
@@ -194,6 +238,9 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
backgroundColor: 'var(--mantine-color-body)',
|
||||
borderBottom: '2px solid var(--mantine-color-default-border)',
|
||||
...(index === 0 && {
|
||||
position: 'sticky',
|
||||
left: 0,
|
||||
zIndex: 2,
|
||||
borderTopLeftRadius: 'var(--mantine-radius-md)',
|
||||
}),
|
||||
...(index === columns.length - 1 && {
|
||||
@@ -202,13 +249,63 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
}}
|
||||
onClick={() => handleSort(column.key)}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Group gap="xs" wrap="nowrap" style={{ position: 'relative' }}>
|
||||
<Text size="sm" fw={600}>
|
||||
{column.label}
|
||||
</Text>
|
||||
{column.key === 'mmr' && (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Popover position="bottom" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<InfoIcon size={12} />
|
||||
</ActionIcon>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Box maw={280}>
|
||||
<Text size="sm" fw={500} mb="xs">MMR Calculation:</Text>
|
||||
<Text size="xs" mb={2}>• Win Rate (50%)</Text>
|
||||
<Text size="xs" mb={2}>• Average Cups/Match (25%)</Text>
|
||||
<Text size="xs" mb={2}>• Average Win Margin (15%)</Text>
|
||||
<Text size="xs" mb={2}>• Match Volume Bonus (10%)</Text>
|
||||
<Text size="xs" mt="xs" c="dimmed">
|
||||
* Confidence penalty applied for players with <20 matches
|
||||
</Text>
|
||||
<Text size="xs" mt="xs" c="dimmed">
|
||||
** Not an official rating
|
||||
</Text>
|
||||
</Box>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
<Box style={{ minWidth: 16, display: 'flex', justifyContent: 'center' }}>
|
||||
{getSortIcon(column.key)}
|
||||
</Box>
|
||||
{index === 0 && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '2px',
|
||||
backgroundColor: 'var(--mantine-color-default-border)',
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
</Table.Th>
|
||||
))}
|
||||
@@ -225,15 +322,36 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
|
||||
borderBottom: '1px solid var(--mantine-color-default-border)',
|
||||
}}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
{columns.map((column, columnIndex) => (
|
||||
<Table.Td
|
||||
key={`${stat.id}-${column.key}`}
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
verticalAlign: 'middle',
|
||||
...(columnIndex === 0 && {
|
||||
position: 'sticky',
|
||||
left: 0,
|
||||
backgroundColor: 'var(--mantine-color-body)',
|
||||
zIndex: 1,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{renderCellContent(stat, column, index)}
|
||||
<div style={{ position: 'relative' }}>
|
||||
{renderCellContent(stat, column, index)}
|
||||
{columnIndex === 0 && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '2px',
|
||||
backgroundColor: 'var(--mantine-color-default-border)',
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Table.Td>
|
||||
))}
|
||||
</motion.tr>
|
||||
|
||||
Reference in New Issue
Block a user