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.

2 files changed, 20 insertions, 7 deletions

diff --git a/emcc.c b/emcc.c
index 453637b..38864b9 100644
--- a/emcc.c
+++ b/emcc.c
@@ -975,7 +975,7 @@ int main(int argc, char **argv)
         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;
 
diff --git a/html/jspage.pl b/html/jspage.pl
index 03e8695..f5b1952 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -228,6 +228,19 @@ EOF
     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 @@ ${unfinishedpara}
 <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>