Created new component and refactored

- Created new component to display the game of life algo
- created an algo info component to combine the algo header for all algos

src/app/app.routes.ts

@@ -10,5 +10,6 @@ export const routes: Routes = [
   { path: RouterConstants.PATHFINDING.PATH, component: RouterConstants.PATHFINDING.COMPONENT},
   { path: RouterConstants.SORTING.PATH, component: RouterConstants.SORTING.COMPONENT},
   { path: RouterConstants.IMPRINT.PATH, component: RouterConstants.IMPRINT.COMPONENT},
+  { path: RouterConstants.GOL.PATH, component: RouterConstants.GOL.COMPONENT}
 ];
 

src/app/constants/RouterConstants.ts

@@ -4,6 +4,7 @@ import {ImprintComponent} from '../pages/imprint/imprint.component';
 import {AlgorithmsComponent} from '../pages/algorithms/algorithms.component';
 import {PathfindingComponent} from '../pages/algorithms/pathfinding/pathfinding.component';
 import {SortingComponent} from '../pages/algorithms/sorting/sorting.component';
+import {ConwayGol} from '../pages/algorithms/conway-gol/conway-gol';
 
 export class RouterConstants {
 
@@ -37,6 +38,12 @@ export class RouterConstants {
     COMPONENT: SortingComponent
   };
 
+  static readonly GOL = {
+    PATH: 'algorithms/gol',
+    LINK: '/algorithms/gol',
+    COMPONENT: ConwayGol
+  };
+
   static readonly IMPRINT = {
     PATH: 'imprint',
     LINK: '/imprint',

src/app/constants/UrlConstants.ts

@@ -7,4 +7,5 @@
   static readonly QUICK_SORT_WIKI = 'https://de.wikipedia.org/wiki/Quicksort'
   static readonly HEAP_SORT_WIKI = 'https://de.wikipedia.org/wiki/Heapsort'
   static readonly SHAKE_SORT_WIKI = 'https://de.wikipedia.org/wiki/Shakersort'
+  static readonly CONWAYS_WIKI = 'https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life'
 }

src/app/pages/algorithms/algorithms.component.scss

@@ -10,7 +10,7 @@
 
   mat-card {
     cursor: pointer;
-    min-width: 300px;
+    min-width: 450px;
-    max-width: 400px;
+    max-width: 450px;
   }
 }

src/app/pages/algorithms/conway-gol/conway-gol.html

@@ -0,0 +1,8 @@
+<mat-card class="container">
+  <mat-card-header>
+    <mat-card-title>{{ 'GOL.TITLE' | translate }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-information [algorithmInformation]="algoInformation"/>
+  </mat-card-content>
+</mat-card>

src/app/pages/algorithms/conway-gol/conway-gol.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {TranslatePipe} from "@ngx-translate/core";
+import {UrlConstants} from '../../../constants/UrlConstants';
+import {Information} from '../information/information';
+import {AlgorithmInformation} from '../information/information.models';
+
+@Component({
+  selector: 'app-conway-gol',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    TranslatePipe,
+    Information
+  ],
+  templateUrl: './conway-gol.html',
+  styleUrl: './conway-gol.scss',
+})
+export class ConwayGol {
+
+  protected readonly UrlConstants = UrlConstants;
+
+  algoInformation: AlgorithmInformation = {
+    title: 'PATHFINDING.EXPLANATION.TITLE',
+    entries: [
+      {
+        name: 'Dijkstra',
+        description: 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION',
+        link: UrlConstants.DIJKSTRA_WIKI
+      },
+      {
+        name: 'A*',
+        description: 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION',
+        link: UrlConstants.ASTAR_WIKI
+      }
+    ],
+    disclaimer: 'PATHFINDING.EXPLANATION.DISCLAIMER',
+    disclaimerBottom: '',
+    disclaimerListEntry: []
+  };
+}

src/app/pages/algorithms/information/information.html

