Twine 2.0.10 with SugarCube 2.1.2.
I'd like to split up my javascript into several files for ease of development, and to write the code using an IDE outside of Twine (it's honestly pretty awful).
What would be the best way to do this?
Some ways I think could work:
1. externally host files and then in the Story javascript have an AJAX call loading them
2. have a local batch script that cats the files together in the right sequence (and optionally minifies them), which I then copy paste into the Story JS
Comments
You could use a batch script to merge your JS files into a TWEE file containing a script tagged passage, which in turn could be compile together with your story's other TWEE files by tweego.
For example if I need (I know jQuery's included, this is just an example), I'd have statically include the script to be compiled?
What about modifying the html itself? If I wanted a character display canvas for every passage with a certain tag, I'm guessing the best way to do that is to have a prerender task that injects a DOM directly to the window. Would something like this work:
If you were using the Twine 1.x application then I would of mentioned SugarCube's ability to use a userlib.js file to include external Javascript during the story build process, but that does not exist for the Twine 2.x application.
re: modifying the html itself
The #story element is not one of the elements that are destroyed and recreated for each Passage shown, so your prerender example would inject an additional #dispcanvas element for each tagged passage.
You could instead add the #dispcanvas element once and then use tagged based styling to show/hide it.
a. The Javascript, placed in Story Javascript: b. The CSS to hide and conditionally show the #dispcanvas element in canvas tagged passage, placed in Story Stylesheet:
You can use something like the following to load external resources over the network: (goes in Story JavaScript) Ignore the spurious semi-colon these hateful forums add to the end of the href attributes.
That will append a permanent <canvas> element to the overall story container for each such passage, unless you also setup a task to remove them. I'm assuming you don't actually want that, since you've given it an ID.
If you wanted to append/prepend them to the actual passage, so they'd be disposed of along with the passage when it's outgoing, then you'd want something like one of the following: (goes in Story JavaScript)
I don't know how you're going to want to style the <canvas>, so it's possible that you might need to add it to the passages container instead. Still, I'd try one of the above first.