add a pause/resume option in the web client

[gsverhoeven]

Hi! I have prepared a pull request for a pause/resume option in the web client.

This introduces a Pause button in the left upper corner.
When a human coach has the turn, the button can be used to pause the clock.
Clicking the button again resumes the clock.
This allows the user to take a break from a running game, to resume it later.
It works only if a human coach has the turn, when the AI is playing the game cannot be paused.

Regarding the code:
I noticed that the files in web/static/js/* together are identical to pybowl.js (in web/dist/js/)
I went along with this by making the changes in both places. Maybe Niels can explain why this is :)

I struggled a bit with the function naming.
The button is called a pause button, but clicking it again resumes the game.
When the button is pressed, it calls pauseResumeClocks(), that uses the "/games/ <game_id> /pause" route to call api.pause_resume_game() that calls game.pause_resume_clocks().
Open for suggestions to improve this.

Regarding testing: I played a few games, both new games and games that were previously saved and loaded again, and it seems to work.
I checked the tests, but there do not seem to be any tests for the web client.

Note:
I had to disable two lines of code at the end of _check_clocks() that resumed all stopped clocks.
This code was added in an earlier commit by danj3000 (dec 2019) to be able to resume a saved game.
The new Pause button can be used to resume the clock after loading a saved game, removing the need for these lines of code.
@njustesen, i noticed that you disabled the save option after this change (in jan 2020).
I enabled this again, I hope you don't mind :)
I included an empty ffai/data/saves folder (using the .keep file trick) to allow save games to work out of the box.

[njustesen]

Thanks.

A few comments:

1. web/static/js/* is the source JS and I use gulp to compile all of it into pybowl.js. I'll see if I can add a guide to the development doc.
2. It's good practice to add a test when adding a new feature. I think it would make sense here.
3. I am not sure I like a pause button. Alternatives could be to play without time: competition_mode = False in the config. We could even keep timers when competition_mode = False but not force a turnover.

I'll check your PR and think about it.

[njustesen]

I looked at the PR. It's a nice implementation and I will keep it here for a bit, but I will not merge it as it is.

Since you can achieve a practice mode by setting competition_mode = false in web.json, I don't see the use case for the pause feature. In a competitive FUMBBL-like setup, there should be some rules around requesting a pause and a max. pause time limit.

[gsverhoeven]

Thanks for your feedback!

You already signalled that you did not see a use case, but I tried anyway.
Your dislike of it forced me to think about it more.
First I googled a bit what other ppl think.

Some interesting discussions on this topic i found:

• removing_the_pause_feature_from_games
• RealTimeWithPause

After this, I came up with the following analysis and proposal.

Starting point for me is the four-minute time limit, which is part of the official game rules (at least i see it mentioned in CRP). Disabling this in the config would, to me, make it a different game. I am no longer playing the game as it is intended.

Then we have FFAI. This has as an overarching goal creating an AI that beats human players.
So we are talking about a single player, real-time AND turn-based game. In this setting, I think a pause option to deal with "Real life events" (reddit contains various examples :-) would be something that many people like and may even expect.

You brought forward that allowing a player to "disable the timer" defeats the purpose of it. The purpose, i guess, would be to limit the amount of time a player has to analyse the game state and make moves.
That got me thinking. What if the screen is blacked out while the game is on pause, and no moves would be possible? Would this make the option more agreeable to you?

[mrbermell]

I think it makes sense to have a pause button for human players in competition mode. The most common use case for the web client is probably practice matches against oneself or against a bot to learn rules and basic strategy. Playing with a timer to learn how fast you need to think with the ability to pause and take care of "real life" is appealing to me. To be honest, not enough for me to implement it myself but since it's already there.

My feedback on the implementation is that you should not be able to play with a paused timer and the other human player should be able to unpause (after all it is a gentleman's game).

[njustesen]

I want this framework to be as flexible as possible, so I suggest we add the pause feature along with several options in the config file:

• enabled (true|false): whether the pause feature is enabled.
• unpausing (true|false): whether the opponent can unpause.
• num_pauses (int): number of pauses available (should be shown in UI)
• pause_time (int): automatic unpausing after this many seconds. If not in config, not automatic unpausing.

Could be something like this:
"pausing": { "enabled": true, "unpausing": true, "num_pauses": 10, "pause_time": 120 }

What do you think of that?

[mrbermell]

Perfect!

[gsverhoeven]

Great! I'd like to try and prepare a new / updated PR that includes the proposed functionality.
Is that ok?

[derNarr]

Any updates on this? Especially playing against some intermediate trained bot, this feature makes a lot of sense to me as a full game easily takes over an hour. With a pause button, I could test a bot (with time limits), in several episodes, but don't have to play a full game at once.

Ultimately, it would be really nice, to branch a replay, and continue with a bot from the position your are branching from. E. g. replaying the first four turns from a replay, but then introducing some human turns and letting the AI continue.

[gsverhoeven]

I made some progress, but I ran into the refreshing aspect of the game. I am testing in the browser with two tabs, one for each player.
In what I have right now, when Player 1 presses pause, for both players, the screen is hidden, visual clock stops and the game is in pause. But when player 1 unpauses, nothing happens for player 2. Only after a manual refresh (F5) the changes are effectuated.

My plan was to study the JS code that is executed while moving players around, since those changes immediately become visible for both players.

[njustesen]

Any plans to continue on this PR?