As some of you may be aware, I have been trying, ever since uploading my first test game over a year ago, to prevent the border around the parser command box from displaying.

The problem occurs when playing the game online, in that the game won't fetch the CSS rule which hides the parser command box, when the game is resumed from a save point.

Back when this was originally discussed, Jay finally came to the conclusion that it was a bug with the online emulator, so over the last few weeks I've had a ticket running on Github and Alex has said that my CSS to hide the parser command box has to go in the IntInterface in order for it to work on resume.

Now, I've found this in Library Elements, but have no idea where the CSS call needs to go.

Here's a breakdown:

In the game's code I have the following CSS block, somewhere near the top:

<css><![CDATA[
    
       <style type="text/css">
        body {
            line-height: 1.2em;
          }
       
        div#txtCommandDiv {
            border:none;
            background: no-repeat;
            font-size:10px;
            font-family:'Trebuchet MS', Helvetica, sans-serif;
            
          }
          input#txtCommand {
            outline:none;
            border:none;
            font-size:10px;
            margin:0;
            padding:0;
            max-width: 1000px;
          }
          
                    
          </style>

And then right at the very bottom:

<function name="InitUserInterface"><![CDATA[
    JS.eval ("$('#txtCommandDiv').prepend('&gt;&nbsp;')")
    request (SetInterfaceString, "TypeHereLabel=")
    OutputTextNoBr (game.css)
    JS.JS.eval ("$('#status').hide();")
  ]]></function>

Then, in the UI, under Game >> Script (tab) I have the following JS running as a Start Script:

JS.JS.eval ("getCSSRule('a.cmdlink').style.color='#000000'")

Finally, this is the entire script code for the IntInterface - which is where Alex says I need to add the CSS in order for it to hid the parser command box on resume of a save:

if (game.setcustomwidth) {
  JS.setGameWidth (game.customwidth)
}
else {
}
if (not game.showborder) {
  JS.hideBorder ()
}
if (game.setcustompadding) {
  JS.setGamePadding (game.custompaddingtop, game.custompaddingbottom, game.custompaddingleft, game.custompaddingright)
}
if (game.externalstylesheets <> null) {
  foreach (stylesheet, game.externalstylesheets) {
    JS.addExternalStylesheet (stylesheet)
  }
}
if (game.setbackgroundopacity) {
  SetBackgroundOpacity (game.backgroundopacity)
}
request (Background, game.defaultbackground)
request (Foreground, game.defaultforeground)
request (LinkForeground, game.defaultlinkforeground)
if (LengthOf(game.backgroundimage) > 0) {
  SetBackgroundImage (game.backgroundimage)
}
request (SetCompassDirections, Join(game.compassdirections, ";"))
request (SetInterfaceString, "InventoryLabel=Inventory")
request (SetInterfaceString, "StatusLabel=Status")
request (SetInterfaceString, "PlacesObjectsLabel=Places and Objects")
request (SetInterfaceString, "CompassLabel=Compass")
request (SetInterfaceString, "InButtonLabel=in")
request (SetInterfaceString, "OutButtonLabel=out")
request (SetInterfaceString, "EmptyListLabel=(empty)")
request (SetInterfaceString, "NothingSelectedLabel=(nothing selected)")
request (SetInterfaceString, "TypeHereLabel=Type here...")
request (SetInterfaceString, "ContinueLabel=")
JS.SetMenuBackground (game.menubackground)
JS.SetMenuForeground (game.menuforeground)
JS.SetMenuHoverBackground (game.menuhoverbackground)
JS.SetMenuHoverForeground (game.menuhoverforeground)
JS.SetMenuFontName (game.menufont)
JS.SetMenuFontSize (game.menufontsize + "pt")
if (not game.underlinehyperlinks) {
  JS.TurnOffHyperlinksUnderline ()
}
if (game.showpanes) {
  request (Show, "Panes")
}
else {
  request (Hide, "Panes")
}
if (game.showcommandbar) {
  request (Show, "Command")
}
else {
  request (Hide, "Command")
}
if (game.showlocation) {
  request (Show, "Location")
}
else {
  request (Hide, "Location")
}
if (HasString(game, "panelcontents")) {
  SetFramePicture (game.panelcontents)
}
if (game.gridmap) {
  JS.ShowGrid (game.mapsize)
  Grid_SetScale (game.mapscale)
  if (game.pov <> null) {
    if (game.pov.parent <> null) {
      Grid_Redraw
      Grid_DrawPlayerInRoom (game.pov.parent)
    }
  }
}
InitUserInterface

