Sugarcube:

Dazakiwi38

I am trying out a <<click>> and <<replace>> example on the sugarcube documentation page and I am wanting to have a single variable that will be the total skill points a player can spend and it will increase or decrease when they increase or decrease various stats. I haven't accounted for what happens when all of the points have been spent at this point yet.

However i can't work out how to update the variable as per example.

This is what i tried..

Points left to spend:
<<set $Sklpoints = 20>><<id "stats-$Sklpoints">><<print $Sklpoints>><</id>>
<br>
<br>
<p id="p1">
<center>Strength:
<<set $pcStr = 10>><<id "stats-str">><<print $pcStr>><</id>>
<br>
<<click "[+]">><<set $pcStr++>><<set $Sklpoints++>><<replace "#stats-str">><<print $pcStr>><</replace>><<replace "#stats-$Sklpoints">><<print $Sklpoints>><</replace>><</click>> |
<<click "[-]">><<set $pcStr-->><<set $Sklpoints-->><<replace "#stats-str">><<print $pcStr>><</replace>><<replace "#stats-$Sklpoints">><<print $Sklpoints>><</replace>><</click>></center>
</p>

<p id="p1">
<center>Agility:
<<set $pcAgl = 10>><<id "stats-agl">><<print $pcAgl>><</id>>
<br>
<<click "[+]">><<set $pcAgl++>><<replace "#stats-agl">><<print $pcAgl>><</replace>><</click>> |
<<click "[-]">><<set $pcAgl-->><<replace "#stats-agl">><br><<print $pcAgl>><</replace>><</click>></center>
</p>


How can I update the skills left variable? without refreshing the page?

TheMadExile

[list type=decimal]
Don't use <<id>> (or <<class>>) as they're deprecated.  Simply use the appropriate HTML tag with either the id and/or class attributes.
Don't use characters which are not alphanumerics, hyphens, or underscores as part of a CSS/DOM identifier (i.e. don't do this: "stats-$Sklpoints").
You're doing the (in|de)crements of your $Sklpoints backwards.
Your paragraphs incorrectly use the same id.  Within a page, all IDs must be unique.
It would be cleaner to do all of the $variable initialization at the top.
You're probably also going to want some range checks against the point pool, when incrementing stats, and each stat, when decrementing them (in the example, the pool is clamped to 0 while each stat is clamped to 1).

Try something like this: (I assume you're doing this with nobr)


<<set $points to 20, $pcStr to 10, $pcAgl to 10>>
<p id="setup-points">
Points left to spend: <span id="points"><<print $points>></span>
</p>
<p id="setup-str">
<center>
Strength: <span id="stats-str"><<print $pcStr>></span><br>
<<click "[+]">><<if $points gt 0>><<set $points--, $pcStr++>><<replace "#stats-str">><<print $pcStr>><</replace>><<replace "#points">><<print $points>><</replace>><</if>><</click>> |
<<click "[-]">><<if $pcStr gt 1>><<set $points++, $pcStr-->><<replace "#stats-str">><<print $pcStr>><</replace>><<replace "#points">><<print $points>><</replace>><</if>><</click>>
</center>
</p>
<p id="setup-agl">
<center>
Agility: <span id="stats-agl"><<print $pcAgl>></span><br>
<<click "[+]">><<if $points gt 0>><<set $points--, $pcAgl++>><<replace "#stats-agl">><<print $pcAgl>><</replace>><<replace "#points">><<print $points>><</replace>><</if>><</click>> |
<<click "[-]">><<if $pcAgl gt 1>><<set $points++, $pcAgl-->><<replace "#stats-agl">><<print $pcAgl>><</replace>><<replace "#points">><<print $points>><</replace>><</if>><</click>>
</center>
</p>


Dazakiwi38

TheMadExile wrote:

[list type=decimal]
Don't use <<id>> (or <<class>>) as they're deprecated.  Simply use the appropriate HTML tag with either the id and/or class attributes.
Don't use characters which are not alphanumerics, hyphens, or underscores as part of a CSS/DOM identifier (i.e. don't do this: "stats-$Sklpoints").
You're doing the (in|de)crements of your $Sklpoints backwards.
Your paragraphs incorrectly use the same id.  Within a page, all IDs must be unique.
It would be cleaner to do all of the $variable initialization at the top.
You're probably also going to want some range checks against the point pool, when incrementing stats, and each stat, when decrementing them (in the example, the pool is clamped to 0 while each stat is clamped to 1).

