Trying to make a password type input

[YourLocalCherryTopper]

I'm still getting the hang of Squiffy and I'm still trying to learn and add new things to my future games.

My current issue is that, I'm trying to adapt a text field for changing a character name to be a password type input without making it bulky. The following is a snippet of what I'm working with.

<input type="text" style="text-transform: capitalize; color: black" id="Alpha" size="15"><br> [[Enter]](JS 1)</p>
[[JS 1]]:
    squiffy.set("Q1", jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() }));
    squiffy.story.go("Query");

[[Query]]:
    if (squiffy.get("Q1") == Sandman) squiffy.story.go("Section 2")

[[Section 2]]:
@clear
Section Showing

When ran, and the right "password" is input, it opens a new section that isn't what is specified.

I don't know if I'm missing something or just doing it completely wrong.

[KVonGit]

Hello,

If Sandman isn't a defined variable in your game at this point, this will probably help:

Change if (squiffy.get("Q1") == Sandman) squiffy.story.go("Section 2") to:

    if (squiffy.get("Q1") == 'Sandman') squiffy.story.go("Section 2")

---

For testing purposes, I added a message to the "Query" section to print something when the password didn't match.

<p><input type="text" style="text-transform: capitalize; color: black" id="Alpha" size="15"><br> [[Enter]](JS 1)</p>
[[JS 1]]:
    squiffy.set("Q1", jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() })); squiffy.story.go("Query");

[[Query]]:
    if (squiffy.get("Q1") == 'Sandman') squiffy.story.go("Section 2")
This will print if Q1 doesn't match the password.

[[Section 2]]:
@clear
Section Showing

---

PS

I notice Alpha is also being set when I click the button.

Click here to view screenshot

[YourLocalCherryTopper]

I'm looking this over, and I'm unfamiliar with the window function, even by using the surrounding context. Can you link me to a guide or forum that explains this? And is window.story = squiffy.story vital for the two snippets you provided?

[KVonGit]

I'm not entirely too sure why Alpha shows up in the web version of the editor, but it doesn't show in the desktop version, but I do feel really dumb, lol.

I kept on posting comments. but I failed to refresh the page to see your comment. :)

I usually only spot mistakes that I've recently (or frequently) made myself, if that's any consolation, haha.

[KVonGit]

I'm looking this over, and I'm unfamiliar with the window function, even by using the surrounding context. Can you link me to a guide or forum that explains this? And is window.story = squiffy.story vital for the two snippets you provided?

Here's the forum post I got that from:
https://textadventures.co.uk/forum/squiffy/topic/cggujqq5akustvqzxixo6w/squiffy-story-go-not-working-in-a-button#f4bee11f-dbd9-4461-bdc2-1e0d4610ec02

I only added that bit to allow the ENTER keypress to work.

I don't know Squiffy very well, but ... Well, that post explains it better than I can, but it seems the story from squiffy.story needs to be made global before it can be called from the HTML input element.

---

EDIT
The window object is global.

EDIT 2

Sorry, everyone in my house suddenly demanded I give them my full attention...

The JS window object:
https://www.w3schools.com/js/js_window.asp

The window object is always accessible from any script, but it seems that the squiffy object is not.

So, window.story = squiffy.story makes the squiffy.story object global, thus allowing us to just use story.go('Section 2') from a JS script.

Also, when that section is "seen", I use window.story = null to make squiffy.story inaccessible again.

Basically, window.story = squiffy.story is copying the story object from the squiffy object to the window object. Then window.story = null removes it from the window object after it has served its purpose in this code.

[KVonGit]

Okay, I had time to test things, and it looks like this is all you need to include the "onkeyup" part:

@title Input Test Game
    window.handleAlphaSubmit = function(e){if(e.keyCode==13 || jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() }) == atob('U2FuZG1hbg==')) {squiffy.story.go('JS 1');}};
v1.0.2

<p><input type="text" style="text-transform: capitalize; color: black" id="Alpha" size="15" onkeyup="handleAlphaSubmit(event)"> [[Enter]](JS 1)</p>
[[JS 1]]:
    squiffy.set("Q1", jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() })); squiffy.story.go("Query");

[[Query]]:
    if (squiffy.get("Q1") == atob('U2FuZG1hbg==')) squiffy.story.go("Section 2")
This will print if Q1 doesn't match the password.

[[Section 2]]:
@clear
Section Showing

---

https://textadventures.co.uk/games/view/kkwvq-zeje2pl3hkmchilq/input-test-game

---

It still had access to squiffy.story.go() without using window.story = squiffy.story.

There must have been an update since that forum post. Sorry about the confusion there.

However, I did have to define the handleAlphaSubmit function that way (using window.handleAlphaSubmit) for it to work from the HTML input element. When I defined that function the normal way, it was undefined.

---

EDIT

Okay... Well... I clicked 'publish' after making changes, then I tested things online to be sure everything actually works after publishing, and I thought I made sure everything was cool. BUT.... It seems the files on the site have not updated yet (even now), and I am still playing an older version online when I thought I was playing the updated game.

I can tell because I'm looking at my story.js file that's currently online.

---

---

This reminds me... People can easily cheat this way.

If you want to make it harder to do that: atob("U2FuZG1hbg==") will return"Sandman". So you could do that one line of yours this way:

    if (squiffy.get("Q1") == atob('U2FuZG1hbg==')) squiffy.story.go("Section 2")

---

The files updated while I was typing this, and all is well without window.story = squiffy.story in the code.

---

v1.0.9

@title Input Test Game
    /* create global command for handling keyup during password input */
    window.handleAlphaSubmit = function(e){if(e.keyCode==13 || jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() }) == atob('U2FuZG1hbg==')) {squiffy.story.go('JS 1');}};
<h1>Input Test Game</h1>
<sup>v1.0.9</sup>
<p><b>Please enter the password: </b> <input type="text" style="text-transform: capitalize; color: black" id="Alpha" size="15" onkeyup="handleAlphaSubmit(event)"> [[Enter]](JS 1)</p>
[[JS 1]]:
    squiffy.set("Q1", jQuery("#Alpha").val().replace(/^\w|\s\w/g, function(t) { return t.toUpperCase() })); squiffy.story.go("Query");

[[Query]]:
    if (squiffy.get("Q1") == atob('U2FuZG1hbg==')) squiffy.story.go("Section 2");
@clear
<span style="color:red;">Incorrect.</span>

[[Section 2]]:
@clear
<span style="color:green;">Correct!</span>

[YourLocalCherryTopper]

I didn't expect this to go very far, but the improvement to the code is greatly appreciated!!

[KVonGit]

I was all hyped up on sugar and caffeine, and I get all crazy when code won't quite behave as expected. 🙃

(I also forget people are probably getting notifications and/or emails every time I post here. 😅)

---

Oh, I also forgot to mention what I was doing with atob, just for completion. btoa encodes a string to base64. atob decodes it.

btoa('Sandman')
// returns U2FuZG1hbg==

atob ('U2FuZG1hbg==')
// returns Sandman