Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Typewriter Effect in SugarCube 1.0.34

Note: I have absolutely no skill or experience when it comes to Javascript.
I'm trying to use the typewriter effect from https://www.glorioustrainwrecks.com/node/5161, I pasted it into the Javascript section and tagged to passage with "t8n-typewriter-2". But when I try to run it the passage that I tagged comes up with this:

Apologies! A fatal problem has occurred. Aborting.

Error: Cannot read property 'title' of undefined.

I have no idea what went wrong.

Comments

  • edited October 2016
    First. SugarCube v1.0.35 has been out for about six months now and is a bugfix release. You are encouraged to upgrade.


    On to your problem. That module, as is virtually everything story format related by Leon on Glorious Trainwrecks, is only compatible with the vanilla story formats.

    Try this SugarCube v1 compatible version:
    (function(){postrender.typewriter = function (b) {
    if(this.tags){var r=new RegExp("t8n.typewriter.([0-9]+)(?:[^0-9]|$)","g");var t=r.exec(this.tags.toString());
    if(t){typeout(b,t[1]+0);}}return b;};var typeout=function(c,t){var Furl=function(current){this.n=current;
    this.out=false;this.data=current.nodeValue;current.nodeValue="";this.kids=[];var cn=current.childNodes;
    if(current.style && current.style.display=="none"){return;}while(cn.length>0){var f=new Furl(cn[0]);
    current.removeChild(cn[0]);f.out=true;this.kids.push(f);}};var nodes=new Furl(c);
    var unfurl=function(furled,d){var n=furled.n;if(furled.out){d.appendChild(n);furled.out=false;
    }if(furled.data){n.nodeValue+=furled.data[0];furled.data=furled.data.slice(1);return true;
    }for(var j=0;j<furled.kids.length;j++){var ret=unfurl(furled.kids[j],n);if(ret){return true;
    }}return false;};var title=state.active.title;var intr=setInterval(function(){if(state.active.title==title&&unfurl(nodes,null)){return;
    }clearInterval(intr);},t);};}());
    
  • Thank you.
  • Where did you find that, because I'm also looking for the other transitions, like decrypt.
  • Sabre5 wrote: »
    Where did you find that, because I'm also looking for the other transitions, like decrypt.
    I didn't find it anywhere, I modified Leon's original.
  • NOTE: Leon's original code contains a bug, or what I'm assuming is a bug, where the number of milliseconds you specify is off by an order of magnitude. This version does not include that bug, so you will likely need to update your typing speed—e.g. t8n-typewriter-2 should become t8n-typewriter-20.

    Here's a version of the SugarCube v1 compatible version with support for a startup delay.
    (function(){postrender.typewriter=function(b){if(this.tags){var r=/\bt8n-typewriter-(\d+)(?:-(\d+))?\b/g;
    var t=r.exec(this.tags.toString());if(t){typeout(b,+t[1],+t[2]);}}return b;};var typeout=function(c,t,d){
    var Furl=function(current){this.n=current;this.out=false;this.data=current.nodeValue;current.nodeValue="";
    this.kids=[];var cn=current.childNodes;if(current.style && current.style.display==="none"){return;}while(cn.length>0)
    {var f=new Furl(cn[0]);current.removeChild(cn[0]);f.out=true;this.kids.push(f);}};var nodes=new Furl(c);
    var unfurl=function(furled,o){var n=furled.n;if(furled.out){o.appendChild(n);furled.out=false;}if(furled.data){
    n.nodeValue+=furled.data[0];furled.data=furled.data.slice(1);return true;}for(var j=0;j<furled.kids.length;j++)
    {var ret=unfurl(furled.kids[j],n);if(ret){return true;}}return false;};var title=state.active.title;if(d)
    {setTimeout(function(){var intr=setInterval(function(){if(state.active.title!==title||!unfurl(nodes,null)){
    clearInterval(intr);}},t);},d);}else{var intr=setInterval(function(){if(state.active.title!==title||!unfurl(nodes,null))
    {clearInterval(intr);}},t);}};})();
    
    Tag syntax:
    t8n-typewriter-{typingSpeed}
    t8n-typewriter-{typingSpeed}-{startDelay}
    
    Usage examples:
    → Type a character every 20 milliseconds
    t8n-typewriter-20
    
    → Delay typing for 400 milliseconds and then type a character every 20 milliseconds
    t8n-typewriter-20-400
    
  • I didn't mean a start delay, I meant more like a pause in the typing for a effect in the middle of a paragraph.
  • Then you're out of luck with that code, at least for a programmatic solution.

    If you don't mind doing something stupid, I suppose you could add sequences of spaces wherever you wanted a pause—the more spaces you add, the longer the pause.
  • Don't the spaces show up?
  • TME, if you please, can you make a SugarCube v2.latest version of this?
  • The latest version of sugarcube is already out - 2.10.0 (I think, so far).
  • edited October 2016
    Sabre5 wrote: »
    Don't the spaces show up?
    You could simply have tested that out for yourself you know.

    Regardless. It depends on what you mean. Are they rendered into the output? Yes, of course—which is what you want, since "typing" them out takes time, thus giving you your delay. Are they visible? No—they're still whitespace, so they don't make a visible impact within the output.

    As an alternative, you could try the typed.js integration module—available on SugarCube's website—which acts as a wrapper for Typed.js, another typing effect library. It lets you control the typing effect on an individual text element basis, rather than a whole passage basis. Caveat: IIRC, it doesn't handle links or other interactive elements very well, however, if that's an acceptable tradeoff, then it does give you the ability you're looking for.

    TME, if you please, can you make a SugarCube v2.latest version of this?
    Either of the above should work in SugarCube 2—due to legacy features. There's also the typed.js integration module, I mentioned just above—though, again, it does come with a caveat.

    That said, I suppose I could clean it up a bit more and provide a version specifically tailored to SugarCube 2.
Sign In or Register to comment.