html/jspage.pl

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