›

How can I automatically open/close the right UI bar?

ffsffs
in Help! with 1.x
Using Twine 1 with Sugarcube 2

I want to be able to open or close the right UI depending upon what's going on in the game. For instance, if you get a level up, the right UI pops open with an interface for stat increases or if you meet a character, it pops open with a pic and info of that character.

I'm guessing I want a $var that if true sets the UI to open and vice versa but I'm not sure how to implement this. Please help!

The right UI script I'm using is below.
/* Create the Right UI Bar. */
var $rightUiBar = $('<div id="right-ui-bar" class="stowed"></div>').insertAfter("#ui-bar");

var rightTray = $rightUiBar.append('<div id="right-ui-bar-tray"><button id="right-ui-bar-toggle" tabindex="0" title="Toggle the Right UI bar" aria-label="Toggle the Right UI bar" type="button"></button></div>');

var rightBody = $rightUiBar.append('<div id="right-ui-bar-body"></div>');

/* Attach the toggle button click. */
$rightUiBar.find('#right-ui-bar-toggle').ariaClick({label : "Toggle the Right UI bar"}, () => $rightUiBar.toggleClass('stowed'));

/* Automatically show the contents of the StoryRightSidebar passage in the right-ui-bar-body element. */
postrender["Display Right Sidebar Contents"] = function (content, taskName) {
	setPageElement('right-ui-bar-body', 'StoryRightSidebar');
};

Thanks in advance!

Comments

  • ffsffs
    edited July 2017
    Can I put if statements in script passages?

    If so could I do something like...
    /* Create the Right UI Bar. */
<<if $rui is false>>
var $rightUiBar = $('<div id="right-ui-bar" class="stowed"></div>').insertAfter("#ui-bar");

etc...
<<else>>
<<if $rui is true>>
var $rightUiBar = $('<div id="right-ui-bar" class="open"></div>').insertAfter("#ui-bar");

etc...
  • idlingidling
    edited July 2017
    You can just work with tags. Depending on whether you want your UI-bar to vanish or to just be stowed it would either look. like this:
    <<if tags().includes("interface")>>
<<set document.getElementById("ui-bar").style.visibility = "visible";>>
<<set document.getElementById("story").style.marginLeft = "20em";>>
<<else>>
<<set document.getElementById("ui-bar").style.visibility = "hidden";>>
<<set document.getElementById("story").style.marginLeft = "0em";>>
<</if>>

    Or like this:
    <<if tags().includes("interface")>>
<<run UIBar.unstow()>>
<<else>>
<<run UIBar.stow()>>
<</if>>

    Put this into a passage called PassageReady and the sidebar will pop up in every passage tagged "interface"

    You can use the same methods to change the UI-bar within a single passage by executing the stuff within the <<if>>.
  • ffsffs
    So using the second example, I receive this error message
    Error: <<run>>: bad evaluation: UIBar is not defined

    I used 2 test passages, placed the code in both and a link from the first, leading to the second. The second passage I tagged "interface".

    What am I doing wrong here?
  • idlingidling
    edited July 2017
    ffs wrote: »
    So using the second example, I receive this error message
    Error: <<run>>: bad evaluation: UIBar is not defined

    I used 2 test passages, placed the code in both and a link from the first, leading to the second. The second passage I tagged "interface".

    What am I doing wrong here?

    Sorry - my bad. Tested this all out in Twine 2, so any error might stem from that. Don't have time to test this out, but try something like: 
    <<addclass "#ui-bar" "stowed">>

    and
    <<removeclass "#ui-bar" "stowed">>

    Instead of
    <<run UIBar.stow()>>

    and
    <<run UIBar.unstow()>>
  • ffsffs
    edited July 2017
    OK, thanks anyway idling. I'll bet you're not far off.
  • ffsffs
    Ooooooooh yussssssssss!!!!! You are a legend sir! (/madame) :)
  • ffsffs
    NB. I altered that slightly to "#right-ui-bar".

    Cheers, nice one!
Sign In or Register to comment.