Can someone please explain where it needs to go?

It is InitInterface, not IntInterface (short for initialise the interface) (it is important!). Bottom left, do show library stuff, then search for InitInterface. Select it, and click the Copy button on the right. Go to the code view for the function, and replace the existing code with the above.

Sorry, I've not explained myself very well.

The IntInterface was just a typo on my part. I did actually search for InitInterface.

Secondly, That last block of code is not something Alex has supplied, it's the 'as is' script code from InintInterface. Alex was simply telling me that this is where the CSS I'm using to hide the parser command box, needs to be added, but he doesn't explain how or where.

It's actually InitUserInterface - this is a blank function that InitInterface calls. So if you create your own InitUserInterface function, that will be called instead and you can do your custom CSS setup in there.

What's this:

JS.JS.eval ("$('#status').hide();")

That looks like it should be...

JS.eval ("$('#status').hide();")

Does that fix the problem?

Thanks, Alex, but as I stated via email/github, the JS which calls the CSS has already been added to InitUserInterface.

This is what's in there:

JS.eval ("$('#txtCommandDiv').prepend('> ')")
request (SetInterfaceString, "TypeHereLabel=")
OutputTextNoBr (game.css)
JS.JS.eval ("$('#status').hide();")

Alex wrote:What's this:

JS.JS.eval ("$('#status').hide();")

That looks like it should be...

JS.eval ("$('#status').hide();")

Does that fix the problem?

The double JS.JS is how it is for the Start Script in Game >> Script. Do I need to change it there, or just in InittUserInterface?

I'll give it a go.

Okay, so I removed the extra JS. first from InitUserInterface, and then also from the Start Script in Game >> Script, and the parser command box still gets reinstated on resume of a game save.

Which bit of your InitUserInterface is supposed to hide it though?

You must be hiding it somewhere else at the moment, because I don't see anything in your InitUserInterface which would hide the command box.

Oh I see, it's when you output game.css. Check that game.css actually has a value - you're not unsetting it somewhere when your game runs? Try logging it to the log window.

In the Game's script tab I have the following Start Script:

JS.eval ("getCSSRule('a.cmdlink').style.border='none'")
JS.eval ("getCSSRule('#txtCommandDiv').style.border='none'")
JS.eval ("getCSSRule('#txtCommand').style.border='none'")

I just added these last two to InitUserInterface, but to no avail.

In the game's main code, I have the following block of CSS:

<css><![CDATA[
   
       <style type="text/css">
        body {
            line-height: 1.2em;
          }
       
        div#txtCommandDiv {
            border:none;
            background: no-repeat;
            font-size:10px;
            font-family:'Trebuchet MS', Helvetica, sans-serif;
           
          }
          input#txtCommand {
            outline:none;
            border:none;
            font-size:10px;
            margin:0;
            padding:0;
            max-width: 1000px;
          }
         
                   
          </style>

Alex wrote:Oh I see, it's when you output game.css. Check that game.css actually has a value - you're not unsetting it somewhere when your game runs? Try logging it to the log window.

Sorry, I don't understand. What do you mean log it in the log window? And how do I check the game.css has a value / what should that value be?

I've also got an additional problem, in that my uploaded games are not being saved. It lets me play after uploading, but when I go back to my games, I'm told I've neither created or uploaded any games.

I'll try clearing my cookies.

Wait, actually I don't think that CSS block does work anyway. It doesn't actually hide the command box, from what I can tell?

Alex wrote:Wait, actually I don't think that CSS block does work anyway. It doesn't actually hide the command box, from what I can tell?

It does on first load.

It's only on resume the command box returns.

I think you must have some other code that hides the input box. Your CSS just sets the border and width.

Alex wrote:I think you must have some other code that hides the input box. Your CSS just sets the border and width.

But it's setting the border to none, which should hide it... which it does successfully on first load.

I've even tried setting the border to #000000 (black - same colour as background)

No, that would just set the border to none. The CSS to hide something is "display: none".

I'll try it, but when I add 'border: none' on the fly, using firebug, it hides the border.

But wait. If I use 'display: none' on #txtCommand and/or txtCommandDiv - it will hide the cursor, too, meaning the ability to type will be removed.

[edit] As I expected, display: none also removes the ability to type, as it hides the cursor too.

Oh sorry, I should learn to read! I thought you were hiding the textbox.

