From 8f40128f0863b4bc34ed7e2f271374134b0336b9 Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sat, 12 Nov 2022 11:22:59 +0000
Subject: [PATCH] js: Prettify menu HTML

Now that we're using flex layout, whitespace in the menu isn't scary and
we can use it to make the HTML readable.

Also finally remove the "afterseparator" class that's long obsolete.
You can always use ".separator + *" as a selector instead.
---
 html/jspage.pl | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/html/jspage.pl b/html/jspage.pl
index 91021d4..4866308 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -305,20 +305,31 @@ ${unfinishedpara}
 
 <hr>
 <div id="puzzle" style="display: none">
-<form id="gamemenu"><ul><li><div>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>Type...<ul id="gametype"></ul></div></li
-><li class="separator"></li
-><li class="afterseparator"><button type="button" id="new">New<span class="verbiage"> game</span></button></li
-><li><button type="button" id="restart">Restart<span class="verbiage"> game</span></button></li
-><li><button type="button" id="undo">Undo<span class="verbiage"> move</span></button></li
-><li><button type="button" id="redo">Redo<span class="verbiage"> move</span></button></li
-><li><button type="button" id="solve">Solve<span class="verbiage"> game</span></button></li
-></ul></form>
+<form id="gamemenu"><ul>
+  <li><div>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>Type...<ul id="gametype"></ul></div></li>
+  <li class="separator"></li>
+  <li><button type="button" id="new">
+    New<span class="verbiage"> game</span>
+  </button></li>
+  <li><button type="button" id="restart">
+    Restart<span class="verbiage"> game</span>
+  </button></li>
+  <li><button type="button" id="undo">
+    Undo<span class="verbiage"> move</span>
+  </button></li>
+  <li><button type="button" id="redo">
+    Redo<span class="verbiage"> move</span>
+  </button></li>
+  <li><button type="button" id="solve">
+    Solve<span class="verbiage"> game</span>
+  </button></li>
+</ul></form>
 <div align=center>
   <div id="resizable">
   <canvas id="puzzlecanvas" width="1px" height="1px" tabindex="1">