imported js file can't create a Macro

Question

I decided to try putting a macro someone had made into my game. The script refused to load when it was on my computer locally (assume some sort of security reason) so I uploaded the macro file to the internet and linked to it with the below script:

;(function () {
	$(document.head).append('<script id="notify-js" type="text/javascript" src="https://url.com/notify.js" />')
}());

I received the following error message in the Chrome dev tools:

Uncaught ReferenceError: Macro is not defined
    at notify.js:47

Line 47 is as follows:

Macro.add('notify', {

This is where it begins defining the macro. When I did this I had a flashback to a time I previously tried to store some Macros I made and other scripts in a separate js file, and it similarly refused to let me create macros or reference functions defined elsewhere, such as in the story's internal javascscript. (Possibly I had issues accessing variables this way as well, I don't know.)

So my questions are:

1) How do I solve this current problem?

2) How can I have it run scripts imported from local files without complaint?

Answer 1

Adding a script to the head via jQuery is not something I think works at all. If you need to add scripts to your head or outside SugarCube's scope, you can use Tweego's head option or the importScripts() function.

That said, my scripts (I'm assuming that's my notify script, but either way the issue is likely the same) are intended to be run from within the engine's scope in order to access all of SugarCube's internals without resorting to using undocumented features. This means that those scripts need to be copy/pasted into you story JavaScript area or equivalent.

See: https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/readme.md#installation-guide

Comments

It is indeed your script, thank you for responding.

I was hoping to avoid stuffing the javascript area because the Twine interface makes it difficult to work in (and I'm not super proficient at JS to begin with). I'm not fully sure what Tweego does but I suspect I'm going to have to learn to use it at some point.

Anyway, I'll use the internal script area for now, thanks.

---

Tweego is a command line compiler for Twine stories. It allows you to write your story across multiple text files rather than using the Twine 2 editor. That also means you can break down your JavaScript into multiple separate files.

Web page: http://www.motoslave.net/tweego/

Some of my Tweego-related resources:

https://github.com/ChapelR/tweego-setup

https://github.com/ChapelR/tweego-installer

Unfortunately, there is no way to get multiple story JavaScript areas within the Twine 2 application itself.

---

You're a good dude Chapel. Tks.

Answer 2

Rather than have the macro in an external .JS file, it's better to just add the code to your story's JavaScript section.  That will solve all of the above problems.

However, if you still want/need to load an external .JS file, then the following code should help:

if (window.hasOwnProperty("storyFormat")) {
	// Change the following line to the path where the HTML file
	// is located if you want to run this from inside Twine 2.
	setup.Path = "C:/Games/MyDirectory/";  // Running inside Twine 2
} else {
	setup.Path = "";  // Running in a browser
}

setup.JSLoaded = false;
importStyles(setup.Path + "jquery-ui.css");
importScripts(setup.Path + "jquery-ui.js")
	.then(function() {
		setup.JSLoaded = true;
	}).catch(function(error) {
		alert("Error: Could not find file 'jquery-ui.js'.");
	}
);

IMPORTANT NOTES:  1.) You will need to change "C:/Games/MyDirectory/" to the directory where the HTML file should be.  2.) The importScripts() function doesn't trigger immediately, so you may want to check the setup.JSLoaded variable to determine if the JavaScript has loaded successfully yet or not.  3.) Due to browser security reasons, the CSS and JavaScript files should be in the same directory as the HTML file, otherwise it may not work in some browsers.  4.) External files will need to refer to the SugarCube object to work (e.g. "SugarCube.Macro.add(...);").

The above code loads in the CSS and JavaScript for jQuery UI, but you can just change the filenames to load other files.  The first part of the code makes sure that it looks for the files in the correct path, depending on whether you're running it inside Twine 2 or not.

Hope that helps!  :-)

Comments

> 4. External files will need to refer to the SugarCube object to work...

WARNING: The undocumented SugarCube debug object is not designed to be used used that way, the following is a direct quote from a discusion I had about this topic with the TheMadExile.

The SugarCube auto-global is intended to be used for debugging purposes only, not as a normal way to access SugarCube's internals from outside its scope.

Its properties are not stable and can change without warning—and have done so several times in the past.  Anyone relying on it is playing Russian roulette.

---

Thank you both.

I appreciate your response HiEv, but since I'm likely to forget greyelf's warning and be totally counfounded when I update and everything stops working, I think it best if I avoid your method.