Twine 2 Sugarcube 2 Interactive select box

Authoring Twine
,
1

I hope I’ve placed this topic in the right group. I’m looking for some sugarcube/js advice.

I’ve played around with Twine and Sugarcube projects before, usually pitching in to help another author, and in those cases I found it quite fun.

So last week I came up with an idea for a twine game/story And I went to town, crafting up all sorts of things.

Then I went back to make some of the game/story settings tools work a bit better. I had <<numberslider>> for a number of settings, and with the built in <<onchange>> I could directly update my display with every change the user makes.

Well one of my settings was gloves, at first I had yes, no. And a slider to update, no biggy. Then I wanted to add a third and fourth option, fingerless gloves and fancy versus ruged gloves, now a slider stopped making sense because there was no linear progression that made sense.

So I wanted to retool the control to use a listbox instead of a slider. Listboxes don’t come with a handy <<onchange>> tag to make this easy, but as a javascript veteran, I figured, just use a jquery listener and fire off my update.

So my js file:

gloves.js:

/*    
**  First, a utility function to do the replace when triggered.
*/        
function replacePlayerGlovesDisplay(e)
{       
  new Wikifier(
        null,
        '<<replace "#show-gloves">><<player_gloves 1>><</replace>>'
      );
};

/*
**  Next the function to invoke on the jail page, which will start listening
**  for change events on the player gloves list box, calling the above
**  update when triggered.
*/
function updatePlayerGloves()
{   
  jQuery(document).ready(
    () =>
    {  
      $('#listbox-playergloves').change(replacePlayerGlovesDisplay);
    }
  );
  return "";
};

/*
**  publish, so to speak, our listener so we can add it to the twee.
*/
Macro.add('updatePlayerGloves', updatePlayerGloves);

Then in my settings.twee:

     <div class="settingsToggle">
        <<if  $player.gloves  is  undefined>><<set $player.gloves  to 'none'>>
        <</if>>
        Gloves: <span id="show-gloves"><<player_gloves 1>></span>
        <<set _gloveTypes = [ 'none', 'fingerless', 'fancy', 'rugged' ]>>
        <<listbox "$player.gloves" autoselect>>
          <<optionsfrom _gloveTypes>>
        <</listbox>>
        <<updatePlayerGloves>>
      </div>

Looked perfect, however when I compiled and ran I got an early popup error:

Error: unknown error when attempting to add macro <<updatePlayerGloves>>: [Error] cannot create alias of nonexistent macro <<function updatePlayerGloves()
{
  jQuery(document).ready(
    () =>
    { 
      $('#listbox-playergloves').change(replacePlayerGlovesDisplay);
    }
  );
  return "";
}>>

I’ve fiddled around with this for 3 days now, and I’m frustrated enough that I’m considering dropping back radiobttons/links or even the numberslider. Has anyone seen this error before with twine/sugarcube? Am I doing something stupid?

2

the macro definition object has a handler property for the handler, you can’t just pass a function straight in like that.

1 Like
3

Ah, I see what you mean.

Cool, I was copying from two different guides on macros, and one was using DefineMacros() which is a handler that takes the function and stuffs it into Macro.add() complete with the handler.

All better now. Thanks Chapel