From 84df0c65f50d32eea45f7f0ea5f2d7217dc0d932 Mon Sep 17 00:00:00 2001
From: Freek <freek_mencke@outlook.com>
Date: Wed, 7 Feb 2024 17:42:46 +0100
Subject: [PATCH] style(skill-overview): improve styling + updated changelog

---
 CHANGELOG.md                                  |  4 ++
 .../player/player-skill.component.ts          |  6 +-
 .../player/player-skills.component.ts         | 62 +++++++++----------
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3319ef0..1f4eb75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2024/02/07
+
+- skill overview in xp tracker
+
 ## 2024/01/24
 
 - Fix scurrius being added breaking hiscores
diff --git a/src/app/common/components/player/player-skill.component.ts b/src/app/common/components/player/player-skill.component.ts
index 811f4cd..d13208e 100644
--- a/src/app/common/components/player/player-skill.component.ts
+++ b/src/app/common/components/player/player-skill.component.ts
@@ -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>
       }
diff --git a/src/app/common/components/player/player-skills.component.ts b/src/app/common/components/player/player-skills.component.ts
index e613464..8b90df0 100644
--- a/src/app/common/components/player/player-skills.component.ts
+++ b/src/app/common/components/player/player-skills.component.ts
@@ -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;
 }