@@ -0,0 +1,35 @@
+<div class="algo-info">
+  <h3>{{ algorithmInformation.title | translate }}</h3>
+
+  @if(algorithmInformation.entries && algorithmInformation.entries.length > 0){
+    @for (algo of algorithmInformation.entries; track algo)
+    {
+      <p>
+        <strong>{{ algo.name }}</strong> {{ algo.description | translate }}
+        <a href="{{algo.link}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
+      </p>
+    }
+  }
+
+  @if (algorithmInformation.disclaimer !== '')
+  {
+    <p>
+      <strong>{{ 'ALGORITHM.NOTE' | translate}}</strong> {{ algorithmInformation.disclaimer | translate}}
+    </p>
+    @if (algorithmInformation.disclaimerListEntry && algorithmInformation.disclaimerListEntry.length > 0)
+    {
+      <ul>
+        @for (entry of algorithmInformation.disclaimerListEntry; track entry)
+        {
+          <li>{{ entry | translate}}</li>
+        }
+      </ul>
+    }
+    @if (algorithmInformation.disclaimerBottom !== '')
+    {
+      <p>
+        {{ algorithmInformation.disclaimerBottom | translate}}
+      </p>
+    }
+  }
+</div>

src/app/pages/algorithms/information/information.models.ts

@@ -0,0 +1,14 @@
+export interface AlgorithmInformation {
+  title: string;
+  entries: AlgorithmEntry[];
+  disclaimer: string;
+  disclaimerBottom: string;
+  disclaimerListEntry: string[];
+}
+
+export interface AlgorithmEntry {
+  name: string;
+  description: string;
+  link: string;
+
+}

src/app/pages/algorithms/information/information.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {TranslatePipe} from "@ngx-translate/core";
+import {UrlConstants} from "../../../constants/UrlConstants";
+import {AlgorithmInformation} from './information.models';
+
+@Component({
+  selector: 'app-information',
+    imports: [
+        TranslatePipe
+    ],
+  templateUrl: './information.html',
+  styleUrl: './information.scss',
+})
+export class Information {
+
+    @Input({ required: true }) algorithmInformation!: AlgorithmInformation;
+
+    protected readonly UrlConstants = UrlConstants;
+}

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -3,23 +3,7 @@
     <mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <div class="algo-info">
+    <app-information [algorithmInformation]="algoInformation"/>
-      <h3>{{ 'PATHFINDING.EXPLANATION.TITLE' | translate }}</h3>
-
-      <p>
-        <strong>Dijkstra</strong> {{ 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }}
-        <a href="{{UrlConstants.DIJKSTRA_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-      </p>
-
-      <p>
-        <strong>A*</strong> {{ 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION' | translate}}
-        <a href="{{UrlConstants.ASTAR_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-      </p>
-
-      <p>
-        <strong>{{ 'PATHFINDING.EXPLANATION.NOTE' | translate}}</strong> {{ 'PATHFINDING.EXPLANATION.DISCLAIMER' | translate}}
-      </p>
-    </div>
 
     <div class="controls-container">
       <div class="controls">

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -13,6 +13,8 @@ import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MAX_RA
 import {PathfindingService} from './service/pathfinding.service';
 import {UrlConstants} from '../../../constants/UrlConstants';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {Information} from '../information/information';
+import {AlgorithmInformation} from '../information/information.models';
 
 enum NodeType {
   Start = 'start',
@@ -37,7 +39,8 @@ interface GridPos { row: number; col: number }
     MatCard,
     MatCardHeader,
     MatCardTitle,
-    MatCardContent
+    MatCardContent,
+    Information
   ],
   templateUrl: './pathfinding.component.html',
   styleUrls: ['./pathfinding.component.scss']
@@ -50,6 +53,25 @@ export class PathfindingComponent implements AfterViewInit {
   readonly MIN_GRID_SIZE = MIN_GRID_SIZE;
   readonly MAX_GRID_SIZE = MAX_GRID_SIZE;
 
+  algoInformation: AlgorithmInformation = {
+    title: 'PATHFINDING.EXPLANATION.TITLE',
+    entries: [
+      {
+        name: 'Dijkstra',
+        description: 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION',
+        link: UrlConstants.DIJKSTRA_WIKI
+      },
+      {
+        name: 'A*',
+        description: 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION',
+        link: UrlConstants.ASTAR_WIKI
+      }
+    ],
+    disclaimer: 'PATHFINDING.EXPLANATION.DISCLAIMER',
+    disclaimerBottom: '',
+    disclaimerListEntry: []
+  };
+
   @ViewChild('gridCanvas', { static: true })
   canvas!: ElementRef<HTMLCanvasElement>;
 

src/app/pages/algorithms/service/algorithms.service.ts

@@ -20,6 +20,12 @@ export class AlgorithmsService {
       title: 'ALGORITHM.SORTING.TITLE',
       description: 'ALGORITHM.SORTING.DESCRIPTION',
       routerLink: RouterConstants.SORTING.LINK
+    },
+    {
+      id: 'gameOfLife',
+      title: 'ALGORITHM.GOL.TITLE',
+      description: 'ALGORITHM.GOL.DESCRIPTION',
+      routerLink: RouterConstants.GOL.LINK
     }
   ];
 

src/app/pages/algorithms/sorting/sorting.component.html

@@ -4,47 +4,13 @@
       <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <div class="algo-info">
+      <app-information [algorithmInformation]="algoInformation"/>
-        <h3>{{ 'SORTING.EXPLANATION.TITLE' | translate }}</h3>
-
-        <p>
-          <strong>Bubble Sort</strong> {{ 'SORTING.EXPLANATION.BUBBLE_SORT_EXPLANATION' | translate }}
-          <a href="{{UrlConstants.BUBBLE_SORT_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-        </p>
-
-        <p>
-          <strong>Cocktail Sort</strong> {{ 'SORTING.EXPLANATION.COCKTAIL_SORT_EXPLANATION' | translate}}
-          <a href="{{UrlConstants.SHAKE_SORT_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-        </p>
-
-        <p>
-          <strong>Quick Sort</strong> {{ 'SORTING.EXPLANATION.QUICK_SORT_EXPLANATION' | translate}}
-          <a href="{{UrlConstants.QUICK_SORT_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-        </p>
-
-        <p>
-          <strong>Heap Sort</strong> {{ 'SORTING.EXPLANATION.HEAP_SORT_EXPLANATION' | translate}}
-          <a href="{{UrlConstants.HEAP_SORT_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
-        </p>
-
-        <p>
-          <strong>{{ 'SORTING.EXPLANATION.NOTE' | translate}}</strong> {{ 'SORTING.EXPLANATION.DISCLAIMER' | translate}}
-        </p>
-          <ul>
-            <li>{{ 'SORTING.EXPLANATION.DISCLAIMER_1' | translate}}</li>
-            <li>{{ 'SORTING.EXPLANATION.DISCLAIMER_2' | translate}}</li>
-            <li>{{ 'SORTING.EXPLANATION.DISCLAIMER_3' | translate}}</li>
-          </ul>
-        <p>
-          {{ 'SORTING.EXPLANATION.DISCLAIMER_4' | translate}}
-        </p>
-      </div>
       <div class="controls-panel">
         <mat-form-field appearance="fill">
           <mat-label>{{ 'SORTING.ALGORITHM' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedAlgorithm">
-            @for (algo of availableAlgorithms; track algo.value) {
+            @for (algo of algoInformation.entries; track algo.name) {
-              <mat-option [value]="algo.value">{{ algo.name }}</mat-option>
+              <mat-option [value]="algo.name">{{ algo.name }}</mat-option>
             }
           </mat-select>
         </mat-form-field>

src/app/pages/algorithms/sorting/sorting.component.ts

@@ -11,11 +11,12 @@ import {SortData, SortSnapshot} from './sorting.models';
 import { FormsModule } from '@angular/forms';
 import {MatInput} from '@angular/material/input';
 import {UrlConstants} from '../../../constants/UrlConstants';
-import {MIN} from '@angular/forms/signals';
+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],
+  imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information],
   templateUrl: './sorting.component.html',
   styleUrls: ['./sorting.component.scss']
 })
@@ -27,21 +28,46 @@ export class SortingComponent implements OnInit {
   readonly MAX_ARRAY_SIZE: number = 200;
   readonly MIN_ARRAY_SIZE: number = 20;
 
+  algoInformation: AlgorithmInformation = {
+    title: 'SORTING.EXPLANATION.TITLE',
+    entries: [
+      {
+        name: 'Bubble Sort',
+        description: 'SORTING.EXPLANATION.BUBBLE_SORT_EXPLANATION',
+        link: UrlConstants.BUBBLE_SORT_WIKI
+      },
+      {
+        name: 'Cocktail Sort',
+        description: 'SORTING.EXPLANATION.COCKTAIL_SORT_EXPLANATION',
+        link: UrlConstants.SHAKE_SORT_WIKI
+      },
+      {
+        name: 'Quick Sort',
+        description: 'SORTING.EXPLANATION.QUICK_SORT_EXPLANATION',
+        link: UrlConstants.QUICK_SORT_WIKI
+      },
+      {
+        name: 'Heap Sort',
+        description: 'SORTING.EXPLANATION.HEAP_SORT_EXPLANATION',
+        link: UrlConstants.HEAP_SORT_WIKI
+      }
+    ],
+    disclaimer: 'SORTING.EXPLANATION.DISCLAIMER',
+    disclaimerBottom: 'SORTING.EXPLANATION.DISCLAIMER_4',
+    disclaimerListEntry: [
+      'SORTING.EXPLANATION.DISCLAIMER_1',
+      'SORTING.EXPLANATION.DISCLAIMER_2',
+      'SORTING.EXPLANATION.DISCLAIMER_3'
+    ]
+  };
+
   private timeoutIds: number[] = [];
   sortArray: SortData[] = [];
   unsortedArrayCopy: SortData[] = [];
   arraySize = 50;
   maxArrayValue = 100;
   animationSpeed = 50; // Milliseconds per step
-
+  selectedAlgorithm: string = this.algoInformation.entries[0].name;
-  // Placeholder for available sorting algorithms
-  availableAlgorithms: { name: string; value: string }[] = [
-    { name: 'Bubble Sort', value: 'bubbleSort' },
-    { name: 'Cocktail Sort', value: 'cocktailSort' },
-    { name: 'Quick Sort', value: 'quickSort' },
-    { name: 'Heap Sort', value: 'heapSort' },
-  ];
-  selectedAlgorithm: string = this.availableAlgorithms[0].value;
   executionTime = 0;
 
   ngOnInit(): void {
@@ -93,22 +119,22 @@ export class SortingComponent implements OnInit {
     let snapshots: SortSnapshot[] = [];
 
     switch (this.selectedAlgorithm) {
-      case 'bubbleSort':
+      case 'Bubble Sort':
         snapshots = this.sortingService.bubbleSort(this.sortArray);
         break;
-      case 'quickSort':
+      case 'Quick Sort':
         snapshots = this.sortingService.quickSort(this.sortArray);
         break;
-      case 'heapSort':
+      case 'Heap Sort':
         snapshots = this.sortingService.heapSort(this.sortArray);
         break;
-      case 'cocktailSort':
+      case 'Cocktail Sort':
         snapshots = this.sortingService.cocktailSort(this.sortArray);
         break;
     }
 
     const endTime = performance.now();
-    this.executionTime = parseFloat((endTime - startTime).toFixed(4));
+    this.executionTime = Number.parseFloat((endTime - startTime).toFixed(4));
 
     console.log(snapshots.length);
     this.animateSorting(snapshots);

src/assets/i18n/de.json

@@ -313,7 +313,6 @@
       "TITLE": "Algorithmen",
       "DIJKSTRA_EXPLANATION": " findet garantiert den kürzesten Weg, wenn alle Kantenkosten nicht-negativ sind. Vorteil: optimal und ohne Heuristik. Nachteil: besucht oft sehr viele Knoten (kann bei großen Grids langsamer wirken).",
       "ASTAR_EXPLANATION": " erweitert Dijkstra um eine Heuristik (z.B. Manhattan-Distanz) und kann dadurch wesentlich zielgerichteter suchen. Vorteil: oft deutlich schneller bei guter Heuristik; bei zulässiger Heuristik bleibt der Weg optimal. Nachteil: hängt stark von der Heuristik ab (schlechte Heuristik ≈ Dijkstra).",
-      "NOTE": "HINWEIS",
       "DISCLAIMER": "Diese A*-Implementierung ist bewusst einfach gehalten. Es wird nur in vier Richtungen gegangen und jeder Schritt kostet 1. Die Heuristik ist minimal und dient nur dazu, das Prinzip von A* gegenüber Dijkstra zu demonstrieren. Ziel ist nicht ein optimaler oder produktionsreifer A*-Algorithmus, sondern eine anschauliche Visualisierung, wie Heuristiken die Suche beschleunigen können."
     },
     "ALERT": {
@@ -336,7 +335,6 @@
       "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.",
       "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.",
-      "NOTE": "HINWEIS",
       "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).",
       "DISCLAIMER_2": "Average Case: Der statistische Normalfall.",
@@ -344,6 +342,9 @@
       "DISCLAIMER_4": "Zusätzlich gibt es fast immer einen Time-Space Trade-off (Zeit-Speicher-Kompromiss): Algorithmen, die extrem schnell sind (wie Merge Sort), benötigen oft viel zusätzlichen Arbeitsspeicher. Algorithmen, die direkt im vorhandenen Speicher arbeiten (wie Heap Sort), sparen Platz, sind aber manchmal komplexer oder minimal langsamer. Es gibt also keine \"One-Size-Fits-All\"-Lösung."
     }
   },
+  "GOL": {
+    "TITLE": "Conway's Spiel des Lebens"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithmen",
     "PATHFINDING": {
@@ -353,7 +354,11 @@
     "SORTING": {
       "TITLE": "Sortierung",
       "DESCRIPTION": "Visualisierung verschiedener Sortieralgorithmen."
-
+    },
-    }
+    "GOL": {
+      "TITLE": "Conway's Game of Life",
+      "DESCRIPTION": "Das 'Spiel des Lebens' ist ein vom Mathematiker John Horton Conway 1970 entworfenes Spiel."
+    },
+    "NOTE": "HINWEIS"
   }
 }

src/assets/i18n/en.json

@@ -313,7 +313,6 @@
       "TITLE": "Algorithms",
       "DIJKSTRA_EXPLANATION": " is guaranteed to find the shortest path if all edge costs are non-negative. Advantage: optimal and without heuristics. Disadvantage: often visits a large number of nodes (can be slower for large grids).",
       "ASTAR_EXPLANATION": " extends Dijkstra with a heuristic (e.g. Manhattan distance) and can therefore search in a much more targeted manner. Advantage: often significantly faster with good heuristics; with permissible heuristics, the path remains optimal. Disadvantage: highly dependent on heuristics (poor heuristics ≈ Dijkstra).",
-      "NOTE": "Note",
       "DISCLAIMER": "This A* implementation is deliberately kept simple. It only moves in four directions and each step costs 1. The heuristic is minimal and only serves to demonstrate the principle of A* compared to Dijkstra. The goal is not an optimal or production-ready A* algorithm, but a clear visualisation of how heuristics can speed up the search."
     },
     "ALERT": {
@@ -335,7 +334,6 @@
       "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.",
-      "NOTE": "NOTE",
       "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.",
@@ -343,6 +341,9 @@
       "DISCLAIMER_4": "Additionally, there is almost always a Time-Space Trade-off: Algorithms that are extremely fast (like Merge Sort) often require a lot of additional working memory. Algorithms that work directly in existing memory (like Heap Sort) save space but are sometimes more complex or slightly slower. Thus, there is no \"one-size-fits-all\" solution."
     }
   },
+  "GOL": {
+    "TITLE": "Conway's Game of Life"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithms",
     "PATHFINDING": {
@@ -352,6 +353,11 @@
     "SORTING": {
       "TITLE": "Sorting",
       "DESCRIPTION": "Visualizing various sorting algorithms."
-    }
+    },
+    "GOL": {
+      "TITLE:": "Conway's Game of Life",
+      "DESCRIPTION": "The Game of Life is a cellular automaton devised by the British mathematician John Horton Conway in 1970."
+    },
+    "NOTE": "Note"
   }
 }