Skip to content

Commit

Permalink
style(skill-overview): improve styling + updated changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@FreekMencke
FreekMencke committed Feb 7, 2024
1 parent ce8b2df commit 84df0c6
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 37 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2024/02/07

- skill overview in xp tracker

## 2024/01/24

- Fix scurrius being added breaking hiscores
Expand Down
6 changes: 3 additions & 3 deletions src/app/common/components/player/player-skill.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { IconDirective } from '../../directives/icon/icon.directive';
standalone: true,
selector: 'player-skill',
template: `
<div class="p-2 flex gap-8 items-center justify-center">
<div class="p-2 flex items-center justify-center">
@if (skill) {
<img icon [name]="skill.name" class="w-6 h-6 " />
<div class="text-lg font-bold">{{ skill.level }}</div>
<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>
}
Expand Down
62 changes: 28 additions & 34 deletions src/app/common/components/player/player-skills.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,42 @@ import { PlayerSkillWidgetComponent } from './player-skill.component';
selector: 'player-skills',
template: `
<section class="grid grid-cols-3 p-2 shadow-lg rounded-lg bg-slate-100 dark:bg-slate-800">
<player-skill [skill]="skills?.Attack" class="border border-slate-300 dark:border-slate-600 rounded-tl-lg" />
<player-skill [skill]="skills?.Hitpoints" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Mining" class="border border-slate-300 dark:border-slate-600 rounded-tr-lg" />
<player-skill [skill]="skills?.Strength" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Agility" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Smithing" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Defence" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Herblore" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Fishing" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Ranged" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Thieving" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Cooking" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Prayer" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Crafting" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Firemaking" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Magic" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Fletching" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Woodcutting" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Runecraft" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Slayer" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Farming" class="border border-slate-300 dark:border-slate-600" />
<player-skill
[skill]="hiscore?.skills?.Attack"
class="border border-slate-300 dark:border-slate-600 rounded-tl-lg"
/>
<player-skill [skill]="hiscore?.skills?.Hitpoints" class="border border-slate-300 dark:border-slate-600" />
<player-skill
[skill]="hiscore?.skills?.Mining"
class="border border-slate-300 dark:border-slate-600 rounded-tr-lg"
/>
<player-skill [skill]="hiscore?.skills?.Strength" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Agility" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Smithing" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Defence" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Herblore" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Fishing" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Ranged" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Thieving" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Cooking" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Prayer" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Crafting" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Firemaking" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Magic" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Fletching" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Woodcutting" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Runecraft" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Slayer" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="hiscore?.skills?.Farming" class="border border-slate-300 dark:border-slate-600" />
<player-skill
[skill]="hiscore?.skills?.Construction"
[skill]="skills?.Construction"
class="border border-slate-300 dark:border-slate-600 rounded-bl-lg"
/>
<player-skill [skill]="hiscore?.skills?.Hunter" class="border border-slate-300 dark:border-slate-600" />
<player-skill
[skill]="hiscore?.skills?.Overall"
class="border border-slate-300 dark:border-slate-600 rounded-br-lg"
/>
<player-skill [skill]="skills?.Hunter" class="border border-slate-300 dark:border-slate-600" />
<player-skill [skill]="skills?.Overall" class="border border-slate-300 dark:border-slate-600 rounded-br-lg" />
</section>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [IconDirective, PlayerSkillWidgetComponent],
})
export class PlayerSkillsWidgetComponent {
get skills(): Hiscore['skills'] | undefined {
return this.hiscore?.skills;
}

@Input() hiscore?: Hiscore;
}

0 comments on commit 84df0c6

Please sign in to comment.