CSStats+

Before vs After

CSStats+ improves readability, navigation, and visual consistency across CSStats pages.

Quick highlights

• Navigation: click a match from history to open its CSStats match page directly.
• Maps data: full map names, proper sorting, and SVG icons when available.
• Ranks UI: clearer rank progression (up/down), better empty states, and separated rank contexts.
• Visual quality: sharper SVG assets and cleaner layout alignment.
• Data clarity: more complete stats presentation with less clutter.

Player Profile

Main tab

Before	After

Changes

• Match history entries are now clickable.
• Most-played / success maps now show complete data (not only top 5).
• Full map names replace technical filenames.
• Map rows are properly sorted and include map icons.
• Match count + win rate are both displayed.
• Rank area is less cluttered and easier to browse.
• Premier rank history can be navigated with arrows.
• Community Maps ranks are shown separately.
• Rank elements can be clicked to filter related data.
• Stats charts are visually improved and flag unusually high values in orange.

Maps tab

Before	After

Changes

• Larger map icons.
• SVG map icons used when available.
• Full map names for better readability.

Matches tab

Before	After

Changes

• Competitive, Wingman, and FACEIT ranks rendered in SVG.
• Competitive/Wingman now show rank change target (up/down) instead of only final rank.
• Full map names and improved icon quality.

Matches

Overview

Before	After

Changes

• Wingman average rank is fetched and displayed.
• FACEIT / Competitive / Wingman average-rank icons use SVG.
• Map icons use SVG when available.

Match page

Header improvements

• Map icon centered in the match details header.
• Full map name displayed below the icon.
• Average rank icon shown under the map name.
• Tie score blue uses a color closer to the CSStats theme.

• Competitive

  Before	After

  Changes

  • Rank up/down is clearer with directional arrows.
  • Previous and new rank icons are shown together.
  • Missing rank now shows an explicit “unknown rank” icon.
• Wingman

  Before	After

  Changes

  • Rank up/down is clearer with arrows + icon transition.
  • Wingman-specific rank icons are used.
  • Missing rank now shows the “unknown rank” icon.
• FACEIT

  Before	After

  Changes

  • FACEIT level icons are larger and rendered in SVG.
• Premier

  Before	After

  Changes

  • Missing rank now shows a clear --- placeholder.