Multiple Stat Screens


#1

I know it can be done. Unfortunately, the only guide I can find seems to be outdated: it refers to a “statcharts” section in mygame.js that doesn’t seem to exist. The script in index.html regarding the buttons is also slightly different (it reads “id=” instead of “class=”).

Here is the guide:
http://groups.google.com/group/choicescript/browse_thread/thread/f172f5b165daa801/4d103bd4be2cce6a?lnk=gst&q=multiple+stat#4d103bd4be2cce6a

I’d really appreciate it if someone could help me out with this.

Thanks!


#2

Okay, now mind you I don’t know much about coding, tweaking the Index file is about the most complex thing I’ve done, but I think I’ve found what you’re looking for. In *ui.js* file is the function “showstats”, which is the effect of the Stats button.

Now this part is pure speculation by someone that has no experience with this sort of thing, but I imagine that you would have to duplicate the function in the *ui.js* file, renaming it, and change the part that says “choicescript_stats” (whatever you change the “choicescript_stats” to will be the needed file name under the scenes folder for the second stats button), then duplicate the button in the *index.html* file (as mentioned in the Google Group by Myth, changing the “onclick=” part to whatever you named the second function as.

I hope that is clear enough (and actually helpful). Just say if anything I mentioned didn’t make sense.


#3

I think you are on to the answer but not there yet. I am playing with it but hopefully someone will figure it out.


#4

Yes, that makes sense. And yes, it is helpful. :slight_smile:

It basically worked, too. The one annoyance I have is that you can’t click on the button for a different stats screen while you’re already in one. I’m working on a fix for that.

The fact that it works is huge. But the perfectionist in me isn’t satisfied. It’s a lot of code to mess around with for each game, and it means I need separate ui.js files for each game I make. It seems like a rather roundabout solution. There must be a simpler way to do it!

So I tried something, and it failed miserably. (Clicking on stat buttons didn’t do anything.)

Below is what I tried. The only changes I made were to insert the variable statsScene in the first line and replace the string name of the stats scene “choicescript_stats” with the same variable in the seventh line. I also made sure to write showStats(“mystatsscene”) in index.js where the function is called. Any idea as to why it didn’t work?

`function showStats(statsScene) {
if (window.showingStatsAlready) return;
window.showingStatsAlready = true;
document.getElementById(“statsButton”).style.display = “none”;
main.innerHTML = “

”;
var currentScene = window.stats.scene;

var scene = new Scene(statsScene, 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", text, false, function() {
      window.stats.scene = currentScene;
      window.showingStatsAlready = false;
      document.getElementById("statsButton").style.display = "inline";
      clearScreen(loadAndRestoreGame);
  });
}
scene.execute();

}`


#5

I wish someone had an answer


#6

Do you want different stat buttons for different characters or just subsets, like character stats, equipment, etc.? Sorry if I missed that point.


#7

I was thinking for stats & equipment & such.


#8

I had something sort of working at one point, but now I can’t get it to work again.

:frowning:


#9

It’s exactly what I am trying to do also.


#10

Ok, I am just changing the stat screen based on other variables, so that at certain points of the game, the stats shift. Your requirement is more complex.


#11

I still haven’t come up with anything


#12

Ha! I made it work!

I still think there should be a more efficient way to do it, but for now this will do the job.

In index.html

Change this:
<button id="statsButton" onclick="showStats()">Show Stats</button>
To this:
<button id="statsButton1" onclick="showStats1()">Text on Button 1</button> <button id="statsButton2" onclick="showStats2()">Text on Button 2</button>

In ui.js

Locate the showStats() function, and replace the entire function with this, where the bolded parts are the names of your scene files:

`function showStats1() {
document.getElementById(“statsButton1”).style.display = “none”;
document.getElementById(“statsButton2”).style.display = “inline”;
main.innerHTML = “

”;
var currentScene = window.stats.scene;

var scene = new Scene("`<b>stats_scene_1</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();

}

function showStats2() {
document.getElementById(“statsButton2”).style.display = “none”;
document.getElementById(“statsButton1”).style.display = “inline”;
main.innerHTML = “

”;
var currentScene = window.stats.scene;

var scene = new Scene("`<b>stats_scene_2</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("statsButton2").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("statsButton2").style.display = "inline";
      clearScreen(loadAndRestoreGame);
  });
}
scene.execute();

}`

It works for me, so hopefully it will work for you too. If you want more stat screens it shouldn’t be too hard to find the changes I’ve made and replicate them for more screens. If you need help, just ask.


#13

but what if u want more than 2


#14

@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.


#15

If you look closely at the ul.js file, it says, “TODO, ban *choice/*page_break, etc. in show stats screen”, well, honestly, this will screw up a lot of games, do any of you know if this is actually an implimented feature?


#16

It’s not implemented yet, and there hasn’t been a lot of movement on updating ChoiceScript, and even if it was, you don’t actually need to update if they do let out a new version. It’s mostly a consideration because of the fact that no changes actually carry over from the stat pages back to the game itself.


#17

One more question: I tried this, and when I click any of the tabs it says, “line 5: indent invalid/not allowed, expected 4 was 2” well, this is how I did it:
__*stat_chart
____1
____2
____3
____text Fame
____5
etc. etc. etc. (On 1-3 and 5, insert name of stat)
and it won’t work, it’s not refering to the ui.jar or the index.html because line 5 there is comments, what am I doing wrong?
This goes for the armor tab too.


#18

I deleted a line, and it STILL says line 5, invalid indent, even though the line with the “problem” isn’t there anymore.

Edit: I made the indent 1, and it tells me the indent I made was 4, and then I made it 4 and it just crashed.

Edit 2: NEVER MIND GUYS! I made a problem with the button names, my bad!


#19

Okay, when it says ‘line 5’ make sure you’re looking in the right file. It may be indicating any of the various txt files, in addition to the .js files. Are you sure it’s indicating the stat file, and not something like ui.js?


#20

Wouldn’t it be easier to just duplicate the ui.js file?