From 988db02ca1978a2c12c3d328d0413e43e8d1b764 Mon Sep 17 00:00:00 2001 From: Roy Date: Sun, 14 May 2023 02:19:06 +0200 Subject: [PATCH] Generic UI improvements. --- chess_gui/public/css/index.css | 146 +++++++++++++++++++++++--------- chess_gui/public/index.html.bak | 59 +++++++++++++ chess_gui/public/js/dand.js | 10 +-- chess_gui/public/js/head.js | 26 +++--- chess_gui/views/index.html | 19 +++-- 5 files changed, 196 insertions(+), 64 deletions(-) create mode 100644 chess_gui/public/index.html.bak diff --git a/chess_gui/public/css/index.css b/chess_gui/public/css/index.css index 5154ad6..f986671 100644 --- a/chess_gui/public/css/index.css +++ b/chess_gui/public/css/index.css @@ -1,46 +1,75 @@ /* (C) Roy van Lunsen */ -section { - max-width: max-content; +#log { + border-style: solid; + overflow-x: scroll; + scrollbar-width: none; } -* { - box-sizing: border-box; +/* Chess board START */ + +#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:hover { - background-color: green; +#y-co > li:nth-child(2n) > .x-row > li:nth-child(2n+1) { + background-color: #884b10; +} + +/*#y-co > li > .x-row > li:first-child {*/ +/* 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; - margin: 0; - flex: 0 1 32px; + flex: 1 1 32px; + padding-top: 1em; } 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; - align-content: end; + aspect-ratio: 1; } 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-bottom: 0.1em; + margin: 0 5px 0 5px; } figure img { @@ -108,46 +137,54 @@ dd.noimg { /* Display text of
and
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 */ - display: none; +ul.values { + padding: 20px 10px 10px 10px; } -.key:hover .values { /* Custom-made flex navbar-like menu #6/7 */ - display: initial; +.key { + 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 */ - display: flex; - flex-flow: column; +.key:hover > .values { + display: contents; + 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 */ diff --git a/chess_gui/public/index.html.bak b/chess_gui/public/index.html.bak new file mode 100644 index 0000000..9e91e89 --- /dev/null +++ b/chess_gui/public/index.html.bak @@ -0,0 +1,59 @@ + + + + + + + + + +Game of chess + + +
+
+
+ +
+
    +
    +
+ +
+
+ + + diff --git a/chess_gui/public/js/dand.js b/chess_gui/public/js/dand.js index 1098118..f416404 100644 --- a/chess_gui/public/js/dand.js +++ b/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); diff --git a/chess_gui/public/js/head.js b/chess_gui/public/js/head.js index 8d0af64..344da9c 100644 --- a/chess_gui/public/js/head.js +++ b/chess_gui/public/js/head.js @@ -27,8 +27,8 @@ g += r.charAt(i); return g; } -function G(i, s, o, r) { -if (i % 8 === 0) { +function G(i, s, o, r) { // Generate a chess board. +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. diff --git a/chess_gui/views/index.html b/chess_gui/views/index.html index f0fe712..9e953c7 100644 --- a/chess_gui/views/index.html +++ b/chess_gui/views/index.html @@ -11,21 +11,22 @@
- -
+
- -
    - -
    +
      +
      +