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

Maak het schaakveld geschikt voor mobiele apparaten, bewerk de CSS menubar van het schaakspel en voeg comments toe.

Browse Source
main
Roy 2 years ago
parent 0f09d55c20
commit 94251b28de
3 changed files with 105 additions and 68 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. 1
      chess_gui/public/js/head.js
  3. 26
      chess_gui/views/index.html

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

@ -1,87 +1,64 @@
/* (C) Roy van Lunsen */
a {
display: block;
text-decoration: none;
outline-style: solid;
color: white;
background-image: url(i/tem.png);
section {
max-width: max-content;
}
ol > li li {
display: inline-block;
width: 32px;
height: 32px;
* {
box-sizing: border-box;
}
/* Chess board START */
#y-co {
display: flex;
flex-flow: column-reverse; /* Order depends on player side #1/3 */
width: max-content;
padding-left: 24px;
}
.x-row {
display: flex;
flex-flow: row; /* Order depends on player side #2/3 */
padding-left: 32px;
}
#x-co {
display: inline-flex;
flex-flow: row;
width: max-content;
margin-top: 32px;
#y-co > li:hover {
background-color: green;
}
.x-co {
display: inline-block;
#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;
width: 32px;
}
.features, .keys, .values {
list-style-type: none;
#x-co > li {
padding: 0;
margin: 0;
}
.features {
display: grid;
}
.key {
display: none;
}
.key .values {
display: none;
}
h3 > ul:hover .key {
display: inline-block;
}
.key:hover .values {
display: flex;
flex-flow: column;
position: fixed;
flex: 0 1 32px;
}
img {
position: relative;
border: 2.5px;
height: 32px;
border-color: #884b10;
border-color: #592b07;
max-width: 100%;
}
#emptyx {
width: 40px;
ol > li li {
flex: 1 1 32px;
height: 36px;
display: flex;
flex-wrap: wrap;
align-content: end;
}
dl {
display: flex;
flex-flow: column-reverse;
max-height: 50vh;
width: max-content;
overflow-y: scroll;
scrollbar-width: thin;
@ -92,6 +69,13 @@ dl li {
flex-flow: column-reverse; /* Order depends on player side #3/3 */
}
li.coord {
}
/* Chess board END */
/* Chess move log START */
figure {
display: flex;
flex-flow: row;
@ -114,13 +98,65 @@ figure img {
color: white;
}
/*img.black, img.white {*/
/* border-width: 1px;*/
/* border-color: red;*/
/*}*/
dd.noimg { /* Display text of <dd> and <dt> at the same height when there's no image in <dd> */
display: flex;
flex-wrap: wrap;
align-content: end;
}
/* Chess move log END */
/* Chess control panel START */
.features, .features ul { /* Custom-made flex navbar-like menu #1/7 */
padding: 0;
margin: 0;
list-style-type: none;
}
.features > li {
padding: 2vh;
}
.features { /* Custom-made flex navbar-like menu #2/7 */
display: flex;
flex-flow: row;
background-color: #5583;
font-weight: bold;
font-family: sans-serif;
z-index: 1;
}
.keys { /* Custom-made flex navbar-like menu #3/7 */
display: flex;
flex-flow: row;
}
.values { /* Custom-made flex navbar-like menu #4/7 */
display: none;
width: min-content;
}
.key { /* Custom-made flex navbar-like menu #5/7 */
display: none;
}
.key:hover .values { /* Custom-made flex navbar-like menu #6/7 */
display: initial;
}
ul.features > li:hover > ul > li { /* Custom-made flex navbar-like menu #7/7 */
display: flex;
flex-flow: column;
}
ul a {
text-decoration: none;
display: block;
}
div.setting {
}
/* Chess control panel END */

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

@ -31,6 +31,7 @@ function G(i, s, o, r) {
if (i % 8 === 0) {
var li = document.createElement('li');
ol = document.createElement('ol');
ol.setAttribute('class', 'x-row');
I('y-co').appendChild(li);
li.appendChild(ol);
}

26
chess_gui/views/index.html
Unescape View File

@ -10,21 +10,22 @@
<title>Game of chess</title>
</head>
<body>
<h1>New game</h1>
<h2>Replays</h2>
<section id="board">
<section>
<h3>
<ul class="features">
<li>Options</li>
<li><a href="#">New game</a></li>
<li><a href="#">Replays</a></li>
<li><a href="#">Options</a>
<ul class="keys">
<li class="key">Difficulty
<li class="key"><div class="setting">Difficulty</div>
<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">Player side
<li class="key"><div class="setting">Player side</div>
<ul class="values">
<li><a href="#">White</a></li>
<li><a href="#">Black</a></li>
@ -32,24 +33,23 @@
<li><a href="#">Control both</a></li>
</ul>
</li>
<!--<li class="key">Advanced
<li class="key"><div class="setting">Advanced</div>
<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>-->
</li>
</ul>
</li>
</ul>
</h3>
</section>
<section id="board">
<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 id="x-co"><li id="emptyx" class="x-co"></li><li class="x-co">A</li><li class="x-co">B</li><li class="x-co">C</li><li class="x-co">D</li><li class="x-co">E</li><li class="x-co">F</li><li class="x-co">G</li><li class="x-co">H</li></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. -->
</section>
<!--</ol>-->
<script type="text/javascript" src="js/dand.js"></script>
</body>
</html>

Write Preview
Loading…
Cancel
Save