Generic UI improvements.

chess_gui/public/css/index.css

@@ -1,46 +1,75 @@
 /* (C) Roy van Lunsen */
 
-section {
+#log {
-    max-width: max-content;
+    border-style: solid;
+    overflow-x: scroll;
+    scrollbar-width: none;
 }
 
-* {
+/* Chess board START */
-    box-sizing: border-box;
+
+#board {
+    max-inline-size: 100vh; /* TODO: We don't use SVG for the chess pieces, so it might look pixelated on high-res */
 }
 
-/* Chess board START */
+#board a {
+    margin: 1px;
+}
 
 #y-co {
     display: flex;
     flex-flow: column-reverse; /* Order depends on player side #1/3 */
     padding-left: 24px;
+    min-width: 178px; /* From this point onward the item list font size will be too large */
 }
 
 .x-row {
     display: flex;
-    flex-flow: row; /* Order depends on player side #2/3 */
+    flex-flow: row nowrap; /* Order depends on player side #2/3 */
     padding-left: 32px;
+    /*! min-width: 140px; */
+}
+
+#y-co > li {
+    flex: 1;
+}
+
+#y-co > li:nth-child(2n) > .x-row > li:nth-child(2n) {
+    background-color: #6c360d;
+}
+
+#y-co > li:nth-child(2n+1) > .x-row > li:nth-child(2n+1) {
+    background-color: #6c360d;
+}
+
+#y-co > li:nth-child(2n+1) > .x-row > li:nth-child(2n) {
+    background-color: #884b10;
+}
+
+#y-co > li:nth-child(2n) > .x-row > li:nth-child(2n+1) {
+    background-color: #884b10;
 }
 
-#y-co > li:hover {
+/*#y-co > li > .x-row > li:first-child {*/
-    background-color: green;
+/*    border-left-style: solid;*/
+/*}*/
+
+#y-co:not(.x-row) {
+    border-style: solid;
 }
 
 #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;
+    padding-left: 32px;
 }
 
 #x-co > li {
