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

Open
wants to merge 4 commits 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 pedro.a.antunes@tecnico.ulisboa.pt
@Piti06

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

kraktus commented Jun 24, 2025

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

@Bayuo321
Copy link
Contributor Author

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 Bayuo321 marked this pull request as ready for review June 27, 2025 18:05
@Bayuo321
Copy link
Contributor Author

Bayuo321 commented Jun 27, 2025

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

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

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

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 and others added 4 commits June 30, 2025 21:46
- 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 <pedro.a.antunes@tecnico.ulisboa.pt>
- Updated endgame state icons
- Replaced infinite pulsing animation with a subtle one-time pop effect
- Added drop-shadow to king icons for improved visual emphasis

Co-authored-by: Pedro Antunes <pedro.a.antunes@tecnico.ulisboa.pt>
@Bayuo321
Copy link
Contributor Author

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

schlawg commented Jul 1, 2025

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.

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.

5 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy