Add accept/decline buttons to game result dialog after rematch offer received

[Jimima]

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

[veloce]

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".

[Jimima]

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

[Jimima]

Alternate approach

[veloce]

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?

[Jimima]

@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

[veloce]

@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?

[veloce]

Feel free to experiment with this and share screen recording of the UX that you find works well also.

[Jimima]

Sure I have not really worked with animations so I will have a play around, appreciate the feedback

[veloce]

Animation in flutter is not that hard, once you've chosen the right approach:

😆

[Jimima]

Here is an attempt at using animation, I think it works. In summary:

1. Remove rematch buttons when opponent offers rematch
2. Add (hidden) label to indicate the opponent has offered a rematch
3. Add (hidden) buttons to accent or decline
4. Animate dialog to fit new content (over 400ms)
5. Show label buttons once animation is complete

400ms based on gut feel and this

Simulator.Screen.Recording.-.iPhone.16.Plus.-.2024-11-13.at.13.17.40.mp4

[Boubou78000]

I think it would be better without animation 😅 Or with a faster one

[Jimima]

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

[Boubou78000]

Alternate approach

This one is good 👍

[veloce]

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 FadeTransition (with a duration ~300ms I'd say) when the widgets change.

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:

• offering a rematch
• cancel rematch offer
• opponent asking for rematch

Thanks!

[Jimima]

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]

Changes as discussed. Video:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-14.at.13.41.28.mp4

[Boubou78000]

@Jimima there is still the rematch button when clicked it? Should it not just show a cancel rematch button, not both? Weird 😅