Implement centralized color scheme system with Sum of 6 greying
- Add ScoringColorScheme class with explicit text colors per scheme - Implement traditional (vibrant) and lowSaturation (muted) color schemes - Add disabled state colors for greying out inactive elements - Refactor scoring_cell.dart and scoring_keypad.dart to use centralized colors - Grey out Sum of 6 column when in 3-arrow end mode while maintaining layout - Add comprehensive color scheme documentation and usage examples 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mikkeli Matlock
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../config/constants/scoring_colors.dart';
|
||||
|
||||
class ScoringCell extends StatelessWidget {
|
||||
final String score;
|
||||
@@ -12,28 +13,6 @@ class ScoringCell extends StatelessWidget {
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
Color _getScoreColor(String score) {
|
||||
switch (score) {
|
||||
case 'X':
|
||||
case '10':
|
||||
case '9':
|
||||
return Color(0xEEffeb50);
|
||||
case '8':
|
||||
case '7':
|
||||
return Color(0xEEed3f36);
|
||||
case '6':
|
||||
case '5':
|
||||
return Color(0xEE01afd8);
|
||||
case '4':
|
||||
case '3':
|
||||
return Color(0xEE222222);
|
||||
case '2':
|
||||
case '1':
|
||||
return Color(0xEEFFFFFF);
|
||||
default:
|
||||
return Colors.transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -42,10 +21,10 @@ class ScoringCell extends StatelessWidget {
|
||||
child: Container(
|
||||
margin: const EdgeInsets.all(2),
|
||||
decoration: BoxDecoration(
|
||||
color: _getScoreColor(score),
|
||||
color: ScoringColors.getScoreBackgroundColor(score),
|
||||
border: Border.all(
|
||||
color: isSelected ? Colors.blue : Colors.grey.shade400,
|
||||
width: isSelected ? 2 : 1,
|
||||
color: ScoringColors.getBorderColor(isSelected),
|
||||
width: ScoringColors.getBorderWidth(isSelected),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
@@ -54,7 +33,8 @@ class ScoringCell extends StatelessWidget {
|
||||
score,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: score == 'X' || score == '10' ? FontWeight.bold : FontWeight.normal,
|
||||
color: ScoringColors.getScoreTextColor(score),
|
||||
fontWeight: ScoringColors.shouldUseBoldText(score) ? FontWeight.bold : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'scoring_cell.dart';
|
||||
import '../../../config/constants/scoring_colors.dart';
|
||||
|
||||
class ScoringGrid extends StatelessWidget {
|
||||
final List<List<String>> scores;
|
||||
@@ -94,7 +95,19 @@ class ScoringGrid extends StatelessWidget {
|
||||
...List.generate(arrowsPerEnd, (index) =>
|
||||
Expanded(child: Center(child: Text('#${index + 1}', style: const TextStyle(fontWeight: FontWeight.bold))))),
|
||||
const SizedBox(width: 70, child: Center(child: Text('Sum of 3', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
|
||||
const SizedBox(width: 70, child: Center(child: Text('Sum of 6', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
|
||||
SizedBox(
|
||||
width: 70,
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Sum of 6',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 12,
|
||||
color: arrowsPerEnd == 3 ? ScoringColors.getDisabledText() : null,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 80, child: Center(child: Text('Accumulative', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)))),
|
||||
],
|
||||
),
|
||||
@@ -170,15 +183,26 @@ class ScoringGrid extends StatelessWidget {
|
||||
width: 70,
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: row % 2 == 1 ? Colors.yellow.shade100 : Colors.transparent,
|
||||
color: arrowsPerEnd == 3
|
||||
? ScoringColors.getDisabledBackground()
|
||||
: (row % 2 == 1 ? Colors.yellow.shade100 : Colors.transparent),
|
||||
border: Border(
|
||||
left: BorderSide(color: Colors.grey.shade300),
|
||||
left: BorderSide(
|
||||
color: arrowsPerEnd == 3
|
||||
? ScoringColors.getDisabledBorder()
|
||||
: Colors.grey.shade300,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
sumOfSix > 0 ? sumOfSix.toString() : '',
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
(arrowsPerEnd == 3 || sumOfSix == 0) ? '' : sumOfSix.toString(),
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: arrowsPerEnd == 3
|
||||
? ScoringColors.getDisabledText()
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../config/constants/scoring_colors.dart';
|
||||
|
||||
class ScoringKeypad extends StatelessWidget {
|
||||
final Function(String) onScoreInput;
|
||||
@@ -52,56 +53,9 @@ class ScoringKeypad extends StatelessWidget {
|
||||
}
|
||||
|
||||
Widget _buildKeypadButton(BuildContext context, String score, {bool isWide = false}) {
|
||||
Color buttonColor;
|
||||
Color textColor = Colors.black;
|
||||
|
||||
// Color scheme matching your design
|
||||
// TODO: Update this to match `scoring_cell.dart`
|
||||
switch (score) {
|
||||
case 'X':
|
||||
buttonColor = Colors.amber.shade300;
|
||||
break;
|
||||
case '10':
|
||||
buttonColor = Colors.amber.shade300;
|
||||
break;
|
||||
case '9':
|
||||
buttonColor = Colors.yellow.shade300;
|
||||
break;
|
||||
case '8':
|
||||
buttonColor = Colors.red.shade400;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case '7':
|
||||
buttonColor = Colors.red.shade400;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case '6':
|
||||
buttonColor = Colors.blue.shade400;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case '5':
|
||||
buttonColor = Colors.blue.shade400;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case '4':
|
||||
buttonColor = Colors.black87;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case '3':
|
||||
buttonColor = Colors.black87;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
case 'M':
|
||||
buttonColor = Colors.grey.shade400;
|
||||
break;
|
||||
case 'CLEAR':
|
||||
buttonColor = Colors.orange.shade400;
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
default:
|
||||
buttonColor = Colors.grey.shade300;
|
||||
break;
|
||||
}
|
||||
// Use centralized color configuration for consistency
|
||||
final buttonColor = ScoringColors.getScoreBackgroundColor(score);
|
||||
final textColor = ScoringColors.getScoreTextColor(score);
|
||||
|
||||
return ElevatedButton(
|
||||
onPressed: () => onScoreInput(score),
|
||||
@@ -118,7 +72,7 @@ class ScoringKeypad extends StatelessWidget {
|
||||
score,
|
||||
style: TextStyle(
|
||||
fontSize: isWide ? 16 : (score.length > 1 ? 14 : 18),
|
||||
fontWeight: FontWeight.bold,
|
||||
fontWeight: ScoringColors.shouldUseBoldText(score) ? FontWeight.bold : FontWeight.w600,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user