Time limit on choices

Authoring Twine
1

Iā€™m new to using sugarcube 2.30, but i want to make a timer that when it ends, it automatically sends you to one of the potential passages. I want this timer to be connected to a variable point system however.
I.e. if you have 100 points the timer gives you 100 seconds, 90 points > 90 seconds etc.

any ideas on how to achieve this?

I found this script on the twine website that gets me halfway there now i need to link the progress bar to my variable

Macro.add("timedprogressbar", {
	isAsync : true,
	tags: null,
	handler: function() {

		var payload = this.payload[0].contents.replace(/\n$/, '').trim();

		var duration = (Number(this.args[0]) || 60) * 1000;

		var width = this.args[1] || "100%";

		var hash = Math.floor(Math.random() * 0x100000000).toString(16);

		var outerId = "outer_" + hash;

		var innerId = "inner_" + hash;

		var progressbar = $("<div>")
		.attr("id", outerId)
		.addClass("progress-bar")
		.css('width', width)
		.appendTo(this.output);

		var progressvalue = $("<div>")
		.attr("id", innerId)
		.addClass("progress-value")
		.css('width', "100%")
		.appendTo(progressbar);
		var toHex = function(num) {
			var res = Math.round(Number(num)).toString(16);
			return (res.length === 1 ? "0" + res : res);
		};
		var functionToRun = this.createShadowWrapper(
			payload
				? function() { Wikifier.wikifyEval(payload); }
				: null
		);
		jQuery(document).one(":passagedisplay", function() {
			var timeStarted = (new Date()).getTime();
			var workFunction = setInterval(function() {
				if(! progressbar.prop("isConnected") ) {
					clearInterval(workFunction);
					return;
				}

				var timePassed = (new Date()).getTime() - timeStarted;
				if(timePassed >= duration) {
					progressvalue.css('width', "0");
					clearInterval(workFunction);
					setTimeout(functionToRun, 40);
					return;
				}
				
				var percentage = 100 - 100 * timePassed / duration;
				var color = "#"
					+ toHex(Math.min(255, 510 -  5.1 * percentage))
					+ toHex(Math.min(255, 5.1 * percentage)) + "00";
				progressvalue.css("backgroundColor", color);
				progressvalue.css("width", (100 - 100 * timePassed / duration) + "%");
				
			}, 40);
			
		});
	},
});


StoryInit:
<<set $points to 100>>

Passage:
<<timedprogressbar 100 20em>><<goto "whatever page insert here">><</timedprogressbar>>

Thank you in advance of course.

2

Does <<timedprogressbar $points 20em>> just work?

3

That it does, thanks a bunch

4

You might also want to check out my ā€œCountdown Timerā€ sample code to see if that would work for you. (Click ā€œJump to Startā€ on the UI bar to see other sample code there.)

Hope that helps! :slight_smile:

1 Like