Harlowe 2.0/Run JS on every passage change?

Question

I hadn't done Twine since 1.0 and decided to use Harlowe for a low-friction mostly-simple-hypertext-fiction Twine. After completing it, I realized i want to do a subtle change in passage css every single time you navigate between passages (specifically, to slowly shift the color scheme click by click). However, it seems very difficult to make this happen. 

I checked the source of Harlowe and saw that it triggered 'beforeShowPassage' and 'afterShowPassage' events, but I can't seem to get them to work.

Here's my current code.

 

// math to take two hex color strings, c0 and c1, and blend them by a percentage decimal p in the range from 0 to 1.
// p=0 gives you c0, p=1 gives you c1
function blendColors(c0, c1, p) {
  const f=parseInt(c0.slice(1),16);
	const t=parseInt(c1.slice(1),16)
	const R1=f>>16;
	const G1=f>>8&0x00FF
	const B1=f&0x0000FF
	const R2=t>>16
	const G2=t>>8&0x00FF
	const B2=t&0x0000FF;
  return "#"+(0x1000000+(Math.round((R2-R1)*p)+R1)*0x10000+(Math.round((G2-G1)*p)+G1)*0x100+(Math.round((B2-B1)*p)+B1)).toString(16).slice(1);
}

var startBgColor = "#000000";
var startTextColor = "#FFFFFF";
var endBgColor = "#c8a2c8";
var endTextColor = "#f08080";

$(document).on('afterShowPassage', () => {
	alert('afterShowPassage'); // even this doesn't work
	const currentBgColor = $('tw-passage').css('backgroundColor');
	const newBgColor = blendColors(currentBgColor, endBgColor, 0.1);
	const currentTextColor = $('tw-passage').css('color');
	const newTextColor = blendColors(currentTextColor, endTextColor, 0.1);
	$('tw-passage').css({backgroundColor: newBgColor, color: newTextColor});
});

 

Any thoughts?

Answer 1

Could you supply links to where in the repository source code you found those events, because I don't remember ever seeing them nor could I find them within the Engine.showPassage() function.

As far as I know you need to use either a header or footer tagged passage to execute any code you want to occur on every passage.