feat: Add algorithm visualization with step-by-step animations

src/components/charts/KeyboardHeatmap.ts

@@ -235,7 +235,7 @@ export class KeyboardHeatmap {
       ">
         <div>
           <h4 style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">
-            🔴 Verbesserungsbedarf
+            Verbesserungsbedarf
           </h4>
           ${worstKeys
             .map(
@@ -263,7 +263,7 @@ export class KeyboardHeatmap {
         </div>
         <div>
           <h4 style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">
-            🟢 Starke Tasten
+            Starke Tasten
           </h4>
           ${bestKeys
             .map(

src/components/typing-area/TypingArea.ts

@@ -46,6 +46,40 @@ export class TypingArea {
     }
   }
 
+  /**
+   * Handle backspace - allow correction of mistakes
+   * Returns true if backspace was processed, false if at start
+   */
+  handleBackspace(): boolean {
+    if (this.currentPosition === 0) {
+      return false;
+    }
+
+    // Move position back
+    this.currentPosition--;
+
+    // Reset the character at the current position
+    const charEl = this.charElements[this.currentPosition];
+    if (charEl) {
+      charEl.classList.remove('correct', 'incorrect', 'upcoming');
+      charEl.classList.add('current');
+    }
+
+    // Reset the next character to upcoming (if exists)
+    if (this.currentPosition + 1 < this.charElements.length) {
+      const nextCharEl = this.charElements[this.currentPosition + 1];
+      if (nextCharEl) {
+        nextCharEl.classList.remove('current');
+        nextCharEl.classList.add('upcoming');
+      }
+    }
+
+    // Emit backspace event
+    EventBus.emit('typing:backspace', { position: this.currentPosition });
+
+    return true;
+  }
+
   /**
    * Process a keystroke
    */