First. One of your issues likely stems from the fact that many libraries are not intended to work with SPAs (single page applications) in their simplest use case, which is usually the example they give. The issue here is likely that jscolor is not deteccting content changes, so you’re going to have to tell it to look for elements bearing a data-jscolor attribute when those happen—SugarCube has an event to help with that. NOTE: After reading its documentation, I think I’ve identified what method you need to call.
Anyway. With Twine 2 you have two relatively easy ways to do this. I recommend the first option, A.
Option A: Bundle jscolor into your project
1) In the ZIP archive you downloaded, there’s a file named jscolor.min.js. Open this file in a plain text editor—e.g., Notepad; do not use a word processor like Word, Wordpad, etc.
2) Select all, the entire contents of the file, and copy.
3) Paste the contents into your project’s JavaScript area.
4) Paste the following code into your project’s JavaScript area after the jscolor chunk.
// On each `:passageend` event attempt to attach jscolor
// instances to elements bearing a `data-jscolor` attribute.
$(document).on(':passageend', function () {
jscolor.install();
});
Done. Use jscolor as normal.
Option B: Include jscolor from an external source
1) Paste the following code into your project’s JavaScript area.
// Lock the loading screen.
var lockId = LoadScreen.lock();
// Import jscolor from a CDN.
importScripts('https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js')
.then(function () {
// On each `:passageend` event attempt to attach jscolor
// instances to elements bearing a `data-jscolor` attribute.
$(document).on(':passageend', function () {
jscolor.install();
});
// If the starting passage has already been shown, show it
// again so that jcolor can run on it.
if (State.turns > 0) {
Engine.show();
}
// Finally, unlock the load screen.
LoadScreen.unlock(lockId);
})
.catch(function (err) {
// There was an error loading the script, log it to the console
// and unlock the load screen.
console.error(err);
LoadScreen.unlock(lockId);
});
Done. Use jscolor as normal.