Implement king square highlights for end game states

[Bayuo321]

• Implement findKingSquare in util.ts to locate king position from FEN
• Ensure chessground reloads after game ends (ctrl.ts)
• Differentiate highlights based on mate, timeout, resign or draw/stalemate (ground.ts)
• Created new endgame state icons (public/images/icons)
• Add SCSS pulsing animation with the SVG icons on king squares for enhanced visuals (_chessground.scss)

Co-authored-by: Pedro Antunes [email protected]
@Piti06

[Bayuo321]

Here is a short video demonstrating the feature changes in action.

In addition to what's shown in the video, we've tested all other endgame scenarios including stalemate, opponent disconnected, etc and confirm that all are working as expected.

FeaturePreview.mp4

Here is a longer video comparing the old version with the new one - https://youtu.be/4s-OVVlAaMA

[kraktus]

Hey, thanks for the PR! I agree with the intention, but I don't think the flashing animation is the proper way to implement it, too distracting.

I'd rather have the information put like good/bad moves, etc

It'd also reduce maintenance cost.

[Piti06]

Hey, thanks for the PR! I agree with the intention, but I don't think the flashing animation is the proper way to implement it, too distracting.

I'd rather have the information put like good/bad moves, etc

It'd also reduce maintenance cost.

Hi!
Sorry if we missunderstood what you meant but our proposal is only related to when the game finishes.
We think that currently, Lichess provides limited visual feedback when a game ends. The interface displays a small result message and plays a subtle beep sound.
We've implemented those visual animations with means to enhance the user experience.
What do you think we should improve?
Thank you.

[kraktus]

Sorry if we missunderstood what you meant but our proposal is only related to when the game finishes.

I meant that the information should appear via a small information bubble like for good/bad moves. Not via a flashing square.

[Piti06]

Okay, we will work on that.

[SergioGlorias]

maybe can close #15385

[kraktus]

Out of curiosity where have you found the SVGs? and which licenses are they under?

[Bayuo321]

Out of curiosity where have you found the SVGs? and which licenses are they under?

We found them in https://www.svgrepo.com.
Win and Timeout are under the PD license.
Checkmate and Resign are under the CC0 license.
Both licenses fall under the Public Domain category (https://www.svgrepo.com/page/licensing/#CC0)
Stalemate was created by us, and we tried to match the same visual style as the others.

[Bayuo321]

Hey!
We've made some changes regarding the information appearing as a bubble and not as a flashing square.
Here's a short video showcasing the new version:

Feature.Fix.mp4

We really appreciated your previous feedback. Feel free to share any further thoughts or insights!

[SergioGlorias]

@Bayuo321 It seems that there are some statuses missing that can happen, but they are without an icon.

Like VariantEnd and Cheat (It might be interesting to have a fallback in case it happens and not a specific one)

Can find status code here:
https://github.com/lichess-org/scalachess/blob/master/core/src/main/scala/Status.scala#L15-L27

[Bayuo321]

@Bayuo321 It seems that there are some statuses missing that can happen, but they are without an icon.

Like VariantEnd and Cheat (It might be interesting to have a fallback in case it happens and not a specific one)

Can find status code here: https://github.com/lichess-org/scalachess/blob/master/core/src/main/scala/Status.scala#L15-L27

Hi, thanks for pointing that out!
We don’t currently have specific icons for those end states, but it's definitely something that could be added in the future, possibly by someone else with the right idea.

Also, here is the new stalemate icon:

New.Draw.mp4

Thanks again for your feedback!

[SergioGlorias]

We don’t currently have specific icons for those end states, but it's definitely something that could be added in the future, possibly by someone else with the right idea.

My idea was to have some icon as a fallback in case this happens.
If none of the options are valid, use this icon.

[Bayuo321]

We don’t currently have specific icons for those end states, but it's definitely something that could be added in the future, possibly by someone else with the right idea.

My idea was to have some icon as a fallback in case this happens. If none of the options are valid, use this icon.

Oh, okay.
Our idea (and sorry if we didn’t make that clear) was specifically meant for standard chess only.
Maybe in the future, we or someone else could create a PR to handle the other variants.

[schlawg]

the draw/handshake idea is nice. i would show the king using standard check visuals (against the red gradient background) with a flag icon for resign, hourglass for flagged. there is no need to mark both kings unless there is no victor. bugle doesn't really fit checkmate, maybe crossed swords or a tombstone would be better.

[ddugovic]

Currently, the game result is communicated:

• Upper-left corner (text description of game result)
• Move list (number and text description)
• Ratings adjustments in both places (if ratings are shown)

A king is a piece decorated with a + (plus sign) crown, so maybe simple glyphs such as + (win), = (draw), - (loss) could be appropriate.

https://lichess.org/broadcast games can also have other results than those three.