Disguising Buttons as Links [Snowman 1.2]
I'm attempting to style a button in a way that resembles my story's passage links. It's attached to an alert notice that prevents the player from proceeding until the textbox is filled out, and also sets a story state variable when clicked.
I could make use of story states to save the textbox input, but with those alone, I'd lose the alert notice. And I'd prefer not to use Twine's standard button to set the story state variable, as it doesn't match the game's aesthetic. So, I'm in need of a workaround in order to use both the stylized links and the variable/alert button. (Hence the inconspicuous post title, disguising buttons as links.)
Here is an example of what I'd like to do, and the scripts I'm currently using.
TheMadExile was kind enough to provide both the StoryState/Alert Button and the script for Stylized Links depicted above. Please, give them credit if you use the code for your own work.
Stylized Links (StyleSheet)
Stylized Links (Passage Code)
StoryState/Alert Button (JavaScript)
StoryState/Alert Button (Passage Code)
I'd greatly appreciate any help offered with this. It's the second to last function I'll need for my Twine game.
I could make use of story states to save the textbox input, but with those alone, I'd lose the alert notice. And I'd prefer not to use Twine's standard button to set the story state variable, as it doesn't match the game's aesthetic. So, I'm in need of a workaround in order to use both the stylized links and the variable/alert button. (Hence the inconspicuous post title, disguising buttons as links.)
Here is an example of what I'd like to do, and the scripts I'm currently using.
TheMadExile was kind enough to provide both the StoryState/Alert Button and the script for Stylized Links depicted above. Please, give them credit if you use the code for your own work.
Stylized Links (StyleSheet)
/*choice button*/ #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; }
Stylized Links (Passage Code)
<ul id="choices"> <li>[[This is the link to the next passage.]]</li> </ul>
StoryState/Alert Button (JavaScript)
function wordWrap(str, maxWidth) {
var newLineStr = "\n"; done = false; res = '';
do {
found = false;
// Inserts new line at first whitespace of the line
for (i = maxWidth - 1; i >= 0; i--) {
if (testWhite(str.charAt(i))) {
res = res + [str.slice(0, i), newLineStr].join('');
str = str.slice(i + 1);
found = true;
break;
}
}
// Inserts new line at maxWidth position, the word is too long to wrap
if (!found) {
res += [str.slice(0, maxWidth), newLineStr].join('');
str = str.slice(maxWidth);
}
if (str.length < maxWidth)
done = true;
} while (!done);
return res;
}
function testWhite(x) {
var white = new RegExp(/^\s$/);
return white.test(x.charAt(0));
};
/*
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.");
}
});
});
};
StoryState/Alert Button (Passage Code)
What is your first name?
[
<input>
<button>Next</button>
]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>
I'd greatly appreciate any help offered with this. It's the second to last function I'll need for my Twine game.
Comments
In the original code, I've found an issue with decoupling the text box from the button. They cannot be separated by any other text or code. For example, I can't use it mid sentence. I'll try to illustrate the problem below.
It has to look like this
----- "What do I call you?" she asked "You can call me ," I replied ----- [ <input> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %> -----And cannot be used like this
----- "What do I call you?" she asked "You can call me {#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>," I replied ----- [ <input> <button>Next</button> ] -----Although, it's very likely that this is only because of my poor code experience.
[ ...... ]{#nameinput}You can add other items inside the #nameinput element yourself, like so:[ Here is some text<br> <input> <br>Here is some more text<br> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>˅
˄
[ -----<br> <br>"What do I call you?" she asked<br> <br>"You can call me <input>," I replied<br> <br>-----<br> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %> -----The following example shows that using Sub-heading Markdown within one of Snowman 2's generated div elements does not work:
Sub-header outside generated div ----- [ Sub-header inside generated div ----- ]{#the-divs-id}... this may be a bug in which case you may want to create an issue on the Snowman 2 project website.You can use HTML to create Heading and Sub-heading:
To create a horizontal rule with a line of hyphens (of which you need three or more) you must leave a blank line between the line of hyphens and any text. For example, the following markup: Becomes: Alternatively, you may also simply use the <hr> tag directly.
Beyond the basic confusion about lines of hyphens, there does seem to be an issue if you try to nest a line of hyphens (to create an <hr>) within other markup. It's probably related to the nested sub-heading issue noted by greyelf (since they both use lines of hyphens). Might be a issue worth reporting on Snowman's issue tracker.
An easy way around the issue is to use the <hr> tag directly. For example, instead of the following:
[ -----<br> <br>"What do I call you?" she asked<br> <br>"You can call me <input>," I replied<br> <br>-----<br> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>Use <hr> tags:[ <hr><br> <br>"What do I call you?" she asked<br> <br>"You can call me <input>," I replied<br> <br><hr><br> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %>Here is how the original text/paragraph formatting looks
And this is how the formatting appears with div elements
[ <hr> <br><font size="2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi felis, feugiat a augue ac, posuere volutpat nibh. Cras vel iaculis nulla, sed semper turpis. Aenean et lorem accumsan, finibus libero at, feugiat magna. Morbi posuere elit commodo, placerat velit at, fermentum nulla. Sed in enim viverra, iaculis nunc ut, accumsan orci. Integer vel orci leo. Vivamus arcu magna, pretium eu faucibus a, imperdiet eget ante. Suspendisse quis leo in leo gravida volutpat. Mauris lacus lorem, pretium eget libero ut, lobortis tristique quam.</font><br> <br><font size="2">Integer lobortis diam sed malesuada scelerisque. Nam pretium sollicitudin ex et varius. Proin consequat nunc at mi suscipit, vitae pretium velit bibendum. Aenean feugiat lobortis tincidunt.</font><br> <br><hr> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %> <hr>note: The following needs to be place at the TOP of your Story Stylesheet!
If you look at the HTML being generated by Snowman 2 you will notice that it generally wraps text that ends with two or more line-breaks using a p (paragraph) element:
eg. ... becomes: note: I say generally because it does not happen within div's created using [ ... ]{..} syntax.
If you manually do the same with the text you place within your [ ... ]{#nameinput} you will be able to style it using CSS. So if I change your example to the following:
[ <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi felis, feugiat a augue ac, posuere volutpat nibh. Cras vel iaculis nulla, sed semper turpis. Aenean et lorem accumsan, finibus libero at, feugiat magna. Morbi posuere elit commodo, placerat velit at, fermentum nulla. Sed in enim viverra, iaculis nunc ut, accumsan orci. Integer vel orci leo. Vivamus arcu magna, pretium eu faucibus a, imperdiet eget ante. Suspendisse quis leo in leo gravida volutpat. Mauris lacus lorem, pretium eget libero ut, lobortis tristique quam.</p> <p>Integer lobortis diam sed malesuada scelerisque. Nam pretium sollicitudin ex et varius. Proin consequat nunc at mi suscipit, vitae pretium velit bibendum. Aenean feugiat lobortis tincidunt.</p> <hr> <button>Next</button> ]{#nameinput}<% textBox("#nameinput", "name_player", "Next Passage") %> <hr>... You can now style the above paragraphs using the following: note: If you want to style all paragraphs (including the ones generated by Snowman 2) then change the above CSS selector from #nameinput p to #passage pEverything works fine, but there is a size discrepancy between the Choice Button and the Name Input Button. (Shown below via Imgur.) Top button is the Name Input button, second is Choice Button.
I'd like to have the Stylesheet code for the Name Input button resemble the Choice button Stylesheet, but am unsure how to correct this. The Name Input button won't move any further left when I adjust the size, and the Stylesheet code for both buttons differs in how they're built; so it's harder to match their height and width.
Here's the Stylesheet for the Choice Button
And here's the Stylesheet for the Name Input button.
I'd appreciate any help offered on this little problem. Thanks!