Displaying player attributes outside of the status window.

KV has been working with me for quite some time on this project and the end is almost near. That being said, I found a bug and I have not been able to work around this time. Important background information: I'm using the latest version of questJS from KV and uploading to my own webserver.

The last hurdle was getting the shop working with money and a workaround was figured out for that. The next step is displaying stat changes on the player (wearing weapons/armor provides bonuses to player attributes). The default wearable system does not work with the way my libraries and games are set up (random properties are added to items for every new game, so adding a list of bonuses to the generic versions of those items will not work as the list will not be the same from game to game). Wearing an item DOES change the proper player attributes, so that works. I am using the code for the custom status pane to display resistances when player's look at themselves, but NOT in a custom status pane (because that is not supported by questJS), just printed into the game window. There are 5 resists: Physical, Fire, Cold, Poison & Energy. These values already exist on the player and are changed when you wear items that have those values as bonuses. When you look at yourself, you see a display of the 5 resists with the correct numeric values from the player. After you wear an item with a resist bonus and then look at yourself again, the stat display is not changing, but the values are.

This starts the build:

phys = phys()
fire = fire()
cold = cold()
pois = pois()
ener = ener()
do (player, "changedphysical")
do (player, "changedfire")
do (player, "changedcold")
do (player, "changedpois")
do (player, "changedener")
s = ""
return ((s))

Each one of the functions for a resist looks similar to this:

msg ("<td><span id=\"phys-indicator\" style=\"width:0px;background-color:pink;color:#000;\">phys </span></td>")
player.changedphysical => {
  JS.eval ("$('#phys-indicator').css('width', '" + (player.physical) + "px');")
}
return ("phys")

1.) The above WORKS, halfway. The values are changing, but are not changing the display. I suppose this could be an issue with multiple html elements sharing the same name (since the display is redrawn every time in a web browser the window just scrolls up), but none of the elements are changing. At the very least, the first element of that name should get changed.

2.) The other snag here is that after wearing an item with a resist bonus, the value that is being changed gets printed twice. So if you have a Physical bonus on an item, you would see it displayed twice, with the same value though (so it is being updated, but printing twice).

Just a note: Every time I have attempted to send a message, I receive an error. I don't mind posting in the forums, but it seems that I am the only one using questJS. Since it really isn't supported here, I feel more as if I'm just clogging up the forums and confusing others that are just using Quest and not being all complicated and screwing with Quest/questJS inner workings.

Your guidance is appreciated, thanks.
Raist


KV, mrangel or anyone...!
Bump


Update:
This almost works now. I basically had to tell the script to change ALL html elements with that name. In the original code there was a # for the ID, but I have changed that to a . for the Class. Here is the working code:

resists_table function

<function name="resists_table"><![CDATA[
phys = phy ()
fire = fir ()
cold = col ()
pois = poi ()
ener = ene ()
do (player, "changedphysical")
do (player, "changedfire")
do (player, "changedcold")
do (player, "changedpois")
do (player, "changedener")
player.changedphysical => {
  JS.eval ("$('.phys-indicator').css('padding-right', '" + (player.physical - 7) + "px');")
}
player.changedfire => {
  JS.eval ("$('.fire-indicator').css('padding-right', '" + (player.fire - 7) + "px');")
}
player.changedcold => {
  JS.eval ("$('.cold-indicator').css('padding-right', '" + (player.cold - 7) + "px');")
}
player.changedpois => {
  JS.eval ("$('.pois-indicator').css('padding-right', '" + (player.poison - 7) + "px');")
}
player.changedener => {
  JS.eval ("$('.ener-indicator').css('padding-right', '" + (player.energy - 7) + "px');")
}
  ]]></function>

Here is the altered example code for each resist:

<function name="phy" type="stringlist"><![CDATA[
    player.changedphysical => {
  msg ("<td><span class=\"phys-indicator\" style=\"background-color:pink;color:#000;font-size:smaller;\">p</span></td>")
  JS.eval ("$('.phys-indicator').css('padding-right', '" + (player.physical - 7) + "px');")
}
phys = NewStringList()
return (phys)
  ]]></function>

(subtracting 7 from the attribute, covers the space that the letter takes up, which is 7px. Otherwise the letters will push the padding out more.)

If you call the function resists_table, each resist is updated and printed. For my purposes, I am calling the function when a player looks at themselves and every time they wear/remove a wearable object. This works within Quest on the desktop version as well if you are just playing the game. After exporting with questJS and uploading to my webserver, the display does not update at all when the function runs. I cannot figure out why.

Raist

UPDATE:
I figured out why the display was not updating. It was related to where each element function was located inside the game.js file. Quest/questJS added those functions after the function that calls the resists_table. Once I put them BEFORE the resists_table function, the problem was solved. All available renderings of the resists_table are updated on the entire page. If you're creating a browser-based game, you will want to try and clear the screen from time to time. Otherwise updating each css element might begin to slow things down if a lot changing is happening.

Raist


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums