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

Generic UI improvements.

Browse Source
main
Roy 2 years ago
parent 94251b28de
commit 988db02ca1
5 changed files with 196 additions and 64 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. 146
      chess_gui/public/css/index.css
  2. 59
      chess_gui/public/index.html.bak
  3. 10
      chess_gui/public/js/dand.js
  4. 26
      chess_gui/public/js/head.js
  5. 19
      chess_gui/views/index.html

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

@ -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 <dd> and <dt> 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 */

59
chess_gui/public/index.html.bak
Unescape View File

@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/head.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="author" content="Roy van Lunsen">
<meta name="copyright" content="Roy van Lunsen">
<link rel="stylesheet" href="css/index.css">
<title>Game of chess</title>
</head>
<body>
<section id="log">
<section id="board">
<section id="panel">
<ul class="features">
<li><a href="#">New game</a></li>
<li><a href="#">Replays</a></li>
<li><a href="#">Options</a>
<ul class="keys">
<li class="key">
<a href="#" class="option">Difficulty</a>
<ul class="values">
<li><a href="#">Normal</a></li>
<li><a href="#">Easy</a></li>
<li><a href="#">Very easy</a></li>
</ul>
</li>
<li class="key">
<a href="#" class="option">Player side</a>
<ul class="values">
<li><a href="#">White</a></li>
<li><a href="#">Black</a></li>
<li><a href="#">Spectator</a></li>
<li><a href="#">Control both</a></li>
</ul>
</li>
<li class="key">
<a href="#" class="option">Advanced</a>
<ul class="values">
<li><a href="#">Total turn limit</a></li>
<li><a href="#">Movement loop limit</a></li>
<li><a href="#">Tie on only kings moveable</a></li>
<li><a href="#">Verbose output</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<ol id="y-co">
<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
</ol>
<!-- <ol id="y-co"></ol>[% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %]</ol> -->
</section>
</section>
<script type="text/javascript" src="js/dand.js"></script>
</body>
</html>

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

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

26
chess_gui/public/js/head.js
Unescape View File

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

19
chess_gui/views/index.html
Unescape View File

@ -11,21 +11,22 @@
</head>
<body>
<section id="board">
<section>
<section id="panel">
<ul class="features">
<li><a href="#">New game</a></li>
<li><a href="#">Replays</a></li>
<li><a href="#">Options</a>
<ul class="keys">
<li class="key"><div class="setting">Difficulty</div>
<li class="key">
<a href="#" class="option">Difficulty</a>
<ul class="values">
<li><a href="#">Normal</a></li>
<li><a href="#">Easy</a></li>
<li><a href="#">Very easy</a></li>
</ul>
</li>
<li class="key"><div class="setting">Player side</div>
<li class="key">
<a href="#" class="option">Player side</a>
<ul class="values">
<li><a href="#">White</a></li>
<li><a href="#">Black</a></li>
@ -33,7 +34,8 @@
<li><a href="#">Control both</a></li>
</ul>
</li>
<li class="key"><div class="setting">Advanced</div>
<li class="key">
<a href="#" class="option">Advanced</a>
<ul class="values">
<li><a href="#">Total turn limit</a></li>
<li><a href="#">Movement loop limit</a></li>
@ -45,10 +47,9 @@
</li>
</ul>
</section>
<ol id="y-co"></ol>
<!-- [% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %]</ol> -->
<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol> <!-- List used for x-coordinates. Let me know if there's a better way. -->
<ol id="y-co">
<ol id="x-co"><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
</ol>
</section>
<script type="text/javascript" src="js/dand.js"></script>
</body>

Write Preview
Loading…
Cancel
Save