From 94251b28deb663f0d2ce4a6ae0dfee23d5489a90 Mon Sep 17 00:00:00 2001
From: Roy <rvlunsen@mail.1011105.xyz>
Date: Wed, 10 May 2023 03:53:33 +0200
Subject: [PATCH] Maak het schaakveld geschikt voor mobiele apparaten, bewerk
 de CSS menubar van het schaakspel en voeg comments toe.

---
 chess_gui/public/css/index.css | 146 ++++++++++++++++++++-------------
 chess_gui/public/js/head.js    |   1 +
 chess_gui/views/index.html     |  26 +++---
 3 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/chess_gui/public/css/index.css b/chess_gui/public/css/index.css
index 8da0a54..5154ad6 100644
--- a/chess_gui/public/css/index.css
+++ b/chess_gui/public/css/index.css
@@ -1,87 +1,64 @@
 /* (C) Roy van Lunsen */
 
-a {
-    display: block;
-    text-decoration: none;
-    outline-style: solid;
-    color: white;
-    background-image: url(i/tem.png);
+section {
+    max-width: max-content;
 }
 
-ol > li li {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
+* {
+    box-sizing: border-box;
 }
 
+/* Chess board START */
+
 #y-co {
     display: flex;
     flex-flow: column-reverse; /* Order depends on player side #1/3 */
-    width: max-content;
+    padding-left: 24px;
 }
 
 .x-row {
     display: flex;
     flex-flow: row; /* Order depends on player side #2/3 */
+    padding-left: 32px;
 }
 
-#x-co {
-    display: inline-flex;
-    flex-flow: row;
-    width: max-content;
-    margin-top: 32px;
+#y-co > li:hover {
+    background-color: green;
 }
 
-.x-co {
-    display: inline-block;
+#x-co {
+    display: flex;
+    padding-top: 1em;
+    margin: 0;
+    padding-left: 56px;
+    flex-flow: row nowrap;
+    list-style-position: inside;
+    list-style-type: upper-alpha;
     text-align: center;
-    width: 32px;
 }
 
-.features, .keys, .values {
-    list-style-type: none;
+#x-co > li {
     padding: 0;
     margin: 0;
-}
-
-.features {
-    display: grid;
-}
-
-.key {
-    display: none;
-}
-
-.key .values {
-    display: none;
-}
-
-h3 > ul:hover .key {
-    display: inline-block;
-}
-
-.key:hover .values {
-    display: flex;
-    flex-flow: column;
-    position: fixed;
+    flex: 0 1 32px;
 }
 
 img {
-    position: relative;
     border: 2.5px;
-    height: 32px;
-    border-color: #884b10;
-    border-color: #592b07;
+    max-width: 100%;
 }
 
