deepcrayon/lila
deepcrayon/lila
1
0
Fork 0
Code Releases Activity

optimize analysis clocks and make them responsive

Browse source
This commit is contained in:
Thibault Duplessis 2019-04-29 13:41:28 +07:00
parent dfcd5156ca
commit a0f19ef0f8
4 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/analyse/css/_player-clock.scss
View file

@ -1,3 +1,16 @@
$clock-height: 20px;
.analyse.has-clocks {
.cg-board {
border-radius: 0 3px 3px 0;
}
@include breakpoint($mq-col1) {
.analyse__controls {
margin-top: #{$clock-height * 1/2};
}
}
}
.analyse__clock {
@extend %flex-between-nowrap, %metal, %box-shadow;
@ -5,16 +18,19 @@
right: 0;
padding: 0 .5em;
height: $clock-height;
line-height: $clock-height;
font-weight: bold;
text-align: center;
&.top {
@extend %box-radius-top;
top: -20px;
top: #{-$clock-height};
}
&.bottom {
@extend %box-radius-bottom;
bottom: -20px;
bottom: #{-$clock-height};
}
&.active {
background: mix($c-primary, $c-bg-box, 30%);

15
ui/analyse/src/clocks.ts
View file

@ -17,13 +17,16 @@ export default function(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
export function renderClocks(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
const node = ctrl.node, clock = node.clock;
if (!clock && clock !== 0) return;
const parentClock = ctrl.tree.getParentClock(node, ctrl.path),
isWhiteTurn = node.ply % 2 === 0,
centis: Array<number | undefined> = [parentClock, clock];
const whitePov = ctrl.bottomIsWhite(),
parentClock = ctrl.tree.getParentClock(node, ctrl.path),
isWhiteTurn = node.ply % 2 === 0,
centis: Array<number | undefined> = [parentClock, clock];
if (!isWhiteTurn) centis.reverse();
const study = ctrl.study,
relay = study && study.data.chapter.relay;
relay = study && study.data.chapter.relay;
if (relay && relay.lastMoveAt && relay.path === ctrl.path && ctrl.path !== '' && !isFinished(study!.data.chapter)) {
const spent = (Date.now() - relay.lastMoveAt) / 10;
const i = isWhiteTurn ? 0 : 1;
@ -35,8 +38,8 @@ export function renderClocks(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
};
return [
renderClock(centis[0], isWhiteTurn, ctrl.bottomIsWhite() ? 'top' : 'bottom', opts),
renderClock(centis[1], !isWhiteTurn, ctrl.bottomIsWhite() ? 'bottom' : 'top', opts)
renderClock(centis[0], isWhiteTurn, whitePov ? 'top' : 'bottom', opts),
renderClock(centis[1], !isWhiteTurn, whitePov ? 'bottom' : 'top', opts)
];
}

2
ui/analyse/src/study/playerBars.ts
View file

@ -21,7 +21,7 @@ export default function(ctrl: AnalyseCtrl): VNode[] | undefined {
if (!playerNames.white || !playerNames.black) return;
const clocks = renderClocks(ctrl),
ticking = !isFinished(study.data.chapter) && ctrl.turnColor();
return (['white', 'black'] as Color[]).map(color =>
return (['white', 'black'] as Color[]).map(color =>
renderPlayer(tags, clocks, playerNames, color, ticking === color, ctrl.bottomColor() !== color));
}

5
ui/analyse/src/view.ts
View file

@ -275,7 +275,7 @@ export default function(ctrl: AnalyseCtrl): VNode {
gamebookPlayView = gamebookPlay && gbPlay.render(gamebookPlay),
gamebookEditView = gbEdit.running(ctrl) ? gbEdit.render(ctrl) : undefined,
playerBars = renderPlayerBars(ctrl),
clocks = renderClocks(ctrl),
clocks = !playerBars && renderClocks(ctrl),
gaugeOn = ctrl.showEvalGauge(),
needsInnerCoords = !!gaugeOn || !!playerBars;
return h('main.analyse' + (chapter ? '.' + chapter.id : ''), {
@ -306,7 +306,8 @@ export default function(ctrl: AnalyseCtrl): VNode {
class: {
'comp-off': !ctrl.showComputer(),
'gauge-on': gaugeOn,
'has-players': !!playerBars
'has-players': !!playerBars,
'has-clocks': !!clocks
}
}, [
gaugeOn ? cevalView.renderGauge(ctrl) : null,