I've been musing on the idea of trying to turn the player inventory window - or replacing it entirely - into a visual equivalent. A grid, with held items being represented by icons, ala many games with inventory systems. I could look a lot nicer than just a list of words, but I have no idea if Quest is capable of such a thing - or, if it is, if it would be worth doing with the time required.

Ideally you'd need a way for the player to be able to re-arrange things, and in the most simple form it would be, say, a 5x5 or 5x6 grid with all items taking up one space. More complex systems seen in games like Deus Ex or Kenshi could involve some items being considerably larger, taking up 2x2 or 2x4 spaces.

I imagine this is all possible - we've got the java-based map system, after all. It could provide a much nicer looking UI element, and it affords players a sorting function that isn't currently available (by default) in Quest. As an author, it could easily provide you with a much more visually understandable inventory limitation, too - make heavy objects bigger, allow players to fiddle with the old 'inventory tetris' concept to see what they can get away with carrying into/out of situations.

Granted, it'd create extra workload of having to make those icons for each item, or at least for each archtype of item.

Anyone got any thoughts? Steps on how to implement this, if it's even viable to begin with?

Should be possible.

You'd want to override the updateList javascript function, which receives a new list of items and their verbs from Quest every time the inventory changes. You would also need to send the image URLs and sizes to the javascript; either by a static list which is sent by the UI Initialisation script; or a turnscript which sends the icons for the items currently in the inventory.

Putting items in a grid isn't too hard; one solution would be using an HTML table, but I think that's pretty weak. It would make more sense to absolutely position items within the grid.

Allowing the player to rearrange items is easy enough: Quest already uses the jQuery UI library, which means that you can just call an image's draggable method to let the player move it around. This allows you to specify functions which are called when the object is picked up, each time it moves, and when it stops. These could be used to provide some highlighting to suggest where the object will be moved to (highlighting square[s] is green or red to indicate whether you can drop it there, for example), and to return the item to its original position when the player releases the mouse button if there isn't space there.

You'd have to make sure to save the layout when the game is saved. I think the most logical method would be to modify saveGame to move the inventory pane into #divOutput, and have the initialisation script and afterSave move it back to the sidebar. Alternatively, you could have a script which serialises all the available data to a hidden element within the output each time items are rearranged.

If you're having larger items, how would you handle "take"? Would you position the item randomly within the inventory if there's space? It might be a little more complex, because it might require more communication between the Quest engine on the backend and the JS frontend so that the engine knows whether you have space for an item.

One thing I'd find awkward as a player is when the inventory grid is packed, there's no free space to allow rearranging items. It might be more streamlined to allow an item or two in your 'hands', a separate pane that can be used temporarily to allow rearranging of the inventory, but that blocks actions. Possibly clicking an inventory item moves it to your 'hands', where the verb buttons appear, and clicking again or performing another action returns it to your backpack. This might be easier; so an item picked up (or given by an NPC) could be put into the player's hands, letting them find space in their backpack without needing to drop it again.

Actually, now I'm imagining something like the system in Divine Divinity, where each container gets its own inventory pane that you can drag items between. But that would be a little more complex to implement. (Not particularly difficult, but possibly time consuming)

Well, this is all promising!

If it could all be bundled up into a library... hmm.

First phase would definitely be a simple grid system with items taking up 1x1. If that works, then move onto fiddling with the implementation of object sizes, I think.

What about item swapping? If an item is dragged and dropped over an existing item, they swap positions.

What about item swapping? If an item is dragged and dropped over an existing item, they swap positions.

Where items are the same size, easy. Dragging a smaller item onto a larger one seems easy, but is deceptively hard to code efficiently. (Working out whether it will fit is a task for which the human brain uses quite a complex algorithm)
Dragging a larger item onto several smaller items gives you a choice of horrendously complex code, or one which occasionally fails in apparently obvious cases)
Dragging a tall thin item across several short wide ones… you end up having to try every possible combination of places.

It can be done, but it's surprisingly complex.

Also, you might be on the wrong side of the Eliza effect. Some players might assume that dragging one item onto another in the inventory would be interpreted as "put X in Y" or "use X on Y". It's probably worth thinking about which behaviour players are most likely to expect, so that a game works intuitively.

In any case, I wouldn't expect any of this to be hard to code. But it's likely to be time-consuming.

Oh, I was talking about same-size, yeah. More I think about it the more variable item size seems like too much of a pain in the ass to deal with.

Hmm... ok, one more feature that would probably be expected of a system like this; item stacking. Something to check if an item can be stacked, something to display that number... limits, on how many can be put into a stack...

As for the 'use x on y' thing, there's a fairly easy workaround for that in my games, at least. I've never had that sort of interaction between items be used! I also don't use the command line, and stick to having everything be controlled by buttons and such instead. Clicky clicky. I'm more personally used to more modern text games which don't use command lines, so I wanted to work with that familiarity. Players will probably try it to see what happens, then that's a one-time 'I have learned' thing.

I know - as you may be aware, having helped me so recently with image insertion - approximately plop all about javascript, though I'm beginning to learn now. I'm skimming over some videos about implementing inventory systems in games, but aye, this is probably going to take a while to figure out.

EDIT; More musing! In place of a visual size-based system for the icons, one could make it so that every item has a Slots value based on size and weight. If an item has a Slots Required value of two or more, it grays out slots from the last one (Row 5 column 5 in a 5x5, for example) onwards. Say, if it's 4 Slots Required, the last 3 slots are grayed out. Allows the author to maintain a carry weight system with some visual feedback for the user. If Slots Required > inventory slots, item can't be picked up.