Another SugarCube one-passage dialogue example

dialogue2.tw

/* The dialogue setup - typically at the start of the passage */
<<set _dialogue = {
	"": {
		text: "<div>Before you stands a wizard, clad in heavy robes, scarves, and a pointed hat. He gives a cheerful but heavily muffled greeting. <q>Ownt fon?</q> the wizard inquires as he holds out a handful of rings which radiate magical energy.</div><div>Take one?</div>",
		choices: [
			{ text: "One with a shiny jewel on top!", next: "death" },
			{ text: "A band with runes glowing around it!", next: "runes" },
			{ text: "Mom told me not to accept strange items from people I don't know&hellip;", next: "death"},
			{ text: "Go away.", next: "death", filter: "$day != 7" }
		]},
	"runes": {
		text: "<div><q>A fifve foil</q> the wizard responds as he starts watching you closely.</div><div>The ring starts to glow brighter as it sits in your hand, and hum softly with arcane power.</div>",
		choices: [
			{ text: "Drop it like it's hot!", next: "death" },
			{ text: "<q>So how do I use this thing?</q>", next: "death" },
			{ text: "Put it on!", next: "mistake" }
		]},
	"mistake": {
		text: "<div>Your mistake quickly becomes apparent. As the ring slips past your knuckles a burning rock falls from the sky, striking you down where you stand. Perhaps it was a ring of wishes&hellip; or just a ring of improbable luck.</div>",
		choices: [
			{ text: "ded", next: "death" }
		]},
	"death": {
		text: "You're death. Game over man, game over.",
		choices: [
			{ text: "Try again.", click: "<<goto `passage()`>>" }
		]
	}
}>>
<<set _dialogueIdx = "">>

/* Some minimal styling - put it into the story stylesheet without the <style> tags, generally */
<style>
#dialoguebox > div {
	padding: 0.5em 0;
}
div.choice {
	font-weight: bold;
}
ul.choices {
	list-style: none;
}
q {
  quotes: "“" "”" "‘" "’";
}
</style>

/* This needs to go in a widget passage */
<<widget "dialogueLink">><<nobr>>
	<<capture _text, _next>> /* make them local variables */
		<<set _text = $args[0]>>
		<<set _next = $args[1]>>
		<<set _click = $args[2]>>
		<<link _text>>
			<<remove "ul.choices">>
			<<append "#dialoguebox">><div class="choice"><<= _text>></div><</append>>
			<<if _next>>
				<<set _dialogueIdx = _next>>
				<<updateDialogue>>
			<</if>>
			<<if _click>>
				/* run what's there */
				<<= _click>>
			<</if>>
		<</link>>
	<</capture>>
<</nobr>><</widget>>
<<widget "updateDialogue">><<silently>>
	<<timed 0s>>
		<<set _current = _dialogue[_dialogueIdx]>>
		<<if !_current>>
			/* Display some error */
		<<else>>
			<<if _current.text>><<append "#dialoguebox">><<= _current.text>><</append>><</if>>
			<<if _current.choices>><<append "#dialoguebox">><<nobr>><ul class="choices">
				<<for _choice range _current.choices>>
					<<if _choice.filter>>
						<<capture _filter>> /* make _filter a local variable */
							<<run jQuery.wiki("<<set _filter = !!(" + _choice.filter + ")>>")>>
							<<if _filter>>
								<<continue>> /* don't create this link */
							<</if>>
						<</capture>>
					<</if>>
					<li><<dialogueLink _choice.text _choice.next _choice.click>></li>
				<</for>>
			</ul><</nobr>><</append>><</if>>
		<</if>>
	<</timed>>
<</silently>><</widget>>
<<widget "showDialogue">><<nobr>>
	<div id="dialoguebox">
	</div>
	<<updateDialogue>>
<</nobr>><</widget>>

/* this goes into the passage again, at the place where the dialogue is shown */
<<showDialogue>>