feat: Add read-only mode for skill tree component

apps/web/app/widgets/data/item-detail/item-detail-perks.component.ts

@@ -13,13 +13,12 @@ import { apiResource } from '~/utils'
 import { ItemDetailStore } from './item-detail.store'
 import { ItemEditorEventsService } from './item-editor-events.service'
 import { PerkSlotExplained } from './selectors'
-import { PerkDetailDirective } from "../perk-detail/perk-detail.directive";
 
 @Component({
   selector: 'nwb-item-detail-perks',
   templateUrl: './item-detail-perks.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NwModule, ItemFrameModule, IconsModule, TooltipModule, PerkDetailDirective],
+  imports: [CommonModule, NwModule, ItemFrameModule, IconsModule, TooltipModule],
   host: {
     class: 'flex flex-col gap-1',
     'animate.enter': 'fade-grow-y-in',

apps/web/app/widgets/skill-tree/skill-tree-input.component.css

@@ -116,3 +116,50 @@
     transform: scale(0.66);
   }
 }
+
+/* Readonly / disabled tree styling */
+.is-readonly {
+  .grid-cell {
+    cursor: default;
+
+    picture {
+      /* Change cyan outline to dark grey */
+      @apply outline-neutral;
+    }
+
+    /* Mute the connecting lines in readonly mode */
+    &::before,
+    &::after {
+      opacity: 0.2;
+    }
+  }
+
+  /* Checked cells in readonly mode should have darker styling for better visibility */
+  .is-checked {
+    picture {
+      /* Much darker outline for active skills */
+      @apply outline-gray-600;
+      img {
+        /* Slightly reduce opacity to show it's not interactive */
+        opacity: 0.8;
+      }
+    }
+
+    /* Active cells should have darker lines (more visible than inactive but not bright) */
+    &::before,
+    &::after {
+      opacity: 0.5;
+    }
+  }
+
+  /* Unlocked cells shouldn't show pointer cursor */
+  .is-unlocked {
+    cursor: default;
+
+    /* Override the bright lines with muted version */
+    &::before,
+    &::after {
+      opacity: 0.2;
+    }
+  }
+}

apps/web/app/widgets/skill-tree/skill-tree-input.component.html

@@ -1,7 +1,7 @@
 <div class="skill-tree-title text-lg uppercase text-center font-serif text-nw-description nw-bg-title bg-bottom pt-4">
   {{ title() | nwText }} - <span class="font-caslon">{{ value()?.length || 0 }}</span>
 </div>
-<div class="skill-tree-content grid p-3 relative" [class]="colsClass()">
+<div class="skill-tree-content grid p-3 relative" [class]="colsClass()" [class.is-readonly]="disabled()">
   @for (row of rows(); track $index) {
     @for (cell of row; track $index) {
       @if (!cell.ability) {
@@ -17,7 +17,7 @@
         ></div>
       } @else {
         <div
-          [tabindex]="cell.unlocked ? 0 : -1"
+          [tabindex]="cell.unlocked && !disabled() ? 0 : -1"
           class="grid-cell aspect-square flex items-center justify-center transition-opacity relative"
           [class.is-disabled]="!cell.unlocked"
           [class.is-unlocked]="cell.unlocked"
@@ -29,9 +29,9 @@
           [class.edge-r]="cell.edgeRight"
           [class.edge-tl]="cell.edgeTopLeft"
           [class.edge-tr]="cell.edgeTopRight"
-          (click)="toggle(cell)"
-          (keydown.space)="toggle(cell)"
-          (keydown.enter)="toggle(cell)"
+          (click)="!disabled() && toggle(cell)"
+          (keydown.space)="!disabled() && toggle(cell)"
+          (keydown.enter)="!disabled() && toggle(cell)"
           [tooltip]="tip"
           [tooltipDelay]="0"
           [tooltipClass]="'p-0'"