Add random scenario and refactor case handling

Consolidate scenario creation by replacing separate normal/edge/clear handlers with createCase({withWalls, scenario}). Add a new 'random' scenario that picks random start/end positions and places random walls (controlled by MAX_RANDOM_WALLS_FACTORS). Change pathLength to a string and display "∞" for empty paths. Update applyGridSize logic to avoid unnecessary resets when dimensions unchanged and to initialize with the new API. Add random helper and MAX_RANDOM_WALLS_FACTORS constant, update template buttons to call createCase, and add i18n entries for the random case and updated clear-board label.
This commit is contained in:
2026-02-05 09:24:44 +01:00
parent f385a154d5
commit 52f0e371ee
5 changed files with 95 additions and 35 deletions

View File

@@ -27,9 +27,10 @@
<button matButton="filled" (click)="visualize('astar')">{{ '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)="createCase({withWalls: true, scenario: 'normal'})">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
<button matButton="filled" (click)="edgeCase()">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button> <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'random'})">{{ 'PATHFINDING.RANDOM_CASE' | translate }}</button>
<button matButton="filled" (click)="clearBoard()">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button> <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'edge'})">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
<button matButton="filled" (click)="createCase({withWalls: false, scenario: 'normal'})">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
</div> </div>
<div class="controls"> <div class="controls">

View File

@@ -9,7 +9,7 @@ import {MatInputModule} from '@angular/material/input';
import {TranslateModule, TranslateService} from '@ngx-translate/core'; import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MIN_GRID_SIZE, Node} from './pathfinding.models'; import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MAX_RANDOM_WALLS_FACTORS, MIN_GRID_SIZE, Node} from './pathfinding.models';
import {PathfindingService} from './service/pathfinding.service'; import {PathfindingService} from './service/pathfinding.service';
import {UrlConstants} from '../../../constants/UrlConstants'; import {UrlConstants} from '../../../constants/UrlConstants';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card'; import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
@@ -70,7 +70,7 @@ export class PathfindingComponent implements AfterViewInit {
private shouldAddWall = true; private shouldAddWall = true;
animationSpeed = 3; animationSpeed = 3;
pathLength = 0; pathLength = "0";
executionTime = 0; executionTime = 0;
private timeoutIds: number[] = []; private timeoutIds: number[] = [];
@@ -103,35 +103,28 @@ export class PathfindingComponent implements AfterViewInit {
applyGridSize(skipReset?: boolean): void { applyGridSize(skipReset?: boolean): void {
this.gridRows = this.clampGridSize(this.gridRows, DEFAULT_GRID_ROWS); this.gridRows = this.clampGridSize(this.gridRows, DEFAULT_GRID_ROWS);
this.gridCols = this.clampGridSize(this.gridCols, DEFAULT_GRID_COLS); this.gridCols = this.clampGridSize(this.gridCols, DEFAULT_GRID_COLS);
this.nodeSize = this.computeNodeSize(this.gridRows, this.gridCols); this.nodeSize = this.computeNodeSize(this.gridRows, this.gridCols);
this.resizeCanvas(); this.resizeCanvas();
if (skipReset) { if (this.gridRows === this.grid.length && this.gridCols === this.grid[0].length)
this.initializeGrid(true, 'edge'); {
this.drawGrid(); this.drawGrid();
return; return;
} }
// Default after size changes: pick one consistent scenario if (skipReset) {
this.normalCase(); this.initializeGrid({withWalls: true, scenario: 'normal'});
this.drawGrid();
return;
}
this.createCase({withWalls: true, scenario: 'normal'});
} }
normalCase(): void { createCase({withWalls, scenario}: { withWalls: boolean, scenario: "normal" | "edge" | "random" }): void
{
this.stopAnimations(); this.stopAnimations();
this.initializeGrid(true, 'normal'); this.initializeGrid({withWalls, scenario});
this.drawGrid();
}
edgeCase(): void {
this.stopAnimations();
this.initializeGrid(true, 'edge');
this.drawGrid();
}
clearBoard(): void {
this.stopAnimations();
this.initializeGrid(false, 'edge');
this.drawGrid(); this.drawGrid();
} }
@@ -167,8 +160,15 @@ export class PathfindingComponent implements AfterViewInit {
} }
const endTime = performance.now(); const endTime = performance.now();
const lengthOfShortestPath = result.nodesInShortestPathOrder.length;
this.pathLength = result.nodesInShortestPathOrder.length; if (lengthOfShortestPath === 0)
{
this.pathLength = "∞"
}
else
{
this.pathLength = result.nodesInShortestPathOrder.length + "";
}
this.executionTime = endTime - startTime; this.executionTime = endTime - startTime;
this.animateAlgorithm(result.visitedNodesInOrder, result.nodesInShortestPathOrder); this.animateAlgorithm(result.visitedNodesInOrder, result.nodesInShortestPathOrder);
@@ -238,7 +238,7 @@ export class PathfindingComponent implements AfterViewInit {
} }
// Grid init // Grid init
private initializeGrid(withWalls: boolean, scenario: 'normal' | 'edge'): void { private initializeGrid({withWalls, scenario}: { withWalls: boolean, scenario: "normal" | "edge" | "random" }): void {
this.grid = this.createEmptyGrid(); this.grid = this.createEmptyGrid();
const { start, end } = this.getScenarioStartEnd(scenario); const { start, end } = this.getScenarioStartEnd(scenario);
@@ -283,29 +283,81 @@ export class PathfindingComponent implements AfterViewInit {
}; };
} }
private getScenarioStartEnd(scenario: 'normal' | 'edge'): { start: GridPos; end: GridPos } { private getScenarioStartEnd(scenario: 'normal' | 'edge' | 'random'): { start: GridPos; end: GridPos } {
if (scenario === 'edge') { if (scenario === 'edge') {
return { return {
start: { row: 0, col: 0 }, start: { row: 0, col: 0 },
end: { row: this.gridRows - 1, col: this.gridCols - 1 } end: { row: this.gridRows - 1, col: this.gridCols - 1 }
}; };
} }
else if (scenario === 'random') {
return this.createRandomStartEndPosition();
}
else {
// normal: mid-left -> mid-right
const midRow = Math.floor(this.gridRows / 2);
return {
start: { row: midRow, col: 0 },
end: { row: midRow, col: this.gridCols - 1 }
};
}
}
private createRandomStartEndPosition() {
const midCol = Math.floor(this.gridCols / 2);
const startRow: number = this.randomIntFromInterval(0, this.gridRows - 1);
const startCol: number = this.randomIntFromInterval(0, this.gridCols - 1);
const endRow: number = this.randomIntFromInterval(0, this.gridRows - 1);
let endCol: number;
if (startCol <= midCol) {
endCol = this.randomIntFromInterval(midCol + 1, this.gridCols - 1);
} else {
endCol = this.randomIntFromInterval(0, midCol);
}
// normal: mid-left -> mid-right
const midRow = Math.floor(this.gridRows / 2);
return { return {
start: { row: midRow, col: 0 }, start: {row: startRow, col: startCol},
end: { row: midRow, col: this.gridCols - 1 } end: {row: endRow, col: endCol}
}; };
} }
private placeDefaultDiagonalWall(scenario: 'normal' | 'edge'): void { private placeDefaultDiagonalWall(scenario: 'normal' | 'edge' | 'random'): void {
if (scenario === 'edge') { if (scenario === 'edge') {
this.createDiagonalWall(); this.createDiagonalWall();
} }
else if (scenario === 'normal') { else if (scenario === 'normal') {
this.createVerticalWall(); this.createVerticalWall();
} }
else if (scenario === 'random') {
this.createRandomWalls();
}
}
private createRandomWalls(){
const maxNumberOfWalls = Math.floor(MAX_RANDOM_WALLS_FACTORS * this.gridCols * this.gridRows);
for (let wall = 0; wall < maxNumberOfWalls; wall++) {
const row: number = this.randomIntFromInterval(0, this.gridRows - 1);
const col: number = this.randomIntFromInterval(0, this.gridCols - 1);
if (!this.isValidPosition(row, col)) {
wall--;
continue;
}
const node = this.grid[row][col];
if (node.isStart || node.isEnd) {
wall--;
continue;
}
node.isWall = true;
}
} }
private createVerticalWall() { private createVerticalWall() {
@@ -587,5 +639,9 @@ export class PathfindingComponent implements AfterViewInit {
return ctx; return ctx;
} }
private randomIntFromInterval(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1) + min);
}
protected readonly UrlConstants = UrlConstants; protected readonly UrlConstants = UrlConstants;
} }

