-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
372 additions
and
386 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
214 changes: 214 additions & 0 deletions
214
src/renderer/src-main-window/components/RankedTable.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| <template> | ||
| <table class="ranked-stats-table"> | ||
| <colgroup></colgroup> | ||
| <thead> | ||
| <tr> | ||
| <th>队列</th> | ||
| <th>当前段位</th> | ||
| <th>胜点</th> | ||
| <th>胜局</th> | ||
| <th>负局</th> | ||
| <th>上赛季末段位</th> | ||
| <th>上赛季最高段位</th> | ||
| <th>历史最高段位</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="r of sortedQueues" :key="r.queueType"> | ||
| <td>{{ formatQueueName(r.queueType) }}</td> | ||
| <td> | ||
| <div class="tier"> | ||
| <img | ||
| v-if="RANKED_MEDAL_MAP[r.tier]" | ||
| :src="RANKED_MEDAL_MAP[r.tier]" | ||
| alt="tier" | ||
| class="tier-img" | ||
| /> | ||
| {{ formatTierDivision(r, 'current') }} | ||
| </div> | ||
| </td> | ||
| <td>{{ formatPoints(r) }}</td> | ||
| <td>{{ formatWins(r) }}</td> | ||
| <td>{{ formatLosses(r.losses) }}</td> | ||
| <td> | ||
| <div class="tier"> | ||
| <img | ||
| v-if="RANKED_MEDAL_MAP[r.previousSeasonEndTier]" | ||
| :src="RANKED_MEDAL_MAP[r.previousSeasonEndTier]" | ||
| alt="tier" | ||
| class="tier-img" | ||
| /> | ||
| {{ formatTierDivision(r, 'previousSeasonEnd') }} | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div class="tier"> | ||
| <img | ||
| v-if="RANKED_MEDAL_MAP[r.previousSeasonHighestTier]" | ||
| :src="RANKED_MEDAL_MAP[r.previousSeasonHighestTier]" | ||
| alt="tier" | ||
| class="tier-img" | ||
| /> | ||
| {{ formatTierDivision(r, 'previousSeasonHighest') }} | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div class="tier"> | ||
| <img | ||
| v-if="RANKED_MEDAL_MAP[r.highestTier]" | ||
| :src="RANKED_MEDAL_MAP[r.highestTier]" | ||
| alt="tier" | ||
| class="tier-img" | ||
| /> | ||
| {{ formatTierDivision(r, 'highest') }} | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { RankedEntry, RankedStats } from '@shared/types/lcu/ranked' | ||
| import { QUEUE_TYPE_TEXT, TIER_TEXT } from '@shared/utils/ranked' | ||
| import BronzeMedal from '@main-window/assets/ranked-icons/bronze.png' | ||
| import ChallengerMedal from '@main-window/assets/ranked-icons/challenger.png' | ||
| import DiamondMedal from '@main-window/assets/ranked-icons/diamond.png' | ||
| import EmeraldMedal from '@main-window/assets/ranked-icons/emerald.png' | ||
| import GoldMedal from '@main-window/assets/ranked-icons/gold.png' | ||
| import GrandmasterMedal from '@main-window/assets/ranked-icons/grandmaster.png' | ||
| import IronMedal from '@main-window/assets/ranked-icons/iron.png' | ||
| import MasterMedal from '@main-window/assets/ranked-icons/master.png' | ||
| import PlatinumMedal from '@main-window/assets/ranked-icons/platinum.png' | ||
| import SilverMedal from '@main-window/assets/ranked-icons/silver.png' | ||
| const { rankedStats } = defineProps<{ | ||
| rankedStats: RankedStats | ||
| }>() | ||
| const RANKED_MEDAL_MAP: Record<string, string> = { | ||
| IRON: IronMedal, | ||
| BRONZE: BronzeMedal, | ||
| SILVER: SilverMedal, | ||
| GOLD: GoldMedal, | ||
| PLATINUM: PlatinumMedal, | ||
| EMERALD: EmeraldMedal, | ||
| DIAMOND: DiamondMedal, | ||
| MASTER: MasterMedal, | ||
| GRANDMASTER: GrandmasterMedal, | ||
| CHALLENGER: ChallengerMedal | ||
| } | ||
| const QUEUE_TYPE_ORDER: Record<string, number> = { | ||
| RANKED_SOLO_5x5: 1, | ||
| RANKED_FLEX_SR: 2, | ||
| CHERRY: 3, | ||
| RANKED_TFT: 4, | ||
| RANKED_TFT_TURBO: 5, | ||
| RANKED_TFT_DOUBLE_UP: 6 | ||
| } | ||
| const formatQueueName = (queueType: string) => { | ||
| return QUEUE_TYPE_TEXT[queueType] || queueType | ||
| } | ||
| const formatWins = (entry: RankedEntry) => { | ||
| if (entry.queueType === 'CHERRY') { | ||
| return entry.ratedTier === 'NONE' ? '—' : entry.wins | ||
| } | ||
| if (!entry.tier || entry.tier === 'NA') { | ||
| return '—' | ||
| } | ||
| return entry.wins | ||
| } | ||
| const formatPoints = (entry: RankedEntry) => { | ||
| if (entry.queueType === 'CHERRY') { | ||
| return entry.ratedTier === 'NONE' ? '—' : entry.ratedRating | ||
| } | ||
| if (!entry.tier || entry.tier === 'NA') { | ||
| return '—' | ||
| } | ||
| return entry.leaguePoints | ||
| } | ||
| const sortedQueues = rankedStats.queues.sort((a, b) => { | ||
| return QUEUE_TYPE_ORDER[a.queueType] - QUEUE_TYPE_ORDER[b.queueType] | ||
| }) | ||
| const formatTierDivision = (entry: RankedEntry, type: string) => { | ||
| let tier: string | ||
| let division: string | ||
| switch (type) { | ||
| case 'current': | ||
| tier = entry.tier | ||
| division = entry.division | ||
| break | ||
| case 'previousSeasonEnd': | ||
| tier = entry.previousSeasonEndTier | ||
| division = entry.previousSeasonEndDivision | ||
| break | ||
| case 'previousSeasonHighest': | ||
| tier = entry.previousSeasonHighestTier | ||
| division = entry.previousSeasonHighestDivision | ||
| break | ||
| case 'highest': | ||
| tier = entry.highestTier | ||
| division = entry.highestDivision | ||
| break | ||
| default: | ||
| tier = '' | ||
| division = '' | ||
| } | ||
| if (!tier || tier === 'NA') { | ||
| return '—' | ||
| } | ||
| if (!division || division === 'NA') { | ||
| return TIER_TEXT[tier] || tier | ||
| } | ||
| return `${TIER_TEXT[tier] || tier} ${division}` | ||
| } | ||
| const formatLosses = (losses: number) => { | ||
| return losses || '—' | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="less" scoped> | ||
| // 轻度边框 | ||
| .ranked-stats-table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| border: 1px solid #ffffff40; | ||
| font-size: 12px; | ||
| color: #d4d4d4; | ||
| th, | ||
| td { | ||
| border: 1px solid #ffffff40; | ||
| padding: 0 4px; | ||
| text-align: center; | ||
| } | ||
| .tier { | ||
| display: flex; | ||
| gap: 4px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| .tier-img { | ||
| width: 16px; | ||
| height: 16px; | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.