Name Selection [Snowman 1.2]

Glitch

This is sort of a follow up to a question I asked a while back. I figured a separate discussion was appropriate, as the aforementioned post is dated. Most forums aren't keen on bumping old topics.

Name replacement merely differs in the method used this time around. In the example depicted below, the author allowed the player to choose from a preset selection or type out their own.

I'd like to do the same, but I'm not sure what code to use, or how I would circumvent linking; and creating, a new passage for each name choice -- save, the "Here, I'll type it for you." option.


And in this same line of thought, how would I create an in-twine textbox?
The last name replacement method I used was external; a pop-up in the browser.

<% s.name_player = prompt("Enter Character Name") %>

Glitch

It's been a little over one week now. Is there anyone here that can help?

TheMadExile

Try something like the following:

What's your first name?
<input type="text" tabindex="0" onchange="story.state.name_player = this.value">

Glitch

The only problem I have with this setup is that the players can proceed without typing anything into the box. -- Kinda breaks a lot of the writing. -- I had hoped to set choice boxes as sort of 'default names' that the player can choose from, but implementation of that kind of system requires variables, and variables require passages. An alternate solution would be to disable story progression until the box is filled.

TheMadExile

What does the code for your Next link look like?

Glitch

The stylesheet does most of the work. So, the code isn't too dissimilar from the standard for Snowman 1.2.
Is this what you were referring to, or did you have the code for variables in mind when a choice is made?

<ul id="choices">
		<li>[[Choice 01]]</li>
        <li>[[Choice 02]]</li>
</ul>

TheMadExile

Neither. I meant the "Next" link that you show right underneath the input box in your example above—all of its associated code, not just the link itself.

If you want to disable story progress (i.e. the ability to move forward) until a name has been entered into the input box, should the player choose that option, then one of the easiest ways to do so is to disable the corresponding Next link until that requirement has been met.

Glitch

Oh, sorry! My mistake; failure to explain. The "Next" link above isn't done with Twine. It's a screenshot from the game, Choice of Robots. A text-based interactive novel on Steam. Merely an example for what I'd like to do with name selection. I'm using the aforementioned code for my own work. Miscommunication on my part, apologies.

TheMadExile

Ah. Well, this is somewhat off the cuff, but it should work.

Goes in Story JavaScript:

/*
	Sets up a text input box and continuation button.

	@param {string} selector - A jQuery-compatible selector for the wrapper element.
	@param {string} variable - The name of the variable to modify, just the variable.
	@param {string} passage  - The name of the passage to show upon completion.
*/
window.textBox = function (selector, variable, passage) {
	$(document).one("showpassage:after", function () {
		var	$input  = $(selector).find("input"),
			$button = $(selector).find("button");
		$input
			.attr({
				"type"     : "text",
				"tabindex" : 0
			})
			.on("change", function () {
				story.state[variable] = this.value;
			})
			.on("keypress", function (evt) {
				if (evt.which === 13) { // 13 is Return/Enter
					evt.preventDefault();
					$(this).change();
					$button.click();
				}
			});
		$button
			.attr("tabindex", 0)
			.on("click", function () {
				if (story.state[variable] && story.state[variable].trim() !== "") {
					story.show(passage);
				} else {
					window.alert("Please fill out the text box.");
				}
			});
	});
};

And the passage code:

What is your first name?
[
<input>
<button>Next</button>
]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>

Calling the textBox function sets up a post-display callback which configures the wrapped <input> and <button> elements based on the given parameters.

You can style the <button> element (i.e. #nameinput button) to make it look like the Choice of Robots sample, if that's important to you.

Glitch

It works wonderfully. I really appreciate you taking the time to write that.

I'm playing with the code a bit; trying to re-use Stylesheet code that #choices buttons utilize, and applying it on the #nameinput button. However, the color doesn't show up when I hover the mouse over the box. What needs to be added to the Stylesheet for it look like the Paint.exe Mockup below?

---

---

I'd just like to have the background of the #nameinput box highlight like the #choices box.

An additional goal would be to add text before the textbox, as depicted in the mockup.

If this works, the "Next" button could be stylized to look like the #choices button.

---

And here is the stylesheet code used for the highlighted #choices boxes.

---

#choices {
	list-style: none;
	padding: 0;
	border: 1px solid #bbb;
}
#choices li {
	margin: 0;
	padding: 0;
}
#choices li:not(:first-child) {
	border-top: 1px solid #bbb;
}
#choices li a {
	display: block;
	margin: 0;
	padding: 0.5em 0.8em;
	border: none;
	text-decoration: none;
	font-size: 75%;
}
#choices li a:hover {
	color: #fff;
	background-color: #718389;
}

TheMadExile

You could change the last two selectors in your stylesheet from the following (which affects any anchor elements, <a>, within the list element):

#choices li a
#choices li a:hover

To the following (which affects any child of the list element):

#choices li > *
#choices li > *:hover

The above

And the markup:

<ul id="choices">
	<li>[[Choice 01]]</li>
	<li>[[Choice 02]]</li>
	<li>[Here, I'll type it for you: <input> <button>Next</button>]{#nameinput}<% textBox("#nameinput", "name_player", "Next") %></li>
</ul>