feat : added erase option functionality

btc-UI/src/app/components/selection.service/selection.service.ts

@@ -10,9 +10,11 @@ export interface SelectionData {
 
 @Injectable({ providedIn: 'root' })
 export class SelectionService {
+  // Stores finalized selections
   private selections = new BehaviorSubject<SelectionData[]>([]);
   selections$ = this.selections.asObservable();
 
+  // Stores current "in-progress" row
   private currentRow = new BehaviorSubject<SelectionData>({
     label: '',
     numbers: [],
@@ -21,27 +23,55 @@ export class SelectionService {
   });
   currentRow$ = this.currentRow.asObservable();
 
+  // ✅ Update only part of the current row (label / numbers / value)
   updatePartial(update: Partial<SelectionData>) {
     const current = this.currentRow.value;
-    this.currentRow.next({ ...current, ...update });
+
+    const updated: SelectionData = {
+      ...current,
+      ...update
+    };
+
+    // Recalculate total only if both value and numbers exist
+    if (updated.numbers.length > 0 && updated.value > 0) {
+      updated.total = updated.numbers.length * updated.value * 10;
+    } else {
+      updated.total = 0;
+    }
+
+    this.currentRow.next(updated);
   }
 
+  // ✅ Finalize the current row and push it to the finalized list
   finalizeCurrentRow() {
     const completed = this.currentRow.value;
-    if (!completed.label || completed.numbers.length === 0 || !completed.value) return;
+
+    // Validation: must have label, numbers, and valid value
+    if (!completed.label || completed.numbers.length === 0 || completed.value <= 0) return;
 
     const total = completed.numbers.length * completed.value * 10;
-    const finalRow = { ...completed, total };
+    const finalRow: SelectionData = { ...completed, total };
 
-    const updated = [...this.selections.value, finalRow];
-    this.selections.next(updated);
+    const updatedSelections = [...this.selections.value, finalRow];
+    this.selections.next(updatedSelections);
 
     // Reset current row
-    this.currentRow.next({ label: '', numbers: [], value: 0, total: 0 });
+    this.currentRow.next({
+      label: '',
+      numbers: [],
+      value: 0,
+      total: 0
+    });
   }
 
+  // ✅ Clear everything (for ERASE)
   clearSelections() {
     this.selections.next([]);
-    this.currentRow.next({ label: '', numbers: [], value: 0, total: 0 });
+    this.currentRow.next({
+      label: '',
+      numbers: [],
+      value: 0,
+      total: 0
+    });
   }
 }

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html

@@ -6,7 +6,7 @@
       <!-- Left Group: CALC, ERASE, BOX, FIELD -->
       <div class="d-flex flex-wrap justify-content-center gap-2 first">
         <button class="btn btn-dark one" (click)="openCalculator()">CALC</button>
-        <button class="btn btn-dark two">ERASE</button>
+       <button class="btn btn-dark two" (click)="erase()">ERASE</button>
         <button class="btn btn-secondary three">BOX</button>
         <button class="btn btn-secondary four">FIELD</button>
       </div>

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts

@@ -113,6 +113,11 @@ export class TouchPadMenuComponent implements OnInit {
     this.resetSelections();
   }
 
+  erase() {
+    this.selectionService.clearSelections();
+    this.resetSelections();  // Clear local selections
+  }
+
   resetSelections() {
     this.selectedLabel = null;
     this.selectedNumbers = [];