Yes, @lordirishdas, you are on the right track with adding the bold label and a span tag after it on the index.html page. Make sure the span tag has a unique id, as you have shown in your example. Then you need to have a JavaScript function that will do the update of the span tag’s contents, and call the JavaScript function from inside your scene at the appropriate time, using the *script command. You’ll create a .js file in which you save your JS function, and you’ll have to make sure you reference that .js file from inside your index.html file. Such a reference would look like this, assuming your .js file is called update.js and is located in the same directory as the other .js files:
<script src='../update.js'></script>
Your JavaScript function inside the update.js file might look something like this, assuming you only had one stat to display, with a name of “armor”:
function updateDisplay() {
var statElem = document.getElementById("stat_armor");
if (statElem) {
statElem.innerHTML = stats["armor"];
}
}
If you have more than one stat to display, you can be a little smart about writing it. First, set up an array called statNames that holds all of the names of the stats you want to include in your display. Then write your function to loop over the array, like so:
var statNames = ["weapon1", "weapon2", "armor"];
function updateDisplay() {
var i;
for (i=0; i<statNames.length; ++i) {
statElem = document.getElementById("stat_" + statNames[i]);
if (statElem) {
statElem.innerHTML = stats[statNames[i]];
}
}
If your span tags have ids of stat_weapon1, stat_weapon2, and stat_armor, then the above will update those span tags with the data from your stats.
To call this function from your scene file, you’d use this command:
*script updateDisplay();
Call it any time any of your stats might change, if you want your display to always be current.
Hope that helps.
