Rework UI when adding point to skills

Gnome-Archiviste · Apr 14, 2024 · 7abbcd2 · 7abbcd2
1 parent 4981669
commit 7abbcd2
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 28 deletions.
diff --git a/src/app/actor/character-skill.component.html b/src/app/actor/character-skill.component.html
@@ -1,6 +1,13 @@
 <div class="skill" [class.has-additional-point]="hadAdditionalBasePoint$">
     <span class="name">
         <span class="open-menu" [cdkMenuTriggerFor]="menu">{{ skillDefinition.name }}</span>
+        <div class="visual-points" *ngIf="canEditPoint$ | async">
+            @for (point of activePoints$ | async; track $index) {
+                <span class="active-point basic-point"></span>
+            }
+            <span *ngIf="master$ | async" class="active-point master-point"></span>
+            <span *ngIf="prodigy$ | async" class="active-point prodigy-point"></span>
+        </div>
     </span>
     <span class="value" [class.manual-value]="manualMode$ | async">
         <ng-container *ngIf="manualMode$ | async; else static">
@@ -19,20 +26,23 @@
         {{ totalValue$ | async }}
     </span>
     <span class="master-prodigy">
-        <input *ngIf="master$ | async" [checked]="masterUsed$ | async" (change)="toggleMasterUse($event)" type="checkbox" [disabled]="prodigyUsed$ | async">
-        <input *ngIf="prodigy$ | async" [checked]="prodigyUsed$ | async" (change)="toggleProdigyUse($event)" type="checkbox" [disabled]="!(masterUsed$ | async)">
-    </span>
-</div>
-<div class="add-remove-point" *ngIf="(haveAvailableSkillPoints$ | async) || (havePendingSkillPoints | async)">
-    <span>
-        <button class="remove-point" *ngIf="canRemovePoint$ | async" (click)="removePoint()">
-            -
-        </button>
-    </span>
-    <span>
-        <button class="add-point" *ngIf="canAddPoint$ | async" (click)="addPoint()">
-            +
-        </button>
+        @if (canEditPoint$ | async) {
+            <div class="add-remove-point">
+                <span>
+                    <button class="remove-point" *ngIf="canRemovePoint$ | async" (click)="removePoint()">
+                        -
+                    </button>
+                </span>
+                <span>
+                    <button class="add-point" *ngIf="canAddPoint$ | async" (click)="addPoint()">
+                        +
+                    </button>
+                </span>
+            </div>
+        } @else {
+            <input *ngIf="master$ | async" [checked]="masterUsed$ | async" (change)="toggleMasterUse($event)" type="checkbox" [disabled]="prodigyUsed$ | async">
+            <input *ngIf="prodigy$ | async" [checked]="prodigyUsed$ | async" (change)="toggleProdigyUse($event)" type="checkbox" [disabled]="!(masterUsed$ | async)">
+        }
     </span>
 </div>
 

diff --git a/src/app/actor/character-skill.component.scss b/src/app/actor/character-skill.component.scss
@@ -9,6 +9,7 @@
   }
 
   .name {
+    position: relative;
     margin-block: 5px;
     .open-menu {
       text-decoration: underline;
@@ -43,21 +44,24 @@
   margin-top: 8px;
   width: 52px;
   margin-left: auto;
-  margin-right: 100px;
   display: flex;
   gap: 8px;
   justify-content: space-between;
 
-  .add-point {
+  .add-point,
+  .remove-point {
     display: grid;
     justify-items: center;
     align-content: center;
     padding: 0;
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
+    border-radius: 0;
+  }
+
+  .add-point {
     background-color: #bbdfab;
     border: 1px solid #2fad44;
-    border-radius: 0;
 
     &:hover,
     &:focus {
@@ -66,15 +70,8 @@
   }
 
   .remove-point {
-    display: grid;
-    justify-items: center;
-    align-content: center;
-    padding: 0;
-    width: 20px;
-    height: 20px;
     background-color: #dfabab;
     border: 1px solid #ad2f2f;
-    border-radius: 0;
 
     &:hover,
     &:focus {
@@ -83,6 +80,26 @@
   }
 }
 
+.visual-points {
+  position: absolute;
+  bottom: -6px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  .active-point {
+    height: 4px;
+    width: 24px;
+  }
+  .basic-point {
+    background-color: #943636;
+  }
+  .master-point {
+    background-color: #5a6fd7;
+  }
+  .prodigy-point {
+    background-color: #369446;
+  }
+}
 :host {
   display: block;
 }

diff --git a/src/app/actor/character-skill.component.ts b/src/app/actor/character-skill.component.ts
@@ -47,7 +47,7 @@ export class CharacterSkillComponent implements OnInit, OnDestroy {
     canAddBasePoint$: Observable<boolean>;
     canRemoveBasePoint$: Observable<boolean>;
     haveAvailableSkillPoints$: Observable<boolean>;
-    havePendingSkillPoints: Observable<boolean>;
+    havePendingSkillPoints$: Observable<boolean>;
     hadAdditionalBasePoint$: Observable<boolean>;
 
     canAddMasterPoint$: Observable<boolean>;
@@ -58,6 +58,8 @@ export class CharacterSkillComponent implements OnInit, OnDestroy {
 
     canAddPoint$: Observable<boolean>;
     canRemovePoint$: Observable<boolean>;
+    canEditPoint$: Observable<boolean>;
+    activePoints$: Observable<number[]>;
 
     constructor(
         private readonly characterAccessorService: CharacterAccessorService,
@@ -82,7 +84,9 @@ export class CharacterSkillComponent implements OnInit, OnDestroy {
         this.totalValue$ = this.skillValue$.pipe(map(x => x.successValue));
         this.characterPendingSkills$ = this.character$.pipe(selectCharacterPendingSkills());
         this.haveAvailableSkillPoints$ = this.characterAvailableSkillPoints$.pipe(map(x => x.total > 0))
-        this.havePendingSkillPoints = this.character$.pipe(selectHavePendingSkillPoints())
+        this.havePendingSkillPoints$ = this.character$.pipe(selectHavePendingSkillPoints())
+        this.activePoints$ = this.value$.pipe(map(x => new Array(x).fill(1)))
+        this.canEditPoint$ = combineLatest([this.haveAvailableSkillPoints$, this.havePendingSkillPoints$]).pipe(map(([haveAvailableSkillPoints, havePendingSkillPoints]) => haveAvailableSkillPoints || havePendingSkillPoints));
 
         this.hadAdditionalBasePoint$ = this.characterPendingSkills$.pipe(
             pendingSkillPoint => pendingSkillPoint[this.skillDefinition.categoryId]?.[this.skillDefinition.id]?.value