-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(skills-overview): added xp tooltips to skills overview
fix #28
- Loading branch information
1 parent
595f870
commit 57c39da
Showing
4 changed files
with
95 additions
and
44 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| ## 2024/02/28 | ||
|
|
||
| - Added xp tooltips to the skills overview in xp tracker | ||
|
|
||
| ## 2024/02/27 | ||
|
|
||
| - updated dependencies | ||
|
|
||
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
48 changes: 39 additions & 9 deletions
48
src/app/common/components/player/player-skill.component.ts
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 |
|---|---|---|
| @@ -1,23 +1,53 @@ | ||
| import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; | ||
| import { Skill } from '@osrs-tracker/hiscores'; | ||
| import { DecimalPipe } from '@angular/common'; | ||
| import { ChangeDetectionStrategy, Component, InputSignal, input } from '@angular/core'; | ||
| import { Skill, calculateXPForSkillLevel, calculateXPToNextLevel } from '@osrs-tracker/hiscores'; | ||
| import { IconDirective } from '../../directives/icon/icon.directive'; | ||
| import { TooltipComponent } from '../general/tooltip/tooltip.component'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'player-skill', | ||
| template: ` | ||
| <div class="p-2 flex items-center justify-center"> | ||
| @if (skill) { | ||
| <img icon [name]="skill.name" class="flex-1 h-6" /> | ||
| <div class="flex-1 text-lg font-bold">{{ skill.level }}</div> | ||
| <div | ||
| class="p-2 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700" | ||
| tooltip | ||
| [tooltipTemplate]="tooltipTemplate" | ||
| [tooltipUnderline]="false" | ||
| > | ||
| @if (skill()) { | ||
| <img icon [name]="skill()!.name" class="flex-1 h-6" /> | ||
| <div class="flex-1 text-lg font-bold">{{ skill()!.level }}</div> | ||
| } @else { | ||
| <div class="animate-pulse h-5 w-20 my-1 rounded-xl bg-slate-300 dark:bg-slate-700"></div> | ||
| <div class="animate-pulse h-5 w-20 my-1 rounded-lg bg-slate-300 dark:bg-slate-700"></div> | ||
| } | ||
| </div> | ||
| <ng-template #tooltipTemplate> | ||
| <div class="flex justify-between gap-4"> | ||
| <div> | ||
| <div>{{ skill()?.name }} XP:</div> | ||
| <div>Next Level at:</div> | ||
| <div>Remaining XP:</div> | ||
| </div> | ||
| <div class="text-right"> | ||
| <div>{{ skill()?.xp | number }}</div> | ||
| <div>{{ xpForNextLevel | number }}</div> | ||
| <div>{{ xpToNextLevel | number }}</div> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| `, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| imports: [IconDirective], | ||
| imports: [IconDirective, TooltipComponent, DecimalPipe], | ||
| }) | ||
| export class PlayerSkillWidgetComponent { | ||
| @Input() skill?: Skill; | ||
| skill: InputSignal<Skill | undefined> = input(); | ||
|
|
||
| get xpToNextLevel(): number { | ||
| return calculateXPToNextLevel(this.skill()?.xp ?? 0, this.skill()?.level ?? 1); | ||
| } | ||
|
|
||
| get xpForNextLevel(): number { | ||
| return calculateXPForSkillLevel((this.skill()?.level ?? 1) + 1); | ||
| } | ||
| } |
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