Detecting Device or Screen Size

In order to make the game look better on a large screen I have a fairly large bottom margin, but I've noticed that when playing on an iPhone this causes an infinite dance up and down when the on-screen keyboard is visible, making it nearly unplayable.

I figure I can fix that if I remove the bottom margin if the game knows it is being played on a phone. Any of you experts know if this is possible?


The simple way would be to add a command that lets the play toggle between the two.

The difficult way would be though JavaScript. Have a string attribute that a JavaScript function. Output the string in game.start, then invoke the function. The JavaScript function could (I think) get the screen size, and change the display accordingly. How confident are you in JavaScript?


How can you play a Quest game on an iPhone?
Thierry


Thanks Pixie, I am very confident in Javascript when I copy and paste the code and it works first time ;-)
In this case unless it's a general problem more than one other person cares about (probably only a problem for format-obsessed people who want big bottom margins...), and given how many people probably try to play on a phone, I might stick to the "ask the user" method!

Thierry, playing online seems to work on phones the same as anywhere else, though personally I've only tried an Android phone.


Hmmm, I thought setting game.setcustompadding = False would work, however no combination of these has any effect on the user interface -- whatever it is set to in game: interface seems immune to changing in the game script. Unless I'm doing something dense.

game.setcustompadding = False
game.custompaddingbottom = 20
InitUserInterface

Does that mean that you just connect to textadventures.co.uk via the Internet ?
Thierry


Yes, and play online. Doesn't seem to work too well for long games though, because they slow down a lot as you progress (I think the ever-growing map is the cause).


InitUserInterface is a blank function that you can override (if editing offline) to do all your custom formating. Calling InitInterfaceshould work - that is where the width is set. Alternatively:
JS.setGameWidth (game.customwidth)


Now that's plain weird.
If I set the design interface to use custom padding with a bottom margin of 200 and do this:

if (isphone>0) {
  // Set small screen
  mysex = Left(mysex, isphone-1)
  game.setcustompadding = False
  game.custompaddingbottom = 20
  InitInterface
}

Then it has no effect on the format, which stays "big bottom margin" no matter what. But if in the design interface I set it to not use custom padding and do it the other way round:

if (isphone>0) {
  mysex = Left(mysex, isphone-1)
}
else {
  game.setcustompadding = True
  game.custompaddingbottom = 200
  InitInterface
}

Then it works as desired, with no big bottom margin only if the user specifies small screen.
Of course doing that exact test with InitInterface instead of InitUserInterface is the only thing I didn't try before!


Quest uses two tempates, one for "normal" browsers and one for mobile devices. Which one do you see in your iphone? Is there a + next to the command bar?


Yes (shows how observant I am).
That implies Quest knows... so do you know how we can extract that knowledge?


Alex told me how this works, but I forgot, sorry. But you can check with Javascript if the element tabButton exists. Then it is mobile


OK I give up. I found this useful discussion:
http://textadventures.co.uk/forum/quest/topic/4995/is-there-a-way-for-the-game-to-check-whether-its-being-played-online-or-not
which has this relevant piece of javascript:

var elem = document.getElementById('tabButton');
    if (elem!=null){
      mobile=true;
    } 

Looks good, except I can't for the life of me find how to return the value of "mobile" from the javascript to my Quest script itself. All the examples I've found in the forum on request (RunScript, ...), the script just does stuff, never returns a value.


This JS-function calls the Quest function checkMobile after checking mobile devices

function testMobile() {
    var check = false;
    var elem = document.getElementById('tabButton');
    if (elem!=null){
      check=true;
    }
    ASLEvent("checkMobile", check); 
    return false;
}
<function name="checkMobile" parameters="answer">
...

Looks good, except I can't for the life of me find how to return the value of "mobile" from the javascript to my Quest script itself. All the examples I've found in the forum on request (RunScript, ...), the script just does stuff, never returns a value.

It is not trivial...
http://docs.textadventures.co.uk/quest/guides/javascript.html


Thanks for all your help.
Not trivial, indeed. I'd seen that page and not understood the solution...
Having implemented the phone-detector, however, it doesn't actually make much difference. Playing on a phone, at least one with a small screen, is difficult. So much for my OCD.

Anyway, for anyone who cares here is the solution I used, so something analogous will work:

  1. To your Javascripts (under the Advanced tab) add this javascript:
function detectDevice() {
    var elem = document.getElementById('tabButton');
    if (elem!=null){
       ASLEvent("DeviceCallback", "Phone");
    } else {
       ASLEvent("DeviceCallback", "PC");
    }    
}
  1. To your functions in your Quest game add this function (note this assumes setcustompadding is not true in your Game: Interface setup):
  <function name="DeviceCallback" parameters="devicekind">
    if (devicekind="PC") {
      game.setcustompadding = True
      game.custompaddingbottom = 200
      JS.setGamePadding (game.custompaddingtop, game.custompaddingbottom, game.custompaddingleft, game.custompaddingright)
    }
    else {
      game.isOnPhone = true
    }
  </function>

You can then use the game.isOnPhone (defined as a boolean attribute) in your game to tell what the user is on, e.g. if you want to change the way you do things on different device types.

  1. Finally, to InitUserInterface add this fragment:
 request (RunScript, "detectDevice")

(Note: if InitUserInterface exists in Core.aslx, either edit it there, or delete from there before adding to your own functions in Quest: it won't allow both).