Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Unify pathfinding visualize; update About CSS

Browse Source 
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).
This commit is contained in:
LoboTheDark
2026-02-05 08:27:19 +01:00
parent b52790c9a1
commit 38bf7edd53
4 changed files with 22 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/algorithms/pathfinding/pathfinding.component.html
View File

@@ -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>

41
src/app/pages/algorithms/pathfinding/pathfinding.component.ts
View File

@@ -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;