My game uses the custom command pane (and I added the compass, inventory and status while I was at it), which works well on desktop browsers. When running the game on a mobile browser though, nothing from the right side is visible. Is there a common workaround for this?

What I'd really like to do, is fix the custom command button to the bottom of the screen (I would then add another button for inventory and look, and ditch the compass and status). I have the text box turned off, so the UI would then just use those buttons and hyperlinks.

So does anyone know how to move the panes to the bottom? Would this let them appear on mobile browsers?

On mobile, there might not be spave for a sidebar. So the sidebar is minimised, and there's a button next to the command bar that makes it appear.

Not sure if moving it to the bottom would work for you, but there's got to be some way to make it work. Probably by overriding a bunch of JS functions.

I tried reactivating the command bar and tested on mobile. The + button beside the command prompt pulled up a few command buttons, but none of them were the custom command I added (visible on the sidebar on desktop).

Any idea which JS functions I should look into to try moving the custom command pane to the bottom? Maybe I could put it into the txtCommandDiv element?

It would appear that the elements of interest are: #gamePanes and #commandPane (which is inside the #gamePanes div). I tried to use:

JS.setCss("#gamePanes", "position: fixed; bottom: 0; left: 0")

But that didn't work. I'm realizing though that even if I succeed in moving the panes to the bottom, that doesn't mean they'll appear on the mobile browser version, much like the status bar is not shown, despite the fact that it is pinned to the top (and therefore doesn't squeeze the screen horizontally).

Does anyone know what functions in Quest control whether or not elements appear on mobile browsers vs desktop browsers? There seems to be some code dedicated to the mobile experience, since a "+" button appears in the #txtCommandDiv on mobile that isn't visible on desktop...

Hello.

Drop this in your "User interface initialisation" script, and see if you like it:

// Using a 2 second timeout to give the page time to load.
SetTimeout (2) {
  cmds = ProcessText("{command:Look} {command:Wait}")
  s = Chr(60) + "div style=\\\"padding-top:6px;\\\" id=\\\"mobile-cmds\\\">"
  s = s + Replace(cmds, Chr(34), Chr(92) + Chr(34))
  s = s + Chr(60) + "/div>"
  JS.eval ("var s = \""+s+"\";$('body').append(s);$('#mobile-cmds').insertAfter($('#txtCommandDiv'));")
}

Hello,

and apropos User interface initialisation" script: I want to publish my adventure in 2 Versions -- Story-mode (incl. 'help' such as panes, Hyperlinks etc) and hard-core-mode (without the help, text-only). Is there a way to switch panes on/off after the start of the game, i.e. via a question hard core on/off ? Or do I have to revert back to Publishing 2 Versions ?

Thank you Richard Headkid! I just tested that code on mobile web and it is exactly what I wanted. With a little tweaking, I'm happy with how the UI looks on both mobile and desktop. The one remaining issue is the status pane. I'm only using it to display score, but for the moment that is remains missing on mobile.

Can I do something similar to what you showed above with the status pane, to move it to the bottom of the screen, so I would have my commands "Ship's Computer; Look; Inventory" and then "Score: 0" next to them?

Is there a way to switch panes on/off after the start of the game, i.e. via a question hard core on/off ?

// Show the panes
JS.uiHide("#gamePanes")

// Hide the panes
JS.uiShow("#gamePanes")

Can I do something similar to what you showed above with the status pane, to move it to the bottom of the screen, so I would have my commands "Ship's Computer; Look; Inventory" and then "Score: 0" next to them?

SetTimeout (2) {
  cmds = ProcessText("{command:Look} {command:Wait}" + Chr(60) + "span id=\"custom-score-div\">" + Chr(60) + "br/>Score: {game.score}" + Chr(60) + "/span>")
  s = Chr(60) + "div style=\\\"padding-top:6px;padding-bottom:6px;\\\" id=\\\"mobile-cmds\\\">"
  s = s + Replace(cmds, Chr(34), Chr(92) + Chr(34))
  s = s + Chr(60) + "/div>"
  JS.eval ("var s = \""+s+"\";$('body').append(s);$('#mobile-cmds').insertAfter($('#txtCommandDiv'));")
}

That will put it underneath the command prompt.

If you want it stuck to the bottom of the screen, you'd have to fiddle with the CSS settings. I would advise to just let it come after the txtCommandDiv element. It's much easier that way.

EDIT

The score needs to be updated, and I forgot to add that.

See this post:
http://textadventures.co.uk/forum/quest/topic/tad47undpemlc6uhwij8rg/moving-panes-mobile-ui#67a9cbf7-f3bf-4efc-bac4-f8c3aa20919c

NOTE

When I post code, I use " + Chr(60) + " instead of < so the online authors can paste in my code without causing an error.

So, my "" + Chr(60) + "br/>" is really just "<br/>".

We can also add buttons:

  // Put your custom commands here, separated by ;
  // Feel free to replace "jump;help" as I only used them for the example
  customcmds = "jump;help"
  // Everything else is internal.
  customcmds = Split(customcmds, ";")
  foreach (cmd, customcmds) {
    JS.eval ("$('#controlButtons').append(\""+Chr(60)+"button id=\\\"cmd" + CapFirst(cmd) + "\\\" onclick=\\\"sendCommand('" + cmd + "')\\\" class=\\\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\\\" role=\\\"button\\\" type=\\\"button\\\" aria-disabled=\\\"false\\\">"+Chr(60)+"span class=\\\"ui-button-text\\\">" + CapFirst(cmd) + Chr(60) + "/span>" + Chr(60) + "/button>\");")
  }

I just now noticed the spacing does not exist between the added buttons. I tried to apply a quick fix, but those buttons are being ornery.

These all work.

The code I use is JS.panesVisible (true) to show panes and JS.panesVisible (false) to close them.

Someone else had code that moved the panes around, if that's applicable here.

I forgot about updating the score!

SetTimeout (2) {
  cmds = ProcessText("{command:Look} {command:Wait}" + Chr(60) + "span id=\"custom-score-div\">" + Chr(60) + "br/>Score: {game.score}" + Chr(60) + "/span>")
  s = Chr(60) + "div style=\\\"padding-top:6px;padding-bottom:6px;\\\" id=\\\"mobile-cmds\\\">"
  s = s + Replace(cmds, Chr(34), Chr(92) + Chr(34))
  s = s + Chr(60) + "/div>"
  JS.eval ("var s = \""+s+"\";$('body').append(s);$('#mobile-cmds').insertAfter($('#txtCommandDiv'));")
}

A turn script is the easiest way to handle updating the score.

Turn script (be sure it's enabled):

edited

JS.eval("$('#custom-score-div').html('" + Chr(60) + "br/>Score: " + ProcessText("{game.score}") + "');")

Update(s)

Okay... Now it checks for a mobile browser before it adds any of this stuff. (It doesn't add anything if it's not running in a mobile browser.)

I broke it down into functions.

I also added the score to the More tab.

Test game:
http://textadventures.co.uk/games/view/awnpodulbu2azc_otrp28a/mobile-cmds

...and here is the test game's code. (If anyone would like a breakdown, or has a specific question, just ask.)

<!--Saved by Quest 5.7.6615.29455-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="mobile-cmds">
    <gameid>d58995f3-e027-41a1-85f9-2e4058ca69a6</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <feature_advancedscripts />
    <menufont>Georgia, serif</menufont>
    <commandpane />
    <showscore />
    <inituserinterface type="script">
      SetupMobileStuff
      // This next line is NOT needed for the mobile stuff!
      JS.setCommands("Look;Wait;Jump;Help")
    </inituserinterface>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <turnscript name="update_mobile_score">
    <enabled />
    <script><![CDATA[
      JS.eval ("if (typeof (currentTab) === 'string'){$('#custom-score-div').html('" + Chr(60) + "br/>Score: " + ProcessText("{game.score}") + "');}")
      JS.eval ("if (typeof (currentTab) === 'string'){$('#more-score-div').html('Score: " + ProcessText("{game.score}") + "');}")
    ]]></script>
  </turnscript>
  <command name="test">
    <pattern>test</pattern>
    <script>
      IncreaseScore (1)
      msg ("Your score has increased by 1!")
    </script>
  </command>
  <function name="SetupMobileStuff">
    SetTimeout (2) {
      SetupStuffUnderParser
      AddStuffToMobileMore
    }
  </function>
  <function name="SetupStuffUnderParser"><![CDATA[
    cmds = ProcessText("{command:Look}&emsp;{command:Wait}" + Chr(60) + "span id=\"custom-score-div\">" + Chr(60) + "br/>Score: {game.score}" + Chr(60) + "/span>")
    s = Chr(60) + "div style=\\\"padding-top:6px;padding-bottom:6px;\\\" id=\\\"mobile-cmds\\\">"
    s = s + Replace(cmds, Chr(34), Chr(92) + Chr(34))
    s = s + Chr(60) + "/div>"
    JS.eval ("if (typeof (currentTab) === 'string'){var s = \""+s+"\";$('body').append(s);$('#mobile-cmds').insertAfter($('#txtCommandDiv'));}")
  ]]></function>
  <function name="AddStuffToMobileMore"><![CDATA[
    customcmds = "jump;help"
    customcmds = Split(customcmds, ";")
    foreach (cmd, customcmds) {
      JS.eval ("$('#controlButtons').append(\""+Chr(60)+"button id=\\\"cmd" + CapFirst(cmd) + "\\\" onclick=\\\"sendCommand('" + cmd + "')\\\" class=\\\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\\\" role=\\\"button\\\" type=\\\"button\\\" aria-disabled=\\\"false\\\">"+Chr(60)+"span class=\\\"ui-button-text\\\">" + CapFirst(cmd) + Chr(60) + "/span>" + Chr(60) + "/button>\");")
    }
    JS.eval ("if (typeof (currentTab) === 'string'){$('#gameMore').append('" + Chr(60) + "hr/>" + Chr(60) + "span id=\"more-score-div\">Score: " + ProcessText("{game.score}") + Chr(60) + "/span>');}")
  ]]></function>
</asl>

Beautiful! This is very helpful, thank you!