fix : showing exact number in touchpad from RC

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

@@ -31,6 +31,9 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
   labelRowsFlat: string[] = [];
   numbersFlat: number[] = [];
 
+  // --- NEW PROPERTY ---
+  public actualRunners: Set<number> = new Set();
+
   wspTicketStage: number = 0; //added this 
 
   selectedLabel: string | null = null;
@@ -91,6 +94,8 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
       this.numbers = Array.from({ length: 30 }, (_, i) => i + 1);
       this.numbersFlat = this.numberRows.flat();
       this.updateLegRaceDisplay(this.currentPool || '');
+      // --- NEW: Update actualRunners when runner count changes ---
+      this.setActualRunners();
     });
 
     this.labelRowsFlat = this.labelRows.flat();
@@ -106,6 +111,11 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     this.currentRowSubscription = this.selectionService.currentRow$.subscribe(row => {
       this.currentTotal = row.total;
     });
+
+    // --- NEW: Subscribe to race changes ---
+    this.sharedStateService.selectedRace$.subscribe(() => {
+      this.setActualRunners();
+    });
   }
 
   ngOnDestroy() {
@@ -114,6 +124,26 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     this.runnerCountSubscription?.unsubscribe();
   }
 
+  // --- NEW METHOD ---
+  setActualRunners() {
+    this.actualRunners = this.getActualRunnersForCurrentRace();
+  }
+
+  // --- NEW METHOD ---
+  getActualRunnersForCurrentRace(): Set<number> {
+    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)));
+    }
+    if (Array.isArray(race)) {
+      return new Set(race.map((r: any) => Number(r.number || r)));
+    }
+    return new Set();
+  }
+
   get labelRows() {
     return this.chunk(this.labels, 3);
   }
@@ -181,16 +211,25 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     return this.disabledLabels.includes(label) || this.totalAmountLimitReached;
   }
 
+  // --- MODIFIED METHOD ---
   isNumberDisabled(number: number): boolean {
-    if (number > this.runnerCount) {
+    // Disable if number is not in actualRunners
+    if (!this.actualRunners.has(number)) {
       return true;
     }
+    // Allow all numbers for TAN when boxed
     if (this.selectedLabel === 'TAN' && this.isBoxed) {
       return false;
     }
-    if (this.selectedLabel === 'TAN' || this.multiLegLabels.includes(this.selectedLabel || '') || this.twoGroupLabels.includes(this.selectedLabel || '')) {
+    // Allow selection for TAN, multi-leg, or two-group labels
+    if (
+      this.selectedLabel === 'TAN' ||
+      this.multiLegLabels.includes(this.selectedLabel || '') ||
+      this.twoGroupLabels.includes(this.selectedLabel || '')
+    ) {
       return false;
     }
+    // Disable if number is already selected or total amount limit reached
     return this.selectedNumbers.includes(number) || this.totalAmountLimitReached;
   }
 
@@ -220,6 +259,8 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         value: { label: poolName, baseRaceIdx: this.multiLegBaseRaceIdx } 
       });
       this.updateLegRaceDisplay(poolName);
+      // --- NEW: Update actualRunners for multi-leg pool ---
+      this.setActualRunners();
     } else {
       this.currentPool = null;
       this.multiLegBaseRaceIdx = 0;
@@ -228,6 +269,8 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         type: 'multiLegPoolEnd',
         value: null
       });
+      // --- NEW: Update actualRunners for single race ---
+      this.setActualRunners();
     }
 
 //----------------------------------ADDED THIS -----------------------------------------------------
@@ -250,7 +293,6 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
 
       const totalNew = 0; // Each row is empty initially
       const totalExisting = currentSelections.reduce((sum, r) => sum + r.total, 0);
-
       if (totalExisting + totalNew <= 5000) {
         this.selectionService['selections'].next([...currentSelections, ...blankRows]);
       }
@@ -292,7 +334,6 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
     if (baseRaceIdx + maxLegs - 1 > totalRaces) {
       baseRaceIdx = Math.max(1, totalRaces - maxLegs + 1);
     }
-
     return baseRaceIdx;
   }
 
@@ -308,7 +349,7 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
   }
 
   selectNumber(number: number) {
-    if (!this.selectedLabel || this.totalAmountLimitReached || number > this.runnerCount) return;
+    if (!this.selectedLabel || this.totalAmountLimitReached || !this.actualRunners.has(number)) return;
 
     // TAN Box mode
     if (this.selectedLabel === 'TAN' && this.isBoxed) {
@@ -319,13 +360,10 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         const group1 = allBoxed.slice(0, groupSize);
         const group2 = allBoxed.slice(group1.length, group1.length + groupSize);
         const group3 = allBoxed.slice(group1.length + group2.length);
-
         const combined: (number | string)[] = [...group1];
         if (group2.length) combined.push('-', ...group2);
         if (group3.length) combined.push('-', ...group3);
-
         this.selectedNumbers = combined;
-
         this.selectionService.updatePartial({
           numbers: [...this.selectedNumbers],
           isBoxed: true,
@@ -398,10 +436,6 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
   }
   }
 
-
-
-
-
   private updateMultiLegSelection() {
     const combined: (number | string)[] = [];
     for (let i = 0; i <= this.multiLegStage; i++) {
@@ -489,6 +523,8 @@ export class TouchPadMenuComponent implements OnInit, OnDestroy {
         this.multiLegStage++;
         this.updateMultiLegSelection();
         this.updateLegRaceDisplay(this.currentPool || '');
+        // --- NEW: Update actualRunners for the new leg ---
+        this.setActualRunners();
       }
       return;
     }
@@ -685,8 +721,6 @@ printTicket() {
   const ticketId = `${venue}/${fullYear}${month}${day}/1`;
   const barcodeId = `1111${day}${month}${year}${timeStr}${millis}`;
 
-
-
 const winLabels = allRows.map(row => {
   const label = row.label.padEnd(10);               // WIN         (or SHP)
   const numbers = row.numbers.join(',').padEnd(15); // 1,2,3       
@@ -836,13 +870,10 @@ const winLabels = allRows.map(row => {
         const group1 = currentNumbers.slice(0, groupSize);
         const group2 = currentNumbers.slice(group1.length, group1.length + groupSize);
         const group3 = currentNumbers.slice(group1.length + group2.length);
-
         const combined: (number | string)[] = [...group1];
         if (group2.length) combined.push('-', ...group2);
         if (group3.length) combined.push('-', ...group3);
-
         this.selectedNumbers = combined;
-
         this.selectionService.updatePartial({
           numbers: [...this.selectedNumbers],
           isBoxed: true,
@@ -941,7 +972,13 @@ const winLabels = allRows.map(row => {
     const raceCardData = JSON.parse(localStorage.getItem('raceCardData') || '{}');
     const raceIdx = this.getRaceForLeg(this.currentPool || '', leg) - 1;
     const race = raceCardData?.raceVenueRaces?.races?.[raceIdx] || [];
-    return Array.isArray(race) ? race.length : 12;
+    if (race?.runners && Array.isArray(race.runners)) {
+      return race.runners.length;
+    }
+    if (Array.isArray(race)) {
+      return race.length;
+    }
+    return 12;
   }
 
   private handleFieldForSpecialLabels() {
@@ -1166,6 +1203,8 @@ const winLabels = allRows.map(row => {
 
     this.updateLegRaceDisplay(poolInfo.name);
     this.selectionService.updatePartial({ label: 'TRE' });
+    // --- NEW: Update actualRunners for TRE pool ---
+    this.setActualRunners();
   }
 
   closeTrePopup() {