New Panes and Inventory

mmx3
24 Apr 2013, 20:35
Hello,

So I've had an idea for a game and lack the know-how to implement. In the game the main character has a follower, I would like to have the follower have their own inventory. Is it possible to 1) have two inventories and 2) create a new pane on the right that shows up below the main characters inventory. (So it would show the main characters and the follower's inventories at once)

I want to avoid having to switch the current player if possible.


Ive checked the forums and havent seen anything (though let me know if i missed something)

sgreig
25 Apr 2013, 04:49
Yes it's possible to do now that Quest supports HTML, but it's not the easiest thing to do if you're not familiar with HTML/CSS. You'd have to use HTML/CSS to create a new pane, and write a new function that would handle the followers inventory and then direct the output to the new pane. Jay Nabonne would probably be able to tell you exactly how to do it but it will be code heavy and is definitely not for the squeamish lol.

But if you're really ambitious and don't shy away from a challenge, I'm sure Jay would be willing to chime in and break it down for you. :)

mmx3
25 Apr 2013, 05:03
Im always down for a challenge. Im familiar with html, just not sure how to use it in/with quest.

jaynabonne
25 Apr 2013, 08:54
First, to have multiple inventories is no problem (as such). The main inventory is just the child objects of the player, and other objects (characters, etc) can have children as well. So you'd set an object's parent to your other character just as you would the player, and you could query them.

You will have to update the pane yourself (probably with a turn script) as Quest won't know about it.

As far as the pane itself, I haven't done this before, but we should be able to insert a new pane in the set of panes on the right. I don't know if you've found them yet, but when running a game, go to the View menu and choose "HTML Developer Tools". These are the standard Chrome tools, and you can use them to explore the HTML on the page. Check out the "Elements" selection.

If you do, you'll see the main Body tag has a "gameBorder" element under it. Under that you have elements like "gamePanes", which holds all the panes on the right, and "gameContent", which holds the main game content. You're going to want another pane tucked into "gamePanesRunning" (a child under "gamePanes").

So first off, design: what do you want the right panes to look like? Will you just be adding another pane, or will you be taking some away as well? Where would you like the new pane to be?

mmx3
25 Apr 2013, 12:30
I was thinking of having it right underneath the primary inventory And I was not planning on getting rid of any other panes (but will if it becomes to unwieldy). I found the html developers tools, how does one go about permanently modifying them? (just so I can mess around myself)

jaynabonne
26 Apr 2013, 08:36
Just to reply a bit so you don't think I've disappeared or forgotten about you... :)

I was exploring this yesterday, and while it's straightforward to insert a new "thing" in the side panels and even make it look like the Quest panels with styles, making it behave like a Quest panel is trickier, since that code is buried inside a jQuery "accordian" widget. I was struggling with it a bit last night without success, but I had a thought this morning that might work better - now I just need the time to try it, probably later this evening. So stay tuned and keep your fingers crossed.

As far as using the HTML tools to make a permanent change - you can't. It's all temporary with the tools. They're handy for exploring the structure Quest has in place and making test changes, but you'll have to write some code (msg's, etc) to make the changes permanent within your game.

Sora574
20 May 2013, 19:26
You would think you could just copy the HTML for the built-in panes and just change a few things, seeing how you can do that with most of Quest's HTML.
Did you have any luck with this Jay? It would be extremely useful.

george
20 May 2013, 21:01
I'm guessing it's harder than that because the built-in code probably uses the specific ids of those panes. You would need to get into the built-in code and add your new pane's id to those ids as well.

However if the built-in code had some abstract way of manipulating panes where you could just add your id to some kind of pane list after the fact, that might work.

jaynabonne
20 May 2013, 21:42
I need to get back to this. Sorry I've neglected it.

The problem I ran into is that this is more than just visual HTML - it's also behavior. And that behavior is defined in an "accordian" widget. The problem is that that widget code ends up inaccessible in its own space. In theory, we could copy all of that code and try to make it behave. I was trying to leverage the existing code.

Jogging my memory, the widgets are created/init'd as children of the right panes. They are not initialized separately, but attached as children. I tried calling the same function again with the new pane added, but it didn't work.

What I was going to try (no "Fermat's Last Theorem" here) was to put a nested element as a child of the panes and then try to init an accordian widget under *that*. I will try that shortly, when real life stops intruding... :)

Sora574
20 May 2013, 23:04
Ah, okay.
I would give it a shot myself but I don't even know where to start :lol:

jaynabonne
21 May 2013, 17:55
Amazingly, surprisingly, what I thought might work did actually work.

Attached is a sample with partial HTML and no ASLX code to support it. But it creates an additional visible pane which can be opened and closed.

Code will need to be created to allow updating the items. I can take a look at that next if need be. But I wanted to get this up first, in case it can be taken from there.

All the real code is in the .js file. The aslx file is just there to allow it to be run.

The basic idea is that a new holder div (inventory2Holder) is created and inserted just in front of the status pane. This div will be the container for the new widget. I copied the HTML that's inserted out of the Quest core file and modified the IDs to make them unique. I also jammed some dummy data in there so it can be tested. (It doesn't look right, but that needs more research.) Once the div is created the "multiOpenAccordian" function is called on it to initialize the widget.

Edit: Uploaded an updated version.

Sora574
21 May 2013, 19:32
Nice job!
The only thing wrong with it is you can't add anything to the pane. If you try adding something like <li>blah</li> to the 'lstinventory2' under the 'Wrapper' it shows up in the pane, but you can't click on it or do anything with it.

jaynabonne
21 May 2013, 23:30
Thanks. Yep, still needs some work. I'll augment this soon and hopefully get it fully working (but not tonight!).

jaynabonne
10 Jul 2013, 08:46
The code is working now. I've created a thread in the "Libraries and Code Samples" forum.

viewtopic.php?f=18&t=3789