|
This page contains outdated information |
Removing or Adding stats buttons is relatively easy.
Removing Stats Buttons
You need to open index.html (in the mygame folder) and look for this line:
<p><button id="statsButton" onclick="showStats()">Show Stats</button></p>
And remove it. There will be no stats button any more! However, you will still need the choicescript_stats file for the game to work. If you want to be able to remove that file, you need to go to the ui.js file in the web folder and open it. There, close to the beginning, you need to look for these lines:
function showStats() {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById("statsButton").style.display = "none";
main.innerHTML = "<div id='text'></div>";
var currentScene = window.stats.scene;
var scene = new Scene("choicescript_stats", 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?")) {
window.showingStatsAlready = false;
document.getElementById("statsButton").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", main, false, function() {
window.stats.scene = currentScene;
window.showingStatsAlready = false;
document.getElementById("statsButton").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
}
and you need to remove these lines. Then, you can delete the choicescript_stats file freely.
Adding Stats Buttons
You need to go in the ui.js file in the web folder, and look for these lines:
function showStats() {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById("statsButton").style.display = "none";
main.innerHTML = "<div id='text'></div>";
var currentScene = window.stats.scene;
var scene = new Scene("choicescript_stats", 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?")) {
window.showingStatsAlready = false;
document.getElementById("statsButton").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", main, false, function() {
window.stats.scene = currentScene;
window.showingStatsAlready = false;
document.getElementById("statsButton").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
}
Notice the function "showStats". That's the function used by the current "Show Stats" button every default ChoiceScript game has. Let's say we want to add a new button called "Info". We copy the whole function and paste it right after the showStats function, and we modify it as the following:
function showInfo() {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById("infoButton").style.display = "none";
main.innerHTML = "<div id='text'></div>";
var currentScene = window.stats.scene;
var scene = new Scene("choicescript_info", 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?")) {
window.showingStatsAlready = false;
document.getElementById("infoButton").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", main, false, function() {
window.stats.scene = currentScene;
window.showingStatsAlready = false;
document.getElementById("infoButton").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
All we needed to do is change every "statsButton" text to "infoButton".Then, we changed the function name from "showStats" to "showInfo". Then, we changed the "choicescript_stats" text to "choicescript_info"; this is the name of the scene you use for that button (note: you can name it however you want, and you don't necessarily have to use the "choicescript" word). Here's how the function should fit in your file:
function showStats() {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById("statsButton").style.display = "none";
main.innerHTML = "<div id='text'></div>";
var currentScene = window.stats.scene;
var scene = new Scene("choicescript_stats", 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?")) {
window.showingStatsAlready = false;
document.getElementById("statsButton").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", main, false, function() {
window.stats.scene = currentScene;
window.showingStatsAlready = false;
document.getElementById("statsButton").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
}
function showInfo() {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById("infoButton").style.display = "none";
main.innerHTML = "<div id='text'></div>";
var currentScene = window.stats.scene;
var scene = new Scene("choicescript_info", 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?")) {
window.showingStatsAlready = false;
document.getElementById("infoButton").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", main, false, function() {
window.stats.scene = currentScene;
window.showingStatsAlready = false;
document.getElementById("infoButton").style.display = "inline";
clearScreen(loadAndRestoreGame);
});
}
scene.execute();
function callIos(scheme, path) {
if (!window.isIosApp) return;
if (!path) path = "";
window.location = scheme + "://" + path;
}
Always keep a space between your function and the neighboring ones.
So far, you have the button in the game, but it doesn't show up anywhere! If you want it to show up (I'm sure you do) all you have to do is open the index.html file (in the mygame folder) and look for this line:
<p><button id="statsButton" onclick="showStats()">Show Stats</button></p>
Then, you add another row, just after this one, as following:
<p><button id="infoButton" onclick="showInfo()">Info</button></p>
Remember that we changed the function name from "showStats" to "showInfo"? We need to write the name of the function we added instead of the current one (i.e. we need to replace "showStats" with "showInfo"). Then, we need to replace "statsButton" with "infoButton", because we named the button "infoButton" in the function in ui.js (i.e. we replaced "statsButton" with "infoButton" everywhere in our "showInfo" function in the ui.js file).
Right now, you may have noticed that our buttons are displayed in two different rows. If you want them on the same column, you need to remove some <p> and </p> tags, like following:
<p><button id="statsButton" onclick="showStats()">Show Stats</button> <button id="infoButton" onclick="showInfo()">Info</button></p>
Remember, the <p> and </p> tags represent a paragraph, so regardless of how many buttons you add, you can sort them on paragraphs by knowing this rule (a <p> at the beginning of a paragraph and a </p> at the end of the paragraph; you can have unlimited paragraphs).
Now, we need to go to the scenes folder in the mygame folder and create our scene for the button, named the same as we named it in ui.js (i.e. we replaced "choicescript_stats" in ui.js in the "showInfo" function with "choicescript_info", so we need to make a scene named "choicescript_info" which will display when we click the "Info" button).
Related Articles: