WandererXII / shogiground

Mobile/Web shogi UI for lishogi.org
https://lishogi.org
GNU General Public License v3.0
15 stars 6 forks source link

Allow for using css:hover for individual squares #3

Closed WandererXII closed 2 years ago

WandererXII commented 2 years ago

We can have hover effects on squares, something like this. Peek 2022-03-02 21-58

Some people might find it a bit distracting, so I'm not sure we really want to pursue this. But the problem is that at the edge, between individual squares, chrome is not being consistent:

> document.elementFromPoint(508, 488).getBoundingClientRect()
DOMRect {x: 508.78125, y: 456.390625, width: 55.4375, height: 60.484375, top: 456.390625, …}

508 is smaller than 508.78125, therefore this is not the element we should get. Works correctly in firefox.

document.elementFromPoint(508, 489).getBoundingClientRect()
DOMRect { x: 453.3500061035156, y: 456.45001220703125, width: 55.43333435058594, height: 60.5, top: 456.45001220703125, ... }

This is the reason why we use hover class and not :hover for destinations.

Easy solution would be to use elementFromPoint to get the current square. But I'm a bit worried about performance in processDrag, since it would get called in each raf (https://gist.github.com/paulirish/5d52fb081b3570c81e3a). Another solution would be to update hover class of each square on mouseMove event, but that might also not be optimal.