-
-
Save Akjosch/e9eba7878e8d16451ce9033a7087a190 to your computer and use it in GitHub Desktop.
:: 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>> |
Is it possible to remove the white line that separates the actor name from the text?
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 add border-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 #dialogbox
part itself.
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
Hey there,
I tried by myself but couldn't do it. Is it possible to remove the white line that separates the actor name from the text?