fix : touchpad number properly changing with raceno

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

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs';
 import { SelectionService, SelectionData } from '../selection.service/selection.service';
 import { SharedStateService } from '../../service/shared-state.service';
 import { LabelRestrictionService } from '../selection.service/label-restriction.service';
+
 @Component({
   selector: 'app-touch-pad-menu',
   standalone: true,
@@ -95,6 +96,7 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     });
 
     this.labelRowsFlat = this.labelRows.flat();
+
     this.selectionsSubscription = this.selectionService.selections$.subscribe(selections => {
       this.currentSelections = selections;
       this.maxRowsReached = selections.length >= 5;
@@ -105,6 +107,7 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         this.showLimitPopup = false;
       }
     });
+
     this.currentRowSubscription = this.selectionService.currentRow$.subscribe(row => {
       this.currentTotal = row.total;
     });
@@ -112,6 +115,17 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     // --- NEW: Subscribe to race changes ---
     this.sharedStateService.selectedRace$.subscribe(() => {
       this.setActualRunners();
+      // If currently in a multi-leg pool, update the numbers for the active leg
+      if (this.currentPool && this.multiLegLabels.includes(this.selectedLabel || '')) {
+        this.updateLegRaceDisplay(this.currentPool);
+        const runnerCount = this.getRunnerCountForLeg(this.multiLegBaseRaceIdx, this.multiLegStage);
+        this.runnerCount = runnerCount || 12;
+        this.numbers = Array.from({ length: 30 }, (_, i) => i + 1);
+        this.numbersFlat = this.numberRows.flat();
+        this.actualRunners = this.getActualRunnersForCurrentPoolLeg();
+      } else {
+        this.setActualRunners();
+      }
     });
   }
 
@@ -121,9 +135,27 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     this.runnerCountSubscription?.unsubscribe();
   }
 
-  // --- NEW METHOD ---
+  // --- NEW HELPER METHOD ---
+  getActualRunnersForCurrentPoolLeg(): Set<number> {
+    const raceCardData = JSON.parse(localStorage.getItem('raceCardData') || '{}');
+    const raceIdx = this.getRaceForLeg(this.currentPool!, this.multiLegStage) - 1;
+    const race = raceCardData?.raceVenueRaces?.races?.[raceIdx];
+    if (race?.runners && Array.isArray(race.runners)) {
+      return new Set(race.runners.map((r: any) => Number(r.number)));
+    }
+    if (Array.isArray(race)) {
+      return new Set(race.map((r: any) => Number(r.number || r)));
+    }
+    return new Set();
+  }
+
+  // --- MODIFIED METHOD ---
   setActualRunners() {
-    this.actualRunners = this.getActualRunnersForCurrentRace();
+    if (this.currentPool && this.multiLegLabels.includes(this.selectedLabel || '')) {
+      this.actualRunners = this.getActualRunnersForCurrentPoolLeg();
+    } else {
+      this.actualRunners = this.getActualRunnersForCurrentRace();
+    }
   }
 
   // --- NEW METHOD ---
@@ -131,7 +163,6 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     const raceCardData = JSON.parse(localStorage.getItem('raceCardData') || '{}');
     const selectedRaceIdx = this.sharedStateService.getSelectedRace() - 1;
     const race = raceCardData?.raceVenueRaces?.races?.[selectedRaceIdx];
-
     if (race?.runners && Array.isArray(race.runners)) {
       return new Set(race.runners.map((r: any) => Number(r.number)));
     }
@@ -185,16 +216,13 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
 
   get isBoxToggleDisabled(): boolean {
     if (!this.selectedLabel) return true;
-
     const disallowedBoxLabels = ['WIN', 'SHP', 'THP', 'PLC', 'SHW', 'TRE', 'MJP', 'JKP'];
     if (disallowedBoxLabels.includes(this.selectedLabel)) {
       return true;
     }
-
     if (this.selectedNumbers.includes('F')) {
       return true;
     }
-
     return false;
   }
 
@@ -258,8 +286,11 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         value: { label: poolName, baseRaceIdx: this.multiLegBaseRaceIdx } 
       });
       this.updateLegRaceDisplay(poolName);
-      // --- NEW: Update actualRunners for multi-leg pool ---
-      this.setActualRunners();
+      // --- NEW: Update runners and number pad immediately ---
+      this.actualRunners = this.getActualRunnersForCurrentPoolLeg();
+      this.runnerCount = this.getRunnerCountForLeg(this.multiLegBaseRaceIdx, 0) || 12;
+      this.numbers = Array.from({ length: 30 }, (_, i) => i + 1);
+      this.numbersFlat = this.numberRows.flat();
     } else {
       this.currentPool = null;
       this.multiLegBaseRaceIdx = 0;
@@ -278,7 +309,6 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
       const wspLabels = ['WIN', 'SHP', 'THP'];
       this.wspTicketStage = 0;
       this.selectionService.finalizeCurrentRow();
-
       const currentSelections = this.selectionService.getSelections();
       const blankRows = wspLabels.map(lbl => ({
         label: lbl,
@@ -694,7 +724,6 @@ printTicket() {
 
         currentRow.total = combinations * currentRow.value * 10;
       }
-
       allRows.push(currentRow);
     }
 
@@ -1198,8 +1227,11 @@ printTicket() {
 
     this.updateLegRaceDisplay(poolInfo.name);
     this.selectionService.updatePartial({ label: 'TRE' });
-    // --- NEW: Update actualRunners for TRE pool ---
-    this.setActualRunners();
+    // --- NEW: Update runners and number pad immediately ---
+    this.actualRunners = this.getActualRunnersForCurrentPoolLeg();
+    this.runnerCount = this.getRunnerCountForLeg(this.multiLegBaseRaceIdx, 0) || 12;
+    this.numbers = Array.from({ length: 30 }, (_, i) => i + 1);
+    this.numbersFlat = this.numberRows.flat();
   }
 
   closeTrePopup() {