Sidebar that follows/scrolls down

Comments

• taikikurosawa

  February 2016

  Not sure about harlow but in SugarCube the sidebar works exactly like that. And with an $enableTimer Variable and an <<if $enableTime eq 1>> you could display your timer on certain passages.
• PatientRock

  February 2016

  taikikurosawa wrote: »

  Not sure about harlow but in SugarCube the sidebar works exactly like that. And with an $enableTimer Variable and an <<if $enableTime eq 1>> you could display your timer on certain passages.

  
  Thanks, hoping there's a solution for Harlowe since it's a format that my brain seems to respond to best.
  
• PatientRock

  February 2016

  So I've gone ahead and moved my project over to Sugarcube since its native sidebar seems like it'll work best for my specific project. I'm using Twine 2.0 and Sugarcube 1.0.32.
  
  I need a countdown timer to live in the sidebar for certain passages. When the countdown expires, it'll move the player onto the next passage.
  
  I'm having a heck of a time finding a basic how-to for a countdown timers. Could someone guide me through the basic setup of:
  
  1.) Setting up a visible timer in Sugarcube 1.0.32.
  
  2.) Putting that timer into the sidebar for certain passages.
  
  
• TheMadExile

  February 2016

  SugarCube v1 doesn't have any of v2's timed execution macros, so that's out. Let me throw something together.
  
  This should probably do more or less what you want in v1. You might need to tweak the CSS a bit to your liking.
  
  1. Place the following into the Story JavaScript:

  (function () {
  	// Create the timer view element (jQuery wrapped) and cache it.
  	var $timerView = $('<div id="timer-view"></div>');
  
  	// Insert the timer view after the #title element.
  	$("#ui-bar #title").after($timerView);
  
  	// Create the fuction which sets up the timers.
  	window.createTimerView = function (cssTime, passageName) {
  		if (!tale.has(passageName)) {
  			throw new Error('createTimerView: the passage "' + passageName + '" does not exist');
  		}
  
  		var duration = Util.fromCSSTime(cssTime);
  		if (isNaN(duration) || !isFinite(duration) || duration < 1000) {
  			throw new Error('createTimerView: the CSS time "' + cssTime + '" is not a valid CSS time value greater than or equal to 1 second');
  		}
  
  		var remaining = duration;
  
  		function setView() {
  			$timerView.text((remaining / 1000).toFixed(1) + "s");
  		}
  
  		setView();
  
  		var startTime  = Date.now();
  		var intervalId = setInterval(function () {
  			remaining = Math.max(0, duration - (Date.now() - startTime));
  
  			setView();
  
  			if (remaining === 0) {
  				clearInterval(intervalId);
  				$timerView.empty();
  				state.display(passageName);
  			}
  		}, 100);
  	};
  })();
  

  
  2. Place the following into the Story Stylesheet:

  #timer-view {
  	font-size: 2em;
  	font-weight: bold;
  	height: 2.05em;
  	margin-top: 1.5em;
  	text-align: right;
  }
  

  
  3. Place the following into a widget-tagged passage:

  <<widget "timer">><<run createTimerView($args[0], $args[1])>><</widget>>
  

  
  4. Usage

  /*
  	<<timer cssTimeValue "passageName">>
  */
  <<timer 10s "That passage over there">>
  
• PatientRock

  February 2016

  You are super awesome. Thank you very much for the thorough response!