Skip to content

Implement king square highlights for end game states #17651

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.

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

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Bayuo321
Copy link
Contributor

@Bayuo321 Bayuo321 commented Jun 6, 2025

  • 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

- 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]>
@Bayuo321
Copy link
Contributor Author

Bayuo321 commented Jun 6, 2025

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

@Bayuo321 Bayuo321 marked this pull request as draft June 6, 2025 14:05
@Bayuo321 Bayuo321 marked this pull request as ready for review June 6, 2025 14:08
@kraktus
Copy link
Member

kraktus commented Jun 7, 2025

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
image

It'd also reduce maintenance cost.

@Piti06
Copy link

Piti06 commented Jun 7, 2025

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 image

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
Copy link
Member

kraktus commented Jun 7, 2025

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
Copy link

Piti06 commented Jun 8, 2025

Okay, we will work on that.

@SergioGlorias
Copy link
Member

maybe can close #15385

@Bayuo321 Bayuo321 marked this pull request as draft June 12, 2025 08:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants