Small changes and add a sample.

2 years ago · 4ffd43ae86
parent 988db02ca1
commit 4ffd43ae86
5 changed files with 23 additions and 16 deletions
--- 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).
--- 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 */
 }

--- 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 + '<sup>' + suffix + '</sup>' + ' 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);
 }
 }
 }
--- a/chess_gui/views/index.html
+++ b/chess_gui/views/index.html
@ -10,6 +10,7 @@
 <title>Game of chess</title>
 </head>
 <body>
+<section id="main">
 <section id="board">
 <section id="panel">
 <ul class="features">
@ -51,6 +52,7 @@
 <ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
 </ol>
 </section>
+</section>
 <script type="text/javascript" src="js/dand.js"></script>
 </body>
 </html>
--- a/sample/chess-gui.webm
+++ b/sample/chess-gui.webm