Until now, I've been using Quest's optional "Custom Status Pane" to display enemy stats during combat, however the perfectionist in me is annoyed that it doesn't look the same as the player's Status pane. I know this is trivial, but it got me wondering if I could create an entirely new custom pane to display this info (leaving the custom Status one free for other stuff).

I've seen a few guides here, and have tried to use them as a basis, but the guides I could find either only showed how to style/change an existing pane or to create a specific "second inventory" one.

What I'm after is a new pane (possibly placed below the player's status pane) that looks just like the Status pane, complete with "accordion" (collapsing) arrow/function, matching text but that I can include my own custom text in (which will be updated diring combat).

I've got the mechanics working just fine with the default "Custom Status" pane... it's just me wanting to do this a different way if possible.

How I'm doing it now:

  <function name="ClearEnemyStatus">
    <![CDATA[
	game.enemystatus = "<span class='accordion-header-text'>Combat Opponent</span><span style='text-align:left;color:black;font-weight:normal;'><table><tr><td>Name: None</td></tr><tr><td>"+game.combatskillname+": N/A</td></tr><tr><td>"+game.hitpointsname+": N/A</td></tr></table></span>"
	JS.setCustomStatus (game.enemystatus)
    ]]>
  </function>

  <function name="UpdateEnemyStatus">
    <![CDATA[
	game.enemystatus = "<span class='accordion-header-text'>Combat Opponent</span><span style='text-align:left;color:black;font-weight:normal;'><table><tr><td>Name: "+game.enemyname+"</td></tr><tr><td>"+game.combatskillname+": "+game.enemycombatskill+"</td></tr><tr><td>"+game.hitpointsname+": "+game.enemyhitpoints+"</td></tr></table></span>"
	JS.setCustomStatus (game.enemystatus)
    ]]>
  </function>

The first function is called when the game starts and when combat ends.
The second is called whenever combat begins or when an enemy suffers damage.

What I'm stumped with is where to put the code to generate a new pane if I want one with this info. I presume I can update this the same way once I've made it, and suspect it may require an external html file (contents similar to the inline code being "inserted" above). It's the creation of the pane (that presumably gives it an id I can then work with) I'm stuck on. :(

Hello.

Have you seen this? (It's the method I use.)

http://docs.textadventures.co.uk/quest/custom_panes.html

(EDITED)

Hi, KV. Thanks for replying.

Yeah, that's how I'm doing it now (using that "built in" custom Status pane). It works, but I was wondering if it was possible to create an entirely custom/new pane. I would rather leave that built-in custom pane for other stuff.

If not (or if it is, but is an insane amount of complicated work), I am okay with doing it as I am now (i.e. using that pane you linked to) but how do I add the "accordion" collapsing function to it?

More importantly, is it possible to style that custom pane so it looks like the normal Status pane? I was thinking "no", because that one seems to be two separate "pieces" (header/label and main text area?) whereas the "Custom Status" pane is just one "piece"?

My example code above produces a pane that looks a fair bit like the main Status window but lacks:

• Blue line dividing the header/label from the info below.
• The lower part of the pane ("box") is the same as the upper (label) part, whereas in the main Status one, it appears to be pure off-white (in the default theme, anyway).
• The font size looks very slightly "off". Possibly a padding issue more than font size?

Could some or all of these issues be solved with CSS/HTML formatting? My CSS knowledge is pretty poor.

EDIT: Can images be posted here? If so, I can post a screenshot to explain better.

Oh, man! I posted the wrong link!

I will find the correct one when I get back home.

Look in the documention on this site (the link is at the bottom of this page). It is under "custom UI" or "advanced UI" (I think).

Here it is:

https://github.com/ThePix/quest/wiki/Advanced-UI-Part-02:-New-Status-Pane

And this adds a second inventory pane, if you're interested in something like that, too:

https://github.com/ThePix/quest/wiki/Library:-Second-inventory

Or you could just add another custom status pane:
http://textadventures.co.uk/forum/quest/topic/6hjbgvutlkgulv_wjkc-dq/more-than-one-custom-status-panes

Thanks, folks!

Dcoder, I found that post but while the question was relevant, unless I misread it seemed that the answer ended up being "put everything in the same one" rather than actually making two.

KV, ha ha! That looks exactly like what I need! I will give it a shot tonight. Search here sucks, so a huge thanks for pointing me to that link as I'd not found that one. :)

@Banjo,

that was, sort of, the answer :)
What Pix told me was that if I'm really good at javascript I can make two but (since I'm not, at all) he suggested I put the same thing in one.
I have no screenie of the result (but I can get one if you want?) and it actually looks better with the one. It feels like 2 panes in 1 and I'm very happy with the result.

Of course, I guess it differs depending on what you want in the pane.

So to conclude: If you know your way around javascripting I think you should be able to add as many panes as you want.