diff --git a/README.md b/README.md
index 7055426..968014a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,8 @@
-# WIP.
+# Sample
+
+Zie [voorbeeld in video-formaat](sample/chess-gui.webm).
+
+# WIP
- [x] Drag-and-drop ondersteuning voor (zelfgemaakte) pionnen.
- [x] Gebruikt AJAX (in JSON) voor elke valide zet(paar).
diff --git a/chess_gui/public/css/index.css b/chess_gui/public/css/index.css
index f986671..cbe268e 100644
--- a/chess_gui/public/css/index.css
+++ b/chess_gui/public/css/index.css
@@ -6,12 +6,12 @@
scrollbar-width: none;
}
-/* 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 */
+#main {
+ display: grid;
}
+/* Chess board START */
+
#board a {
margin: 1px;
}
@@ -20,6 +20,7 @@
display: flex;
flex-flow: column-reverse; /* Order depends on player side #1/3 */
padding-left: 24px;
+ max-inline-size: 75vh; /* TODO: We don't use SVG for the chess pieces, so it might look pixelated on high-res. Wouldn't it be better to have a resizeable board? */
min-width: 178px; /* From this point onward the item list font size will be too large */
}
diff --git a/chess_gui/public/js/dand.js b/chess_gui/public/js/dand.js
index f416404..afa7231 100644
--- a/chess_gui/public/js/dand.js
+++ b/chess_gui/public/js/dand.js
@@ -58,9 +58,9 @@ xhr.send(null);
var h1TN = statusm[1];
var h2TN = statusm[2];
h2.innerHTML = h2TN;
-document.body.insertBefore(h2, I('board'));
+I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
-document.body.insertBefore(h1, h2);
+I('main').insertBefore(h1, h2);
xhr.onload = function () {
if (xhr.status === 200) {
@@ -86,9 +86,9 @@ var h1TN = statusm[0];
var h2TN = statusm[2];
}
h2.innerHTML = h2TN;
-document.body.insertBefore(h2, I('board'));
+I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
-document.body.insertBefore(h1, h2);
+I('main').insertBefore(h1, h2);
if (responseObject.Black.status.length === 6) {
if (responseObject.Black.status[5] === 4) {
@@ -105,9 +105,9 @@ var h1TN = statusm[5];
var h2TN = 'Black took your king.';
}
h2.innerHTML = h2TN;
-document.body.insertBefore(h2, I('board'));
+I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
-document.body.insertBefore(h1, h2);
+I('main').insertBefore(h1, h2);
}
// else {
//var h1TN = statusm[1];
@@ -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, I('board'));
+I('main').appendChild(section);
//d = document.createElement('ol');
section.appendChild(d);
//d.appendChild(ol);
@@ -249,7 +249,7 @@ d.appendChild(li);
} else {
var h1TN = statusm[0];
h1.innerHTML = h1TN;
-document.body.insertBefore(h1, h2);
+I('main').insertBefore(h1, h2);
var h2TN = statusm[3];
if (count > 1) {
if (count > 3) {
@@ -261,7 +261,7 @@ h2.innerHTML = h2TN + ' for the ' + count + '' + suffix + '' + ' time
} else {
h2.innerHTML = h2TN;
}
-document.body.insertBefore(h2, I('board'));
+I('main').insertBefore(h2, I('board'));
count++;
}
// TODO: Display status and/or sleep.
@@ -274,9 +274,9 @@ count++;
var h1TN = statusm[8];
var h2TN = statusm[9];
h2.innerHTML = h2TN;
-document.body.insertBefore(h2, I('board'));
+I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
-document.body.insertBefore(h1, h2);
+I('main').insertBefore(h1, h2);
}
}
}
diff --git a/chess_gui/views/index.html b/chess_gui/views/index.html
index 9e953c7..f7d7b2d 100644
--- a/chess_gui/views/index.html
+++ b/chess_gui/views/index.html
@@ -10,6 +10,7 @@
Game of chess
+