forked from CSGOWTF/csgowtf
vikingowl
afd1d7a822
- sm: 6x6 → 10x10 (used in scoreboard tables) - md: 8x8 → 12x12 - lg: 12x12 → 16x16 The icons were too small to see details at 6x6 pixels. Now properly visible in the Rating column of match scoreboards. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
1.8 KiB
Svelte
70 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-10 w-10',
|
|
md: 'h-12 w-12',
|
|
lg: 'h-16 w-16'
|
|
};
|
|
|
|
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]} />
|
|
<span class="font-medium {labelSizeClasses[size]}">{rankName}</span>
|
|
</div>
|
|
{:else}
|
|
<img src={iconPath} alt={rankName} title={rankName} class={`${sizeClasses[size]} ${className}`} />
|
|
{/if}
|