Implement static 6-arrow layout with logical grouping system

- Fix dynamic column generation issue that created 6 columns instead of 3
- Implement static 12-row grid with intelligent visual state management
- Add visual-to-logical mapping system for proper end/arrow indexing
- Fix sum calculations using logical end groupings instead of visual rows
- Replace ends per set selector with automatic ruleset inference
- Convert to percentage-based responsive layout eliminating viewport overflow
- Add clean merged arrow header replacing individual column indices

Core improvements:
- 3-arrow (Indoor): 10 ends, sum-3 active, sum-6 on even ends
- 6-arrow (Outdoor): 6 ends, sum-3 greyed, sum-6 every 2 visual rows
- No more RenderFlex overflow errors with responsive column widths
- Proper bounds checking prevents range errors on inactive rows
- Package identifier updated to com.novoyuuparosk.archery_bookkeeper

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

android/app/src/main/kotlin/com/example/archery_bookkeeper/MainActivity.kt

@@ -1,5 +0,0 @@
-package com.example.archery_bookkeeper
-
-import io.flutter.embedding.android.FlutterActivity
-
-class MainActivity : FlutterActivity()

android/app/src/main/kotlin/com/novoyuuparosk/archery_bookkeeper/MainActivity.kt

@@ -0,0 +1,5 @@
+package com.novoyuuparosk.archery_bookkeeper
+
+import io.flutter.embedding.android.FlutterActivity
+
+class MainActivity : FlutterActivity()

lib/presentation/pages/scoring_page.dart

@@ -33,13 +33,8 @@ class _ScoringPageState extends State<ScoringPage> {
   void _onArrowsPerEndChanged(int arrows) {
     setState(() {
       arrowsPerEnd = arrows;
-      _initializeScores();
+      // Infer ends per set based on ruleset
-    });
+      endsPerSet = arrows == 3 ? 10 : 6;
-  }
-
-  void _onEndsPerSetChanged(int ends) {
-    setState(() {
-      endsPerSet = ends;
       _initializeScores();
     });
   }
@@ -90,9 +85,7 @@ class _ScoringPageState extends State<ScoringPage> {
             padding: const EdgeInsets.all(16.0),
             child: ToggleSwitches(
               arrowsPerEnd: arrowsPerEnd,
-              endsPerSet: endsPerSet,
               onArrowsPerEndChanged: _onArrowsPerEndChanged,
-              onEndsPerSetChanged: _onEndsPerSetChanged,
             ),
           ),
           

lib/presentation/widgets/common/toggle_switches.dart

@@ -2,18 +2,17 @@ import 'package:flutter/material.dart';
 
 class ToggleSwitches extends StatelessWidget {
   final int arrowsPerEnd;
-  final int endsPerSet;
   final Function(int) onArrowsPerEndChanged;
-  final Function(int) onEndsPerSetChanged;
 
   const ToggleSwitches({
     super.key,
     required this.arrowsPerEnd,
-    required this.endsPerSet,
     required this.onArrowsPerEndChanged,
-    required this.onEndsPerSetChanged,
   });
   
+  // Inferred ends per set based on ruleset
+  int get endsPerSet => arrowsPerEnd == 3 ? 10 : 6;
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -27,12 +26,7 @@ class ToggleSwitches extends StatelessWidget {
               arrowsPerEnd,
               onArrowsPerEndChanged,
             ),
-            _buildToggleGroup(
+            _buildRulesetInfo(),
-              'Ends per set',
-              [10, 12],
-              endsPerSet,
-              onEndsPerSetChanged,
-            ),
           ],
         ),
       ],
@@ -71,4 +65,46 @@ class ToggleSwitches extends StatelessWidget {
       ],
     );
   }
