antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement bead highlighting by modifying getBeadColor function

Browse Source 
- Add isHighlighted parameter to getBeadColor function
- Return gold highlight color (#FFD700) when bead should be highlighted
- Apply highlighting before inactive color check to highlight inactive beads
- Move highlighting calculation before color computation in render loop
- Remove debug console logs from highlighting investigation

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-24 10:30:58 -05:00
parent 1126e3be15
commit 7ac5c29e9d
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/abacus-react/src/AbacusReact.tsx
View File

@@ -672,11 +672,13 @@ function getBeadStepHighlight(
return { isHighlighted: false, isCurrentStep: false };
}
const matchingStepBead = stepBeadHighlights.find(stepBead =>
stepBead.placeValue === bead.placeValue &&
stepBead.beadType === bead.type &&
(stepBead.position === undefined || stepBead.position === bead.position)
);
const matchingStepBead = stepBeadHighlights.find(stepBead => {
const matches = stepBead.placeValue === bead.placeValue &&
stepBead.beadType === bead.type &&
(stepBead.position === undefined || stepBead.position === bead.position);
return matches;
});
if (!matchingStepBead) {
return { isHighlighted: false, isCurrentStep: false };
@@ -686,6 +688,7 @@ function getBeadStepHighlight(
const isCompleted = matchingStepBead.stepIndex < currentStep;
const isHighlighted = isCurrentStep || isCompleted;
return {
isHighlighted,
direction: isCurrentStep ? matchingStepBead.direction : undefined,
@@ -785,9 +788,14 @@ function getBeadColor(
bead: BeadConfig,
totalColumns: number,
colorScheme: string,
colorPalette: string
colorPalette: string,
isHighlighted: boolean = false
): string {
const inactiveColor = 'rgb(211, 211, 211)'; // Typst uses gray.lighten(70%)
const highlightColor = '#FFD700'; // Gold color for highlighting
// If highlighted, return the highlight color regardless of active state
if (isHighlighted) return highlightColor;
if (!bead.active) return inactiveColor;
@@ -1712,7 +1720,12 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
}
}
const color = getBeadColor(bead, effectiveColumns, finalConfig.colorScheme, finalConfig.colorPalette);
// Check if bead is highlighted - NO MORE EFFECTIVECOLUMNS THREADING!
const regularHighlight = isBeadHighlightedByPlaceValue(bead, highlightBeads);
const stepHighlight = getBeadStepHighlight(bead, stepBeadHighlights, currentStep);
const isHighlighted = regularHighlight || stepHighlight.isHighlighted;
const color = getBeadColor(bead, effectiveColumns, finalConfig.colorScheme, finalConfig.colorPalette, isHighlighted);
// Apply custom styling
const beadStyle = mergeBeadStyles(
@@ -1724,11 +1737,6 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
bead.active
);
// Check if bead is highlighted - NO MORE EFFECTIVECOLUMNS THREADING!
const regularHighlight = isBeadHighlightedByPlaceValue(bead, highlightBeads);
const stepHighlight = getBeadStepHighlight(bead, stepBeadHighlights, currentStep);
const isHighlighted = regularHighlight || stepHighlight.isHighlighted;
// Check if bead is disabled - NO MORE EFFECTIVECOLUMNS THREADING!
const isDisabled = isBeadDisabledByPlaceValue(bead, disabledBeads) ||
(disabledColumns?.includes(effectiveColumns - 1 - bead.placeValue));