shithub: puzzles

Info  •  Files  •  Log  •  Branches

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.

--- a/emcclib.js

+++ b/emcclib.js

@@ -108,7 +108,6 @@

         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;

--- a/html/jspage.pl

+++ b/html/jspage.pl

@@ -103,6 +103,15 @@

     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 @@

 <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">