search

canalun / brick-break-anywhere

let's break bricks anywhere!
63 stars 3 forks source link

Fix: Blocks shifts by the border's size when removed or debug mode enabled #17

Closed igrep closed 11 hours ago

igrep commented 1 month ago

Problem

Blocks move right little by little when hit by the ball. It's not a problem when the number of blocks is small, but when the document contains many inline elements aligned in a block element, the rightmost element shifts significantly.

Here's an example reproduced by the controlMode: "mouse" feature created in https://github.com/canalun/brick-break-anywhere/pull/15, and hard-coding visualizeBlocks: false (checkout my debug branch if you reproduce by yourself):

bba-unintentional-shift

As you can see, several right blocks shift so right that the ball breaks them without colliding. This is because the shifts make their actual positions differ from the positions managed by the game.

The source of the screenshot HTML is here. ```html 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ```

Solution

Use outline instead of border for highlighting block hit by the ball (or when debug mode).

NOTE

I tested this change only in the example case and my website's top page. Tell me if you think of any side-effect.

igrep commented 19 hours ago

I think the red-flush effect should be eye-catching, so what about using border with original width if the target has border and using outline if the target has no border? In your implementation, if the target has border, the effect might be a bit unnoticeable.

Indeed! Do you mean this? https://github.com/canalun/brick-break-anywhere/pull/17/commits/0c8c4c1616edd90c4d19c695bfef80d3cb14ffae

canalun commented 11 hours ago

Yes, exactly! I'm happy that you also think it's nice:) Thank you for finding this bug and fixing it!!