html/jspage.pl

   1 #!/usr/bin/perl
   2
   3 use strict;
   4 use warnings;
   5
   6 my $jspath = "";
   7 while ($ARGV[0] =~ /^-/) {
   8     my $opt = shift @ARGV;
   9     last if $opt eq "--";
  10     if ($opt =~ /^--jspath=(.+)$/) {
  11         $jspath = $1;
  12     } else {
  13         die "jspage.pl: unrecognised option '$opt'\n";
  14     }
  15 }
  16
  17 open my $footerfile, "<", shift @ARGV or die "footer: open: $!\n";
  18 my $footer = "";
  19 $footer .= $_ while <$footerfile>;
  20 close $footerfile;
  21
  22 for my $arg (@ARGV) {
  23     $arg =~ /(.*\/)?([^\/]+)\.html$/ or die;
  24     my $filename = $2;
  25     open my $gamefile, "<", $arg or die "$arg: open: $!\n";
  26     my $unfinished = 0;
  27     my $docname = $filename;
  28     chomp(my $puzzlename = <$gamefile>);
  29     while ($puzzlename =~ s/^([^:=]+)(=([^:]+))?://) {
  30         if ($1 eq "unfinished") {
  31             $unfinished = 1;
  32         } elsif ($1 eq "docname") {
  33             $docname = $3;
  34         } else {
  35             die "$arg: unknown keyword '$1'\n";
  36         }
  37     }
  38     my $instructions = "";
  39     $instructions .= $_ while <$gamefile>;
  40     close $gamefile;
  41
  42     open my $outpage, ">", "${filename}.html";
  43
  44     my $unfinishedtitlefragment = $unfinished ? "an unfinished puzzle " : "";
  45     my $unfinishedheading = $unfinished ? "<h2 align=center>an unfinished puzzle</h2>\n" : "";
  46     my $unfinishedpara;
  47     my $links;
  48     if ($unfinished) {
  49         $unfinishedpara = <<EOF;
  50 <p>
  51 You have found your way to a page containing an <em>unfinished</em>
  52 puzzle in my collection, not linked from the <a href="../">main
  53 puzzles page</a>. Don't be surprised if things are hard to understand
  54 or don't work as you expect.
  55 EOF
  56         $links = <<EOF;
  57 <p align="center">
  58 <a href="../">Back to main puzzles page</a> (which does not link to this)
  59 EOF
  60     } else {
  61         $unfinishedpara = "";
  62         $links = <<EOF;
  63 <p align="center">
  64 <a href="../doc/${docname}.html#${docname}">Full instructions</a>
  65 |
  66 <a href="../">Back to main puzzles page</a>
  67 EOF
  68     }
  69
  70     print $outpage <<EOF;
  71 <!DOCTYPE html>
  72 <html>
  73 <head>
  74 <meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
  75 <title>${puzzlename}, ${unfinishedtitlefragment}from Simon Tatham's Portable Puzzle Collection</title>
  76 <script type="text/javascript" src="${jspath}${filename}.js"></script>
  77 <style class="text/css">
  78 /* Margins and centring on the top-level div for the game menu */
  79 #gamemenu { margin-top: 0; margin-bottom: 0.5em; text-align: center }
  80
  81 /* Inside that div, the main menu bar and every submenu inside it is a <ul> */
  82 #gamemenu ul {
  83     list-style: none;  /* get rid of the normal unordered-list bullets */
  84     display: inline;   /* make top-level menu bar items appear side by side */
  85     position: relative; /* allow submenus to position themselves near parent */
  86     margin: 0;
  87     margin-bottom: 0.5em;
  88     padding: 0;
  89 }
  90
  91 /* Individual menu items are <li> elements within such a <ul> */
  92 #gamemenu ul li {
  93     /* Add a little mild text formatting */
  94     font-weight: bold; font-size: 0.8em;
  95     /* Line height and padding appropriate to top-level menu items */
  96     padding-left: 0.75em; padding-right: 0.75em;
  97     padding-top: 0.2em; padding-bottom: 0.2em;
  98     margin: 0;
  99     /* Make top-level menu items appear side by side, not vertically stacked */
 100     display: inline;
 101     /* Suppress the text-selection I-beam pointer */
 102     cursor: default;
 103     /* Surround each menu item with a border. The left border is removed
 104      * because it will abut the right border of the previous item. (A rule
 105      * below will reinstate the left border for the leftmost menu item.) */
 106     border-left: 0;
 107     border-right: 1px solid rgba(0,0,0,0.3);
 108     border-top: 1px solid rgba(0,0,0,0.3);
 109     border-bottom: 1px solid rgba(0,0,0,0.3);
 110 }
 111
 112 #gamemenu ul li.disabled {
 113     /* Grey out menu items with the "disabled" class */
 114     color: rgba(0,0,0,0.5);
 115 }
 116
 117 #gamemenu ul li.separator {
 118     color: transparent;
 119     border: 0;
 120 }
 121
 122 #gamemenu ul li.afterseparator {
 123     border-left: 1px solid rgba(0,0,0,0.3);
 124 }
 125
 126 #gamemenu ul li:first-of-type {
 127     /* Reinstate the left border for the leftmost top-level menu item */
 128     border-left: 1px solid rgba(0,0,0,0.3);
 129 }
 130
 131 #gamemenu ul li:hover {
 132     /* When the mouse is over a menu item, highlight it */
 133     background: rgba(0,0,0,0.3);
 134     /* Set position:relative, so that if this item has a submenu it can
 135      * position itself relative to the parent item. */
 136     position: relative;
 137 }
 138
 139 #gamemenu ul li.disabled:hover {
 140     /* Disabled menu items don't get a highlight on mouse hover */
 141     background: inherit;
 142 }
 143
 144 #gamemenu ul ul {
 145     /* Second-level menus and below are not displayed by default */
 146     display: none;
 147     /* When they are displayed, they are positioned immediately below
 148      * their parent <li>, and with the left edge aligning */
 149     position: absolute;
 150     top: 100%;
 151     left: 0;
 152     /* We must specify an explicit background colour for submenus, because
 153      * they must be opaque (don't want other page contents showing through
 154      * them). */
 155     background: white;
 156     /* And make sure they appear in front. */
 157     z-index: 1;
 158 }
 159
 160 #gamemenu ul ul.left {
 161     /* A second-level menu with class "left" aligns its right edge with
 162      * its parent, rather than its left edge */
 163     left: inherit; right: 0;
 164 }
 165
 166 /* Menu items in second-level menus and below */
 167 #gamemenu ul ul li {
 168     /* Go back to vertical stacking, for drop-down submenus */
 169     display: block;
 170     /* Inhibit wrapping, so the submenu will expand its width as needed. */
 171     white-space: nowrap;
 172     /* Override the text-align:center from above */
 173     text-align: left;
 174     /* Don't make the text any smaller than the previous level of menu */
 175     font-size: 100%;
 176     /* This time it's the top border that we omit on all but the first
 177      * element in the submenu, since now they're vertically stacked */
 178     border-left: 1px solid rgba(0,0,0,0.3);
 179     border-right: 1px solid rgba(0,0,0,0.3);
 180     border-top: 0;
 181     border-bottom: 1px solid rgba(0,0,0,0.3);
 182 }
 183
 184 #gamemenu ul ul li:first-of-type {
 185     /* Reinstate top border for first item in a submenu */
 186     border-top: 1px solid rgba(0,0,0,0.3);
 187 }
 188
 189 #gamemenu ul ul ul {
 190     /* Third-level submenus are drawn to the side of their parent menu
 191      * item, not below it */
 192     top: 0; left: 100%;
 193 }
 194
 195 #gamemenu ul ul ul.left {
 196     /* A submenu with class "left" goes to the left of its parent,
 197      * not the right */
 198     left: inherit; right: 100%;
 199 }
 200
 201 #gamemenu ul li:hover > ul {
 202     /* Last but by no means least, the all-important line that makes
 203      * submenus be displayed! Any <ul> whose parent <li> is being
 204      * hovered over gets display:block overriding the display:none
 205      * from above. */
 206     display: block;
 207 }
 208 </style>
 209 </head>
 210 <body onLoad="initPuzzle();">
 211 <h1 align=center>${puzzlename}</h1>
 212 ${unfinishedheading}
 213 <h2 align=center>from Simon Tatham's Portable Puzzle Collection</h2>
 214
 215 ${unfinishedpara}
 216
 217 <hr>
 218 <div id="puzzle" style="display: none">
 219 <div id="gamemenu"><ul><li>Game...<ul
 220 ><li id="specific">Enter game ID</li
 221 ><li id="random">Enter random seed</li
 222 ><li id="save">Download save file</li
 223 ><li id="load">Upload save file</li
 224 ></ul></li
 225 ><li>Type...<ul id="gametype"></ul></li
 226 ><li class="separator"></li
 227 ><li id="new" class="afterseparator">New game</li
 228 ><li id="restart">Restart game</li
 229 ><li id="undo">Undo move</li
 230 ><li id="redo">Redo move</li
 231 ><li id="solve">Solve game</li
 232 ></ul></div>
 233 <div align=center>
 234   <div id="resizable" style="position:relative; left:0; top:0">
 235   <canvas style="display: block" id="puzzlecanvas" width="1px" height="1px" tabindex="1">
 236   </canvas>
 237   <div id="statusbarholder" style="display: block">
 238   </div>
 239   </div>
 240   <p>
 241     Link to this puzzle:
 242     <a id="permalink-desc">by game ID</a>
 243     <a id="permalink-seed">by random seed</a>
 244   </p>
 245 </div>
 246 </div>
 247 <div id="apology">
 248 Sorry, this Javascript puzzle doesn't seem to work in your web
 249 browser. Perhaps you have Javascript disabled, or perhaps your browser
 250 doesn't provide a feature that the puzzle code requires (such as
 251 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>).
 252 These puzzles have been successfully run in Firefox 19, Chrome 26,
 253 Internet Explorer 10 and Safari 6.
 254 </div>
 255 <hr>
 256
 257 ${instructions}
 258
 259 ${links}
 260
 261 ${footer}
 262 </body>
 263 </html>
 264 EOF
 265
 266     close $outpage;
 267 }