-#emptyx {
-    width: 40px;
+ol > li li {
+    flex: 1 1 32px;
+    height: 36px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: end;
 }
 
 dl {
     display: flex;
     flex-flow: column-reverse;
-    max-height: 50vh;
     width: max-content;
     overflow-y: scroll;
     scrollbar-width: thin;
@@ -92,6 +69,13 @@ dl li {
     flex-flow: column-reverse; /* Order depends on player side #3/3 */
 }
 
+li.coord {
+}
+
+/* Chess board END */
+
+/* Chess move log START */
+
 figure {
     display: flex;
     flex-flow: row;
@@ -114,13 +98,65 @@ figure img {
     color: white;
 }
 
-/*img.black, img.white {*/
-/*    border-width: 1px;*/
-/*    border-color: red;*/
-/*}*/
-
 dd.noimg { /* Display text of <dd> and <dt> at the same height when there's no image in <dd> */
     display: flex;
     flex-wrap: wrap;
     align-content: end;
 }
+
+/* Chess move log END */
+
+/* Chess control panel START */
+
+.features, .features ul { /* Custom-made flex navbar-like menu #1/7 */
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+.features > li {
+    padding: 2vh;
+}
+
+.features { /* Custom-made flex navbar-like menu #2/7 */
+    display: flex;
+    flex-flow: row;
+    background-color: #5583;
+    font-weight: bold;
+    font-family: sans-serif;
+    z-index: 1;
+}
+
+.keys { /* Custom-made flex navbar-like menu #3/7 */
+    display: flex;
+    flex-flow: row;
+}
+
+.values { /* Custom-made flex navbar-like menu #4/7 */
+    display: none;
+    width: min-content;
+}
+
+.key { /* Custom-made flex navbar-like menu #5/7 */
+    display: none;
+}
+
+.key:hover .values { /* Custom-made flex navbar-like menu #6/7 */
+    display: initial;
+}
+
+ul.features > li:hover > ul > li { /* Custom-made flex navbar-like menu #7/7 */
+    display: flex;
+    flex-flow: column;
+}
+
+ul a {
+    text-decoration: none;
+    display: block;
+}
+
+div.setting {
+    
+}
+
+/* Chess control panel END */
diff --git a/chess_gui/public/js/head.js b/chess_gui/public/js/head.js
index 6ea6c05..8d0af64 100644
--- a/chess_gui/public/js/head.js
+++ b/chess_gui/public/js/head.js
@@ -31,6 +31,7 @@ function G(i, s, o, r) {
 if (i % 8 === 0) {
 var li = document.createElement('li');
 ol = document.createElement('ol');
+ol.setAttribute('class', 'x-row');
 I('y-co').appendChild(li);
 li.appendChild(ol);
 }
diff --git a/chess_gui/views/index.html b/chess_gui/views/index.html
index 4603495..f0fe712 100644
--- a/chess_gui/views/index.html
+++ b/chess_gui/views/index.html
@@ -10,21 +10,22 @@
 <title>Game of chess</title>
 </head>
 <body>
-<h1>New game</h1>
-<h2>Replays</h2>
+<section id="board">
+
 <section>
-<h3>
 <ul class="features">
-<li>Options</li>
+<li><a href="#">New game</a></li>
+<li><a href="#">Replays</a></li>
+<li><a href="#">Options</a>
 <ul class="keys">
-<li class="key">Difficulty
+<li class="key"><div class="setting">Difficulty</div>
 <ul class="values">
 <li><a href="#">Normal</a></li>
 <li><a href="#">Easy</a></li>
 <li><a href="#">Very easy</a></li>
 </ul>
 </li>
-<li class="key">Player side
+<li class="key"><div class="setting">Player side</div>
 <ul class="values">
 <li><a href="#">White</a></li>
 <li><a href="#">Black</a></li>
@@ -32,24 +33,23 @@
 <li><a href="#">Control both</a></li>
 </ul>
 </li>
-<!--<li class="key">Advanced
+<li class="key"><div class="setting">Advanced</div>
 <ul class="values">
 <li><a href="#">Total turn limit</a></li>
 <li><a href="#">Movement loop limit</a></li>
 <li><a href="#">Tie on only kings moveable</a></li>
 <li><a href="#">Verbose output</a></li>
 </ul>
-</li>-->
+</li>
 </ul>
+</li>
 </ul>
-</h3>
 </section>
-<section id="board">
+
 <ol id="y-co"></ol>
-<!-- [% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %] -->
-<ol id="x-co"><li id="emptyx" class="x-co"></li><li class="x-co">A</li><li class="x-co">B</li><li class="x-co">C</li><li class="x-co">D</li><li class="x-co">E</li><li class="x-co">F</li><li class="x-co">G</li><li class="x-co">H</li></ol>
+<!-- [% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %]</ol> -->
+<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol> <!-- List used for x-coordinates. Let me know if there's a better way. -->
 </section>
-<!--</ol>-->
 <script type="text/javascript" src="js/dand.js"></script>
 </body>
 </html>