brpg

<script>
    (function() {
        var button = {
            init: function() {
                button.div = $('#button');
                button.div.empty();

                //Timer display
                button.timer = $('<span style="font-size: 1.2em;"></span>');
                button.timer.appendTo(button.div);

                button.messagediv = $('<div class="success"></div>');
                button.messagediv2 = $('<div class="error"></div>');
                button.message = $('<p></p>');

                //Form
                var form = $('<form method="post" action="/game"></form>');
                form.appendTo(button.div);

                //csrf token
                $('<input id="csrf_token" name="csrf_token" type="hidden" value="36ef26bb-dc38-424d-b794-b73a24952477" />').appendTo(form);

                //Click button
                button.click = $('<input type="submit" value="Play!" class="play" />');
                button.click.appendTo(form);

                button.click.bind("click", function () {
                    button.timer.html('Please wait...');
                    var div = $('#click_message');
                    div.animate({ opacity: 0 }, 300);

                    $.post('/game', form.serialize(), function (data) {
                        try {
                            clearInterval(button.interval);
                        } catch (e) { }

                        //Remove existing click messages
                        div.empty();

                        //Show the new message
                        button.message.html(data.message);
                        if (data.status == "OK") {
                            button.message.appendTo(button.messagediv);
                            button.messagediv.prependTo(div);
                        } else if (data.status == "EARLY") {
                            button.message.appendTo(button.messagediv2);
                            button.messagediv2.prependTo(div);
                        } else {
                            location.reload();
                        }

                        //Update the timer
                        button.seconds = data.seconds;
                        button.timer.html('<b>' + Math.floor(button.seconds / 60) + '</b> minutes, <b>' + button.seconds % 60 + '</b> seconds left.');

                        button.countdown();
                        button.interval = setInterval(button.countdown, 1000);

                        div.animate({ opacity: 1 }, 300);

                        if (data.player != undefined) {
                            for (var i in data.player) {
                                $('#' + i).html(data.player[i]);
                            }
                        }
                    }, 'json');
                    return false;
                });

                button.seconds = -1287629188.0;
                button.timer.html('<b>' + Math.floor(button.seconds / 60) + '</b> minutes, <b>' + button.seconds % 60 + '</b> seconds left.');

                button.countdown();

                button.interval = setInterval(button.countdown, 1000);
            },
            countdown: function() {
                button.seconds -= 1;

                if (button.seconds <= -1) {
                    button.seconds += 1;
                    button.timer.html('You can click <u>now</u>!');
                    document.title = "Click now! :: Boring RPG :: Home";
                    clearInterval(button.interval);
                }
                if (button.seconds <= 0) {
                    button.timer.html('You can click <u>now</u>!');
                    document.title = "Click now! :: Boring RPG :: Home";
                    clearInterval(button.interval);
                } else {
                    button.timer.html('<b>' + Math.floor(button.seconds / 60) + '</b> minutes, <b>' + button.seconds % 60 + '</b> seconds left.');
                    var message = Math.floor(button.seconds / 60) + ':';
                    if (button.seconds % 60 < 10)
                        message += '0';
                    message += button.seconds % 60;
                    document.title = message + " :: Boring RPG :: Home";
                }
            }
        }

        button.init();
    })();

</script>