(SugarCube 2.27.0 & Twine2) — textbox macro, possible to trigger a response besides moving to a passage?

Question

Re: my previous question about adding support for Kickstarter backers to unlock additional content in-game without needing me to maintain several separate builds, I've decided to do this through giving out codes to supporters which can be added into a textbox macro to activate.

Is there a way to input text in a textbox macro that modifies the $supportercode variable *without* moving the player to another passage? IE, they put in the code and press enter and the textbox not only modifies the variable to what they put in, but the textbox itself is then replaced with something that either tells them "your code is valid" or "sorry you've input the wrong code." I can do this easily enough by moving the player to another passage, but if they're in the middle of the game doing so is disruptive and I'd prefer to trigger the effect in-place.

I hope that makes sense?

Answer 1

All of the form-type interactive macros immediately update the associated variable as soon as the player updates the control, so all you need to do is to check the value instead of forwarding the player.

The easiest way to do that is thus: do not specify the passage argument to the <<textbox>>, so pressing enter does not forward the player, and supply a <<button>> which performs the checks you desire.  For example:

!Enter Supporter Code
<div id="supportercode-form">\
<<textbox "$supportercode" "" autofocus>> \
<<button "Continue">>
	/* Sanitize $supportercode value. */
	<<set $supportercode to $supportercode.trim()>>

	/* Check $supportercode value. */
	<<if $supportercode … >>
		/* Code is valid, so enable extras and replace the form. */
		/* …code to enable extras here… */
		<<replace "#supportercode-form">>Success!  Extras unlocked.<</replace>>
	<<else>>
		/* Code is invalid, so show error. */
		<<replace "#supportercode-error">><br>Invalid code!  Try again?<</replace>>
	<</if>>
<</button>>\
<span id="supportercode-error"></span>
</div>

NOTE: It is possible to also enable pressing enter to also check the code, but that would require some additional JavaScript, so simply using the button is simpler.  That said, I can provide the necessary code if truly desired.

Comments

Thank you both for the quick responses! This works perfectly for me.

Answer 2

You can use a link to evaluate the variable:

@@#code;Enter the code: <<textbox '_code' '' autofocus>>@@
@@#error;@@
<<button 'Submit'>>
    <<if _code is 'blahblahblah'>>
        <<set $backer to true>>
        <<replace '#error'>><</replace>>
        <<replace '#code'>>Backer content unlocked.<</replace>>
    <<else>>
        <<replace '#error'>>Incorrect code.<</replace>>
    <</if>>
<</button>>

It might be wise to at least try a little bit to make the code hard to figure out though. For example, you could open your browser and press f12 to open the console, then type in: 

btoa('password')

and press enter. The result will encode the string in base64; for example, "password", as above, looks like:

cGFzc3dvcmQ=

Then you can use the atob() decoding function to mask the password.

@@#code;Enter the code: <<textbox '_code' '' autofocus>>@@
@@#error;@@
<<button 'Submit'>>
	<<set _test to atob('cGFzc3dvcmQ=')>>
    <<if _code is _test>>
        <<set $backer to true>>
        <<replace '#error'>><</replace>>
        <<replace '#code'>>Backer content unlocked.<</replace>>
    <<else>>
        <<replace '#error'>>Incorrect code.<</replace>>
    <</if>>
<</button>>

You could take further steps to attempt to mask or hide the real password too, but you won't ever stop people who know JavaScript, so meh.