feat: colorize Directional Processing Gabor patches with 6 color families

[Copilot]

The Directional Processing game used greyscale Gabor patches. This replaces them with 6 colorful families (Blue, Purple, Orange, Grey, Yellow, Teal), randomly selected at game start and switched after every trial's feedback flash. The mask color tracks the midpoint of the active family to avoid perceptual pop-out on transitions.

gabor.js

• COLOR_FAMILIES — 6 high-contrast endpoint pairs: Blue (0,30,130)→(130,210,255), Purple (60,0,130)→(220,130,255), Orange (130,40,0)→(255,200,70), Grey (20,20,20)→(235,235,235), Yellow (70,40,0)→(255,240,100), Teal (0,55,60)→(80,230,220)
• pickColorFamily() — returns a random entry from COLOR_FAMILIES
• computeGaborPixels — new colorFamily option; when set, interpolates each pixel between the family's dark/bright endpoints instead of black→white. Greyscale path preserved when colorFamily is null
• drawMask — new optional colorFamily param; fills with the family's RGB midpoint to match the Gabor DC level

// t maps 0→dark, 1→bright
const t = 0.5 * (1 + contrast * envelope * grating);
r = colorFamily.dark[0] + t * (colorFamily.bright[0] - colorFamily.dark[0]);

index.js

• _colorFamily module-level state, initialized via pickColorFamily() on start(), cleared on reset()
• colorFamily forwarded to both drawGabor and drawMask
• Correct response flashes red; wrong response flashes green (FEEDBACK_FLASH_MS = 250 ms)
• After each feedback flash, a new color family is picked, its midpoint background is drawn on the canvas via drawMask, and a 100 ms pause (POST_FLASH_PAUSE_MS) is held before the next trial begins — giving a clear visual break between rounds

[acrosman]

Fix noted linting errors. Make sure not to add new ones during the next set of changes.

The feedback color flashes are too short, they need to be more distinct between rounds. They also need to be red (correct) or green (failure).

Add another two colors to the collection, yellow and teal.

[Copilot]

Fix noted linting errors. Make sure not to add new ones during the next set of changes.

The feedback color flashes are too short, they need to be more distinct between rounds. They also need to be re...

Done in 527b3d4:

• Lint errors fixed — the overlong import line and JSDoc comment in index.js are now within the 100-char limit.
• Feedback flash duration — increased FEEDBACK_FLASH_MS from 250 ms to 600 ms so flashes are clearly perceptible between rounds.
• Flash colors — correct response now flashes red, wrong response flashes green, as requested.
• New color families — Yellow ((70,40,0)→(255,240,100)) and Teal ((0,55,60)→(80,230,220)) added, bringing COLOR_FAMILIES to 6 entries. The count test in gabor.test.js is updated accordingly.

Note: automated review flagged the red-for-correct / green-for-failure convention as non-standard UX — flagging it here in case you'd like to reconsider, but the code reflects your explicit request.

[acrosman]

In addition to the inline note, we also need to change the flash behavior a bit more.

After the feedback flash, switch the current color family background color and add a very short pause (let's try 1/10th of second).

[acrosman]

Nevermind. Undo this change.

[acrosman]

@copilot complete the work described in this message.

[Copilot]

@copilot complete the work described in this message.

Done in the latest commit:

• FEEDBACK_FLASH_MS reverted to 250 ms (per the inline review on that line).
• After each feedback flash clears, _colorFamily is updated to a newly picked family, the canvas is filled with that family's midpoint color via drawMask, and a 100 ms pause (POST_FLASH_PAUSE_MS) is held before the next trial starts.
• The color family now changes after every trial (not only on level change), so the previous level-change-specific pick was removed.
• flashStageFeedback gained an optional onComplete callback to chain the post-flash logic cleanly.