Skip to content

Commit

Permalink
UI Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Hakorr committed Oct 20, 2023
1 parent 05eb475 commit ef843d4
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 14 deletions.
45 changes: 36 additions & 9 deletions assets/js/acas-backend-instance.js
Original file line number Diff line number Diff line change
Expand Up @@ -377,12 +377,22 @@ class BackendInstance {
this.BoardDrawer.setOrientation(orientation);
}
},
updateMoveProgress: text => {
const progressBarElem = this.instanceElem.querySelector('.instance-info-text');
updateMoveProgress: (text, status) => {
const infoTextElem = this.instanceElem.querySelector('.instance-info-text');

progressBarElem.innerText = text;

progressBarElem.classList.remove('hidden');
infoTextElem.innerText = text;

const statusArr = ['info-text-winning', 'info-text-losing'];

if(typeof status === 'number' && status !== 0) {
infoTextElem.classList.add(statusArr[status === 1 ? 0 : 1]);
infoTextElem.classList.remove(statusArr[status === 1 ? 1 : 0]);
} else {
infoTextElem.classList.remove(statusArr[0]);
infoTextElem.classList.remove(statusArr[1]);
}

infoTextElem.classList.remove('hidden');
},
updateEval: (centipawnEval, mate) => {
const evalFill = this.instanceElem.querySelector('.eval-fill');
Expand Down Expand Up @@ -674,11 +684,12 @@ class BackendInstance {
if(data?.multipv == 1) {
if(data?.depth) {
if(data?.mate) {
const mateText = `${data.mate > 0 ? 'Win' : 'Lose'} in ${Math.abs(data.mate)}`;
const isWinning = data.mate > 0;
const mateText = `${isWinning ? 'Win' : 'Lose'} in ${Math.abs(data.mate)}`;

this.Interface.updateMoveProgress(`${mateText} | Depth ${data.depth}`);
this.Interface.updateMoveProgress(`${mateText} | Depth ${data.depth}`, isWinning ? 1 : 2);
} else {
this.Interface.updateMoveProgress(`Depth ${data.depth}`);
this.Interface.updateMoveProgress(`Depth ${data.depth}`, 0);
}
}

Expand Down Expand Up @@ -841,7 +852,10 @@ class BackendInstance {
<div class="instance-basic-info">
<div class="instance-variant" title="Instance Chess Variant"></div>
<div class="instance-domain" title="Instance Domain"></div>
<div class="instance-fen" title="Instance Fen"></div>
<div class="instance-fen-container">
<div class="instance-fen-btn acas-fancy-button">Show Fen</div>
<div class="instance-fen hidden" title="Instance Fen"></div>
</div>
</div>
<div class="instance-misc">
<div class="instance-settings-btn acas-fancy-button" title="Open Instance Settings">⚙️</div>
Expand All @@ -861,8 +875,21 @@ class BackendInstance {
const instanceChessVariantElem = acasInstanceElem.querySelector('.instance-variant');
const instanceDomainElem = acasInstanceElem.querySelector('.instance-domain');
const instanceFenElem = acasInstanceElem.querySelector('.instance-fen');
const showFenBtn = acasInstanceElem.querySelector('.instance-fen-btn');
const chessboardComponentsElem = acasInstanceElem.querySelector('.chessboard-components');

showFenBtn.onclick = function() {
instanceFenElem.classList.toggle('hidden');

const didHide = showFenBtn.innerText.includes('Show');

if(didHide) {
showFenBtn.innerText = showFenBtn.innerText.replace('Show', 'Hide');
} else {
showFenBtn.innerText = showFenBtn.innerText.replace('Hide', 'Show');
}
}

instanceChessVariantElem.innerText = variantText;
instanceDomainElem.innerText = this.domain;
instanceFenElem.innerText = fen;
Expand Down
36 changes: 31 additions & 5 deletions index.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
max-width: none !important;
}
#instance-size-change-container {
position: initial !important;
margin-top: 5px !important;
display: none !important;
}
}
body {
Expand Down Expand Up @@ -192,10 +191,31 @@ cg-container {
margin-right: 2px;
}
.instance-fen {
font-size: 11px;
font-weight: 100;
color: rgb(255 255 255 / 30%);
word-break: break-word;
}
.instance-fen-btn {
font-size: 12px;
font-weight: 100;
color: rgb(255 255 255 / 30%);
word-break: break-word;
font-weight: 100;
color: rgb(255 255 255 / 50%);
word-break: break-word;
background-color: rgb(255 255 255 / 5%);
padding: 3px;
border-radius: 3px;
border: 2px solid rgb(255 255 255 / 5%);
width: fit-content;
height: fit-content;
}
.instance-fen-btn:hover {
background-color: rgb(255 255 255 / 10%);
}
.instance-fen-btn:active {
margin-top: 3px;
}
.instance-fen-container {

}
.instance-variant {
font-stretch: semi-expanded;
Expand Down Expand Up @@ -945,4 +965,10 @@ cg-container {
color: rgba(255, 255, 255, 1);
background-color: rgb(255 255 255 / 30%);
border-color: rgb(255 255 255 / 25%);
}
.info-text-winning {
color: rgb(145 255 200) !important;
}
.info-text-losing {
color: rgb(255 130 130) !important;
}

0 comments on commit ef843d4

Please sign in to comment.