Advanced UI Part 03: New Button Pane

We are going to build on the ideas in the previous page to build a new button pane. This could be used instead of a command bar, to allow the player to complete the game without having to type anything.

You can see what we are heading towards here:

http://textadventures.co.uk/games/view/em15b32xd0o-y-ysvgrtcg/deeper

Now we will add a new pane with buttons the player can click that are shortcuts for Quest commands. We will need JavaScript to communicate with Quest, and the way to do that is with a special JavaScript function called ASLEvent. This takes two parameters, the name of a Quest function and a string that will be the parameter for that function.

As before, we will create an attribute on the game object to hold the HTML, then in InitUserInterface add that to the game.

Here then is an attribute called "uibutton", which can be inserted into the game object in full code view.

    <uibuttons><![CDATA[
       <div id="button_div" style="padding:5px;border-radius:5px;text-align:center;border:grey solid thin;">
         <span onclick="ASLEvent('HandleButtonClick', 'look');">Look</span>
         <span onclick="ASLEvent('HandleButtonClick', 'help');">Help</span>
       </div>         
    ]]></uibuttons>

As before, everything is inside a div element, with some simple formatting.

Each button is a span element with an onclick attribute. The JavaScript of the onclick calls the ASLEvent function, with two parameters, the first being HandleButtonClick, which is the name of a new Quest function.

We better create that now! Add a new function as normal, give it that name, no return type and a single parameter, s. Paste in this code:

  HandleSingleCommand (s)

This is just using the built-in command handling function.

You can now go into the game and click on "Help", and the onclick attribute will call the ASLEvent function, which in turn will call the Quest function, HandleButtonClick, passing it the string "help", which will pass it on to the HandleSingleCommand function.

Fancy buttons

You might want to make the text look more fancy; just add a style attribute. In particular, you will probably want the mouse pointer to change to a hand when over a button. Here is how to do that:

        <span onclick="ASLEvent('HandleButtonClick', 'look');" style=";cursor:pointer;">Look</span>

Images

What if you want images to click on? Here is some code that in theory will allow the user to click on an image, eye.png:

       <img src="eye.png" onclick="ASLEvent('HandleButtonClick', 'look');" width="32" height="32" style=";cursor:pointer;"/>

However, as before we need to substitute the file name with its URL (web address). In UserInitInterface, change the code to this:

  str = game.uibuttons
  str = Replace(str, "eye.png", GetFileURL("eye.png"))
  JS.addText (str)
  JS.eval ("$('#button_div').insertAfter($('#compassAccordion'))")

If you have several buttons you will need to repeat the second line, once for each image, modifying the filename as appropriate.

---

Go to part four