Try something like this: (I assume you're doing this with nobr)

Gee i made a few errors there. Thanks for getting that working, it works just as i wanted. Yes I am using nobr.
As for the <p id="p1"> i used  couple of times, was for a stylesheet that creates a box outline around each set, i found on the web. So i've added that back in.  *Update* I got it wrong. As greyelf points out it better to use classes for something like below instead of ID, so disregard the code below and see his class example for the same thing.
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
width: 7em;
border:2px solid white;
}

All in all this was a good exercise in using click and replace, haven't used it before. I like the fact i can place <if> conditions in there as well.

greyelf

Dazakiwi38 wrote:

Gee i made a few errors there. Thanks for getting that working, it works just as i wanted. Yes I am using nobr.
As for the <p id="p1"> i used  couple of times, was for a stylesheet that creates a box outline around each set, i found on the web. So i've added that back in.  For those who want to use it:

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
width: 7em;
border:2px solid white;
}

All in all this was a good exercise in using click and replace, haven't used it before. I like the fact i can place <if> conditions in there as well.

As TheMadExile explained in point 4, the HTML specification itself requires that all tag id's within a page must be unique.

So having two (or more) paragraph tags with the same ID within your page makes that page invalid HTML and there is no way of knowing exactly what the users browser (brand/version) is going to do about it. You telling people to do otherwise Dazakiwi38 is not a good idea.

If you wish to apply that set of CSS rules to more than one paragraph within a page then you should change your code to something like the following:


<p class="boxy">Some text with box</p>
<p class="boxy">Some other text with box</p>
<p>No box for you</p>


And change your CSS from being ID based to being CLASS based:


.boxy {
-moz-box-flex: 1.0; /* Firefox */
-webkit-box-flex: 1.0; /* Safari and Chrome */
-ms-flex: 1.0; /* Internet Explorer 10 */
box-flex: 1.0;
width: 7em;
border:2px solid white;
}


Dazakiwi38

greyelf wrote:

As TheMadExile explained in point 4, the HTML specification itself requires that all tag id's within a page must be unique.

So having two (or more) paragraph tags within your page makes that page invalid HTML and there is no way of knowing exactly what the users browser (brand/version) is going to do about it. You telling people to do otherwise Dazakiwi38 is not a good idea.

If you wish to apply that set of CSS rules to more than one paragraph within a page then you should change your code to something like the following:


<p class="boxy">Some text with box</p>
<p class="boxy">Some other text with box</p>
<p>No box for you</p>


And change your CSS from being ID based to being CLASS based:


.boxy {
-moz-box-flex: 1.0; /* Firefox */
-webkit-box-flex: 1.0; /* Safari and Chrome */
-ms-flex: 1.0; /* Internet Explorer 10 */
box-flex: 1.0;
width: 7em;
border:2px solid white;
}


Thanks for your post greyelf. I wasn't purposely trying to contradict MadExile, im still learning. But your words have cleared up the differences between and ID and classes, I thought they did the same thing more or less. Sorry if i was misleading people with my previous post. The reason i mentioned it was i said nothing about the stylesheet originally and that's why i mentioned it. I misunderstood what Exile meant by all ID's have to be unique. I thought he only meant per the code he wrote up. 

Okay, so now i know duplicate ID's can make a html page invalid, use classes instead for something like this.
Well at least others in the learning boat, will pick something up from this thread.


Thanks for your suggestion with the class example.