Add functionality to keep track of changing attributes (Lobby timer and number of players) in real time

[jiyeongchloe]

Goal: To have a transition from the lobby page to the match page, we can either start a match automatically once the timer runs out (given the lobby has the minimum number of people), start a match automatically once the lobby reaches the maximum number of people, or give users to a button to start a match once the lobby has the minimum number of people. We want to implement functions that allow us to keep track of the time and keep track of the number of people in the lobby in real-time so that users do not have to refresh the page to see the changes.

[jiyeongchloe]

UPDATE: On slack, we decided to split this into two issues, but both issues will result in the same PR.

the second issue is issue #224

[jiyeongchloe]

created branch matches/track-time-and-players

[jiyeongchloe]

added a timer function to display the time left in lobby-details.html Need to figure out a way to store the changing time though because currently the timer restarts when you exit and reenter

[jiyeongchloe]

currently trying to work with django4-background-tasks I think we're gonna need to make the create view for lobbies to incorporate django4-background-tasks though

[jiyeongchloe]

ended up scraping the whole background tasks thing because sqlite is too simple to handle concurrency

added a match_start_time attribute to the Lobby class that is set automatically upon lobby creation/edit The match start timer in the detail view uses this and compares it to the current time to do a countdown. The timezone must be weird though because the lobby creation time is always 2 days behind the actual time

[nugerhard]

There are two datapoints we need to track here: time left until lobby closes, and number of users in the lobby. The latter is easily calculated, in the same way that the users in a lobby are displayed on a lobby details page. Then, when a user joins a lobby and the number of users are equal to the max players in that lobby, we change the lobby match status to In-Progress.

The former is a little tougher: what I ended up doing is calculating the time remaining on the frontend of the lobby details page, so that it can be displayed dynamically using JS. When this timer runs out on the page, an AJAX request is sent to change the lobby status automatically: the user still needs to reload the page in order to see certain static elements of the lobby update, but nothing needs to be clicked on: a task for the future is automatically refreshing the page as part of this AJAX request.

[nugerhard]

Also, this feature is part of PR #345.

[nugerhard]

Closing Comment: The issue of how to calculate these values and update the match_status accordingly, regardless of the page you are on, remains open. This is more an issue of how sqlite works locally on your computer, however. Until a database that exists on a server can be established, this will remain an issue (in the non-Github sense). However, insofar as this functionality can be implemented in a particular page, it has been implemented in the JS of lobby-details.

Nat: Added JS code to lobby-details page to track these attributes in the frontend. Chloe: Demoed out how timer could work on the frontend. Lucien: Checked the functionality of the timer, pointed out server less database issue. Implemented the list of players in lobby-details.

[elizabethli31]

Issue Score: Excellent

Comments: As mentioned in my review, this functionality was very cool to see. Thank you for pointing out the database server issue as well both in our meetings and the demo.