Feature - Remove connected blocks on click

[jcpeden]

What does it do?

As part of my tech test for Esynergy, I've updated this class to remove adjacent blocks of the same colour whenever a user clicks on a block.

How does it work?

When the user clicks on a block, the block is added to an array. This array is then iterated upon to identify any adjacent (up, down, left, right) blocks that have the same colour as the target.

If they share the same colour, then they too are iterated upon such that an entire group of adjacent blocks of the same colour can be identified.

Once identified, these target blocks are 'removed' from the grid by setting their colour to null.

Blocks situated 'above' a removed block are then shifted downwards to fill the available space, not unlike the game Tetris.

What does it look like?

On Loading

After clicking on the central red block

How to test?

1. Pull this brand down
2. Run npm install && npm run test
3. Alternatively, you can run npm run start and manually test the interactions for yourself

How to improve

1. Refactor to use TypeScript
2. Improve test coverage
3. Break the larger blocks of code down further to make them easier to test and more reusable
4. Consider using more of a unit test approach instead of these pseudo integration tests
5. Make it work with yarn