View File

@@ -20,3 +20,4 @@ export const MAX_GRID_SIZE = 150;
// Canvas max size (px) // Canvas max size (px)
export const MAX_GRID_PX = 1000; export const MAX_GRID_PX = 1000;
export const MAX_RANDOM_WALLS_FACTORS = 0.3;

View File

@@ -303,7 +303,8 @@
"ASTAR": "Start A*", "ASTAR": "Start A*",
"NORMAL_CASE": "Testaufbau", "NORMAL_CASE": "Testaufbau",
"EDGE_CASE": "A* Grenzfall-Aufbau", "EDGE_CASE": "A* Grenzfall-Aufbau",
"CLEAR_BOARD": "Board leeren", "RANDOM_CASE": "Zufälliger-Aufbau",
"CLEAR_BOARD": "Leeres Gitter",
"VISITED": "Besucht", "VISITED": "Besucht",
"PATH": "Pfad", "PATH": "Pfad",
"PATH_LENGTH": "Pfadlänge", "PATH_LENGTH": "Pfadlänge",

View File

@@ -303,7 +303,8 @@
"ASTAR": "Start A*", "ASTAR": "Start A*",
"NORMAL_CASE": "Test Scenario", "NORMAL_CASE": "Test Scenario",
"EDGE_CASE": "A* Edge Case Scenario", "EDGE_CASE": "A* Edge Case Scenario",
"CLEAR_BOARD": "Clear Board", "RANDOM_CASE": "Random Case",
"CLEAR_BOARD": "Empty Board",
"VISITED": "Visited", "VISITED": "Visited",
"PATH": "Path", "PATH": "Path",
"PATH_LENGTH": "Path length", "PATH_LENGTH": "Path length",