Ask a Question

How can I use the <script> function in Twine Harlowe 2.0?

0 votes
by (390 points)
edited by

Hey all,

So I happened to come across this html UI that I would love to incorporate into one of my Twine Harlowe 2.0 games. Found here: https://github.com/RonenNess/RPGUI/blob/master/README.md

The CSS works just fine, but when I attempt to run the Javascripts (that I copy-and-pasted from their rpgui.js file) I get an error saying "RPGUI is not defined."

Is there any work around for getting this custom CSS and Javascript to work in Twine? How can I call the following scripts into my story passage?...

<div id="red-bar" class="rpgui-progress red"></div>

<script>
	// set the red bar into 50% full
	var progress = document.getElementById("red-bar");
	RPGUI.set_value(progress, 0.5);
</script>

..so would there be any chance of me getting this to work?

Thanks in advance!

2 Answers

0 votes
by (159k points)
selected by
 
Best answer

The RPGUI Javascript library is making certain assumptions about the Javascript environment (mostly to do with Scope) and the element structure of the HTML document it is being used in, and these assumptions are not correct for the Javascript Engines & HTML Templates of either Harlowe or SugarCube.

After spending a couple of minutes looking at the problem I was able to get the RPGUI library to load without error (this doesn't mean it loaded correctly) by manually editing the Story HTML file (created via the Publish to File option) in a Text Editor to add the required link and script elements to the HTML document's head element. This method worked for both Harlowe and SugarCube based Story HTML files.

I was was not able to get the RPGUI.set_value() function in your example to work but I didn't spend much time trying to debug this problem. Due to the way the story formats create the HTML elements that represent a Passage, this could just be a simple issue of timing.

eg. The calling of the RPGUI related code may need to be delayed until after the HTML element have finished being created.

by (390 points)
Thank you for taking the time to look into it. I was hesitant that it wouldn't work, so I'm glad I didn't get my hopes up. I'll use a different route; plus it'll help me learn more and perhaps I'll design my own layout. I really appreciate all the help!
0 votes
by (2.7k points)
edited by

This seems to be the way to do it in SugarCube...

<div id="red-bar" class="rpgui-progress red"></div>

<<script>>
	// set the red bar into 50% full
	var progress = document.getElementById("red-bar");
	RPGUI.set_value(progress, 0.5);
<</script>>

But I don't know about harlowe. I tried it and got this error:

"Sorry to interrupt, but this page's code has got itself in a mess.
@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:3:3
n@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:58:3344
E@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:58:8517
.append@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:59:27483
u@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:75:5380
d.goToPassage@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:75:5736
@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:76:9175
o/</f@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:59:12434
o/</p<@file:///home/pi/twine_2.2.1/index.html#!/stories/faf09f4c-c592-4d02-a722-67964bf7ec3e/play:59:12790

(This is probably due to a bug in the Harlowe game engine.)"

No idea what all of that means, but somebody might know. I got this far by doing this:

<div id="red-bar" class="rpgui-progress red"></div>
<body>
	<script type="text/javascript">
		var progress = document.getElementById("red-bar");
		RPGUI.set_value(progress, 0.5);
	</script>
</body>

 

by (159k points)
edited by

There should be only be one body element within a HTML document and the Harlowe template used to generate your Story HTML file already contains a body element.

You shouldn't be using a body element within the contents of a Passage.

It should be also noted that SugarCube will throw the same "RPGUI is not defined." error at startup as Harlowe does.

Snow Theme by Q2A Market
Powered by Question2Answer
...