From 57c39da301cd3a368ea8706283324f2cbb8f9224 Mon Sep 17 00:00:00 2001
From: Freek <freek_mencke@outlook.com>
Date: Wed, 28 Feb 2024 16:13:56 +0100
Subject: [PATCH] feat(skills-overview): added xp tooltips to skills overview

fix #28
---
 CHANGELOG.md                                  |  4 +
 .../general/tooltip/tooltip.component.ts      |  5 +-
 .../player/player-skill.component.ts          | 48 +++++++++--
 .../player/player-skills.component.ts         | 82 +++++++++++--------
 4 files changed, 95 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a9942f..c5c05f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2024/02/28
+
+- Added xp tooltips to the skills overview in xp tracker
+
 ## 2024/02/27
 
 - updated dependencies
diff --git a/src/app/common/components/general/tooltip/tooltip.component.ts b/src/app/common/components/general/tooltip/tooltip.component.ts
index a6f2ed1..78d322a 100644
--- a/src/app/common/components/general/tooltip/tooltip.component.ts
+++ b/src/app/common/components/general/tooltip/tooltip.component.ts
@@ -61,6 +61,7 @@ export class TooltipComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostBinding('class.cursor-help') cursorHelp = true;
 
   @Input() tooltipTemplate: TemplateRef<unknown>;
+  @Input() tooltipUnderline: boolean = true;
   @ViewChild('tooltipTemplateArrow') tooltipTemplateArrow: TemplateRef<unknown>;
   @ViewChild('tooltipTemplateContainer') tooltipTemplateContainer: TemplateRef<unknown>;
 
@@ -85,7 +86,9 @@ export class TooltipComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.elementRef.nativeElement.classList.add('underline', 'underline-offset-[6px]', 'decoration-dotted');
+    if (this.tooltipUnderline) {
+      this.elementRef.nativeElement.classList.add('underline', 'underline-offset-[6px]', 'decoration-dotted');
+    }
   }
 
   ngAfterViewInit(): void {
diff --git a/src/app/common/components/player/player-skill.component.ts b/src/app/common/components/player/player-skill.component.ts
index d13208e..c75b248 100644
--- a/src/app/common/components/player/player-skill.component.ts
+++ b/src/app/common/components/player/player-skill.component.ts
@@ -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);
+  }
 }
diff --git a/src/app/common/components/player/player-skills.component.ts b/src/app/common/components/player/player-skills.component.ts
index 8b90df0..5a8a785 100644
--- a/src/app/common/components/player/player-skills.component.ts
+++ b/src/app/common/components/player/player-skills.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, InputSignal, Signal, computed, input } from '@angular/core';
 import { Hiscore } from '@osrs-tracker/hiscores';
 import { IconDirective } from '../../directives/icon/icon.directive';
 import { PlayerSkillWidgetComponent } from './player-skill.component';
@@ -7,43 +7,57 @@ import { PlayerSkillWidgetComponent } from './player-skill.component';
   standalone: true,
   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]="skills?.Construction"
-        class="border border-slate-300 dark:border-slate-600 rounded-bl-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 class="p-2 shadow-lg rounded-lg bg-slate-100 dark:bg-slate-800">
+      <div
+        class="overflow-hidden border rounded-xl divide-y border-slate-300 dark:border-slate-600 divide-slate-300 dark:divide-slate-600"
+      >
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Attack" class="rounded-tl-lg" />
+          <player-skill [skill]="skills()?.Hitpoints" />
+          <player-skill [skill]="skills()?.Mining" class="rounded-tr-lg" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Strength" />
+          <player-skill [skill]="skills()?.Agility" />
+          <player-skill [skill]="skills()?.Smithing" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Defence" />
+          <player-skill [skill]="skills()?.Herblore" />
+          <player-skill [skill]="skills()?.Fishing" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Ranged" />
+          <player-skill [skill]="skills()?.Thieving" />
+          <player-skill [skill]="skills()?.Cooking" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Prayer" />
+          <player-skill [skill]="skills()?.Crafting" />
+          <player-skill [skill]="skills()?.Firemaking" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Magic" />
+          <player-skill [skill]="skills()?.Fletching" />
+          <player-skill [skill]="skills()?.Woodcutting" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Runecraft" />
+          <player-skill [skill]="skills()?.Slayer" />
+          <player-skill [skill]="skills()?.Farming" />
+        </div>
+        <div class="grid grid-cols-3 divide-x divide-slate-300 dark:divide-slate-600">
+          <player-skill [skill]="skills()?.Construction" class=" rounded-bl-lg" />
+          <player-skill [skill]="skills()?.Hunter" />
+          <player-skill [skill]="skills()?.Overall" class=" rounded-br-lg" />
+        </div>
+      </div>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [IconDirective, PlayerSkillWidgetComponent],
 })
 export class PlayerSkillsWidgetComponent {
-  get skills(): Hiscore['skills'] | undefined {
-    return this.hiscore?.skills;
-  }
-
-  @Input() hiscore?: Hiscore;
+  hiscore: InputSignal<Hiscore | undefined> = input();
+  skills: Signal<Hiscore['skills'] | undefined> = computed(() => this.hiscore()?.skills);
 }