Question about using an external js file in combination with the animated dice script.

Comments

• TheMadExile

  August 2016

  Please use the code tag when posting code.
  

  reddicedesign wrote: »

  I would like to use the animated dice script (a javascript from long ago ) inside my Twine game.

  (Emphasis mine) There's your biggest problem right there. That d6.js script appears to be ancient, to say the least. It uses document.write() to overwrite the entire page, which means you cannot use it as-is within any web app, as it overwrites the app—all story formats are web apps, BTW.
  
  

  reddicedesign wrote: »

  <<script type='text/javascript' src='d6.js'>><</script>>
  

  That is not the correct syntax for either the <<script>> macro or the <script> HTML tag—you should remove it.
  
  Beyond that. The former won't work without editing d6.js in several places. The latter won't work just put into a passage like that—you'd have to use jQuery to inject it into the page head.
  
  

  reddicedesign wrote: »

  I have also tested loading the external js file via a "Config" script file in twine with this syntax (TheMadExile tip):

  (function ($) {
  	$(document.head)
  		.append('<script type="text/javascript" src="d6.js"></script>');
  })(jQuery);
  

  but same error: "bad evaluation: D6 is not defined"

  Then you've done something wrong somewhere. That code should cause the script to be loaded, as long as you put it into a script-tagged passage and the file is within the same directory as the compiled HTML file.
  
  
  ----
  
  Anyway, using the head injection code above I was able to get the script, at least partially, running after a small edit to the script and a modification to the way you were attempting to call its D6.dice() method. By "partially" I mean that it didn't break the story format and produced a couple of animated dice on-screen as, I suspect, was intended—I did no testing beyond that.
  
  Change your invocation to something like the following:

  <<script>>
  $(output).append(D6.dice(2, function (result) {
  	document.getElementById("total").textContent = result;
  }));
  <</script>>
  

  
  Then within the d6.js file itself you need to make the following change:
  FIND: (within the D6.dice() function, around line 434)

  	document.write(genHtml);
  

  REPLACE WITH:

  	return genHtml;
  
• reddicedesign

  August 2016

  Hi Thomas, thx for your extensive reply I used all your comments and edited my script, plus I adjusted the d6.js file (replaced the document.write(genHtml); line with: return genHtml; line. But still I'm getting the error: bad evaluation: D6 is not defined. P.s. all files are in the same directory... I have included the .zip file within this post. Could you (if you want ) give me a pointer what I'm doing wrong here?
  
  With kind regards, Jeroen Wolf
• TheMadExile

  August 2016

  Your updated project looks fine and works correctly for me when I built it.
  
  As a guess, you probably just didn't rebuild it or loaded an old build, something like that.
  
• reddicedesign

  August 2016

  Hi there, thx again for your quick answer, I appreciate it a lot I have found out what the problem is. Twine (test play and build play) uses (for my situation) Google Chrome as the default browser. The problem is still there (in Chrome, at least for me), but when using Firefox as browser, everything works fine. Off-course I want my final game to work on both browsers (thus a max. target audience). Do you (or perhaps other users of twine) know (by your experience) if the ancient .js file causes problems with the version of chrome I'm using and what to change so it works on both browsers?
  
  my current situation:
  Google Chrome: v51.0.2704.103 m
  Firefox: v45.2.0
  
  With kind regards,
  Jeroen Wolf
• TheMadExile

  August 2016

  Chrome is very likely refusing to load the resource because, at a guess, you're testing locally—i.e. you're simply opening the file in Chrome. Firefox is, currently, more forgiving in that regard. To test your project locally in any browser other than Firefox, as it currently stands, you'll need to serve the files over HTTP/S. You could use a full web server or a micro-server for this task.
  
  If you eventually plan to put this up on a server someplace, then you will be serving it over the network, so this will not be an issue in production.
  
  On the other hand, if you plan to distribute your project as-is, so that players would be opening the files locally, then you'll probably need to inline the animated dice code—i.e. refactor it a bit so that it works when placed in your script section (Twine 1/Twee: script-tagged passage; Twine 2: Story JavaScript).
  
  ----
  
  The changes required to inline the code aren't major if you wanted to go that route, consisting of one additional fix to the d6.js code and the addition of a wrapper. In fact, I'll just go ahead and outline them here.
  
  FIND: (around line 59)

  		for (i=1; i<7; ++i) {
  			whichDie = "die" + i;
  			imageBank[whichDie] = new Object();
  

  REPLACE WITH:

  		for (i=1; i<7; ++i) {
  			var whichDie = "die" + i;
  			imageBank[whichDie] = new Object();
  

  Basically, you simply add the var keyword before the assignment to whichDie.
  
  And now for the wrapper:

  (function () {
  	"use strict";
  
  	/* PASTE THE CONTENTS OF THE d6.js FILE HERE */
  
  	/* Global Exports */
  	window.D6Animator = D6Animator;
  	window.D6AnimGroup = D6AnimGroup;
  	window.D6AnimBuilder = D6AnimBuilder;
  	window.D6Sample = D6Sample;
  	window.D6 = D6;
  
  })();
  
• reddicedesign

  August 2016

  Thx Thomas for your help with this. For anyone that's interested, I've uploaded the final animated dicetest script here ... it can be used locally in Chrome and Firefox. The original/external d6.js (with much help from TheMadExile) is now deleted and imported into a D6 script passage and invoked via the Start passage...
  
  I used twine 1.4.2 in combination with sugarcube-2.
  
  Jeroen