Making a countdown timer with in Sugarcube 2

ryanindustries

In Sugarcube 2, I notice this bit of code works about as well as you'd expect

<<timed 0.1s>> 1.0 seconds left
<<next>> 0.9 seconds left
<<next>> 0.8 seconds left
<<next>> 0.7 seconds left
<<next>> 0.6 seconds left
<<next>> 0.5 seconds left
<</timed>>

Except it displays each new "message" as its own line. I was wondering if there's a way to replace the old message with a new one. Like where it says "1.0 seconds left", that text would immediately become hidden after the allotted time and replaced with "0.9 seconds left", which would make it look like an actual countdown happening all on one line. Or at least the illusion of such.

Can anyone help me achieve this? Any help is appreciated.

TheMadExile

You just need to use the <<replace>> macro and a target element. For example:

Countdown: <span id="countdown">1.0</span> seconds remaining!\
<<silently>>
<<timed 0.1s>><<replace "#countdown">>0.9<</replace>>
<<next>><<replace "#countdown">>0.8<</replace>>
<<next>><<replace "#countdown">>0.7<</replace>>
<<next>><<replace "#countdown">>0.6<</replace>>
<<next>><<replace "#countdown">>0.5<</replace>>
<</timed>>
<</silently>>

You could also use the Custom Styles markup in the initial line, instead of the <span> element. For example:

@#countdown;1.0@@ seconds remaining!\

They're equivalent, so use whichever you prefer.

ryanindustries

TheMadExile wrote: »

You just need to use the <<replace>> macro and a target element. For example:

Countdown: <span id="countdown">1.0</span> seconds remaining!\
<<silently>>
<<timed 0.1s>><<replace "#countdown">>0.9<</replace>>
<<next>><<replace "#countdown">>0.8<</replace>>
<<next>><<replace "#countdown">>0.7<</replace>>
<<next>><<replace "#countdown">>0.6<</replace>>
<<next>><<replace "#countdown">>0.5<</replace>>
<</timed>>
<</silently>>

You could also use the Custom Styles markup in the initial line, instead of the <span> element. For example:

@#countdown;1.0@@ seconds remaining!\

They're equivalent, so use whichever you prefer.

This works brilliantly, thank you!

If I could grab you for a quick second extra... Since I had to port in Sugarcube 2 for this to work, and the layout is a bit different, I'm wondering how to disable the "back" feature so that the player can't go backwards in the games history with the built-in back button.

TheMadExile

You can disable the history controls just as you could in SugarCube 1.x. In SugarCube 2.x the config object property that you're looking for is config.history.controls. Just set it to false in your Story JavaScript, for example:

config.history.controls = false;