@enarose
Basically, it was just a matter of duplicating the code which created the buttons, and the stat files. In his first three lines of code, do you notice how the second two are just the first, duplicated, then numbered differently? Basically you have to continue the pattern, numbering/naming each one something different.
The same applies to the large chunk of code in the bottom part of his post. Note that the bottom half of that code is a duplicate of the top half, with only a few minor alterations (The bottom half of that code begins with the word ‘function’, just like the top half).
If you don’t get what he did:
In index.html
For each button duplicated this (replacing the current ‘button id’):
<button id="statsButton#" onclick="showStats#()">Text on Button</button>
changing the # to a number (each line will correspond to a different button, so the first line with be #1, the second #2, third #3, ect. Then change the Text on Button for each line to what you want the button in the game to read. For example: the first button might be ‘Hero Stats’ while the second is ‘Equipment’ and the third is ‘Villains Defeated’.
In ui.js
Now were going to duplicate the function which calls up the buttons. Each button is going to need its own function, so find the showstats() function and replace it just like animalsienna said, except were going to replace it with this:
function showStats#() { document.getElementById("statsButton#").style.display = "none"; SPECIAL REQUIREMENTS`
main.innerHTML = “
”;
var currentScene = window.stats.scene;
var scene = new Scene("stats_scene_`<b>#</b>`", window.stats, this.nav);
scene.save = function(callback) {if (callback) callback.call(scene);}; // Don't save state in stats screen, issue #70
// TODO ban *choice/*page_break/etc. in stats screen
scene.finish = scene.autofinish = function(buttonName) {
this.finished = true;
this.paragraph();
var p = document.createElement("p");
var restartLink = document.createElement("a");
restartLink.setAttribute("style", "text-decoration: underline; cursor: pointer; text-align: left");
restartLink.onclick = function() {
if (window.confirm("Restart your game? Did you click that intentionally?")) {
document.getElementById("statsButton1").style.display = "inline";
clearCookie(function() {
window.nav.resetStats(window.stats);
clearScreen(restoreGame);
}, "");
}
return false;
}
restartLink.innerHTML = "Start Over from the Beginning";
p.appendChild(restartLink);
var text = document.getElementById('text');
text.appendChild(p);
printButton(buttonName || "Next", text, false, function() {
window.stats.scene = currentScene;
document.getElementById("statsButton1").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
}`
Duplicate this for each button you have, making sure to number them correctly.
Now, you see where I have SPECIAL REQUIREMENTS written? That is because there is a special requirement for that line. You are going to duplicate the following line for every button you have that is not the one the rest of the code is referring to:
document.getElementById("statsButton#").style.display = "inline";
So lets say you have three buttons, numbered 1, 2 and 3. For the first ‘special requirement’ you are going to have:
function showStats#() { document.getElementById("statsButton1").style.display = "none"; document.getElementById("statsButton2").style.display = "inline"; document.getElementById("statsButton3").style.display = "inline"; main.innerHTML = "<div id='text'></div>"; …
Repeat this for the second and third buttons, making sure that the ‘special requirement’ is spaced equally with the line above and below it.
Edit: Oh, and for each button, you need a separate stat scene. Where ‘choicescript_stats.txt’ is (in the stats folder) create .txt files with the names: ‘stats_scene_#’ for each button. (Note that ‘choicescript_stats.txt’ will not be used anymore.)
I hope that clarifies everything.
