Add accept/decline buttons to game result dialog after rematch offer received #1153
Conversation
|
In some language "Rematch offered" can be a long text, so I'm not sure it would display nicely on one line. We could instead have the "Rematch offered" on one line and below the centered buttons "Accept Decline". |
|
One thing I'm noticing here is that swapping out the button to offer a rematch might be problematic in the case that the user is about the offer a rematch and the UX changes under them. Not sure how big of a problem this is in reality |
|
Alternate approach |
|
Good question, now sure either how to handle this properly. Perhaps it is not that much a problem. Also, how about having the whole rematch offer block stand out with a light background color for instance? |
|
@veloce thanks, I am a bit worried if we add a label above the buttons it will cause a layout shift which could be annoying. I wonder how clear the latest approach is, the "Accept rematch" button implies one has been offered but it's maybe not clear. I think the design is clean, at least |
Layout shift can be handled by animating the change I think. Like a height change animation coupled with an opacity animation maybe? |
|
Feel free to experiment with this and share screen recording of the UX that you find works well also. |
|
Sure I have not really worked with animations so I will have a play around, appreciate the feedback |
|
Animation in flutter is not that hard, once you've chosen the right approach: 😆 |
|
Here is an attempt at using animation, I think it works. In summary:
400ms based on gut feel and this Simulator.Screen.Recording.-.iPhone.16.Plus.-.2024-11-13.at.13.17.40.mp4 |
|
I think it would be better without animation 😅 Or with a faster one |
|
It can be faster I thought it would be easier to show it a bit slower for review. Not much point going too fast without simply removing it and I think without it the layout shift could be annoying. Happy for someone to make the call, ultimately, just trying things out at the moment |
This one is good 👍 |
Jimima
force-pushed
the
1148-accept-or-decline-rematch-request
branch
from
bffa752
to
eec9d65
Compare
|
As suggested by @Boubou78000 your alternate approach is better to avoid the layout shift (not showing the "Your opponent offered a rematch"). We'd still use a It should be pretty obvious that the opponent offers a rematch, seeing the labels "Accept rematch", "Decline". Can you post a video showing all the states:
Thanks! |
|
Yeah I'm a little concerned that the buttons alone are not enough but happy to go with that for now. I suspect there will be feedback if it's not clear! Will make the changes, no problem |
Jimima
force-pushed
the
1148-accept-or-decline-rematch-request
branch
from
f54c9ed
to
b0d9fc5
Compare
|
Changes as discussed. Video: Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-14.at.13.41.28.mp4 |
|
@Jimima there is still the rematch button when clicked it? Should it not just show a cancel rematch button, not both? Weird 😅 |
…imima/lichess-mobile into 1148-accept-or-decline-rematch-request
|
Oops, yeah that's just a bug. I should have noticed that. Should be better now Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-14.at.16.20.28.mp4 |
Nice 👍 I just noticed another small thing: the rematch and the cancel rematch buttons are the same design, so MAYBE add a box or anything, just to see a visual change 🤔 Othetwise I think this PR is ready to merge 😃 |
Just looking at this, seems straightforward to do but just wondering how to handle the UI. Initial implementation (not styled). UI suggestions welcome!
Relates to #1148