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

2
src/app/pages/about/about.component.html
View File

@@ -66,7 +66,7 @@
</mat-card> </mat-card>
<mat-card class="experdience"> <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"> <div class="xp-list">
@for (entry of xpKeys; track entry.key) { @for (entry of xpKeys; track entry.key) {
<div class="xp-item"> <div class="xp-item">

7
src/app/pages/about/about.component.scss
View File

@@ -47,7 +47,6 @@
/* Skills block */ /* Skills block */
.skills { .skills {
padding: 5px; padding: 5px;
h2 { margin-top: .25rem; margin-left: .25rem; } h2 { margin-top: .25rem; margin-left: .25rem; }
.chip-groups { .chip-groups {
margin-left: .25rem; margin-left: .25rem;
@@ -64,11 +63,7 @@
/* Experience block */ /* Experience block */
.experience { .experience {
padding: 5px; padding: 5px;
h2 { margin-top: .25rem;margin-left: .25rem; } h2 { margin-top: .25rem; margin-left: .25rem; }
.xp-list {
margin-left: .25rem;
display: grid; gap: .75rem;
}
.xp-item { .xp-item {
.xp-head { .xp-head {
display:flex; align-items:baseline; gap:.5rem; display:flex; align-items:baseline; gap:.5rem;

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

@@ -23,8 +23,8 @@
<div class="controls-container"> <div class="controls-container">
<div class="controls"> <div class="controls">
<button matButton="filled" (click)="visualizeDijkstra()">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button> <button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<button matButton="filled" (click)="visualizeAStar()">{{ 'PATHFINDING.ASTAR' | translate }}</button> <button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
</div> </div>
<div class="controls"> <div class="controls">
<button matButton="filled" (click)="normalCase()">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button> <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(); this.drawGrid();
} }
visualizeDijkstra(): void { visualize(algorithm: string): void {
if (!this.ensureStartAndEnd()) { if (!this.ensureStartAndEnd()) {
return; return;
} }
@@ -145,33 +145,28 @@ export class PathfindingComponent implements AfterViewInit {
this.clearPath(); this.clearPath();
const startTime = performance.now(); const startTime = performance.now();
const result = this.pathfindingService.dijkstra( let result;
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; switch (algorithm) {
this.executionTime = endTime - startTime; 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); if (!result)
} {
visualizeAStar(): void {
if (!this.ensureStartAndEnd()) {
return; 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(); const endTime = performance.now();
this.pathLength = result.nodesInShortestPathOrder.length; this.pathLength = result.nodesInShortestPathOrder.length;