Organise the JS menus/buttons bar more like a menu.

I'm about to introduce a few more options, and the button bar is
already a bit wide, so I think I should shrink it horizontally before
putting more stuff on it. So I've organised the options into something
more like the Game and Type submenus that the desktop versions use.

However, I haven't gone quite all the way, on the basis that the web
versions will be at least slightly playable on devices without much
keyboard, which makes it worth keeping the in-play actions (Undo,
Redo, and to a lesser extent Restart and Solve) accessible as
top-level buttons in a single click each.

As part of this change, I've also separated the menu bar into a
drop-down menus section and a top-level buttons section with a gap
between them, and put a signalling "..." on the end of the titles in
the former section.

This change also removes the class="left" on the game-type menu and
its submenus, which were previously there to deal with that menu being
all the way over on the far right of the menu bar. But the CSS for
those classes is still there in jspage.pl, and should still work if I
need it again in future.

diff --git a/emcclib.js b/emcclib.js
index cd8876e76d8ab349657d38ad3b338f04c83c966f..3f51df4eded89e175c4ae7f31984b929d105c268 100644 (file)
--- a/emcclib.js
+++ b/emcclib.js
@@ -108,7 +108,6 @@ mergeInto(LibraryManager.library, {
         item.appendChild(tick);
         item.appendChild(document.createTextNode(name));
         var submenu = document.createElement("ul");
-        submenu.className = "left";
         item.appendChild(submenu);
         gametypesubmenus[menuid].appendChild(item);
         var toret = gametypesubmenus.length;

diff --git a/html/jspage.pl b/html/jspage.pl
index a21f977166b9560e23f6350d849e82590d0fb9fb..f828ffe9f11fbaa64d1e4fa5c4ae11194fb777ea 100755 (executable)
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -103,6 +103,15 @@ EOF
     color: rgba(0,0,0,0.5);
 }
 
+#gamemenu ul li.separator {
+    color: transparent;
+    border: 0;
+}
+
+#gamemenu ul li.afterseparator {
+    border-left: 1px solid rgba(0,0,0,0.3);
+}
+
 #gamemenu ul li:first-of-type {
     /* Reinstate the left border for the leftmost top-level menu item */
     border-left: 1px solid rgba(0,0,0,0.3);
@@ -196,14 +205,17 @@ ${unfinishedpara}
 
 <hr>
 <div id="puzzle" style="display: none">
-<div id="gamemenu"><ul><li id="new">New game</li
-><li id="restart">Restart game</li
+<div id="gamemenu"><ul><li>Game...<ul
+><li id="new">New game</li
+><li id="specific">Enter game ID</li
+><li id="random">Enter random seed</li
+></ul></li
+><li>Type...<ul id="gametype"></ul></li
+><li class="separator"></li
+><li id="restart" class="afterseparator">Restart game</li
 ><li id="undo">Undo move</li
 ><li id="redo">Redo move</li
 ><li id="solve">Solve game</li
-><li id="specific">Enter game ID</li
-><li id="random">Enter random seed</li
-><li>Select game type<ul id="gametype" class="left"></ul></li
 ></ul></div>
 <div align=center>
   <div id="resizable" style="position:relative; left:0; top:0">