Timer with jQuery

[Dragonoftheworld]

Heyall

So I'm making a timer that runs down every 10ms.
Here's what I've set up in Advanced Scripts:

// Timer Alarm
s = "$('body').prepend('"
s = s + "<span id=\"timeralarm\" style=\"color:rgb(186,176,176);font-size:52px;position:relative;top:150px;left:150px;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;display:block;height:100px;width:100px;\"></span>"
s = s + "');"
s = s+ "var tminute = 2;"
s = s+ "var tsecond = 0;"
s = s+ "var tmilisecond = 0;"
s = s + "var formattedTime = '2:00:00';"
s = s + "$('#timeralarm').html(formattedTime);"
s = s + "var totalMilliseconds = (tminute * 60 * 1000) + (tsecond * 1000) + tmilisecond;"
s = s + "function updateDisplay() {"
  s = s + "var minutes = Math.floor(totalMilliseconds / (60 * 1000));"
  s = s + "var seconds = Math.floor((totalMilliseconds % (60 * 1000)) / 1000);"
  s = s + "var milliseconds = totalMilliseconds % 1000;"
  s = s + "var formattedTime = minutes.toString().padStart(2, '0') + \":\" + seconds.toString().padStart(2, '0') + \":\" + Math.floor(milliseconds / 10).toString().padStart(2, '0');"
  s = s + "$('#timeralarm').html(formattedTime);}"
s = s + "var countdownInterval = setInterval(function() {"
  s = s + "if (totalMilliseconds <= 0) {"
    s = s + "clearInterval(countdownInterval);"
    s = s + "$('#timeralarm').html(\"Time's up!\");"
    s = s + " } else {"
    s = s + "totalMilliseconds -= 10;"
    s = s + "updateDisplay();"
    s = s + "}}, 10);"
s = s + "updateDisplay();"
JS.eval (s)

The HTML editor runs an error: "undefined is not a function." The timer runs as the number of errors increase exponentially.
And no matter what I do, I don't seem to be able to define the function for it.

Any ideas?

[angelwedge]

I can't see anything in the code that would generate that error; and pasting the exact code you provided into my own game works fine (no errors, nothing in the console).

Is it possible the error is somewhere else?
Does this error occur on the desktop client, or online? If online, which browser are you using? Maybe there's some edge case with a particular javascript engine.

[Dragonoftheworld]

hmm that's strange.

I'm using desktop. I keep forgetting to mention that.
I tried again but gives me the same error:
275VM7389:1 Uncaught TypeError: undefined is not a function
614VM7389:1 Uncaught TypeError: undefined is not a function

There are other codes in the same tab, but they give no error and work fine as intended.

[Dragonoftheworld]

I've made a new game and pasted the code. It's still the same. I'm using version 5.8.0 Build 5.8.6836.13995

[KVonGit]

Oh... I started typing my reply before this answer appeared. angelwedge was already on the case and knew what the underlying issue was.

[KVonGit]

Is the problem padStart? Because the desktop player's browser is so old?

I have the same issue when I post this into a fresh game in the 5.8 desktop player.

---

Yep. It works in the testing build (with the updated browser).

padStart wasn't born yet when Quest 5.8's browser was released.

---

EDIT

Try adding this line as the first line in your script (as long as it's before JS.eval(s)):

JS.eval ("String.prototype.padStart = function(l, pre){return (this.length < l) ? pre + this : this;};")

That fixes it for me in the Quest 5.8.0 desktop player (the official release).

[KVonGit]

Yeah, it's easy to do that when there's a testing build on the machine. I made my buddy go crazy for 30 minutes yesterday, because his code worked for me and not him. Turned out I was using the testing build, and his code also had JS that was too new for Quest 5.8. :)

---

I've learned to add JS stuff like this in a JS file created using Quest. When functions like this are in a JS file, the errors are much more detailed. Like, it would at least say the actual line number and the file name to look at.

Sometimes, you need to do things with JS.eval, but most of the time they can be defined in an actual JS file. It's easier to write the code, and it's easier to debug. (It's one of the perks of using the desktop version of Quest.)

EDIT

In this case, if all that JS code were in a JS file, you could call your function like this from your Quest script:

JS.updateDisplay()

---

Anyway, first things last: Nice timer code! (I'm bookmarking this!)

[Dragonoftheworld]

you're right and thanks for the compliment. Definitely do!

Btw, how do I access the JS file? I thought about adding code to it, but I didn't know where to look for it. It's definitely better than trying to add s = s + "" to each line craziness

[KVonGit]

---

Click new.

---

The name doesn't matter. It is created in your game folder. I always just leave it as "javascript.js"

---

Now you're ready to code!

---

---

EDIT

Then, to call that from a Quest script:

JS.sayHi()

[Dragonoftheworld]

Ooh I didn't know that! That's so fancy!

function startTimer() {
    $('body').prepend('<span id="timeralarm" style="color:rgb(186,176,176);font-size:52px;position:relative;top:150px;left:150px;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;display:block;height:100px;width:100px;-webkit-transition:color 750ms linear, font-size 750ms linear;">2:00.00</span>');
    var currentColor = 'grey';
    function toggleColor() {
        if (currentColor == 'grey') {
            $('#timeralarm').css('font-size', '62px').css('color', 'red');
            currentColor = 'red'
        } else {
            $('#timeralarm').css('font-size', '52px').css('color', 'rgb(186,176,176)');
            currentColor = 'grey'
        }
    
    }
    var runToggleColor = setInterval(toggleColor, 750);
    var tminute = 0;
    var tsecond = 49;
    var tmilisecond = 0;
    var formattedTime = '2:00:00';
    $('#timeralarm').html(formattedTime);
    var totalMilliseconds = (tminute * 60 * 1000) + (tsecond * 1000) + tmilisecond;
    function updateDisplay() {
        var minutes = Math.floor(totalMilliseconds / (60 * 1000));
        var seconds = Math.floor((totalMilliseconds % (60 * 1000)) / 1000);
        var milliseconds = totalMilliseconds % 1000;
        var formattedTime = minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0') + "." + Math.floor(milliseconds / 10).toString().padStart(2, '0');
        $('#timeralarm').html(formattedTime);
    }
    var countdownInterval = setInterval(function() {
        if (totalMilliseconds <= 0) {
            clearInterval(countdownInterval);
            clearInterval(runToggleColor);
            $('#timeralarm').html("Time's up!");
        } else {
            totalMilliseconds -= 10;
            updateDisplay();
        }
    }, 10);
    updateDisplay();
}

I pasted the code into that part and it works! Awesome! Thanks for the help!
Also at the start of the code, I've added codes that will add a sense of urgency. It will increase font-size and change to red and then change it back and forth.
I've added transition to the span:

-webkit-transition:color 750ms linear, font-size 750ms linear;

[KVonGit]

This is cool!

---

For completetion

We can also add existing JS files, pretty much the same way we can add images and libraries. Just use the browse button during this step:

---

We can also attach ZIP files to our comments here. :)

Timer Alarm - Gng.zip