shithub: puzzles

Download patch

ref: 271fb7f47c060bf7ebb34e3cb71fc1b47aa23723
parent: fe29d1cbf559d7916c43cd8d5fddd17ca08cfa7e
author: Ben Harris <bjh21@bjh21.me.uk>
date: Thu Nov 24 11:13:57 EST 2022 

js: More conventional marking of menu item types

Menu items that open dialogue boxes are now marked with ellipses, while
menu items that lead to submenus have pointing triangles.

The triangles are implemented as SVG files embedded in data: URLs in the
CSS, which is kind of silly but also works really well.  There are
suitable characters in Unicode, but some of my test systems don't have
fonts containing them, so maybe the SVG is better.


--- a/emcc.c
+++ b/emcc.c
@@ -975,7 +975,7 @@
         populate_js_preset_menu(0, menu);
 
         if (thegame.can_configure)
-            js_add_preset(0, "Custom", -1);
+            js_add_preset(0, "Custom...", -1);
 
         have_presets_dropdown = npresets > 0 || thegame.can_configure;
 
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -228,6 +228,19 @@
     color: transparent;
 }
 
+#gamemenu li > div:after {
+    /* Downward arrow for submenu headings at the top level. */
+    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,5,10,5,5,10'/%3E%3C/svg%3E");
+    margin-left: 0.5em;
+}
+
+#gamemenu li li > div:after {
+    /* Rightward arrow marker for submenus on lower-level menus. */
+    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,0,10,5,0,10'/%3E%3C/svg%3E");
+    float: right;
+}
+
+
 #statusbar {
     overflow: hidden;
     height: 1.2em;
@@ -307,13 +320,13 @@
 <hr>
 <div id="puzzle" style="display: none">
 <form id="gamemenu"><ul>
-  <li><div tabindex="0">Game...<ul>
-    <li><button type="button" id="specific">Enter game ID</button></li>
-    <li><button type="button" id="random">Enter random seed</button></li>
-    <li><button type="button" id="save">Download save file</button></li>
-    <li><button type="button" id="load">Upload save file</button></li>
+  <li><div tabindex="0">Game<ul>
+    <li><button type="button" id="specific">Enter game ID...</button></li>
+    <li><button type="button" id="random">Enter random seed...</button></li>
+    <li><button type="button" id="save">Download save file...</button></li>
+    <li><button type="button" id="load">Upload save file...</button></li>
   </ul></div></li>
-  <li><div tabindex="0">Type...<ul role="menu" id="gametype"></ul></div></li>
+  <li><div tabindex="0">Type<ul role="menu" id="gametype"></ul></div></li>
   <li role="separator"></li>
   <li><button type="button" id="new">
     New<span class="verbiage"> game</span>