vikingowl
2e053a6388
- Set Rating column table cells to fixed height (h-12 = 48px) - Wrap icons in flex container for vertical centering - Reduce icon size from 14x14 to 11x11 to fit within row height - Add max-h-11 constraint to prevent overflow - Add inline-block and align-middle to icon for proper alignment This ensures all table rows remain the same height regardless of whether they show rank icons or Premier rating badges. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
75 lines
1.8 KiB
Svelte
75 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* CS:GO Skill Group Rank Icon Component
|
|
* Displays the appropriate rank icon based on skill group (0-18)
|
|
*/
|
|
interface Props {
|
|
/** CS:GO skill group (0-18) */
|
|
skillGroup: number | undefined | null;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
class?: string;
|
|
}
|
|
|
|
let { skillGroup, size = 'md', showLabel = false, class: className = '' }: Props = $props();
|
|
|
|
// Map skill groups to rank names
|
|
const rankNames: Record<number, string> = {
|
|
0: 'Unranked',
|
|
1: 'Silver I',
|
|
2: 'Silver II',
|
|
3: 'Silver III',
|
|
4: 'Silver IV',
|
|
5: 'Silver Elite',
|
|
6: 'Silver Elite Master',
|
|
7: 'Gold Nova I',
|
|
8: 'Gold Nova II',
|
|
9: 'Gold Nova III',
|
|
10: 'Gold Nova Master',
|
|
11: 'Master Guardian I',
|
|
12: 'Master Guardian II',
|
|
13: 'Master Guardian Elite',
|
|
14: 'Distinguished Master Guardian',
|
|
15: 'Legendary Eagle',
|
|
16: 'Legendary Eagle Master',
|
|
17: 'Supreme Master First Class',
|
|
18: 'The Global Elite'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'h-11 w-11 max-h-11',
|
|
md: 'h-16 w-16',
|
|
lg: 'h-20 w-20'
|
|
};
|
|
|
|
const labelSizeClasses = {
|
|
sm: 'text-xs',
|
|
md: 'text-sm',
|
|
lg: 'text-base'
|
|
};
|
|
|
|
const iconPath = $derived(
|
|
skillGroup !== undefined && skillGroup !== null && skillGroup >= 0 && skillGroup <= 18
|
|
? `/images/rank_icons/skillgroup${skillGroup}.svg`
|
|
: '/images/rank_icons/skillgroup_none.svg'
|
|
);
|
|
|
|
const rankName = $derived(
|
|
skillGroup !== undefined && skillGroup !== null ? rankNames[skillGroup] || 'Unknown' : 'Unknown'
|
|
);
|
|
</script>
|
|
|
|
{#if showLabel}
|
|
<div class="inline-flex items-center gap-2 {className}">
|
|
<img src={iconPath} alt={rankName} class="{sizeClasses[size]} object-contain" />
|
|
<span class="font-medium {labelSizeClasses[size]}">{rankName}</span>
|
|
</div>
|
|
{:else}
|
|
<img
|
|
src={iconPath}
|
|
alt={rankName}
|
|
title={rankName}
|
|
class="{sizeClasses[size]} {className} inline-block object-contain align-middle"
|
|
/>
|
|
{/if}
|