Recent Change in Viewing Replays from Desktop and Phone

[TrustyBubbles]

Has anyone else noticed that since about 1-2 weeks ago viewing replays has become very buggy?

Two issues I've noticed:
- Increase in number of replays with "Forbidden this page cannot be opened inside a frame". Happens both on desktop and mobile using chrome. Haven't checked other browsers
- Layout for viewing replays from a mobile device has become extremely hard to navigate. Player score tabs take up the whole screen and watching a replay requires scrolling up to press the next move button then scrolling down to view the board state. It was never great (buttons so small on mobile), but now it's impossible to navigate

If I open replays from 2-3 weeks prior they're fine. It's only new replays that have this issue

[hentheben]

Agreed. When I choose to replay a game from a player's perspective, (to watch the draft) it skips straight to the end board state.

edit: this is from a laptop

[alexwjb]

For games happening now, I believe it's working better. Context:

- BGA made a change that led to a nasty bug on iOS: pinch-to-zoom immediately crashed the page
- I put in an emergency fix which solved that problem but left things ugly on mobile especially

Over the last few days I've fixed things up I believe, so I'm hoping for games from now on replays work better Let me know if not (the bug reporting system is the best way).

[hentheben]

Desktop replays are working again. Thanks Alex!

[alexwjb]

My pleasure, although I since discovered there have also been some things going on at the BGA end so not sure what has made them work again to be honest!!

[meadowsweet1146]

I have noticed that on mobile (iPhone, not sure if that makes a difference) I can pinch zoom on some games - Postcards, On Tour- there’s no problem at all zooming in. On others - Wingspan, Luthier - I get an immediate crash.

[alexwjb]

It absolutely makes a difference, the bug is on iPhone. The bug affects many games because it was a change BGA made to their framework in general. Game devs have to fix their own games in response, it's easier/harder for different games depending on how they are built.

[TrustyBubbles]

Thank you very much Alex! Replays working again and look even better on mobile than they did originally. And you increased the button size!

One suggestion if possible is to make the replay buttons stay on the screen even if you scroll up and down kind of like a freeze row in Excel. No worries if tough to implement. Thanks again for fixing things!

[GTSchemer]

It absolutely makes a difference, the bug is on iPhone. The bug affects many games because it was a change BGA made to their framework in general. Game devs have to fix their own games in response, it's easier/harder for different games depending on how they are built.

For the benefit of other devs, do you have any general notes on how to work around the framework change?

[alexwjb]

It absolutely makes a difference, the bug is on iPhone. The bug affects many games because it was a change BGA made to their framework in general. Game devs have to fix their own games in response, it's easier/harder for different games depending on how they are built.

For the benefit of other devs, do you have any general notes on how to work around the framework change?

Sure. I have no idea to what extent this would apply to other games, not sure how many were built like this.

If your game sets the old undocumented workaround

Code: Select all

this.default_viewport = 'width=XXXX'

in its JS constructor, BGA's framework now treats that as autoscale 'viewport' mode, which scales the entire BGA UI along with the game area. That mode is much more expensive to render and is what caused the iOS pinch-to-zoom crashes (it's WebKit failing). It also takes precedence over whatever you declare in gameinfos.

The fix for Agricola was to delete the default_viewport line entirely, and instead declare autoscale explicitly in gameinfos.inc.php, inside game_interface_width:

Code: Select all

'game_interface_width' => [
    'min' => 740,
    'max' => null,
    'autoscale' => true,  // CSS zoom on the game area only
],

That alone fixed the crash.

With autoscale true, phones render your game at zoom ≈ deviceWidth / your min. Agricola was 995, so a 393px iPhone got ~0.4x — technically working, but tiny and ugly. So the follow-up work is getting min down towards the documented floor of 740 (and making sure the game actually works at that width, I did it by capping the board scale in JS when the play area is narrower than the boards want).

Also: in this mode the BGA chrome (player panels, title bar, dialogs) renders at native phone width rather than being scaled with your game, so expect to do some .mobile_version CSS cleanup afterwards, that's where most of the time actually went.