From 38bf7edd536ae01bd1efd719d8f575f47a91eac1 Mon Sep 17 00:00:00 2001
From: LoboTheDark <andreas.dahm@gmail.com>
Date: Thu, 5 Feb 2026 08:27:19 +0100
Subject: [PATCH] Unify pathfinding visualize; update About CSS

Consolidate separate visualizeDijkstra/visualizeAStar into a single visualize(algorithm) method and update the template buttons to call visualize('dijkstra') or visualize('astar'). The new method dispatches to the appropriate pathfindingService method, centralizes timing/animation handling, and reduces duplicated logic. Also apply minor About page styling tweaks: add left margin to the Experience h2 and remove the .xp-list rules from the SCSS (small cleanup/reformat).
---
 src/app/pages/about/about.component.html      |  2 +-
 src/app/pages/about/about.component.scss      |  7 +---
 .../pathfinding/pathfinding.component.html    |  4 +-
 .../pathfinding/pathfinding.component.ts      | 41 ++++++++-----------
 4 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index 4259910..86ff8c6 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -66,7 +66,7 @@
   </mat-card>
 
   <mat-card class="experdience">
-    <h2>{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
+    <h2 style="margin-left: 0.5rem;">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
     <div class="xp-list">
       @for (entry of xpKeys; track entry.key) {
         <div class="xp-item">
diff --git a/src/app/pages/about/about.component.scss b/src/app/pages/about/about.component.scss
index 3957ca7..50e8d79 100644
--- a/src/app/pages/about/about.component.scss
+++ b/src/app/pages/about/about.component.scss
@@ -47,7 +47,6 @@
 /* Skills block */
 .skills {
   padding: 5px;
-
   h2 { margin-top: .25rem; margin-left: .25rem; }
   .chip-groups {
     margin-left: .25rem;
@@ -64,11 +63,7 @@
 /* Experience block */
 .experience {
   padding: 5px;
-  h2 { margin-top: .25rem;margin-left: .25rem; }
-  .xp-list {
-    margin-left: .25rem;
-    display: grid; gap: .75rem;
-  }
+  h2 { margin-top: .25rem; margin-left: .25rem; }
   .xp-item {
     .xp-head {
       display:flex; align-items:baseline; gap:.5rem;
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.html b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
index 931dcf3..1c1c6b4 100644
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.html
+++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
@@ -23,8 +23,8 @@
 
     <div class="controls-container">
       <div class="controls">
-        <button matButton="filled" (click)="visualizeDijkstra()">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
-        <button matButton="filled" (click)="visualizeAStar()">{{ 'PATHFINDING.ASTAR' | translate }}</button>
+        <button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
+        <button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
       </div>
       <div class="controls">
         <button matButton="filled" (click)="normalCase()">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
index c6ed385..bcd5a16 100644
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
+++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
@@ -136,7 +136,7 @@ export class PathfindingComponent implements AfterViewInit {
     this.drawGrid();
   }
 
-  visualizeDijkstra(): void {
+  visualize(algorithm: string): void {
     if (!this.ensureStartAndEnd()) {
       return;
     }
@@ -145,33 +145,28 @@ export class PathfindingComponent implements AfterViewInit {
     this.clearPath();
 
     const startTime = performance.now();
-    const result = this.pathfindingService.dijkstra(
-      this.grid,
-      this.grid[this.startNode!.row][this.startNode!.col],
-      this.grid[this.endNode!.row][this.endNode!.col]
-    );
-    const endTime = performance.now();
+    let result;
 
-    this.pathLength = result.nodesInShortestPathOrder.length;
-    this.executionTime = endTime - startTime;
+    switch (algorithm) {
+      case 'dijkstra': result = this.pathfindingService.dijkstra(
+        this.grid,
+        this.grid[this.startNode!.row][this.startNode!.col],
+        this.grid[this.endNode!.row][this.endNode!.col]
+      );
+      break;
+      case 'astar': result = this.pathfindingService.aStar(
+        this.grid,
+        this.grid[this.startNode!.row][this.startNode!.col],
+        this.grid[this.endNode!.row][this.endNode!.col]
+      );
+      break;
+    }
 
-    this.animateAlgorithm(result.visitedNodesInOrder, result.nodesInShortestPathOrder);
-  }
-
-  visualizeAStar(): void {
-    if (!this.ensureStartAndEnd()) {
+    if (!result)
+    {
       return;
     }
 
-    this.stopAnimations();
-    this.clearPath();
-
-    const startTime = performance.now();
-    const result = this.pathfindingService.aStar(
-      this.grid,
-      this.grid[this.startNode!.row][this.startNode!.col],
-      this.grid[this.endNode!.row][this.endNode!.col]
-    );
     const endTime = performance.now();
 
     this.pathLength = result.nodesInShortestPathOrder.length;