Roy
/
chess-gui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Small changes and add a sample.

Browse Source
main
Roy 2 years ago
parent 988db02ca1
commit 4ffd43ae86
5 changed files with 23 additions and 16 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      README.md
  2. 9
      chess_gui/public/css/index.css
  3. 22
      chess_gui/public/js/dand.js
  4. 2
      chess_gui/views/index.html
  5. BIN
      sample/chess-gui.webm

6
README.md
Unescape View File

@ -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] Drag-and-drop ondersteuning voor (zelfgemaakte) pionnen.
- [x] Gebruikt AJAX (in JSON) voor elke valide zet(paar). - [x] Gebruikt AJAX (in JSON) voor elke valide zet(paar).

9
chess_gui/public/css/index.css
Unescape View File

@ -6,12 +6,12 @@
scrollbar-width: none; scrollbar-width: none;
} }
/* Chess board START */ #main {
display: grid;
#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 { #board a {
margin: 1px; margin: 1px;
} }
@ -20,6 +20,7 @@
display: flex; display: flex;
flex-flow: column-reverse; /* Order depends on player side #1/3 */ flex-flow: column-reverse; /* Order depends on player side #1/3 */
padding-left: 24px; 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 */ min-width: 178px; /* From this point onward the item list font size will be too large */
} }

22
chess_gui/public/js/dand.js
Unescape View File

@ -58,9 +58,9 @@ xhr.send(null);
var h1TN = statusm[1]; var h1TN = statusm[1];
var h2TN = statusm[2]; var h2TN = statusm[2];
h2.innerHTML = h2TN; h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board')); I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN; h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2); I('main').insertBefore(h1, h2);
xhr.onload = function () { xhr.onload = function () {
if (xhr.status === 200) { if (xhr.status === 200) {
@ -86,9 +86,9 @@ var h1TN = statusm[0];
var h2TN = statusm[2]; var h2TN = statusm[2];
} }
h2.innerHTML = h2TN; h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board')); I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN; h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2); I('main').insertBefore(h1, h2);
if (responseObject.Black.status.length === 6) { if (responseObject.Black.status.length === 6) {
if (responseObject.Black.status[5] === 4) { if (responseObject.Black.status[5] === 4) {
@ -105,9 +105,9 @@ var h1TN = statusm[5];
var h2TN = 'Black took your king.'; var h2TN = 'Black took your king.';
} }
h2.innerHTML = h2TN; h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board')); I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN; h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2); I('main').insertBefore(h1, h2);
} }
// else { // else {
//var h1TN = statusm[1]; //var h1TN = statusm[1];
@ -169,7 +169,7 @@ if (responseObject.White.status[0] === 1) { // TODO: Replace for a (temporary) s
//ol.setAttribute('id', 'moves'); //ol.setAttribute('id', 'moves');
var section = document.createElement('section'); var section = document.createElement('section');
section.setAttribute('id', 'log'); section.setAttribute('id', 'log');
document.body.insertBefore(section, I('board')); I('main').appendChild(section);
//d = document.createElement('ol'); //d = document.createElement('ol');
section.appendChild(d); section.appendChild(d);
//d.appendChild(ol); //d.appendChild(ol);
@ -249,7 +249,7 @@ d.appendChild(li);
} else { } else {
var h1TN = statusm[0]; var h1TN = statusm[0];
h1.innerHTML = h1TN; h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2); I('main').insertBefore(h1, h2);
var h2TN = statusm[3]; var h2TN = statusm[3];
if (count > 1) { if (count > 1) {
if (count > 3) { if (count > 3) {
@ -261,7 +261,7 @@ h2.innerHTML = h2TN + ' for the ' + count + '<sup>' + suffix + '</sup>' + ' time
} else { } else {
h2.innerHTML = h2TN; h2.innerHTML = h2TN;
} }
document.body.insertBefore(h2, I('board')); I('main').insertBefore(h2, I('board'));
count++; count++;
} }
// TODO: Display status and/or sleep. // TODO: Display status and/or sleep.
@ -274,9 +274,9 @@ count++;
var h1TN = statusm[8]; var h1TN = statusm[8];
var h2TN = statusm[9]; var h2TN = statusm[9];
h2.innerHTML = h2TN; h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board')); I('main').insertBefore(h2, I('board'));
h1.innerHTML = h1TN; h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2); I('main').insertBefore(h1, h2);
} }
} }
} }

2
chess_gui/views/index.html
Unescape View File

@ -10,6 +10,7 @@
<title>Game of chess</title> <title>Game of chess</title>
</head> </head>
<body> <body>
<section id="main">
<section id="board"> <section id="board">
<section id="panel"> <section id="panel">
<ul class="features"> <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 id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
</ol> </ol>
</section> </section>
</section>
<script type="text/javascript" src="js/dand.js"></script> <script type="text/javascript" src="js/dand.js"></script>
</body> </body>
</html> </html>

BIN
sample/chess-gui.webm
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save