Custom Alert

JS.showPopup ("WELCOME","<center><h1>Welcome to the game!</h1><br/>You can enter <strong>"+CommandLinkPopup("help","HELP")+"</strong> at any time!</center>")


The Quest function:

  <function name="CommandLinkPopup" parameters="cmd, text" type="string"><![CDATA[
    return ("<a onclick=\"$('#msgbox').dialog('close');\" style='font-family:"+game.defaultfont+";color:"+game.defaultlinkforeground+";font-size:"+game.defaultfontsize+";' class='cmdlink commandlink' data-elementid='"+LCase(cmd)+"' data-command='"+text+"'>"+text+"</a>")
  ]]></function>

The JS:

javascript.js

function showPopup(title,text) {
    $('#msgboxCaption').html(text);

    var msgboxOptions = {
        modal: true,
        autoOpen: false,
        title: title,
        //width: $(window).width(),
        //height: $(window).height(),
        buttons: [
            {
                text: 'OK',
                click: function () { $(this).dialog('close'); }
            },
        ],
        closeOnEscape: false,
    };

    $('#msgbox').dialog(msgboxOptions);
    $('#msgbox').dialog('open');
};


<!--Saved by Quest 5.7.6610.35214-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Example Game 42">
    <gameid>5dbf4e28-8f3f-4046-9098-7375a5ef619c</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <attr name="js_script" type="string"></attr>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <enter type="script"><![CDATA[
      JS.showPopup ("WELCOME", "<center><h1>Welcome to the game!</h1><br/>You can enter <strong>"+CommandLinkPopup("help","HELP")+"</strong> at any time!</center>")
    ]]></enter>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <function name="CommandLinkPopup" parameters="cmd, text" type="string"><![CDATA[
    return ("<a onclick=\"$('#msgbox').dialog('close');\" style='font-family:"+game.defaultfont+";color:"+game.defaultlinkforeground+";font-size:"+game.defaultfontsize+";' class='cmdlink commandlink' data-elementid='"+LCase(cmd)+"' data-command='"+text+"'>"+text+"</a>")
  ]]></function>
  <javascript src="javascript.js" />
</asl>

Also, I have the width and height commented out in the JS code. If you uncomment those, it will fill the entire window.


You can put images in there, too.

JS.showPopup ("GAME OVER", ProcessText("<center><h1>YOU HAVE DIED!</h1><br/>Thanks for playing!<br/><img src='https://i.imgur.com/mBf7TBeb.png'/></center>"))

You can do a very simple pop-up like this:

JS.alert("This is an alert!")

Or do complex dialogue panels the player can interact with:
https://github.com/ThePix/quest/wiki/Advanced-UI-Part-04:-Dialogue-Panels


Wow!

I didn't make it to Advanced UI Part 4 yet, but it looks fun!


...and yeah...

That sad, old JS.alert() is what made me want to make an easy way to do it. (I tried to alter the way ask or show menu displayed at first, but I gave up on that. Those scripts... I need to learn their inner-workings!)

JS.alert("This is a weak alert.")

image

If it just displayed the game's name (instead of res://local) when playing on the desktop version, it wouldn't bother me.


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums