MatchScheduleArenaRank Arena Ranking

Arena match ranking component for displaying top three players in podium layout, supporting custom player information and interactive operations.

Import

import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';

Code Demo

Basic Usage

Display top three players in podium layout, automatically arranged in 2nd-1st-3rd order.

<template>
  <PressMatchScheduleArenaRank
    :players="players"
    @view-ranking-click="handleViewRankingClick"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';

interface Player {
  id?: string | number;
  rank: number;
  nickname: string;
  avatar: string;
  killCount: number;
}

const players: Player[] = [
  {
    id: 1,
    rank: 2,
    nickname: 'Silver Player',
    avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4',
    killCount: 12,
  },
  {
    id: 2,
    rank: 1,
    nickname: 'Gold Player',
    avatar: 'https://avatars.githubusercontent.com/u/499550?v=4',
    killCount: 15,
  },
  {
    id: 3,
    rank: 3,
    nickname: 'Bronze Player',
    avatar: 'https://avatars.githubusercontent.com/u/9919?v=4',
    killCount: 10,
  },
];

const handleViewRankingClick = () => {
  console.log('View full ranking');
};
</script>

Custom Footer Button

Customize footer button content through slots.

<template>
  <PressMatchScheduleArenaRank :players="players">
    <template #foot-btn>
      <PressButton
        type="primary"
        block
        @click="handleCustomAction"
      >
        Custom Action
      </PressButton>
    </template>
  </PressMatchScheduleArenaRank>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';
import { PressButton } from 'press-ui';

const players = ref([
  { id: 1, rank: 1, nickname: 'Gold Player', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 15 },
  { id: 2, rank: 2, nickname: 'Silver Player', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 12 },
  { id: 3, rank: 3, nickname: 'Bronze Player', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 10 },
]);

const handleCustomAction = () => {
  console.log('Custom action');
};
</script>

Dynamic Data Update

Support dynamic update of player ranking data.

<template>
  <div>
    <PressMatchScheduleArenaRank :players="currentPlayers" />
    <PressButton
      type="primary"
      block
      style="margin-top: 16px;"
      @click="updateRanking"
    >
      Update Ranking
    </PressButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';
import { PressButton } from 'press-ui';

const currentPlayers = ref([
  { id: 1, rank: 1, nickname: 'Player A', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 20 },
  { id: 2, rank: 2, nickname: 'Player B', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 18 },
  { id: 3, rank: 3, nickname: 'Player C', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 15 },
]);

const updateRanking = () => {
  // Simulate ranking change
  currentPlayers.value = [
    { id: 2, rank: 1, nickname: 'Player B', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 25 },
    { id: 1, rank: 2, nickname: 'Player A', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 22 },
    { id: 3, rank: 3, nickname: 'Player C', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 20 },
  ];
};
</script>

API

Props

Attribute	Description	Type	Default
players	Player list data	Player[]	[]

Player Data Structure

Property	Description	Type	Required
id	Player unique identifier	string | number	No
rank	Player ranking	number	Yes
nickname	Player nickname	string	Yes
avatar	Player avatar URL	string	Yes
killCount	Kill count	number	Yes

Events

Event	Description	Callback Parameters
view-ranking-click	Emitted when view ranking button is clicked	-

Slots

Name	Description
foot-btn	Custom footer button content

Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

Style Variables

Spacing System

Name	Default Value	Description
--pmsar-list-mb	$spacing-xl	List bottom margin
--pmsar-list-gap	$spacing-sm	List item gap
--pmsar-stats-padding-lr	$spacing-sm	Stats left/right padding
--pmsar-container-padding-tb	.4rem	Container vertical padding
--pmsar-container-padding-lr	.28rem	Container horizontal padding
--pmsar-badge-offset-y	-.24rem	Badge bottom offset
--pmsar-nickname-first-mt	.56rem	First place nickname top margin
--pmsar-nickname-second-mt	.4rem	Second place nickname top margin
--pmsar-nickname-third-mt	.36rem	Third place nickname top margin
--pmsar-stats-mt	$spacing-xs	Stats top margin

Size System

Name	Default Value	Description
--pmsar-avatar-size	1rem	Avatar size
--pmsar-item-first-height	3.2rem	First place height
--pmsar-item-second-height	2.76rem	Second place height
--pmsar-item-third-height	2.56rem	Third place height
--pmsar-badge-width-size	.44rem	Badge width
--pmsar-badge-height-size	.48rem	Badge height
--pmsar-nickname-width	1.8rem	Nickname max width
--pmsar-stats-height	.36rem	Stats line height
--pmsar-stats-width	1.6rem	Stats max width

Color System

Name	Default Value	Description
--pmsar-container-bg	$color-surface-default	Container background
--pmsar-avatar-border-color	$color-border-brand	Avatar border color
--pmsar-badge-bg	red	Badge background
--pmsar-nickname-text-color	$color-text-primary	Nickname text color
--pmsar-stats-bg	rgba(54, 111, 244, .3)	Stats background
--pmsar-stats-color	$color-text-invert-light	Stats text color
--pmsar-item-bg	url(...)	Item background image
--pmsar-item-badge-bg1	url(...)	First place badge image
--pmsar-item-badge-bg2	url(...)	Second place badge image
--pmsar-item-badge-bg3	url(...)	Third place badge image

Typography System

Name	Default Value	Description
--pmsar-nickname-font-size	$font-size-md	Nickname font size
--pmsar-stats-font-size	$font-size-sm	Stats font size
--pmsar-nickname-font-weight	500	Nickname font weight

Border Radius System

Name	Default Value	Description
--pmsar-container-border-radius	0	Container border radius
--pmsar-avatar-border-radius	50%	Avatar border radius
--pmsar-stats-border-radius	.28rem	Stats border radius

Others

Name	Default Value	Description
--pmsar-badge-text-indent	-999em	Hide badge text

FAQ

How to customize ranking badge images?

You can customize the badge background images for top three players through CSS variables:

<template>
  <PressMatchScheduleArenaRank
    :players="players"
    custom-class="custom-badge"
  />
</template>

<style>
.custom-badge {
  --pmsar-item-badge-bg1: url('your-first-badge.png');
  --pmsar-item-badge-bg2: url('your-second-badge.png');
  --pmsar-item-badge-bg3: url('your-third-badge.png');
}
</style>

How to handle avatar loading failures?

It's recommended to provide default avatars at the data layer:

const playersWithFallback = players.map(player => ({
  ...player,
  avatar: player.avatar || 'https://example.com/default-avatar.png',
}));

What is the podium arrangement order?

The component automatically arranges in podium layout: 2nd (left) - 1st (center) - 3rd (right), no need to manually adjust data order.

How to customize heights for different rankings?

You can set heights for top three players separately through CSS variables:

.custom-height {
  --pmsar-item-first-height: 3.5rem;
  --pmsar-item-second-height: 3rem;
  --pmsar-item-third-height: 2.8rem;
}