Too many items, can't scroll. (resolved)

Okay...not sure how to add an image here...so here is a link to the image in hosting site:
https://i.postimg.cc/KYfm5jBC/scroll-issue.jpg

Here is my problem...I had my wife testing my game for me. She ran around collecting items and dropping them all in the same room so she would remember where they were.
If you look at the image I provided you will see the scroll bar stops at the bottom of object list...yet when you click an item the options fall below the scroll bar.( 2 ) So, when that object list gets too long it pushes the action buttons ( 1 ) off the bottom of the screen and you can not access them. (3)
Is there a way to extend the scroll bar in order to scroll below the bottom of the page (3) if something is there.

Any help would be much appreciated...otherwise I am screwed if anyone tries to do as she did. Which I'm certain is a good idea and will happen often.


PC, online, offline, mobile? Either way I'm sure there is a solution.
Unfortunately I don't have it. Should be along soon.
I'm guessing you are playing it on mobile because I have never had the issue on PC.


This is only a workaround -- in local code view, put this in the Advanced Scripts tab (which is check-enabled in the "Features" tab):

JS.eval ("$('#placesObjectsLabel, #placesObjectsAccordion').insertBefore('#inventoryLabel');")

Now the "Places and Objects" pane will appear above the "Inventory" pane, giving you more room.


I've seen the issue before, if I'm understanding you correctly. Can't replicate it on my current setup, though. I think whoever designed the javascript parts of Quest made assumptions about the screen resolution.

My first guess was to try JS.eval("$('#gamePanes').css{overflow:'scroll',height:'100%'});") - which adds a scroill bar so you can see everything, but the width of the scroll bar means that the compass might no longer fit in the sidebar, causing it to gain a horizontal scroll bar.

I'm sure there's a better way to do this by playing around with numbers, but it's hard to work out what's the best option. Maybe adjust updateList so that instead of making each item list gain a scrollbar when it reaches 12 items, it should add up the height of the compass, status, and command panes (if shown), and then work out how much space is left at the bottom of the window and reduce the size of the inventory and placesobjects lists to the actual number of items the window can contain.


Off the top of my head (as my head's very much not in a coding space this last month, and I've not got a project of my own to test it on), this javascript might help:

$(function () {
  var isListUpdating = 0;
  var realUpdateList = updateList;
  var realUpdateVerbButtons = updateVerbButtons;
  updateList = function (name, data) {
    isListUpdating = 1;
    realUpdateList(name, data);
    isListUpdating = 0;
    if (name == "placesobjects") {
      forceListResize();
    }
  };
  updateVerbButtons = function (item, verbsArray, prefix) {
    realUpdateVerbButtons(item, verbsArray, prefix);
    if (!isListUpdating) {
      forceListResize();
    }
  };
  forceListResize = function () {
    $('#gamePanesRunning').css({overflow: 'auto', height: 'auto'});
    var invSize = inventoryVerbs.length;
    var objSize = placesObjectsVerbs.length;
    while ($('#gamePanesRunning').height() > window.innerHeight - 25) {
      if (invSize > objSize) {
        invSize--;
      } else {
        objSize--;
      }
      if (invSize < 3 || objSize < 3) {
        // if the window is way too small, remove the scrollbars for each list and create a single scroll bar for the whole sidebar
        $('#lstInventory').attr('size', inventoryVerbs.length);
        $('#lstPlacesObjects').attr('size', placesObjectsVerbs.length);
        $('#gamePanesRunning').css({overflow: 'scroll', height: window.innerHeight-24});
        return;
      } else {
        $('#lstInventory').attr('size', invSize);
        $('#lstPlacesObjects').attr('size', objSize);
      }
    }
  };
  $(window).resize(forceListResize);
});

Hoping there's not any typos or dumb mistakes in that; I'll come back and take another look at this when my brain feels up to handling code again.


@ Forgewrite: I am building the game offline on PC. My wife was playing it through the editor. I'm not certain if the game would have any special or different scroll actions available once it's in a browser.

@ Decoder: Okay so I set that in and tested it. I tried the scenario I mentioned and now when you walk into a room filled with objects it pushes the Inventory action keys out of the frame and you can not access them. By having it like that isn't ideal but at least it stops a player from being able to drop more items there. In order to access Inventory the player just has to move to another room where the object list isn't as long. At least the player is able to pick up items in the overcrowded room and move them, whereas before she couldn't pick them up.
I'll still look for other options...but if I can't figure something out, I may have to go with this. Thank you.

@Mrangel: I put in the first line of code and it didn't change anything. I put in the long script you wrote and the game wouldn't load. I put them both in advanced scripts / user interface initialisation...should I be putting that code somewhere else?


You could move the status pane down to the bottom instead:

JS.eval ("$('#statusVarsLabel, #statusVarsAccordion').insertAfter('#inventoryLabel');")

...or order the panes however you want using the above format (.insertBefore or .insertAfter). The IDs of the various panes/pane labels can be found in-game under HTML Tools tool button --> Elements tab --> "gameBorder" drop-down menu --> "gamePanes" --> "gamePanesRunning". Insert/replace the element that you want into the above format.

You can do this while you try implementing MrAngel's solution.


How about making it so that the places and objects pane as well as the inventory pain only show 3 items and you have to scroll for the rest? That might fix the problem. How would I do that?

BTW...I truly appreciate the help. Thank you guys :)


How about making it so that the places and objects pane as well as the inventory pain only show 3 items and you have to scroll for the rest? That might fix the problem. How would I do that?

Unfortunately, you'd have to copy the updateList function and change the number.

The big script I posted was supposed to start off with the lists long enough to fit all items without scrolling, and then shrink whichever list is longer until all panes fit on the screen. It's Javascript, not Quest script. So you'd need to either put it in a .js file (not sure how you set that up as I haven't got Windows so can't run Quest on desktop), or remove all the line breaks and wrap it in an eval statement.

However, it looks like I've made a couple of mistakes in the code; and my net connection right now is taking ~5 minutes to reload the test game every time I try to fix it. I'll try to work out later what I've done wrong there.

Have made some changes on the version above, so it's kind of usable but still ugly.
Here's a one-line version that you can put into Quest's UI initialisation script:

JS.eval("$(function(){var n=0,s=updateList,i=updateVerbButtons;updateList=function(e,t){n=1,s(e,t),n=0,'placesobjects'==e&&flr()},updateVerbButtons=function(e,t,s){i(e,t,s),n||flr()},var flr=function(){$('#gamePanesRunning').css({overflow:'auto',height:'auto'});for(var e=inventoryVerbs.length,t=placesObjectsVerbs.length;$('#gamePanesRunning').height()>window.innerHeight-25;){if(t<e?e--:t--,e<3||t<3)return $('#lstInventory').attr('size',inventoryVerbs.length),$('#lstPlacesObjects').attr('size',placesObjectsVerbs.length),void $('#gamePanesRunning').css({overflow:'scroll',height:window.innerHeight-24});$('#lstInventory').attr('size',e),$('#lstPlacesObjects').attr('size',t)}},$(window).resize(flr)});")

I still need to make this neater.


I'm going to test this out some more...but this latest one seems to be working.
Very much appreciated :)
Thank you


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

Support

Forums