Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sidebar that follows/scrolls down

Harlowe (2.0.10)

I've been reading up on sidebars and have a question. Is it possible to program a sidebar to "follow" the screen as it scrolls down? So as a player scrolls down the page the sidebar follows instead of always remaining at the top of the screen.

Or even better (as in this thread) http://twinery.org/forum/discussion/2938/sidebar-menu-in-harlowe, a box that isn't necessarily in the true sidebar since I only want this thing to appear on certain passages.

I'd like to include a countdown timer on some passages and it would be helpful to see the timer at all times no matter where you are in the passage.

Comments

  • 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.
  • 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.
  • 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.

  • 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">>
    
  • You are super awesome. Thank you very much for the thorough response!
Sign In or Register to comment.