diff --git a/src/app/pages/algorithms/sorting/sorting.component.ts b/src/app/pages/algorithms/sorting/sorting.component.ts
index 440f2d9..9cdc792 100644
--- a/src/app/pages/algorithms/sorting/sorting.component.ts
+++ b/src/app/pages/algorithms/sorting/sorting.component.ts
@@ -7,6 +7,7 @@ import {MatButtonModule} from "@angular/material/button";
import {MatIconModule} from "@angular/material/icon";
import {TranslateModule} from "@ngx-translate/core";
import { SortingService } from './service/sorting.service';
+import { SortingAudioService } from './service/sorting-audio.service';
import {SortData, SortSnapshot} from './sorting.models';
import { FormsModule } from '@angular/forms';
import {MatInput} from '@angular/material/input';
@@ -15,14 +16,14 @@ import {AlgorithmInformation} from '../information/information.models';
import {Information} from '../information/information';
@Component({
selector: 'app-sorting',
- standalone: true,
imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information],
templateUrl: './sorting.component.html',
- styleUrls: ['./sorting.component.scss']
+ styleUrl: './sorting.component.scss'
})
export class SortingComponent implements OnInit {
private readonly sortingService: SortingService = inject(SortingService);
+ private readonly audioService: SortingAudioService = inject(SortingAudioService);
private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
readonly MAX_ARRAY_SIZE: number = 200;
@@ -50,6 +51,11 @@ export class SortingComponent implements OnInit {
name: 'Heap Sort',
description: 'SORTING.EXPLANATION.HEAP_SORT_EXPLANATION',
link: UrlConstants.HEAP_SORT_WIKI
+ },
+ {
+ name: 'Tim Sort',
+ description: 'SORTING.EXPLANATION.TIMSORT_EXPLANATION',
+ link: UrlConstants.TIM_SORT_WIKI
}
],
disclaimer: 'SORTING.EXPLANATION.DISCLAIMER',
@@ -66,9 +72,10 @@ export class SortingComponent implements OnInit {
unsortedArrayCopy: SortData[] = [];
arraySize = 50;
maxArrayValue = 100;
- animationSpeed = 50; // Milliseconds per step
+ animationSpeed = 100; // Milliseconds per step
selectedAlgorithm: string = this.algoInformation.entries[0].name;
executionTime = 0;
+ isSoundEnabled = false;
ngOnInit(): void {
this.generateNewArray();
@@ -113,8 +120,14 @@ export class SortingComponent implements OnInit {
}
}
+ toggleSound(): void {
+ this.isSoundEnabled = !this.isSoundEnabled;
+ }
+
async startSorting(): Promise {
this.resetSorting();
+ // Init the AudioContext on this user gesture so the browser allows sound
+ this.audioService.initOnUserGesture();
const startTime = performance.now();
let snapshots: SortSnapshot[] = [];
@@ -131,6 +144,9 @@ export class SortingComponent implements OnInit {
case 'Cocktail Sort':
snapshots = this.sortingService.cocktailSort(this.sortArray);
break;
+ case 'Tim Sort':
+ snapshots = this.sortingService.timSort(this.sortArray);
+ break;
}
const endTime = performance.now();
@@ -149,11 +165,22 @@ export class SortingComponent implements OnInit {
}
}
+ if (this.isSoundEnabled) {
+ // Play a tone for each comparing bar (max 2 at once to avoid noise)
+ snapshot.array
+ .filter(item => item.state === 'comparing')
+ .slice(0, 2)
+ .forEach(item => this.audioService.playTone(item.value, this.maxArrayValue, this.animationSpeed));
+ }
+
this.cdr.detectChanges();
if (index === snapshots.length - 1) {
this.sortArray.forEach(item => item.state = 'sorted');
this.cdr.detectChanges();
+ if (this.isSoundEnabled) {
+ this.audioService.playSortedSweep(this.sortArray.map(item => item.value), this.maxArrayValue);
+ }
}
}, index * this.animationSpeed);
diff --git a/src/app/pages/projects/dialog/project-dialog.component.ts b/src/app/pages/projects/dialog/project-dialog.component.ts
index dcc95d0..8b80957 100644
--- a/src/app/pages/projects/dialog/project-dialog.component.ts
+++ b/src/app/pages/projects/dialog/project-dialog.component.ts
@@ -15,8 +15,7 @@ import {MatButton} from '@angular/material/button';
@Component({
selector: 'app-project-dialog',
templateUrl: './project-dialog.component.html',
- styleUrls: ['./project-dialog.component.scss'],
- standalone: true,
+ styleUrl: './project-dialog.component.scss',
imports: [
MatDialogTitle,
MatDialogContent,
diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts
index 9ccde65..64d1bba 100644
--- a/src/app/pages/projects/projects.component.ts
+++ b/src/app/pages/projects/projects.component.ts
@@ -34,7 +34,6 @@ export interface Projects {
@Component({
selector: 'app-projects',
- standalone: true,
imports: [
MatCardModule,
MatChipsModule,
diff --git a/src/app/service/language.service.ts b/src/app/service/language.service.ts
index 31c8490..0c5bd25 100644
--- a/src/app/service/language.service.ts
+++ b/src/app/service/language.service.ts
@@ -10,10 +10,9 @@ export class LanguageService {
readonly lang = signal(this.getInitial());
constructor() {
- this.translate.addLangs(['de', 'en']);
- this.translate.setFallbackLang('en');
- this.lang.set(this.getInitial());
- this.use(this.lang());
+ // translate service lang and fallback are already configured via provideTranslateService in app.config
+ // just ensure the stored preference is active on startup
+ this.translate.use(this.lang());
}
use(l: Lang) {
diff --git a/src/app/service/reload.service.ts b/src/app/service/reload.service.ts
deleted file mode 100644
index ff66db5..0000000
--- a/src/app/service/reload.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable, NgZone, signal } from '@angular/core';
-import {LocalStoreConstants} from '../constants/LocalStoreConstants';
-
-
-@Injectable({ providedIn: 'root' })
-export class ReloadService {
- private readonly _reloadTick = signal(0);
- readonly reloadTick = this._reloadTick.asReadonly();
-
- private readonly _languageChangedTick = signal(0);
- readonly languageChangedTick = this._languageChangedTick.asReadonly();
-
-
-
-
- private informListeners(e: StorageEvent, zone: NgZone) {
- if (e.key === LocalStoreConstants.LANGUAGE_KEY) {
- zone.run(() => this._languageChangedTick.update(v => v + 1));
- }
- }
-
- bumpLanguageChanged(): void {
- this._reloadTick.update(v => v + 1);
- localStorage.setItem(LocalStoreConstants.RELOAD_ALL_LANG_LISTENER_KEY, String(Date.now()));
- }
-}
diff --git a/src/app/shared/components/generic-grid/generic-grid.ts b/src/app/shared/components/generic-grid/generic-grid.ts
index 26791a9..77c3c86 100644
--- a/src/app/shared/components/generic-grid/generic-grid.ts
+++ b/src/app/shared/components/generic-grid/generic-grid.ts
@@ -5,7 +5,6 @@ export interface GridPos { row: number; col: number }
@Component({
selector: 'app-generic-grid',
- standalone: true,
imports: [CommonModule],
templateUrl: './generic-grid.html',
styleUrl: './generic-grid.scss',
@@ -36,7 +35,7 @@ export class GenericGridComponent implements AfterViewInit {
grid: any[][] = [];
isDrawing = false;
- private lastCell: GridPos | null = null;
+ protected lastCell: GridPos | null = null;
ngAfterViewInit(): void {
this.ctx = this.getContextOrThrow();
diff --git a/src/app/shared/components/render-canvas/babylon-canvas.component.ts b/src/app/shared/components/render-canvas/babylon-canvas.component.ts
index 8e61be0..f14940c 100644
--- a/src/app/shared/components/render-canvas/babylon-canvas.component.ts
+++ b/src/app/shared/components/render-canvas/babylon-canvas.component.ts
@@ -1,4 +1,6 @@
import {AfterViewInit, Component, ElementRef, EventEmitter, inject, Input, NgZone, OnDestroy, Output, ViewChild} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {TranslateService} from '@ngx-translate/core';
import {ArcRotateCamera, Camera, MeshBuilder, Scene, ShaderLanguage, ShaderMaterial, Vector2, Vector3, WebGPUEngine} from '@babylonjs/core';
export interface RenderConfig {
@@ -26,6 +28,8 @@ export interface SceneEventData {
})
export class BabylonCanvas implements AfterViewInit, OnDestroy {
readonly ngZone = inject(NgZone);
+ private readonly snackBar = inject(MatSnackBar);
+ private readonly translate = inject(TranslateService);
@ViewChild('renderCanvas', { static: true }) canvasRef!: ElementRef;
@@ -52,19 +56,16 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
window.removeEventListener('resize', this.resizeHandler);
const canvas = this.canvasRef?.nativeElement;
- if (canvas) {
- canvas.removeEventListener('wheel', this.wheelHandler);
- }
+ canvas?.removeEventListener('wheel', this.wheelHandler);
- if (this.engine) {
- this.engine.dispose();
- }
+ this.engine?.dispose();
}
private async initBabylon(): Promise {
const canvas = this.canvasRef.nativeElement;
- this.engine = new WebGPUEngine(canvas);
- await this.engine.initAsync().then(() => {
+ const tmpEngine = new WebGPUEngine(canvas);
+ await tmpEngine.initAsync().then(() => {
+ this.engine = tmpEngine;
this.scene = new Scene(this.engine);
this.setupCamera(canvas);
this.addListener(canvas);
@@ -75,7 +76,13 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
engine: this.engine
});
this.addRenderLoop(canvas);
- });
+
+ })
+ .catch(() => {
+ const message = this.translate.instant('WEBGPU.NOT_SUPPORTED');
+ this.snackBar.open(message, 'OK', { duration: 8000, horizontalPosition: "center", verticalPosition: "top" });
+ this.engine = null!;
+ });
}
private addListener(canvas: HTMLCanvasElement) {
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index a17712b..9f48aa4 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -210,7 +210,7 @@
},
"TRIBBLE": {
"TITLE": "Homeserver 'Tribble'",
- "DESCRIPTION": "In diesem Projekt geht es um die Einrichtung und Wartung meines eigenen Homeservers. Er betreibt mehrere Docker-Container wie Gitea, Jellyfin und mehr. Es ist eine großartige Lernerfahrung im Bereich Self-Hosting und Systemadministration.",
+ "DESCRIPTION": "In diesem Projekt geht es um die Einrichtung und Wartung meines eigenen Homeservers. Er betreibt mehrere Docker-Container wie Gitea, Jellyfin and more. Es ist eine großartige Lernerfahrung im Bereich Self-Hosting und Systemadministration.",
"LINK_INTERNAL": "Projektdetails",
"HIGHLIGHTS": {
"P1": "Self-Hosting verschiedener Dienste mit Docker.",
@@ -273,7 +273,7 @@
"BULLET_1": "Entwicklung mit Angular 19+ und Material Design.",
"BULLET_2": "Implementierung performanter Visualisierungen (WebGPU, Shader, Canvas).",
"BULLET_3": "Automatisierte CI/CD-Pipelines und Containerisierung mit Docker.",
- "BULLET_4": "Internationalisierung (i18n) für globale Reichweite.",
+ "BULLET_4": "Internationalization (i18n) für globale Reichweite.",
"CHALLENGE_1": "Optimierung der Render-Performance bei komplexen 3D-Fraktalen in Echtzeit.",
"CHALLENGE_2": "Architektur einer skalierbaren und wartbaren Frontend-Struktur für diverse Sub-Projekte.",
"LEARNING_1": "Effektives UI/UX-Design für komplexe datengesteuerte Visualisierungen.",
@@ -310,7 +310,7 @@
"TITLE": "Rapid Prototyping & Game Jams",
"SHORT_DESCRIPTION": "Sammlung innovativer Spielkonzepte, entstanden in unter 48 Stunden.",
"INTRODUCTION": "Teilnahme an nationalen Wettbewerben (z.B. Beansjam). Hier geht es darum, unter extremem Zeitdruck funktionale und spaßige Prototypen zu erschaffen.",
- "BULLET_1": "Fokus auf 'Core Game Loop' und schnelles Feedback.",
+ "BULLET_1": "Fokus on 'Core Game Loop' und schnelles Feedback.",
"BULLET_2": "Kollaborative Entwicklung in kleinen, agilen Teams.",
"BULLET_3": "Effektives Zeitmanagement und Scope-Kontrolle.",
"BULLET_4": "Veröffentlichung und Iteration basierend auf Community-Votings.",
@@ -371,6 +371,8 @@
"START": "Sortierung starten",
"RESET": "Zurücksetzen",
"GENERATE_NEW_ARRAY": "Neues Array generieren",
+ "SOUND_ON": "Ton an",
+ "SOUND_OFF": "Ton aus",
"EXECUTION_TIME": "Ausführungszeit",
"ARRAY_SIZE": "Anzahl der Balken",
"EXPLANATION": {
@@ -378,6 +380,7 @@
"BUBBLE_SORT_EXPLANATION":"vergleicht wiederholt benachbarte Elemente und tauscht sie, wenn sie in der falschen Reihenfolge stehen. Das größte Element \"blubbert\" dabei wie eine Luftblase ans Ende der Liste. Vorteil: Extrem einfach zu verstehen und zu implementieren; erkennt bereits sortierte Listen sehr schnell. Nachteil: Sehr ineffizient bei großen Listen (Laufzeit O(n²)). In der Praxis kaum genutzt.",
"QUICK_SORT_EXPLANATION": "folgt dem \"Teile und Herrsche\"-Prinzip. Ein \"Pivot\"-Element wird gewählt, und das Array wird in zwei Hälften geteilt: Elemente kleiner als das Pivot und Elemente größer als das Pivot. Vorteil: Im Durchschnitt einer der schnellsten Sortieralgorithmen (O(n log n)); benötigt keinen zusätzlichen Speicher (In-Place). Nachteil: Im schlechtesten Fall (Worst Case) langsam (O(n²)), wenn das Pivot ungünstig gewählt wird. Ist nicht stabil (ändert Reihenfolge gleicher Elemente).",
"HEAP_SORT_EXPLANATION": "organisiert die Daten zunächst in einer speziellen Baumstruktur (Binary Heap). Das größte Element (die Wurzel) wird entnommen und ans Ende sortiert, dann wird der Baum repariert. Vorteil: Garantiert eine schnelle Laufzeit von O(n log n), selbst im schlechtesten Fall. Benötigt fast keinen zusätzlichen Speicher. Nachteil: In der Praxis oft etwas langsamer als Quick Sort, da die Sprünge im Speicher (Heap-Struktur) den CPU-Cache schlechter nutzen.",
+ "TIMSORT_EXPLANATION": "ist ein hybrider Sortieralgorithmus, der aus Merge Sort und Insertion Sort kombiniert ist. Er unterteilt das Array in kleine 'Runs' und sortiert jeden davon mit Insertion Sort, um sie anschließend schrittweise mit Merge Sort zusammenzuführen. Vorteil: Extrem effizient bei realen Daten, die oft teilweise sortiert sind – O(n log n) im schlechtesten und O(n) im besten Fall. Er ist der Standardalgorithmus in Python und Java. Nachteil: Komplexer zu implementieren als ein reiner Algorithmus und benötigt zusätzlichen Speicher für den Merge-Schritt.",
"COCKTAIL_SORT_EXPLANATION" : "(auch Shaker Sort) ist eine Erweiterung des Bubble Sort. Statt nur von links nach rechts zu gehen, wechselt er bei jedem Durchlauf die Richtung und schiebt abwechselnd das größte Element nach rechts und das kleinste nach links. Vorteil: Schneller als Bubble Sort, da kleine Elemente am Ende schneller nach vorne wandern (\"Schildkröten-Problem\" gelöst). Nachteil: Bleibt in der Laufzeitklasse O(n²), also für große Datenmengen ineffizient.",
"DISCLAIMER": "Die Wahl des \"besten\" Sortieralgorithmus hängt stark von den Daten und den Rahmenbedingungen ab. In der Informatik betrachtet man oft drei Szenarien:",
"DISCLAIMER_1": "Best Case: Die Daten sind schon fast sortiert (hier glänzt z.B. Bubble Sort).",
@@ -434,7 +437,7 @@
"MANDELBROT_EXPLANATION": "basiert auf der iterativen Formel 'z_{n+1} = z_n^2 + c'. Sie prüft für jeden Punkt in der komplexen Ebene, ob die Zahlenfolge stabil bleibt oder ins Unendliche entkommt. Vorteil: Gilt als 'Apfelmännchen' und Mutter der Fraktale. Sie bietet eine unendliche Vielfalt an selbstähnlichen Strukturen, in die man ewig hineinzoomen kann.",
"JULIA_EXPLANATION": "nutzt dieselbe Formel wie Mandelbrot, fixiert jedoch den Parameter 'c' und variiert den Startwert. Je nach Wahl von 'c' entstehen filigrane, wolkenartige Gebilde oder zusammenhanglose 'Staubwolken'. Vorteil: Ermöglicht eine enorme ästiehetische Varianz, da jede Koordinate der Mandelbrot-Menge ein völlig eigenes, einzigartiges Julia-Fraktal erzeugt.",
"NEWTON_EXPLANATION": "entsteht durch die Visualisierung des Newton-Verfahrens zur Nullstellen-Suche einer komplexen Funktion. Jeder Pixel wird danach eingefärbt, zu welcher Nullstelle der Algorithmus konvergiert. Vorteil: Erzeugt faszinierende, sternförmige Symmetrien und komplexe Grenzen, an denen sich die Einzugsgebiete der Nullstellen auf chaotische Weise treffen.",
- "BURNING_SHIP_EXPLANATION": "ist eine Variation des Mandelbrots, bei der vor jedem Iterationsschritt der Absolutbetrag der Real- und Imaginärteile genommen wird: '(|Re(z)| + i|Im(z)|)^2 + c'. Vorteil: Erzeugt eine markante, asymmetrische Struktur, die einem brennenden Schiff mit Segeln ähnelt. Das Fraktal wirkt düsterer und 'mechanischer' als die klassischen Mengen.",
+ "BURNING_SHIP_EXPLANATION": "ist eine variation des Mandelbrots, bei der vor jedem Iterationsschritt der Absolutbetrag der Real- und Imaginärteile genommen wird: '(|Re(z)| + i|Im(z)|)^2 + c'. Vorteil: Erzeugt eine markante, asymmetrische Struktur, die einem brennenden Schiff mit Segeln ähnelt. Das Fraktal wirkt düsterer und 'mechanischer' als die klassischen Mengen.",
"DISCLAIMER": "Alle diese Fraktale basieren auf dem Prinzip der Iteration und dem Chaos-Effekt. Das bedeutet für deine Visualisierung:",
"DISCLAIMER_1": "Unendliche Tiefe: Egal wie weit du hineinzoomst, es erscheinen immer neue, komplexe Strukturen, die dem Ganzen oft ähneln (Selbstähnlichkeit).",
"DISCLAIMER_2": "Fluchtzeit-Algorithmus: Die Farben geben meist an, wie schnell eine Folge einen bestimmten Schwellenwert überschreitet – je schneller, desto 'heißer' oder heller die Farbe.",
@@ -490,6 +493,9 @@
"WIND_OFF": "Wind Ausschalten",
"OUTLINE_ON": "Mesh anzeigen",
"OUTLINE_OFF": "Mesh ausschalten",
+ "STIFFNESS": "Steifigkeit",
+ "ELONGATION": "Dehnung",
+ "RESTART_SIMULATION": "Simulation neu starten",
"EXPLANATION": {
"TITLE": "Echtzeit-Stoffsimulation auf der GPU",
"CLOTH_SIMULATION_EXPLANATION_TITLE": "Stoffsimulation",
@@ -502,11 +508,14 @@
"DATA_STRUCTURES_EXPLANATION": "Für maximale GPU-Performance müssen Daten speicherfreundlich ausgerichtet werden (16-Byte-Alignment). Anstatt viele einzelne Variablen zu nutzen, packt man Informationen clever in 4er-Blöcke (vec4). Ein Vertex speichert so z. B. [X, Y, Z, Inverse_Masse]. Hat ein Punkt die inverse Masse 0.0, wird er vom Algorithmus ignoriert und schwebt unbeweglich in der Luft – ein eleganter Trick für Aufhängungen ohne extra Wenn-Dann-Abfragen.",
"DISCLAIMER": "XPBD vs. Masse-Feder-Systeme: In der physikalischen Simulation gibt es grundlegende Architektur-Unterschiede beim Lösen der Gleichungen:",
"DISCLAIMER_1": "Klassische Masse-Feder-Systeme: Hier werden Kräfte (Hookesches Gesetz) berechnet, die zu Beschleunigungen und schließlich zu neuen Positionen führen. Es gibt zwei Wege, diese mathematisch in die Zukunft zu rechnen (Integration):",
- "DISCLAIMER_2": "Explizite Löser (z.B. Forward Euler): Sie berechnen den nächsten Schritt stur aus dem aktuellen Zustand. Sie sind leicht zu programmieren, aber bei steifen Stoffen extrem instabil. Die Kräfte schaukeln sich auf und die Simulation 'explodiert', sofern man keine winzigen, sehr leistungsfressenden Zeitschritte wählt.",
+ "DISCLAIMER_2": "Explizite Löser (z.B. Forward Euler): Sie berechnen den nächsten Schritt stur aus dem aktuellen Zustand. Sie sind leicht zu programmieren, aber bei steifen Stoffen extrem instabil. Die Kräfte schaukeln sich auf und die simulation 'explodiert', sofern man keine winzigen, sehr leistungsfressenden Zeitschritte wählt.",
"DISCLAIMER_3": "Implizite Löser (z.B. Backward Euler): Sie berechnen den nächsten Schritt basierend auf dem zukünftigen Zustand. Das ist mathematisch enorm stabil, erfordert aber das Lösen riesiger globaler Matrix-Gleichungssysteme in jedem Frame. Dies ist auf der GPU schwerer zu parallelisieren und bricht zusammen, wenn sich die Struktur ändert (z. B. durch Zerschneiden des Stoffs).",
"DISCLAIMER_4": "Der XPBD-Kompromiss: XPBD umgeht dieses komplexe Matrix-Problem völlig, indem es als lokaler Löser arbeitet. Es kombiniert die unbedingte Stabilität eines impliziten Lösers mit der enormen Geschwindigkeit, Parallelisierbarkeit und dynamischen Anpassungsfähigkeit eines expliziten Systems."
}
},
+ "WEBGPU": {
+ "NOT_SUPPORTED": "WebGPU konnte nicht gestartet werden. Bitte prüfe, ob dein Browser WebGPU unterstützt."
+ },
"ALGORITHM": {
"TITLE": "Algorithmen",
"PATHFINDING": {
@@ -525,6 +534,10 @@
"TITLE": "Labyrinth-Erzeugung",
"DESCRIPTION": "Visualisierung verschiedener Laybrinth-Erzeugungs-Algorithmen."
},
+ "FOUR_COLOR": {
+ "TITLE": "Vier-Farben-Satz",
+ "DESCRIPTION": "Der Vier-Farben-Satz besagt, dass jede Landkarte in der Ebene mit maximal vier Farben so eingefärbt werden kann, dass keine zwei aneinandergrenzenden Gebiete dieselbe Farbe besitzen."
+ },
"FRACTAL": {
"TITLE": "Fraktale",
"DESCRIPTION": "Visualisierung von komplexe, geometrische Mustern, die sich selbst in immer kleineren Maßstäben ähneln (Selbstähnlichkeit)."
@@ -544,5 +557,35 @@
"NOTE": "HINWEIS",
"GRID_HEIGHT": "Höhe",
"GRID_WIDTH": "Beite"
+ },
+ "FOUR_COLOR": {
+ "TITLE": "Vier-Farben-Satz",
+ "GENERATE": "Neue Karte generieren",
+ "SOLVE": "Automatisch lösen",
+ "CLEAR": "Farben zurücksetzen",
+ "COLOR_1": "Farbe 1",
+ "COLOR_2": "Farbe 2",
+ "COLOR_3": "Farbe 3",
+ "COLOR_4": "Farbe 4",
+ "EXECUTION_TIME": "Ausführungszeit",
+ "STATUS": {
+ "LABEL": "Status",
+ "INCOMPLETE": "Die Karte ist noch nicht vollständig eingefärbt.",
+ "SOLVED": "Glückwunsch! Du hast die Karte korrekt gelöst!",
+ "CONFLICTS": "Achtung: Benachbarte Regionen haben die gleiche Farbe!",
+ "INVALID": "Karte ist vollständig, enthält aber Fehler."
+ },
+ "EXPLANATION": { "TITLE": "Der Vier-Farben-Satz",
+ "EXPLANATION": "Der Vier-Farben-Satz besagt, dass jede Landkarte in der Ebene mit maximal vier Farben so eingefärbt werden kann, dass keine zwei aneinandergrenzenden Gebiete dieselbe Farbe besitzen.",
+ "DISCLAIMER": "Dieser Algorithmus verwendet Backtracking, um eine gültige Färbung für die generierten Regionen zu finden.",
+ "DISCLAIMER_1": "Kartengenerierung: Regionen werden mittels eines zufälligen Seed-Wachstumsalgorithmus (Voronoi-ähnlich) auf einem Gitter erzeugt.",
+ "DISCLAIMER_2": "Adjazenz: Zwei Regionen gelten als benachbart, wenn sie mindestens eine gemeinsame Kante im Gitter teilen.",
+ "DISCLAIMER_3": "Backtracking: Der Löser probiert die Farben 1-4 für jede Region aus und macht Schritte rückgängig (Backtracking), wenn ein Konflikt auftritt.",
+ "DISCLAIMER_4": "Interaktiv: Sie können auch auf Regionen klicken, um manuell durch die Farben zu wechseln.",
+ "DISCLAIMER_BOTTOM": "Zum einfärben in die Zelle klicken. Durch erneutes klicken ändert sich die Farbe."
+ },
+ "ALERT": {
+ "NO_SOLUTION": "Keine Lösung gefunden (das sollte bei einer planaren Karte nicht passieren!)."
+ }
}
}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 1b705f0..a177b22 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -371,6 +371,8 @@
"START": "Start Sorting",
"RESET": "Reset",
"GENERATE_NEW_ARRAY": "Generate New Array",
+ "SOUND_ON": "Sound On",
+ "SOUND_OFF": "Sound Off",
"EXECUTION_TIME": "Execution Time",
"ARRAY_SIZE": "Number of Bars",
"EXPLANATION": {
@@ -378,6 +380,7 @@
"BUBBLE_SORT_EXPLANATION": "repeatedly compares adjacent elements and swaps them if they are in the wrong order. The largest element \"bubbles\" to the end of the list like an air bubble. Advantage: Extremely simple to understand and implement; detects already sorted lists very quickly. Disadvantage: Very inefficient for large lists (runtime O(n²)). Rarely used in practice.",
"QUICK_SORT_EXPLANATION": "follows the \"divide and conquer\" principle. A \"pivot\" element is selected, and the array is divided into two halves: elements smaller than the pivot and elements larger than the pivot. Advantage: On average one of the fastest sorting algorithms (O(n log n)); requires no additional memory (in-place). Disadvantage: Slow in the worst case (O(n²)) if the pivot is chosen poorly. Is not stable (changes order of equal elements).",
"HEAP_SORT_EXPLANATION": "organizes the data initially into a special tree structure (Binary Heap). The largest element (the root) is extracted and sorted to the end, then the tree is repaired. Advantage: Guarantees a fast runtime of O(n log n), even in the worst case. Requires almost no additional memory. Disadvantage: Often slightly slower than Quick Sort in practice because the jumps in memory (heap structure) utilize the CPU cache less effectively.",
+ "TIMSORT_EXPLANATION": "is a hybrid sorting algorithm derived from Merge Sort and Insertion Sort. It divides the array into small 'runs' and sorts each using Insertion Sort, then merges them step by step using Merge Sort. Advantage: Extremely efficient on real-world data that is often partially sorted — O(n log n) in the worst case and O(n) in the best case. It is the standard sorting algorithm in Python and Java. Disadvantage: More complex to implement than a pure algorithm and requires additional memory for the merge step.",
"DISCLAIMER": "The choice of the \"best\" sorting algorithm depends heavily on the data and the constraints. In computer science, three scenarios are often considered:",
"DISCLAIMER_1": "Best Case: The data is already nearly sorted (Bubble Sort shines here, for example).",
"DISCLAIMER_2": "Average Case: The statistical norm.",
@@ -489,6 +492,9 @@
"WIND_OFF": "Wind Off",
"OUTLINE_ON": "Show Mesh",
"OUTLINE_OFF": "Hide Mesh",
+ "STIFFNESS": "Stiffness",
+ "ELONGATION": "Elongation",
+ "RESTART_SIMULATION": "Restart Simulation",
"EXPLANATION": {
"TITLE": "Real-time Cloth Simulation on the GPU",
"CLOTH_SIMULATION_EXPLANATION_TITLE": "Cloth Simulation",
@@ -506,6 +512,9 @@
"DISCLAIMER_4": "The XPBD Compromise: XPBD completely bypasses this complex matrix problem by acting as a local solver. It combines the absolute stability of an implicit solver with the enormous speed, parallelizability, and dynamic adaptability of an explicit system."
}
},
+ "WEBGPU": {
+ "NOT_SUPPORTED": "WebGPU could not be started. Please check if your browser supports WebGPU."
+ },
"ALGORITHM": {
"TITLE": "Algorithms",
"PATHFINDING": {
@@ -524,6 +533,10 @@
"TITLE": "Maze Generation",
"DESCRIPTION": "Visualizing various maze generation algorithms."
},
+ "FOUR_COLOR": {
+ "TITLE": "Four Color Theorem",
+ "DESCRIPTION": "The four color theorem states that any map in a plane can be colored using at most four colors in such a way that regions sharing a common boundary (other than a single point) do not share the same color."
+ },
"FRACTAL": {
"TITLE": "Fractals",
"DESCRIPTION": "Visualisation of complex geometric patterns that resemble each other on increasingly smaller scales (self-similarity)."
@@ -543,5 +556,35 @@
"NOTE": "Note",
"GRID_HEIGHT": "Height",
"GRID_WIDTH": "Width"
+ },
+ "FOUR_COLOR": {
+ "TITLE": "Four Color Theorem",
+ "GENERATE": "Generate Map",
+ "SOLVE": "Auto Solve",
+ "CLEAR": "Clear Colors",
+ "COLOR_1": "Color 1",
+ "COLOR_2": "Color 2",
+ "COLOR_3": "Color 3",
+ "COLOR_4": "Color 4",
+ "EXECUTION_TIME": "Execution Time",
+ "STATUS": {
+ "LABEL": "Status",
+ "INCOMPLETE": "Map is not fully colored yet.",
+ "SOLVED": "Congratulations! You solved the map correctly!",
+ "CONFLICTS": "Warning: Adjacent regions have the same color!",
+ "INVALID": "Map is fully colored, but contains conflicts."
+ },
+ "EXPLANATION": { "TITLE": "Four Color Theorem",
+ "EXPLANATION": "The four color theorem states that any map in a plane can be colored using at most four colors in such a way that regions sharing a common boundary (other than a single point) do not share the same color.",
+ "DISCLAIMER": "This algorithm uses backtracking to find a valid coloring for the generated regions.",
+ "DISCLAIMER_1": "Map Generation: Regions are generated using a random seed growth algorithm (Voronoi-like) on a grid.",
+ "DISCLAIMER_2": "Adjacency: Two regions are considered neighbors if they share at least one edge in the grid.",
+ "DISCLAIMER_3": "Backtracking: The solver tries colors 1-4 for each region, backtracking when a conflict is found.",
+ "DISCLAIMER_4": "Interactive: You can also click on regions to cycle through colors manually.",
+ "DISCLAIMER_BOTTOM": "Click to color the region. Click again to change the color."
+ },
+ "ALERT": {
+ "NO_SOLUTION": "No solution found (this should not happen for a planar map!)."
+ }
}
}
diff --git a/src/styles.scss b/src/styles.scss
index 7144ca5..7196338 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -50,6 +50,10 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
--link-color-hover: #9ad2ff;
}
+.dark body {
+ background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
+}
+
/* ---- global background and tests ---- */
html,
body {
@@ -287,12 +291,17 @@ a {
}
canvas {
- border: 1px solid lightgray;
+ border: none;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
display: block;
margin: 0 auto;
max-width: 100%;
}
+.dark canvas {
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
.legend {
display: flex;
flex-wrap: wrap;
@@ -351,6 +360,22 @@ canvas {
&.M2 {
background-color: green;
}
+
+ &.color1 {
+ background-color: #FF5252;
+ }
+
+ &.color2 {
+ background-color: #448AFF;
+ }
+
+ &.color3 {
+ background-color: #4CAF50;
+ }
+
+ &.color4 {
+ background-color: #FFEB3B;
+ }
}
}
@@ -518,6 +543,8 @@ app-root {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: clamp(1.5rem, 5vw, 2.5rem);
+ background: linear-gradient(135deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
+ background-clip: text;
}
.hero .intro .lead {
@@ -706,6 +733,57 @@ app-root {
display: flex;
flex-direction: column;
cursor: pointer;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ }
+}
+
+.algo-card::after, .project-card::after {
+ inset: unset;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
+ border-radius: var(--card-radius) var(--card-radius) 0 0;
+}
+
+.algo-icon-wrap {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: color-mix(in oklab, var(--mat-sys-primary) 15%, transparent);
+ color: var(--mat-sys-primary);
+ margin-bottom: 1rem;
+
+ mat-icon {
+ font-size: 26px;
+ width: 26px;
+ height: 26px;
+ }
+}
+
+.algo-page-title {
+ margin: 0 0 0.5rem 0;
+ font-size: clamp(1.4rem, 4vw, 2rem);
+}
+
+.algo-card-title {
+ font-size: 1.05rem;
+ font-weight: 600;
+ margin: 0 0 0.5rem 0;
+}
+
+.algo-card-desc {
+ margin: 0;
+ opacity: 0.75;
+ font-size: 0.9rem;
+ line-height: 1.55;
}
.project-card {