Button Disabled Page Refresh

Epiales · Post by **Epiales** » Wed Apr 16, 2014 10:07 pm

Okay, I have a button that I click on to collect gold. Once it is clicked, it starts the timer over. As usual, my problem is it starts over when the page is refreshed. Anyway to keep it from doing so?

Code: Select all

<style>
div{
    margin:0 auto;
    padding:10px;
    vertical-align:middle;
    background-image: -moz-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -o-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -webkit-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -ms-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: linear-gradient(bottom, white 0%, #CCC 100%);
}
button{
    color:#2b2b2b;
    text-shadow:0 1px 0 #999;
    font-size:18px;
    font-weight:bold;
    text-transform:uppercase;
    cursor:pointer;
    margin:0 5px;
    border-radius:12px;
    -moz-box-shadow:4px 4px 4px #CCC;
    -o-box-shadow:4px 4px 4px #CCC;
    -ms-box-shadow:4px 4px 4px #CCC;
    -webkit-box-shadow:4px 4px 4px #CCC;
    box-shadow:4px 4px 4px #CCC;
    background-image: -moz-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -o-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -ms-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -webkit-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: linear-gradient(top, #CCC 0%, #666 100%);
}
button:hover{
    color:#3c3c3c;
    background-image: -moz-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -o-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -ms-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -webkit-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: linear-gradient(top, #CCC 0%, white 20%, #666 100%);
}
button:disabled{
    color:#999;
    cursor:default;
    background:#CCC;
}
</style>


<body>
    <div>
        <button>Collect Gold</button>
    </div>
</body>





<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<script>
$.fn.disableFor = function(mins, secs) {
    var i = [],
    play = [];

    this.click(function() {
        var selector = $(this),
        inDex = $(selector).index(),
        prevText = $(selector).text();
        i[inDex] = 0;
        var inSeconds = mins * 60 + secs;

        $(selector).prop("disabled", "disabled");
        
        play[inDex] = setInterval(function() {
            if(inSeconds > 60){
                inSeconds = inSeconds - 1;
                var minutes = Math.floor(inSeconds / 60);
                var seconds = inSeconds % 60;
                if(minutes >= 1){
                    if(seconds.toString().length > 1){
                        $(selector).text(minutes + ":" + seconds + " minutes left");
                    }else{
                        $(selector).text(minutes + ":" + "0" + seconds + " minutes left");
                    }
                }else{
                    $(selector).text(seconds + " seconds left");
                }
            }else{
                if(inSeconds > 1){
                    inSeconds = inSeconds - 1;
                    if(inSeconds.toString().length > 1){
                        $(selector).text(inSeconds + " seconds left");
                    }else{
                        $(selector).text("0" + inSeconds + " seconds left");
                    }
                }else{
                    $(selector).prop("disabled", "");
                    clearInterval(play[inDex]);
                    $(selector).text(prevText);
                }                              
            }
        }, 1000);
    });
};

$(function() {
    $("button").disableFor(2,0); // First parameter stands for minutes and the second for the seconds.
});</script>

Post by **Jackolantern** » Wed Apr 16, 2014 10:21 pm

You would probably need some kind of server-side validation by keeping the time spent gathering the gold in the database or in sessions. Client-side timers and button disabling are very brittle and easy to tamper with on the client. A refresh is of course the easiest way to do so, and may even be done accidentally.

But that is the nature of Javascript. The state of your JS application is lost anytime the page is refreshed. That is why having some more authority on the server in the matter is typically the solution.

Epiales · Post by **Epiales** » Wed Apr 16, 2014 10:44 pm

Jackolantern wrote:You would probably need some kind of server-side validation by keeping the time spent gathering the gold in the database or in sessions. Client-side timers and button disabling are very brittle and easy to tamper with on the client. A refresh is of course the easiest way to do so, and may even be done accidentally.

But that is the nature of Javascript. The state of your JS application is lost anytime the page is refreshed. That is why having some more authority on the server in the matter is typically the solution.

Is it possible to do the same thing completely using PHP?

Post by **Jackolantern** » Wed Apr 16, 2014 10:58 pm

Epiales wrote:Is it possible to do the same thing completely using PHP?

No, there is no way to make timers in the browser just in PHP. Anything that is going to be animated in the browser, change in the browser, use an event in the browser, etc. is all Javascript. That is because Javascript is executed live in the browser, and PHP is executed on the server and can only output static HTML.

In general, PHP is used for accessing databases, writing HTML dynamically, anything that needs to be done securely (including most game logic decisions), etc. And Javascript is used for any kind of animations, dynamic effects in the browser, client-side form validation (i.e. making sure a form is filled-out right without having to make a call to the server), etc.

They are both required in their own way.

Callan S. · Post by **Callan S.** » Thu Apr 17, 2014 4:01 am

I would uses session to record the cooldown timer

Code: Select all

if (!isset($_SESSION['cooldown'])) $_SESSION['cooldown']=time();

Then when it is X number of seconds past that time, have the javascript reload the page and the PHP also check if time is X seconds past the recorded time - if so, set the session value to time() again.

The only downside to this is that upon initialisation of that session value (bringing the page up for the first time that day), the player must wait X seconds.

How long is it till they can collect gold?

Post by **Jackolantern** » Thu Apr 17, 2014 3:57 pm

Using AJAX would really be a more fluid way of doing it than having JS reload the page. Auto page reloads don't really create a great experience, since players can lose something else on the page they were working on.

Epiales · Post by **Epiales** » Sun Apr 27, 2014 5:30 am

Callan S. wrote:I would uses session to record the cooldown timer
Code: Select all
if (!isset($_SESSION['cooldown'])) $_SESSION['cooldown']=time();
Then when it is X number of seconds past that time, have the javascript reload the page and the PHP also check if time is X seconds past the recorded time - if so, set the session value to time() again.

The only downside to this is that upon initialisation of that session value (bringing the page up for the first time that day), the player must wait X seconds.

How long is it till they can collect gold?

Well I"m wanting to have different things they can 'build'. Each thing will be a different time on collect. Let's say 1. A cottage = collect gold every 10 Minutes and you get so much gold per minute..... 2. An apartment = collect gold every hour and you get so much per minute. Something like that anyway...

I've kind of just stopped working on it for now. I can't figure any way of doing it that works, so blah lol...

Thanks for the help guys.

Callan S. · Post by **Callan S.** » Mon Apr 28, 2014 3:12 am

Well, I think you'd need to call the database for those.

You could have two entries - number of cottages owned 'cottages' and have 'cottagecooldown' and record time() in that.

Then you just check the database, see if 'cottagecooldown'+300 (five minutes or whatever) is <=time() and if it is, hand out gold and make cottagecooldown=time();

Have you done any of the tutorials and worked with a database yet, making entries and such? I can help you with this one if you want, I just need to know how far your knowledge goes so I know where to start.

Button Disabled Page Refresh

Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh

Re: Button Disabled Page Refresh