Advanced UI Part 02: New Status Pane

We are going to build on the ideas in the previous page to build a new status pane.

You can see what we are heading towards here:

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

An easier way is with the custom status pane, but this will provide an good intriduction to how to do things from scratch.

Simple Status Box

The first step is to create the HTML that will be used on the web page. This can be done in an attribute, say of the game object, but you will need to go into full code view to do it. You are putting HTML inside XML, so you need to do it as CDATA, which essentially tells Quest not to treat the HTML as XML. Say the attribute is called "uistatus" (best to use letters an numbers only when adding attributes to the XML directly), the basic format without the HTML is this:

    <uistatus><![CDATA[
    ]]></uistatus>

The HTML will consist of a div element with an id attribute, so we can later move it around. Inside that you can put in what you want. I am going to do this as a table to ensure it is formatted neatly.

    <uistatus><![CDATA[
       <div id="status_div" style="padding:5px;padding-top:10px;border-radius:5px;border:grey solid thin;">
         <table width="100%">
           <tbody id="table_status">
           <tr>
             <td style="text-align:right;">Weapon:</td>
             <td style="text-align:left;"><span id="weapon-span">---</span></td>
           </tr>
           <tr>
             <td style="text-align:right;">Gold:</td>
             <td style="text-align:left;"><span id="gold-span">0</span></td>
           </tr>
           <tr>
             <td style="text-align:right;">Strength:</td>
             <td style="text-align:left;"><span id="strength-span">0</span></td>
           </tr>
           <tr>
             <td style="text-align:right;">Agility:</td>
             <td style="text-align:left;"><span id="agility-span">0</span></td>
           </tr>
           </tbody>
         </table>
       </div>
        ]]></uistatus>

In the "User interface initialisation script", add these lines;

  JS.addScript (game.uistatus)
  JS.eval ("$('#status_div').insertAfter($('#compassAccordion'))")

The first simply prints the HTML text. We use JS.addScript as it will add the text at the top of the page, rather than as part of the game. If you use JS.addText, it will look fine... until someone loads a saved game, and then the paragraph counts will go awry and text will get added in the wrong place.

The second line then moves the whole block within the web page, inserting it after the compass accordion. If you now go in game, you should see the new status box below the compass.

Changing values

So far it does nothing. Obviously we want the values to update. To allow that to happen, each value in the table was put inside a span element with its own id. The gold value, for example, has an id "gold-span". That means we can change the content, using JavaScript/jQuery.

To change the value to 10, we would do this:

  $('#gold-span').html('10');

In Quest, you need to do that usingJS.eval. Here is the Quest code that would update the value of the gold to the current value of player.money (and could be done in a change script, for example):

  JS.eval ("$('#gold-span').html('" + player.money + "');")

You can set it to a string as easily as an integer.

Reacting to the Player

To make interactive features is not trivial. We will start by not. We will modify the status box so the player can click on it to hide or display the lower half. We do not need to do anything in Quest to do that, it will be done purely in JavaScript.

Here is the new HTML:

    <uistatus><![CDATA[
       <div id="status_div" style="padding:5px;padding-top:10px;border-radius:5px;border:grey solid thin;" onclick="$('#table_stats').toggle();">
         <table width="100%">
           <tbody id="table_status">
           <tr>
             <td style="text-align:right;">Weapon:</td>
             <td style="text-align:left;"><span id="weapon-span">---</span></td>
           </tr>
           <tr>
             <td style="text-align:right;">Gold:</td>
             <td style="text-align:left;"><span id="gold-span">---</span></td>
           </tr>
           </tbody>

           <tbody id="table_stats">
           <tr>
             <td style="text-align:right;">Strength:</td>
             <td style="text-align:left;"><span id="strength-span">0</span></td>
           </tr>
           <tr>
             <td style="text-align:right;">Agility:</td>
             <td style="text-align:left;"><span id="agility-span">0</span></td>
           </tr>
           </tbody>
         </table>
       </div>
     ]]></uistatus>

There are two differences.

The second line, the start tag for the div element, has a new attribute:

onclick="$('#table_stats').toggle();"

The onclick attribute will run the given JavaScript when the element is clicked. The JavaScript (jQuery in this instance), looks for an element called "table_stats", and calls the toggle method for it. This is a built in method that toggles the visibility of the element, so does most of the work for us.

The second change is to add an element called "table_stats". I have used the tbody element to split the table, with the ID of the lower half called that.

---

Go on to part three.