Try to give a more friendly message if anything goes wrong during

puzzle startup. The puzzle web pages now enclose the whole puzzle
(buttons, canvas, permalinks) in a div set to display:none, and
instead display an apologetic message saying 'sorry, it didn't work';
then, if we get through the whole init function without crashing, we
show the puzzle and hide the apology.

[originally from svn r9802]
This commit is contained in:
Simon Tatham
2013-04-03 19:04:00 +00:00
parent bd8c594197
commit a752e73720
2 changed files with 16 additions and 1 deletions

View File

@ -257,9 +257,16 @@ function initPuzzle() {
// Default to giving keyboard focus to the puzzle. // Default to giving keyboard focus to the puzzle.
onscreen_canvas.focus(); onscreen_canvas.focus();
// And run the C setup function, passing argv[1] as the fragment // Run the C setup function, passing argv[1] as the fragment
// identifier (so that permalinks of the form puzzle.html#game-id // identifier (so that permalinks of the form puzzle.html#game-id
// can launch the specified id). // can launch the specified id).
Module.arguments = [location.hash]; Module.arguments = [location.hash];
Module.run(); Module.run();
// And if we get here with everything having gone smoothly, i.e.
// we haven't crashed for one reason or another during setup, then
// it's probably safe to hide the 'sorry, no puzzle here' div and
// show the div containing the actual puzzle.
document.getElementById("apology").style.display = "none";
document.getElementById("puzzle").style.display = "inline";
} }

View File

@ -71,6 +71,7 @@ ${unfinishedheading}
${unfinishedpara} ${unfinishedpara}
<hr> <hr>
<div id="puzzle" style="display: none">
<p align=center> <p align=center>
<input type="button" id="new" value="New game"> <input type="button" id="new" value="New game">
<input type="button" id="restart" value="Restart game"> <input type="button" id="restart" value="Restart game">
@ -98,6 +99,13 @@ ${unfinishedpara}
<a id="permalink-desc">by game ID</a> <a id="permalink-desc">by game ID</a>
<a id="permalink-seed">by random seed</a> <a id="permalink-seed">by random seed</a>
</p> </p>
</div>
<div id="apology">
Sorry, this Javascript puzzle doesn't seem to work on your web
browser. Perhaps you have Javascript disabled, or perhaps your browser
doesn't provide a feature they depend on. These puzzles have been
successfully run in Firefox 19 and Chrome 25.
</div>
<hr> <hr>
${instructions} ${instructions}