+  
+  Widget _buildRulesetInfo() {
+    final rulesetName = arrowsPerEnd == 3 ? 'Indoor' : 'Outdoor';
+    return Column(
+      children: [
+        Text(
+          'Ruleset',
+          style: const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+          ),
+        ),
+        const SizedBox(height: 8),
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+          decoration: BoxDecoration(
+            color: Colors.blue.shade50,
+            border: Border.all(color: Colors.blue.shade200),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Column(
+            children: [
+              Text(
+                rulesetName,
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color: Colors.blue.shade700,
+                ),
+              ),
+              Text(
+                '$endsPerSet ends',
+                style: TextStyle(
+                  fontSize: 12,
+                  color: Colors.blue.shade600,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
 }

lib/presentation/widgets/scoring_grid/scoring_grid.dart

@@ -34,14 +34,76 @@ class ScoringGrid extends StatelessWidget {
     return total;
   }
 
-  int _calculateSumOfSix(int endIndex) {
+  // Visual-to-logical mapping helpers
-    // Calculate sum of two consecutive ends (for even-numbered ends)
+  int _getLogicalEndFromVisualRow(int visualRow) {
-    if (endIndex % 2 == 1 && endIndex > 0) {
+    if (arrowsPerEnd == 3) {
-      return _calculateEndTotal(scores[endIndex - 1]) + _calculateEndTotal(scores[endIndex]);
+      // 3-arrow mode: 1 visual row = 1 logical end
+      return visualRow;
+    } else {
+      // 6-arrow mode: 2 visual rows = 1 logical end
+      return visualRow ~/ 2;
+    }
+  }
+  
+  int _getArrowIndexFromVisualPosition(int visualRow, int column) {
+    if (arrowsPerEnd == 3) {
+      // 3-arrow mode: column directly maps to arrow index
+      return column;
+    } else {
+      // 6-arrow mode: row within end determines arrow offset
+      final rowWithinEnd = visualRow % 2;
+      return (rowWithinEnd * 3) + column;
+    }
+  }
+  
+  bool _isVisualRowActive(int visualRow) {
+    if (arrowsPerEnd == 3) {
+      return visualRow < 10; // 10 ends for 3-arrow mode
+    } else {
+      return visualRow < 12; // All 12 rows active for 6-arrow mode
+    }
+  }
+  
+  // Fixed sum calculations using logical groupings
+  int _calculateSumOfThreeForLogicalEnd(int logicalEnd) {
+    if (logicalEnd >= scores.length) return 0;
+    
+    // For 3-arrow mode: sum first 3 arrows
+    // For 6-arrow mode: sum first 3 arrows (arrows 0-2)
+    int total = 0;
+    final maxArrows = arrowsPerEnd == 3 ? 3 : 3; // Always sum first 3 arrows for Sum of 3
+    
+    for (int i = 0; i < maxArrows && i < scores[logicalEnd].length; i++) {
+      final score = scores[logicalEnd][i];
+      if (score == 'X') {
+        total += 10;
+      } else if (score == 'M' || score.isEmpty) {
+        total += 0;
+      } else {
+        total += int.tryParse(score) ?? 0;
+      }
+    }
+    return total;
+  }
+  
+  int _calculateSumOfSixForLogicalEnd(int logicalEnd) {
+    if (arrowsPerEnd == 6) {
+      // 6-arrow mode: sum all 6 arrows of this logical end
+      return _calculateEndTotal(scores[logicalEnd]);
+    } else {
+      // 3-arrow mode: sum this end + previous end (6 arrows total)
+      if (logicalEnd % 2 == 1 && logicalEnd > 0) {
+        return _calculateEndTotal(scores[logicalEnd - 1]) + _calculateEndTotal(scores[logicalEnd]);
+      }
     }
     return 0;
   }
   
+  // Keep legacy method for accumulative calculation
+  int _calculateSumOfSix(int endIndex) {
+    return _calculateSumOfSixForLogicalEnd(endIndex);
+  }
+
   int _calculateAccumulative(int endIndex) {
     int total = 0;
     for (int i = 0; i <= endIndex && i < scores.length; i++) {
@@ -91,36 +153,79 @@ class ScoringGrid extends StatelessWidget {
             ),
             child: Row(
               children: [
-                const SizedBox(width: 50, child: Center(child: Text('End\\Shot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
+                // End column: ~13% (50/395)
-                ...List.generate(arrowsPerEnd, (index) => 
+                Expanded(
-                  SizedBox(width: 55, child: Center(child: Text('#${index + 1}', style: const TextStyle(fontWeight: FontWeight.bold))))),
+                  flex: 13,
-                const SizedBox(width: 55, child: Center(child: Text('Sum of 3', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
+                  child: Center(child: Text('End\\Shot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
-                SizedBox(
+                ),
-                  width: 55, 
+                // Arrow columns: ~42% (165/395)
+                Expanded(
+                  flex: 42,
+                  child: Center(
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                      decoration: BoxDecoration(
+                        color: Colors.blue.shade100,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: const Text('Arrows', style: TextStyle(fontWeight: FontWeight.bold)),
+                    ),
+                  ),
+                ),
+                // Sum of 3: ~14% (55/395)
+                Expanded(
+                  flex: 14,
                   child: Center(
                     child: Text(
-                      'Sum of 6', 
+                      'Sum of 3', 
                       style: TextStyle(
                         fontWeight: FontWeight.bold, 
                         fontSize: 12,
-                        color: arrowsPerEnd == 3 ? ScoringColors.getDisabledText() : null,
+                        color: arrowsPerEnd == 6 ? ScoringColors.getDisabledText() : null,
                       ),
                     ),
                   ),
                 ),
-                const SizedBox(width: 70, child: Center(child: Text('Accumulative', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
+                // Sum of 6: ~14% (55/395)
+                Expanded(
+                  flex: 14,
+                  child: Center(
+                    child: Text(
+                      'Sum of 6', 
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold, 
+                        fontSize: 12,
+                      ),
+                    ),
+                  ),
+                ),
+                // Accumulative: ~17% (70/395)
+                Expanded(
+                  flex: 17,
+                  child: Center(child: Text('Accumulative', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
+                ),
               ],
             ),
           ),
           
-          // Scoring rows
+          // Scoring rows - always 12 static rows
           Expanded(
             child: ListView.builder(
-              itemCount: endsPerSet,
+              itemCount: 12, // Always 12 visual rows regardless of ruleset
-              itemBuilder: (context, row) {
+              itemBuilder: (context, visualRow) {
-                final endTotal = _calculateEndTotal(scores[row]);
+                // Use logical grouping approach
-                final sumOfSix = _calculateSumOfSix(row);
+                final isActiveRow = _isVisualRowActive(visualRow);
-                final accumulative = _calculateAccumulative(row);
+                final logicalEnd = isActiveRow ? _getLogicalEndFromVisualRow(visualRow) : -1;
+                final rowsPerEnd = arrowsPerEnd == 6 ? 2 : 1;
+                final rowWithinEnd = visualRow % rowsPerEnd;
+                
+                // Calculate sums using logical groupings with bounds checking
+                final sumOfThree = (isActiveRow && logicalEnd >= 0 && logicalEnd < scores.length) 
+                    ? _calculateSumOfThreeForLogicalEnd(logicalEnd) : 0;
+                final sumOfSix = (isActiveRow && logicalEnd >= 0 && logicalEnd < scores.length) 
+                    ? _calculateSumOfSixForLogicalEnd(logicalEnd) : 0;
+                final accumulative = (isActiveRow && logicalEnd >= 0 && logicalEnd < scores.length) 
+                    ? _calculateAccumulative(logicalEnd) : 0;
                 
                 return Container(
                   height: 50,
@@ -131,65 +236,73 @@ class ScoringGrid extends StatelessWidget {
                   ),
                   child: Row(
                     children: [
-                      // End number
+                      // End number (only show on first row of each end)
-                      Container(
+                      Expanded(
-                        width: 50,
+                        flex: 13,
+                        child: Container(
                           padding: const EdgeInsets.symmetric(vertical: 8),
                           decoration: BoxDecoration(
-                          color: Colors.grey.shade100,
+                            color: isActiveRow ? Colors.grey.shade100 : ScoringColors.getDisabledBackground(),
                             border: Border(
-                            right: BorderSide(color: Colors.grey.shade300),
+                              right: BorderSide(
+                                color: isActiveRow ? Colors.grey.shade300 : ScoringColors.getDisabledBorder(),
+                              ),
                             ),
                           ),
                           child: Center(
                             child: Text(
-                            '#${row + 1}',
+                              (isActiveRow && rowWithinEnd == 0 && logicalEnd >= 0) ? '#${logicalEnd + 1}' : '',
-                            style: const TextStyle(fontWeight: FontWeight.w500),
+                              style: TextStyle(
+                                fontWeight: FontWeight.w500,
+                                color: isActiveRow ? null : ScoringColors.getDisabledText(),
+                              ),
+                            ),
                           ),
                         ),
                       ),
                       
-                      // Arrow score cells
+                      // Arrow cells section - 42% total width split evenly among 3 columns
-                      ...List.generate(arrowsPerEnd, (column) => 
+                      Expanded(
-                        SizedBox(
+                        flex: 42,
-                          width: 55,
+                        child: Row(
-                          child: ScoringCell(
+                          children: List.generate(3, (column) {
-                            score: scores[row][column],
+                            // Use logical grouping to determine arrow index
-                            isSelected: selectedRow == row && selectedColumn == column,
+                            final arrowIndex = _getArrowIndexFromVisualPosition(visualRow, column);
-                            onTap: () => onCellSelected(row, column),
+                            final actualRow = logicalEnd;
+                            final actualColumn = arrowIndex;
+                            
+                            // Check if this cell should be active
+                            final cellActive = isActiveRow && arrowIndex < arrowsPerEnd && 
+                                             logicalEnd >= 0 && logicalEnd < scores.length;
+                            
+                            return Expanded(
+                              child: cellActive ? ScoringCell(
+                                score: scores[actualRow][actualColumn],
+                                isSelected: selectedRow == actualRow && selectedColumn == actualColumn,
+                                onTap: () => onCellSelected(actualRow, actualColumn),
+                              ) : Container(
+                                decoration: BoxDecoration(
+                                  color: ScoringColors.getDisabledBackground(),
+                                  border: Border.all(color: ScoringColors.getDisabledBorder()),
                                 ),
                               ),
+                            );
+                          }),
+                        ),
                       ),
                       
-                      // Sum of 3 (end total)
+                      // Sum of 3 (end total) - completely greyed in 6-arrow mode
-                      Container(
+                      Expanded(
-                        width: 55,
+                        flex: 14,
+                        child: Container(
                           padding: const EdgeInsets.symmetric(vertical: 8),
                           decoration: BoxDecoration(
-                          color: Colors.blue.shade50,
+                            color: (arrowsPerEnd == 6 || !isActiveRow) 
-                          border: Border(
-                            left: BorderSide(color: Colors.grey.shade300),
-                          ),
-                        ),
-                        child: Center(
-                          child: Text(
-                            endTotal.toString(),
-                            style: const TextStyle(fontWeight: FontWeight.bold),
-                          ),
-                        ),
-                      ),
-                      
-                      // Sum of 6 (two-end total, only for even rows)
-                      Container(
-                        width: 55,
-                        padding: const EdgeInsets.symmetric(vertical: 8),
-                        decoration: BoxDecoration(
-                          color: arrowsPerEnd == 3 
                               ? ScoringColors.getDisabledBackground()
-                            : (row % 2 == 1 ? Colors.yellow.shade100 : Colors.transparent),
+                              : Colors.blue.shade50,
                             border: Border(
                               left: BorderSide(
-                              color: arrowsPerEnd == 3 
+                                color: (arrowsPerEnd == 6 || !isActiveRow)
                                   ? ScoringColors.getDisabledBorder()
                                   : Colors.grey.shade300,
                               ),
@@ -197,31 +310,81 @@ class ScoringGrid extends StatelessWidget {
                           ),
                           child: Center(
                             child: Text(
-                            (arrowsPerEnd == 3 || sumOfSix == 0) ? '' : sumOfSix.toString(),
+                              // Show Sum of 3 only in 3-arrow mode on the single row per end
+                              (arrowsPerEnd == 6 || !isActiveRow) ? '' : sumOfThree.toString(),
                               style: TextStyle(
                                 fontWeight: FontWeight.bold,
-                              color: arrowsPerEnd == 3 
+                                color: (arrowsPerEnd == 6 || !isActiveRow)
                                   ? ScoringColors.getDisabledText()
                                   : null,
                               ),
                             ),
                           ),
                         ),
+                      ),
                       
-                      // Accumulative (running total)
+                      // Sum of 6 - different logic for 3-arrow vs 6-arrow mode
-                      Container(
+                      Expanded(
-                        width: 70,
+                        flex: 14,
+                        child: Container(
                           padding: const EdgeInsets.symmetric(vertical: 8),
                           decoration: BoxDecoration(
-                          color: Colors.green.shade50,
+                            color: !isActiveRow || visualRow % 2 == 0
+                              ? ScoringColors.getDisabledBackground()
+                              : Colors.yellow.shade100,
                             border: Border(
-                            left: BorderSide(color: Colors.grey.shade300),
+                              left: BorderSide(
+                                color: !isActiveRow || visualRow % 2 == 0
+                                  ? ScoringColors.getDisabledBorder()
+                                  : Colors.grey.shade300,
+                              ),
                             ),
                           ),
                           child: Center(
                             child: Text(
-                            accumulative.toString(),
+                              // Show Sum of 6 on odd visual rows (0-indexed), when sum is available
-                            style: const TextStyle(fontWeight: FontWeight.bold),
+                              !isActiveRow || sumOfSix == 0 || visualRow % 2 == 0
+                                ? '' : sumOfSix.toString(),
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: !isActiveRow || visualRow % 2 == 0
+                                  ? ScoringColors.getDisabledText()
+                                  : null,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      
+                      // Accumulative (running total) - show on last row of each end
+                      Expanded(
+                        flex: 17,
+                        child: Container(
+                          padding: const EdgeInsets.symmetric(vertical: 8),
+                          decoration: BoxDecoration(
+                            color: !isActiveRow || (arrowsPerEnd == 6 && rowWithinEnd == 0)
+                              ? ScoringColors.getDisabledBackground()
+                              : Colors.green.shade50,
+                            border: Border(
+                              left: BorderSide(
+                                color: !isActiveRow || (arrowsPerEnd == 6 && rowWithinEnd == 0)
+                                  ? ScoringColors.getDisabledBorder()
+                                  : Colors.grey.shade300,
+                              ),
+                            ),
+                          ),
+                          child: Center(
+                            child: Text(
+                              // Show accumulative only on last row of each logical end
+                              !isActiveRow || (arrowsPerEnd == 6 && rowWithinEnd == 0)
+                                ? '' : accumulative.toString(),
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                color: !isActiveRow || (arrowsPerEnd == 6 && rowWithinEnd == 0)
+                                  ? ScoringColors.getDisabledText()
+                                  : null,
+                              ),
+                            ),
                           ),
                         ),
                       ),