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