So there was a thread created about this previously located here, but it was never concluded.
It is basically asking how to remove the title from the alert box on the javascript alert box. Now, I know this can't be done, but it looks like there's a possibility that a custom alert box could be implemented instead but unfortunately I am not familiar with javascript, and what I've tried so far hasn't worked.
First I downloaded a jquery plugin from here:
I copied the .css and alerts.js file into the directory that my game is saved in, and tried to call it using jalert instead of alert. This doesn't work (no pop up shows, and link deactivates). So I'm not sure what I need to do - possibly get the game to recognise the jalert function?
Second, I tried the code suggested here.
I loaded the script into a master passage like this:
[[]]:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
and have my passage set up like this:
[alertpassage]:
<div id="dialog" title="Basic dialog">
<p>Some Text/p>
</div>
but then my game won't even run, so I'm definitely doing something wrong!
Any pointers would be much appreciated, please excuse my ignorance!
As far as I can tell, we have to edit the index.html file after building the game.
Here is my example html file (version 2):
<!DOCTYPE html>
<html>
<!--
Created with Squiffy 5.1.3
https://github.com/textadventures/squiffy
-->
<head>
<title>Testing jQuery-ui</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="story.js" charset="UTF-8"></script>
<!-- ADDED THE NEXT 2 LINES -->
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<!-- END OF ADDITION -->
<script>
jQuery(function($){
$('#squiffy').squiffy();
var restart = function () {
$('#squiffy').squiffy('restart');
};
$('#restart').click(restart);
$('#restart').keypress(function (e) {
if (e.which !== 13) return;
restart();
});
});
</script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="squiffy-container">
<div id="squiffy-header">
<a class="squiffy-header-link" id="restart" tabindex="0">Restart</a>
</div>
<div id="squiffy">
</div>
</div>
</body>
</html>
Here is my game's code:
$ = jQuery;
$( function() {
$( "#dialog" ).dialog();
$("#dialog").dialog("close");
} );
@title Testing jQuery-ui
<div id="dialog" title="Basic dialog" >
</div>
You can make the dialog popup read [[Hello world!]] or [[Squiffy rocks!]].
[[Hello world!]]:
$("#dialog").dialog("open");
$("#dialog").html("Hello, world!");
[[Squiffy rocks!]]:
$("#dialog").html("Squiffy rocks!").dialog("open");
NOTE: I just revised the code in my last post.
ALSO NOTE: I make a copy of index.html with my revisions included. Every time I build the game, I have to replace the newly created index.html with my revised version. This is because Squiffy overwrites index.html each time we click 'Build'>
AND:
Here are the contents of my squiffy_games directory:
'jQuery-ui_Tester.sq' jquery-3.4.1.min.js story.js
'index (copy).html' jquery.min.js style.css
index.html jquery-ui-1.12.1.custom Stylish-Regular.ttf
I added the directory jquery-ui-1.12.1.custom to that directory. It is the directory I unzipped after downloading jQuery-UI.
Final note (for now):
With this setup, we can no longer test the game from within Squiffy. The only way everything works is when we build the game, replace the index.html file with the revised version, then open that file in our browser.
Thanks so much for the pointers. In the end I managed to get it working using sweetalert2.
The method I used was as followed:
Dowloaded files and extracted required files into the games directory: those being sweetalert2.all.min.js,sweetalert2.min.js and sweetalert2.min.css.
Amended the index.html to include the necessary lines of code:
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="story.js" charset="UTF-8"></script>
<!-- CODE ADDED FOR CUSTOM POP UPS (Sweet Alert 2)-->
<script src="sweetalert2.all.min.js"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">
<!-- END OF CODE ADDED FOR CUSTOM POP UPS (Sweet Alert 2)-->
<script>
jQuery(function($){
$('#squiffy').squiffy();
var restart = function () {
$('#squiffy').squiffy('restart');
};
$('#restart').click(restart);
$('#restart').keypress(function (e) {
if (e.which !== 13) return;
restart();
});
});
</script>
<link rel="stylesheet" href="style.css"/>
</head>
In game, I call the custom pop up as follows:
[Pop up]:
swal.fire("Some text.")
You can also do things like:
[booze]:
Swal.fire({
text: "No confirmation button.",
showConfirmButton: false
})
This produces a pop up without a confirmation button (which disappears when you click on the area).
You're right about this only being shown in the index.html, so not during testing. I think you can amend the squiffy index template though, to include the required lines of code so that each time you 'rebuild' the file you don't lose the changes, as discussed here.
I will check out your solution though, I was working on this one before I saw your post, but do appreciate you taking the time to reply it.