I will take a look...

Alex wrote:Oh sorry, I should learn to read! I thought you were hiding the textbox.

I will take a look...

I am, or at least trying to. I just want the border from around the parser command box hidden.

Let me just give you a before and after, so you can see exactly what the issue is.

On first load:



On resume from save:



Not sure why I'm getting so obsessed and bogged down with this. It's not like my game is anywhere near completion, and on the off-chance anyone's going to resume a save once it's published, chances are they're not going to be bothered by the fact that the parser command box is showing. It's not like the game doesn't work.

The screenshot above looks different to the screenshot in the GitHub issue, which is http://textadventures.co.uk/games/view/ ... rmath-test.

The one in the GitHub issue is what I can reproduce. The problem is that the input box doesn't have the correct background and font size applied after resuming the game. I have fixed this for the next version of Quest.

You can work around the problem in the meantime by adding this to your InitUserInterface function:

JS.setCommandBarStyle(GetCurrentTextFormat("") + ";background:" + game.defaultbackground)

From your latest screenshot in this thread though, it looks like you're experiencing a different problem. Can you send me a link to the game with the input box border issue?

Thanks, Alex. It's not a different problem.

The screenshot I posted to GitHub (showing the solid white command box) is what appears immediately on 'resume'. When I enter 'l' to get the room description, it then changes to the border type you see above.

It's always been like that, it's just that I took a different screenshot last time.

I'll try adding your solution, see what happens.

No, that didn't work.

I no longer get the solid white command box on resume (it resumes with the white border).

Here's the script for InitUserInterface:

JS.eval ("$('#txtCommandDiv').prepend('> ')")
JS.eval ("$('input#txtCommand').prepend('> ')")
request (SetInterfaceString, "TypeHereLabel=")
OutputTextNoBr (game.css)
JS.eval ("$('#status').hide();")
JS.eval ("getCSSRule('a.cmdlink').style.border='none'")
JS.setCommandBarStyle (GetCurrentTextFormat("") + ";background:" + game.defaultbackground)

This is just an uneducated guess, but would this be any use:

JS.setCommandBarStyle (GetCurrentTextFormat("") + ";border:" + game.defaultbackground)

And here's a link to the test game: http://textadventures.co.uk/games/view/ ... arser-test

To test, just start the game, type save, close the game, refresh the title page and resume.

When I resume the game in the online player, I'm not seeing any output. I'm also seeing a couple of browser console errors:

Uncaught TypeError: Cannot set property 'border' of undefined

You need to make sure your JS is working, otherwise other things can easily break.

Alex wrote:When I resume the game in the online player, I'm not seeing any output.

But that's the same with any game on 'resume'. It's just bad design on the way resume works in Quest. You have to start a resume by pressing 'l' to restore the current location.

Alex wrote:I'm also seeing a couple of browser console errors:

Uncaught TypeError: Cannot set property 'border' of undefined

You need to make sure your JS is working, otherwise other things can easily break.

I was testing it all day yesterday and got no such errors. I'm using Firefox 43.0.1

And in any case, this is why I reported it as a bug. It's not just my game that has this problem. Any game where the author has hidden the parser command box, will find that on resume of a save, the border for that command box will return.

Quest restores game output when you resume a game. If that's not happening, and there are no JavaScript errors that would be breaking game execution, then there's a bug somewhere.

If you check the browser console in Firefox, there's some kind of JavaScript error running the getCSSRule function. That looks like something I need to fix.

Alex wrote:If you check the browser console in Firefox, there's some kind of JavaScript error running the getCSSRule function. That looks like something I need to fix.

Please keep me posted on your findings.

I have created a simple non-game with the InitUserInterface code and CSS you provided. It's attached. The code is just this:

<asl version="550">

  <include ref="English.aslx"/>
  <include ref="Core.aslx"/>

  <game name="hidetest">
    <gameid>f7327103-0eef-405e-9b1a-ee46513b3ab3</gameid>
    <version>1.0</version>
    <firstpublished>2015</firstpublished>
    <css><![CDATA[
    
       <style type="text/css">
        body {
            line-height: 1.2em;
          }
       
        div#txtCommandDiv {
            border:none;
            background: no-repeat;
            font-size:10px;
            font-family:'Trebuchet MS', Helvetica, sans-serif;
            
          }
          input#txtCommand {
            outline:none;
            border:none;
            font-size:10px;
            margin:0;
            padding:0;
            max-width: 1000px;
          }
          
                    
          </style>
          ]]>
		</css>
  </game>

  <object name="room">
    <inherit name="editor_room" />

    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  
  <function name="InitUserInterface"><![CDATA[
    JS.eval ("$('#txtCommandDiv').prepend('&gt;&nbsp;')")
    request (SetInterfaceString, "TypeHereLabel=")
    OutputTextNoBr (game.css)
    JS.eval ("$('#status').hide();")
  ]]></function>

</asl>

When I run the game, I see this:



If I save the game and then reload, I see this:



Note that the text typed is very tiny the first time.

What's strange, though is what happens when I type a command. Let's say I type "x me". This is what I then see:


It has inserted the new output *above* the existing text. If I then type "look", I get this:


A bug perhaps? I'm using Quest 5.6.2, if that helps at all.
OurJud, is the style working as desired in this sample game (apart from the tiny text the first command after reloading)?

I see now that (1) I missed a whole second page of comments, (2) I have a white background which won't show the problem, and (3) I was using the desktop version, not online. So... I'll try again tomorrow, when I have some brain cells. lol

( I did still run into the oddity with the text, though.)

jaynabonne wrote:So... I'll try again tomorrow, when I have some brain cells. lol

Thanks very much, Jay. I would very much appreciate it.

Some things that might be relevant: My game uses a black background (as you've already acknowledged). I'm on XP and using the desktop version, 5.5.1 (as later versions won't load my old game saves)

Your test has made me think, as an absolute last resort I could always go with a white background, although that would soon get very glarey on the eyes.

I'm only posting this in case you forgot, Jay, but I take it you didn't make any progress with this irritation?

When I run my test online, I see what Alex sees: the previous content is not preserved. When I dump out the elements, the content is all gone, including the CSS output in InitUserInterface. I suspect the web player is wiping out the contents pane at startup for some reason.

If Alex will be fixing this loss of content, then it should, in theory, fix your problem as well. In fact, since the old divs still have the previous CSS, you wouldn't even need to output it again (but it doesn't hurt).

The only way I can think to work around the problem for now is some hacky thing where you delay the CSS output past where the web player is resetting the content. For example, if you do this (using SetTimeout to delay things):

 <function name="InitUserInterface"><![CDATA[
    SetTimeout (1) {
      JS.eval ("$('#txtCommandDiv').prepend('&gt;&nbsp;')")
      request (SetInterfaceString, "TypeHereLabel=")
      OutputTextNoBr (game.css)
      JS.eval ("$('#status').hide();")
    }
  ]]></function>

then the style does get set - after a pause where you can see the old style for a bit. Ugly and probably not how you would want to ship it, but it does prove the point that if the CSS can get into an output div, then it will work.

Thanks very much! Better ugly for a second, than there all the time.

So where do I put that hack? Is it right at the foot of my main code?

This is the function code I have, which includes quite a bit more than yours. I guess I just shove the timeout rule in, do I?

<function name="InitUserInterface"><![CDATA[
    JS.setCommandBarStyle (GetCurrentTextFormat("") + ";border:" + game.defaultbackground)
    JS.eval ("$('#status').hide();")
    JS.SetBackgroundCol ("black")
    JS.eval ("$('#txtCommandDiv').prepend('&gt;&nbsp;')")
    JS.OutputTextNoBr (game.css)
    OutputTextNoBr (RetroStyleHolder.css)
    request (SetInterfaceString, "TypeHereLabel=")
    if (GetBoolean(game, "inprogress")) {
    }
    else {
      game.inprogress = true
    }
  ]]></function>

Okay, I don't pretend to know why, but this timeout rule means the white command box is there on first load. Typing a command then allows the CSS to kick in and the box disappears. What it also does is successfully hide the command box on resume (once a command has been entered), which is what I've been hoping to achieve for the last 15 months or so.

It's a compromise, but what concerns me is that that because I'm using a white font, that initial command can't be seen (on the white command box). I think most players will take one look at this and immediately quit, presuming it's bugged or just bad design on my part.

Anyway, thank you, Jay. I really appreciate you having another look at this. I think I'll just have to wait for a fix from Alex, but at least he's now armed with more info that I could ever have given him.

I've now fixed the getCSS error and this is now live on the site.

This is the only thing I'm aware of that I needed to fix - the other issue described (the blank output) was because of JavaScript errors in your own game code. But let me know if any weirdness is still going on if you've fixed those.