[SugarCube] numberpool/numberbox onchange stops updating html element

SleeteWayne

I am using Twine 2.x with Sugarcube 2.11.0 and the numberpool macro.

The problem is that after a going through a few of the entries it stops updating the span element's contents simply leaving it blank. The problem is exacerbated when clicking through the numberpool too quickly. It does this all without throwing an error.

The array in question:

<<set $eyeColors to [ "Blue", "Brown", "Gray", "Green", "Hazel", "Red", "Violet" ]>>

and the $player object:

<<set $player = { eyeColor : 1 } >>

Which is referenced in the following code:

<tr>
		<td>
			Eye Color
		</td>
		<td>
			<<numberpool "$eyeColors.length">>
				<<numberbox "$player.eyeColor" $player.eyeColor 1 $eyeColors.length>><span id="eye-color"><<print $eyeColors[$player.eyeColor]>></span>
				<<onchange>>
					<<replace "#eye-color">><<print $eyeColors[$player.eyeColor]>><</replace>>
			<</numberpool>>
		</td>
	</tr>

TheMadExile

First. Why are you attempting to use the <<numberpool>> macro set when it's specifically designed for numerical input? Are you using it for numerical input elsewhere and simply decided to reuse it for this as well?

SleeteWayne wrote: »

The array in question:

<<set $eyeColors to [ "Blue", "Brown", "Gray", "Green", "Hazel", "Red", "Violet" ]>>

and the $player object:

<<set $player = { eyeColor : 1 } >>

Which is referenced in the following code:

<tr>
		<td>
			Eye Color
		</td>
		<td>
			<<numberpool "$eyeColors.length">>
				<<numberbox "$player.eyeColor" $player.eyeColor 1 $eyeColors.length>><span id="eye-color"><<print $eyeColors[$player.eyeColor]>></span>
				<<onchange>>
					<<replace "#eye-color">><<print $eyeColors[$player.eyeColor]>><</replace>>
			<</numberpool>>
		</td>
	</tr>

As noted within its documentation, the pool value is modified—as the pool is drained/filled. By using "$eyeColors.length", you're modifying the length of the $eyeColors array, which is the cause of most of your other issues.

An additional issue is that array indices are 0-based, not 1-based.

So, you need to use a copy of the array length for the pool value and to use 0-based indices. I'd suggest using temporary variables here. For example, for the initial value of $player.eyeColor:

<<set $player = { eyeColor : 0 } >>

And for the player-facing code:

			<<set
				_eyeColorLen to $eyeColors.length,
				_eyeColorMin to 0,
				_eyeColorMax to $eyeColors.length - 1
			>>\
			<<numberpool "_eyeColorLen">>
				<<numberbox "$player.eyeColor" $player.eyeColor _eyeColorMin _eyeColorMax>>&nbsp;&nbsp;<span id="eye-color"><<print $eyeColors[$player.eyeColor]>></span>
			<<onchange>>
				<<replace "#eye-color">><<print $eyeColors[$player.eyeColor]>><</replace>>
			<</numberpool>>

SleeteWayne

TheMadExile, I did fix my problem. It was rather silly, but I wasn't able to update or remove the topic as it was in moderation due to me being a new poster. I apologize for that. But yes, I had to use temporary variables as you said.

I used the numberpool as a a means of selecting the desired index of an associative array. Ideally, I would have liked to been able to display the index's value as opposed to the index position in the numberbox, but it does work quite well.

I appreciate you taking the time to respond to the topic nonetheless and hope it stands to answer other people's questions in the future should they find themselves in similar situations.

TheMadExile

SleeteWayne wrote: »

[…] Ideally, I would have liked to been able to display the index's value as opposed to the index position in the numberbox, but it does work quite well.

Hence, the very first line of my previous reply. There's no real reason to use the <<numberpool>> set for this specifically.

If you simply want to give the player a choice of eye color, then <<radiobutton>> works.

If you really want to cycle through the eye color values, then you could do something like the following:

<<button "Select Color">>
	<<set $player.eyeColor++>>
	<<if $player.eyeColor gte $eyeColors.length>>
		<<set $player.eyeColor to 0>>
	<</if>>
	<<replace "#eye-color">><<print $eyeColors[$player.eyeColor]>><</replace>>
<</button>>&nbsp;&nbsp;<span id="eye-color"><<print $eyeColors[$player.eyeColor]>></span>

There's also the <<cyclinglink>> macro, which you may find a SugarCube v2 compatible version of in the same place you did the <<numberpool>> set—on SugarCube v2's website (under: Downloads > Add-ons).

SleeteWayne

I opted not to go the radiobutton route in this particular instance for aesthetic reasons. It gives you something much cleaner to look at than a long series of radio buttons, or links. However the second and third options are something I may consider at a later time.

I was originally wanting a simple slider as I'm storing the numerical indices of the associative array instead of copying the value each time it gets set since the array will be used in several locations as a constant dataset.

Using the numberpool macro in this case gave me the a desired aesthetic and usability . It was much cleaner than an x amount of links as I've seen in a number of games. The player can easily cycle back and forth through the available options until they settle on their desired choice.

You have given me more options to consider. I was curious about using cyclinglink when I had settled on numberpool.