-    padding: 0;
+    flex: 1 1 32px;
-    margin: 0;
+    padding-top: 1em;
-    flex: 0 1 32px;
 }
 
 img {
@@ -48,20 +77,21 @@ img {
     max-width: 100%;
 }
 
+.coord > a {
+    flex: 1 1 32px;
+    display: flex;
+}
+
 ol > li li {
     flex: 1 1 32px;
-    height: 36px;
     display: flex;
-    flex-wrap: wrap;
+    aspect-ratio: 1;
-    align-content: end;
 }
 
 dl {
     display: flex;
-    flex-flow: column-reverse;
+    flex-flow: row-reverse; /* Order depends on player side #3/3 */
     width: max-content;
-    overflow-y: scroll;
-    scrollbar-width: thin;
 }
 
 dl li {
@@ -79,8 +109,7 @@ li.coord {
 figure {
     display: flex;
     flex-flow: row;
-    margin-top: 0.1em;
+    margin: 0 5px 0 5px;
-    margin-bottom: 0.1em;
 }
 
 figure img {
@@ -108,46 +137,54 @@ dd.noimg { /* Display text of <dd> and <dt> at the same height when there's no i
 
 /* Chess control panel START */
 
-.features, .features ul { /* Custom-made flex navbar-like menu #1/7 */
+.features, .features ul {
     padding: 0;
     margin: 0;
     list-style-type: none;
 }
 
 .features > li {
-    padding: 2vh;
+    padding: 10px;
+    flex: 0 1 auto;
 }
 
-.features { /* Custom-made flex navbar-like menu #2/7 */
+.features {
     display: flex;
-    flex-flow: row;
+    flex-flow: row wrap;
     background-color: #5583;
     font-weight: bold;
     font-family: sans-serif;
-    z-index: 1;
 }
 
-.keys { /* Custom-made flex navbar-like menu #3/7 */
+.keys {
     display: flex;
-    flex-flow: row;
+    flex-flow: row wrap;
+    position: absolute;
 }
 
-.values { /* Custom-made flex navbar-like menu #4/7 */
+.values {
     display: none;
-    width: min-content;
+    position: absolute;
 }
 
-.key { /* Custom-made flex navbar-like menu #5/7 */
+ul.values {
-    display: none;
+    padding: 20px 10px 10px 10px;
 }
 
-.key:hover .values { /* Custom-made flex navbar-like menu #6/7 */
+.key {
-    display: initial;
+    display: none; /* Avoid wrapping on hover and losing hover as a result #1/2 */
+    flex-flow: column nowrap;
+    padding-top: 10px;
+    text-align: center;
 }
 
-ul.features > li:hover > ul > li { /* Custom-made flex navbar-like menu #7/7 */
+.key:hover > .values {
-    display: flex;
+    display: contents;
-    flex-flow: column;
+    border-style: dotted;
+}
+
+ul.features > li:hover > ul > li {
+    display: flex; /* Avoid wrapping on hover and losing hover as a result #2/2 */
 }
 
 ul a {
@@ -155,8 +192,37 @@ ul a {
     display: block;
 }
 
-div.setting {
+.key > ul > li:nth-last-child(n+2) a {
+    border-bottom: double;
+    border-color: #000;
+}
+
+.key > ul > li:first-child a {
+    padding-top: 5px;
+}
+
+.key > ul > li > a {
+    margin: 2.5px;
+    padding: 2.5px;
+    background-color: #eef;
+    border-left: solid;
+    border-right: solid;
+    border-color: #000;
+}
+
+.key > ul > li:last-child {
+    border-bottom: solid;
+}
+
+a:hover {
+    color: green;
+}
 
+.option {
+    background-color: #bbc;
+    border-width: 0 0 5px 0;
+    border-style: dashed;
+    padding: 5px;
 }
 
 /* Chess control panel END */

chess_gui/public/index.html.bak

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+<script type="text/javascript" src="js/head.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="utf-8">
+<meta name="author" content="Roy van Lunsen">
+<meta name="copyright" content="Roy van Lunsen">
+<link rel="stylesheet" href="css/index.css">
+<title>Game of chess</title>
+</head>
+<body>
+<section id="log">
+<section id="board">
+<section id="panel">
+<ul class="features">
+<li><a href="#">New game</a></li>
+<li><a href="#">Replays</a></li>
+<li><a href="#">Options</a>
+<ul class="keys">
+<li class="key">
+<a href="#" class="option">Difficulty</a>
+<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">
+<a href="#" class="option">Player side</a>
+<ul class="values">
+<li><a href="#">White</a></li>
+<li><a href="#">Black</a></li>
+<li><a href="#">Spectator</a></li>
+<li><a href="#">Control both</a></li>
+</ul>
+</li>
+<li class="key">
+<a href="#" class="option">Advanced</a>
+<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>
+</ul>
+</li>
+</ul>
+</section>
+<ol id="y-co">
+<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
+</ol>
+<!-- <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> -->
+</section>
+</section>
+<script type="text/javascript" src="js/dand.js"></script>
+</body>
+</html>

chess_gui/public/js/dand.js

@@ -146,9 +146,9 @@ localStorage.setItem(responseObject.Black.dst[1], undefined);
 //I(responseObject.White.src[1]).id = responseObject.White.src[0];
 //I(responseObject.White.dst[responseObject.White.dst.length-1]).id = responseObject.White.src[1];
 
-var salt = I(responseObject.White.src[1]).getAttribute('alt');
+var salt = I(responseObject.White.src[1]).firstChild.getAttribute('alt');
 salt = salt.substring(0, salt.length-2) + responseObject.White.dst[0];
-I(responseObject.White.src[1]).setAttribute('alt', salt);
+I(responseObject.White.src[1]).firstChild.setAttribute('alt', salt);
 var srci = I(responseObject.White.src[0]).innerHTML; // Duplicate.
 I(responseObject.White.src[0]).innerHTML = ''; // Remove.
 I(responseObject.White.dst[0]).innerHTML = srci; // Add.
@@ -158,9 +158,9 @@ I(responseObject.White.dst[0]).innerHTML = srci; // Add.
 //I(responseObject.Black.src[1]).id = responseObject.Black.src[0];
 //I(responseObject.Black.dst[responseObject.Black.dst.length-1]).id = responseObject.Black.src[1];
 
-var salt = I(responseObject.Black.src[1]).getAttribute('alt');
+var salt = I(responseObject.Black.src[1]).firstChild.getAttribute('alt');
 salt = salt.substring(0, salt.length-2) + responseObject.Black.dst[0];
-I(responseObject.Black.src[1]).setAttribute('alt', salt);
+I(responseObject.Black.src[1]).firstChild.setAttribute('alt', salt);
 var srci = I(responseObject.Black.src[0]).innerHTML; // Duplicate.
 I(responseObject.Black.src[0]).innerHTML = ''; // Remove.
 I(responseObject.Black.dst[0]).innerHTML = srci; // Add.
@@ -169,7 +169,7 @@ if (responseObject.White.status[0] === 1) { // TODO: Replace for a (temporary) s
 //ol.setAttribute('id', 'moves');
 var section = document.createElement('section');
 section.setAttribute('id', 'log');
-document.body.insertBefore(section, T('script')[1]);
+document.body.insertBefore(section, I('board'));
 //d = document.createElement('ol');
 section.appendChild(d);
 //d.appendChild(ol);

chess_gui/public/js/head.js

@@ -27,8 +27,8 @@ g += r.charAt(i);
 return g;
 }
 
-function G(i, s, o, r) {
+function G(i, s, o, r) { // Generate a chess board.
-if (i % 8 === 0) {
+if (i % 8 === 0) { // Make a new row.
 var li = document.createElement('li');
 ol = document.createElement('ol');
 ol.setAttribute('class', 'x-row');
@@ -37,32 +37,38 @@ li.appendChild(ol);
 }
 var li = document.createElement('li');
 li.setAttribute('id', s);
+li.setAttribute('class', 'coord');
 if (null === o || undefined === o || '' === o) {
-li.setAttribute('class', 'coord empty');
 ol.appendChild(li);
 } else {
-li.setAttribute('class', 'coord piece');
+var anch = document.createElement('a');
+anch.setAttribute('href', '#');
 ol.appendChild(li);
+li.appendChild(anch);
 if (r === undefined) {
 var img = document.createElement('img');
 var prop = o.substring(1, 2);
-img.setAttribute('id', o);
+//img.setAttribute('id', o);
+anch.setAttribute('id', o);
 img.setAttribute('src', 'i/' + o.substring(0, 2) + '.png');
 img.setAttribute('alt', pp[o.substring(0, 1)] + ' ' + pn[prop] + ' on ' + s);
-li.appendChild(img);
+//li.appendChild(img);
+anch.appendChild(img);
 } else {
 var pce = I(o);
 if (pce === null) {
 var img = document.createElement('img');
 var prop = o.substring(1, 2);
-img.setAttribute('id', o);
+//img.setAttribute('id', o);
+anch.setAttribute('id', o);
 img.setAttribute('src', 'i/' + o.substring(0, 2) + '.png');
 img.setAttribute('alt', pp[o.substring(0, 1)] + ' ' + pn[prop] + ' on ' + s);
-li.appendChild(img);
+//li.appendChild(img);
+anch.appendChild(img);
 } else {
-var salt = pce.getAttribute('alt');
+var salt = pce.firstChild.getAttribute('alt');
 salt = salt.substring(0, salt.length-2) + s;
-pce.setAttribute('alt', salt);
+pce.firstChild.setAttribute('alt', salt);
 var srci = pce.parentNode.innerHTML; // Duplicate.
 pce.parentNode.innerHTML = ''; // Remove.
 li.innerHTML = srci; // Add.

chess_gui/views/index.html

@@ -11,21 +11,22 @@
 </head>
 <body>
 <section id="board">
-
+<section id="panel">
-<section>
 <ul class="features">
 <li><a href="#">New game</a></li>
 <li><a href="#">Replays</a></li>
 <li><a href="#">Options</a>
 <ul class="keys">
-<li class="key"><div class="setting">Difficulty</div>
+<li class="key">
+<a href="#" class="option">Difficulty</a>
 <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"><div class="setting">Player side</div>
+<li class="key">
+<a href="#" class="option">Player side</a>
 <ul class="values">
 <li><a href="#">White</a></li>
 <li><a href="#">Black</a></li>
@@ -33,7 +34,8 @@
 <li><a href="#">Control both</a></li>
 </ul>
 </li>
-<li class="key"><div class="setting">Advanced</div>
+<li class="key">
+<a href="#" class="option">Advanced</a>
 <ul class="values">
 <li><a href="#">Total turn limit</a></li>
 <li><a href="#">Movement loop limit</a></li>
@@ -45,10 +47,9 @@
 </li>
 </ul>
 </section>
-
+<ol id="y-co">
-<ol id="y-co"></ol>
+<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></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>
-<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>
 <script type="text/javascript" src="js/dand.js"></script>
 </body>