New Custom Status Attribute Box

Can someone point me to a tutorial?
I have 2 boxes displayed in my game. The status box, and the inventory box.

I know how to add status attributes, easy enough.

What I was wondering is can I create a whole new box? Say, ship stats?

My player is possibly going to be moving from ship to ship.
First off. I want a separate box for ship stats.
Second. I want to be able to modify the box when the player is in a different ship so the display always shows the stats of the currently 'occupied' ship.

Where do I start to learn how to do this?


Ugh. I have to learn javascript? Fine!
I got it working, so...

How do I make it match the other boxes with that arrow for collapsing and expanding the box?


How do I make it match the other boxes with that arrow for collapsing and expanding the box?

Harder than you might think.
Quest uses a library called multi-open-accordion to handle the expanding and collapsing panes. But that library won't allow you to add another pane once it's started. So you end up having to make the javascript yourself.

Are you using JS.sertCustomStatus("some text") or are you writing your own javascript?
I wrote come code a while back that would allow you to add extra panes; but never finished some of the more advanced features (like allowing the player to drag panes to rearrange and resize them). It's on the forum somewhere, but might be hard to find. Searching the forum might help.

If you're just using JS.setCustomStatus, then the following line of javascript will give it a header like the other panes:

$('#inventoryLabel').clone().attr('id', 'customStatusLabel').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top').insertBefore($("#customStatusPane").show().attr('style','').removeClass().addClass('ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active')).on('click', function () { $('#customStatusPane').animate({height: 'toggle'}, {duration: 200, complete: function() { if($('#customStatusPane:visible').length) {$('#customStatusPane').addClass('ui-accordion-content-active');$('#customStatusLabel').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top');} else {$('#customStatusPane').removeClass('ui-accordion-content-active');$('#customStatusLabel').addClass('ui-state-default ui-corner-all').removeClass('ui-state-active ui-corner-top');}}});}).children('span.accordion-header-text').text('Status pane');

(you can just paste that into a JS.eval() statement in your UI initialisation script; or in a javascript file, or similar. I can't believe that took me nearly an hour to type, again)


Wow. Thanks for the answer. That is a lot more than I expected. I appreciate your time.
I like things to be nice and neat and it was just bugging me the custom pane was different.
You're awesome.


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums