Loading external HTML elements and wikify the contents

Twine: 2.2.1
SugarCube: 2.29.0

I’m currently developing a rather ambitious game using SugarCube, and I have plans to host it on a (as of yet unreleased) 3rd party website.
This website however has specific rules as to what content may be available, but also has an auxillary site that I can upload to with less restrictive rules.
I’m trying to develop my game so that I can publish it to both the main site and the auxillary one.
My game is meant to be packed in a .zip with the restricted content in a subfolder, which on startup, if this is on the auxillary website, loads the restricted content through JQuery’s $load() function:

<span id="test">Internal</span>
<<script>>
$(document).ready(function () { 
	$("#test").load(State.variables.IncludePath + "contentSnippet.html span#externalTest");
});
<</script>>

The code above works properly and overwrites the content in the test-span with the content from the external HTML file’s span with the id “externalTest”.
This is tested in a passage but my main use of this would be to load passages from the external HTML, save them as objects and print them as needed, treating them as if they originated in the original.
Determining whether or not this is on the auxillary site is already handled as well.

My issue now, is that I wonder whether or not I can write elements in the external HTML file, that contain TwineScript/SugarCube syntax, and wikify that to become ‘pure’ HTML.
For example, let’s say an external div contains “<<print $char.name>>” somewhere in it (with $char.name being initialized in the main HTML).
How would I wikify the data returned from the JQuery load() call? Can I even do that or do I need to use $.get() instead (which doesn’t have a handy element-picking feature) due to load() replacing the contents of the selected element instantly.

I don’t think you can create new passages on the fly, but wikifying some text isn’t too hard. SugarCube adds a wiki method to JQuery, so you can do something like $(".passage").wiki($(#divWithContent).text()) once the loading is complete? I’m guessing about some of that, but hopefully it should be enough to point you in the right direction…

I don’t neccessarily need to create new passages. Was planning to use an existing ‘empty’ passage and print relevant info/text/etc there.
I had some issues with the .load() and wiki. Most of the time the .wiki() would just print “[Object object]” but using the .text() call fixes that.
.load is also async, which threw yet another wrench in the whole thing, as it could be set to run before the wiki call (which appends) but the load would finish after, and overwrite the wiki appendation, but I’ve found a working solution

<<script>>
$(document).ready(function () { 
	$("#test").load(State.variables.IncludePath + "contentSnippet.html span#externalTest", function() {
		var temp_text = $("#test").text();
		$("#test").empty().wiki(temp_text);
	});
});
<</script>>
1 Like

Unless the value of the above story variable is different for each end-user, is different for each play-through of your game, or changes during the play-through then it makes no sense to store that value within the History system. It makes more sense to store static information, like where to find external content, on the special setup object, which can be done ether:
a. within your project’s Story Javascript area.

setup.IncludePath = "path to content";

b. within your project’s StoryInit special passage.

<<set setup.IncludePath to "path to content">>

…you would then need to change any code that currently references State.variables.IncludePath to reference setup.IncludePath instead.

1 Like