How to change Subarcube's "Backward" and "Forward" buttons' tooltips?

Authoring Twine
1

Tweego 2.1.1+81d1d71
SugarCube 2.37.0-alpha.19+10193

Firefox 125.0.2

I’d like to change the tooltips associated witht the “backward” and “forward” buttons which are at the top of the left-hand GUI column from

Go backward within the game history
Go forward within the game history

to

Go backward within the story history
Go forward within the story history

I.e. to replace “game” by “story”.

What’s the best way to do that?

A little background:

Inspect in Firefox seems to show that the buttons are defined as

<button id="history-backward" tabindex="0" title="Go backward within the game history" aria-label="Go backward within the game history" type="button" role="button"></button>

and

<button id="history-forward" tabindex="-1" title="Go forward within the game history" aria-label="Go forward within the game history" disabled="" aria-disabled="true" data-last-tabindex="0" type="button"
role="button"></button>

The results of some Web searches seemed to claim that a button’s title is what’s shown as the tooltip and I deduced that I could use these Javascript statements to change those titles:

document.getElementById('history-backward').title ='Go backward within the Story history';
document.getElementById('history-forward').title = 'Go forward within the Story history';

Unfortunately, the various techniques that I’ve tried for invoking those statements have either resulted in error messages or in no changes in the tooltips.

sigh

Thanks for whatever help you can provide.

2

You can type in your javascript sheet

!function () {l10nStrings.identity = 'story';}()

It will replace all interface mentions of ‘game’ by ‘story’.

If you only want to change the two UIBar tooltips you can type instead:

!function (){l10nStrings.uiBarBackward="Go backward within the story history";l10nStrings.uiBarForward="Go forward within the story history";}()

You might want to have a look to any localization file to know what default text you can change.

Also I should point that Story history looks a little redundant.

3

I’m not sure what you mean by “javascript sheet”. Something to do with debugging at runtime, maybe?

I want to make the change programmatically so any player/reader sees the modified tooltip.

Still, your suggestion persuaded me to try again. I came up with this test:

:: uitt [script]

Macro.add("settt", {
  handler: function() {
         var back_before = 	 document.getElementById('history-backward').title; 
         var fwd_before = 	 document.getElementById('history-forward').title; 
	 document.getElementById('history-backward').title ='Step backward';
	 document.getElementById('history-forward').title ='Step forward';
         var back_after = 	 document.getElementById('history-backward').title; 
         var fwd_afte = 	 document.getElementById('history-forward').title; 
     var output =
        '<<print "before:' + back_before + '" >>' +
        '<<print ", after:' + back_after + '" >>';
     
     $(this.output).wiki(output);
    }
} );

Macro.add("setli", {
  handler: function() {
         var back_before = 	 	 l10nStrings.uiBarBackward;
         var fwd_before  = 	 	 l10nStrings.uiBarForward;;
	 l10nStrings.uiBarBackward="Step backward";
	 l10nStrings.uiBarForward="Step forward";
         var back_after = 	 	 l10nStrings.uiBarBackward;
         var fwd_after  = 	 	 l10nStrings.uiBarForward;;

     var output =
        '<<print "before:' + back_before + '" >>' +
        '<<print ", after:' + back_after + '" >>';
     
     $(this.output).wiki(output);
    }
} );

:: Start

<<setli>>
<<settt>>

Which yields this output

before:undefined, after:Step backward
before:Go backward within the game history, after:Step backward

In other words, I’m sorry to say that your suggested variables don’t seem to be used by Sugarcube.

Fortunately, though, it turns out that the generic html code actually does work! I dunno what I was doing wrong last night. It was late.

As for the redundant use of the word “history”, you’ll have to take that up with Sugarcube’s author (TME).

4

The Story JavaScript “passage.” Choose “Story” and then “JavaScript” in the bar across the top of the Twine editor.

Edit: Oh, wait, you’re using Tweego. Put it in a .js file that Tweego builds with the rest of your game source.

5

SugarCube includes a number of special variables, like setup and l10nStrings that can be used in any of the Private Scoped JavaScript execution contexts created by the SugarCube engine, like those created for:

  • the Story > JavaScript area of a Twine 2.x application project.
  • macros like <<script>> and <<run>>.
  • any Passage that has been assigned the special script Passage Tag.
  • any js file that is included in the source code path of a Twee Notation compiler, like TweeGo.

So if your project is Twee Notation based, then you can use code that references the special l10nStrings variable to alter the default text that the SugarCube User Interface displays.
(the following has been tested in a new SugarCube project)

l10nStrings.uiBarBackward = "Go backward within the story history";
l10nStrings.uiBarForward = "Go forward within the story history";

edit: It has been pointed out by TheMadExile, that the current v2.37.0 alpha testing release requires an addition property to be set, so the above should be the following for that release…

l10nStrings.textIdentity = 'story';
l10nStrings.uiBarBackward = "Go backward within the story history";
l10nStrings.uiBarForward = "Go forward within the story history";

note: There is no need to wrap the above l10nStrings variable assignments within a JavaScript Immediately Invoked Function Expression.
eg. there is no need to syntax like this…

!function () {
    l10nStrings.uiBarBackward = "Go backward within the story history";
    l10nStrings.uiBarForward = "Go forward within the story history";
}();

…or this…

(function () {
    l10nStrings.uiBarBackward = "Go backward within the story history";
    l10nStrings.uiBarForward = "Go forward within the story history";
})();
1 Like
6

Exactly where should they be put?

When I put them in a passage which has the tag [script], for example, the tooltips aren’t changed, although no error messages are generated.

I also tried this:

:: PassageHeader [nobr]
<<script>>
    l10nStrings.uiBarBackward = "Go backward within the story history";
    l10nStrings.uiBarForward = "Go forward within the story history";
<</script>>

Again, no change.

(I had found that the method I’m currently using, a macro which uses the generic html code to change the button’s title, kept getting undone when I did a browser window refresh. Always calling it before a passage gets rendered fixed that.)

In case it makes a difference, as mentioned back at the start, I’m using the latest SugarCube alpha:
SugarCube 2.37.0-alpha.19+10193
which works quite well for me.

7

If you’re using the current alpha, place the following into your story JavaScript:

l10nStrings.textIdentity = 'story';

With that you change the identity of the project in all localized references from game to story.

Unless otherwise specified when someone says story JavaScript, JavaScript section, JavaScript sheet, JavaScript anything in relation to Twine we almost always mean:

  • In Twine 2: the story JavaScript, there’s only one.
  • In Twee (generally): a script-tagged passage.
  • In Tweego (specifically): a script-tagged passage or a loose JavaScript file (.js) within your sources.
8

Thanks, that did it!

It even survives a browser refresh :smile: