Countdown timer changed with local time

Question

I have a game site, in which i need to display timer until the match time. Once the timer reaches the limit, i need to load the games.

For this, i have used the jquery countdown. Its working fine in general.

My problem is, while the timer running if the user changes their system time(local time), the remaining time limit changed and game started.

How to prevent the Countdown Timer from local time? Please help me to fix the problem.

My code,

$('#gamewindow').countdown({
        until   : 100,
        layout:'{mn} : {s<}{snn} {s>}',
        onExpiry: function () { 
                $('#gamewindow').load('game.php');         
        },
    });

}); 

<div id="gamewindow"></div>

Answer 1

Instead of initializing timer via plain Javascript (which will return the client-time, i.e., the time on your client's computer), you should instead rely on server-time, i.e., the time on your server. This will standardize the timing for all your players.

So, upon visiting the countdown page, your Javascript counter will be initialized with the server's time. You could use AJAX or some hack-y PHP to do this. For this task, start-up is the only time JS needs something from the server; afterwards, the "countdown" effect will be managed by JS. Of course, this will not be uber-synced but that error is pretty forgivable. Even if the user refreshes with a different local timezone setting, the JS will just re-initialize from server time--no problems!

Answer 2

Since you can't prevent the user from changing their system time, the solution must be serverside.

In game.php, check if the match_start_time has been reached, if not, redirect to the waiting page (which should display the countdown timer again).