Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
canalun merged 3 commits into from
Jul 23, 2024
Merged

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

canalun merged 3 commits into from
Jul 23, 2024

Conversation

@igrep
Copy link
Contributor

@igrep igrep commented Jun 23, 2024 •
edited
Loading

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 #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. 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Language" content="ja">
  </head>
  <body>
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
    <span>i</span>
    <span>j</span>
    <span>k</span>
    <span>l</span>
    <span>m</span>
    <span>n</span>
    <span>o</span>
    <span>p</span>
    <span>q</span>
    <span>r</span>
    <span>s</span>
    <span>t</span>
    <span>u</span>
    <span>v</span>
    <span>w</span>
    <span>x</span>
    <span>y</span>
    <span>z</span>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
    <span>M</span>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
    <span>T</span>
    <span>U</span>
    <span>V</span>
    <span>W</span>
    <span>X</span>
    <span>Y</span>
    <span>Z</span>
  </body>
</html>

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 igrep marked this pull request as ready for review June 23, 2024 13:51
@igrep igrep changed the title Fix: Blocks shifts by border when removed or debug mode enabled Fix: Blocks shifts by the border's size when removed or debug mode enabled Jun 23, 2024
canalun
canalun reviewed Jul 23, 2024
View reviewed changes
Copy link
Owner

@canalun canalun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much...!!!! I've learnt outline from this PR.

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.

@igrep
Highlight with border when the elemen has border
0c8c4c1 
Thanks to @canalun's comment: "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."

canalun#17 (review)
@igrep
Copy link
Contributor Author

igrep commented Jul 23, 2024

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? 0c8c4c1

@canalun
Copy link
Owner

canalun commented Jul 23, 2024

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

@canalun canalun merged commit 6237089 into canalun:main Jul 23, 2024
@igrep igrep deleted the fix-unintentional-shift branch July 23, 2024 20:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@canalun canalun canalun approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@igrep @canalun