feat: transparent, pass-through clock overlay for near-square screens…

[kaidoloor]

… like foldables

This PR introduces a layout optimization for near-square screens (like the Galaxy Z Fold 5 when unfolded) in portrait mode where the standard layout can result in unexpected timers mostly hidden by the board.

Changes: Implemented a Stack overlay for the top and bottom tables/clocks when isNearSquare evaluates to true based on the aspect ratio.

Usability Fix: Wrapped the floating clock elements in IgnorePointer widgets alongside Opacity. This ensures that even though the clocks are visually layered on top of the board corners, pointer events pass cleanly through to the underlying BoardWidget, allowing normal piece interaction.

Testing: Verified on physical Galaxy Z Fold 5 hardware.

[kaidoloor]

Before and after screenshots.

[veloce]

This is an interesting idea but I'm not sure I can accept this as player names are barely visible. How about reducing the board size a bit instead?

[kaidoloor]

You ask a fair question. What would I do with a visible username during a game on phone/tablet? In PC I do check out the other player from time to time (mouse hover on name), but on phone I would risk leaving the page, so I would not tap on the other player name. Also, the board could/should be as large as possible to reduce eye strain. For my personal preference, the board size is more important. Usually, people buy big screens to see big content. But I can be wrong.

[veloce]

The problem is that there is no point of showing the user names like that: it is barely visible and it is ugly.

I am also not sure about not showing them at all, even if you don't care about the names (I can understand), I'm not sure everyone agrees with you.

Showing the clock as big would really reduce board size, so let's keep it as you did.

But showing the users could take very little vertical space. We can see in your first screenshot that the board is already at the max size (the same size as in the second screenshot). And yet the user names are almost visible. So we could just reduce the board size very slightly and at the same time reduce the font size and line height so it takes less vertical space to show the users.

If you can do that and post a screenshot of such a version, that'd be nice.

[kaidoloor]

All fair concerns. It seems the names (with icons!), can be rather big, see this normal layout and how it looks on unfolded screen (non-modified code):

Note that tapping on the name (Stockfish level 4) results in nothing, which makes it easier.

I will play around and recommend smth.

[kaidoloor]

Are these good enough?

[veloce]

@kaidoloor let's differentiate online games vs offline games. The former is by far the most important screen.

I think the clock overlay with the background (your first version was more visible). In online games there are no big icons so we could slightly reduce board size and display player names.

In over the board more we can remove player names (they're useless) in square layout.

In vs. computer games we can just remove the stockfish icon in square layout and show the board as we do for online games.

[kaidoloor]

@veloce I agree that the online game is more important. On the Android development version I am unable to start the online game (and hence share the screenshot; dev version gives a dummy LiChess login screen). For this reason I have added screenshots of the Stockfish game and OTB game. The intention is that these clock and username changes are also on the online game layouts.

The clock overlay in the first example was, yes, more visible. But the style is sooo different from the player name, which is ... a mess of styles. Some might then say, why are the clock and player names so different and complain about style zoo.

Anyways, one can always discuss forever. The original situation where clock was 85% hidden by the board is not ok. Now it is hopefully fixed. That is the necessary change. The same with player names. The rest is art, subject to endless discussions, and can be improved if one wants. Note that this is implemented only for near-square screens, so all other screens the current layouts remain. This affects only near-square screen users.

Regarding reducing board size: I think using screen real estate to maximum is important.

[veloce]

On the Android development version I am unable to start the online game (and hence share the screenshot

you should be able to; you can ask questions on discord if you have trouble with the dev env