Last active
July 9, 2021 09:56
-
-
Save Akjosch/e9eba7878e8d16451ce9033a7087a190 to your computer and use it in GitHub Desktop.
Simple one-passage VN-like message box for Twine/SugarCube 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :: Dialogue | |
| /* dialogue variables - typically something you pass to the initial widget instead of setting them globally */ | |
| <<set _dialog = [ | |
| { actor: "A female", text: "Hi!", enter: "<<set $in_dialog = true>>" }, | |
| { text: "Fancy seeing you here ..."}, | |
| { text: "So, do you like my new shoes?", exit: "<<set $in_dialog = false>><<goto 'Next Passage'>>" } | |
| ]>> | |
| <<set _dialogIdx = -1>> | |
| /* the widgets would typically go into their own widget passage */ | |
| <<widget "actorName">><<silently>> | |
| <<set _name = String($args[0] || "")>> | |
| <<replace "#actorname">>_name<</replace>> | |
| <</silently>><</widget>> | |
| <<widget "actorSay">><<silently>> | |
| <<set _text = String($args[0])>> | |
| <<replace "#actortext">><<= _text>><</replace>> | |
| <</silently>><</widget>> | |
| <<widget "updateDialog">><<silently>> | |
| <<set _previous = _dialog[_dialogIdx]>> | |
| <<set _dialogIdx += 1>> | |
| <<if _previous && _previous.exit>><<= _previous.exit>><</if>> | |
| <<timed 0s>> | |
| <<set _current = _dialog[_dialogIdx]>> | |
| <<if !_current>> | |
| <<run jQuery("#dialogbox").animate({height: "0", padding: "0 1em"}, 300, function() { jQuery(this).hide(); })>> | |
| <<else>> | |
| <<if _current.enter>><<= _current.enter>><</if>> | |
| <<if _current.actor>><<actorName _current.actor>><</if>> | |
| <<if _current.text>><<actorSay _current.text>><</if>> | |
| <</if>> | |
| <</timed>> | |
| <</silently>><</widget>> | |
| <<widget "showDialog">><<nobr>> | |
| <div id="dialogbox" style="position: relative; padding: 0 1em; border: 2px solid white; border-radius: 1em; height: 0; overflow: hidden; box-sizing: border-box;"><span id="actorname"></span> | |
| <hr> | |
| <div id="actortext"></div> | |
| <div style="position: absolute; right: 1em; bottom: 1em;"><<button "">><<updateDialog>><</button>></div> | |
| </div> | |
| <<timed 0s>><<run jQuery("#dialogbox").animate({height: "10em", padding: "1em 1em"})>><<updateDialog>><</timed>> | |
| <</nobr>><</widget>> | |
| <<showDialog>> |
Thanks for your reply. Unfortunately, changing that particular part only altered the border around the message box, and not the horizontal line that divides the message box into two areas, actor name and text. I might be doing something wrong as I'm very inexperienced with css.
Figured it out! It was the <hr> line that was in place! Thanks for your help tho, it got me to use the inspector and to go look for the issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since this is more of a quick example and not a "proper" implementation, the styling is very much inline. In this case, in line 36: https://gist.github.com/Akjosch/e9eba7878e8d16451ce9033a7087a190#file-dialogue-tw-L36
You can change the
border: 2px solid white; border-radius: 1em;part to suit whatever you needs are. For example, you could addborder-bottom: 0;to the style afterwards.For a "proper" implementation, make sure to put styles into the game's CSS section and use CSS classes, or style the
#dialogboxpart itself.