new opening trainer UI
This commit is contained in:
parent
16b284bf56
commit
99f9186ea9
File diff suppressed because one or more lines are too long
|
@ -13,7 +13,8 @@ module.exports = function(cfg, router, i18n) {
|
|||
}).length,
|
||||
figuredOut: [],
|
||||
messedUp: [],
|
||||
flash: null
|
||||
flash: {},
|
||||
flashFound: null,
|
||||
};
|
||||
|
||||
var chess = new Chess(this.data.opening.fen);
|
||||
|
@ -58,24 +59,49 @@ module.exports = function(cfg, router, i18n) {
|
|||
},
|
||||
});
|
||||
|
||||
var submitMove = function(move) {
|
||||
var found = this.data.opening.moves.filter(function(m) {
|
||||
return m.first === move;
|
||||
var submitMove = function(uci) {
|
||||
var chessMove = chess.move({
|
||||
from: uci.substr(0, 2),
|
||||
to: uci.substr(2, 2)
|
||||
});
|
||||
if (!chessMove) return;
|
||||
chess = new Chess(this.data.opening.fen);
|
||||
var move = {
|
||||
uci: uci,
|
||||
san: chessMove.san
|
||||
};
|
||||
var known = this.data.opening.moves.filter(function(m) {
|
||||
return m.first === move.uci;
|
||||
})[0];
|
||||
if (found && found.quality === 'good') {
|
||||
if (this.vm.figuredOut.indexOf(move) === -1) this.vm.figuredOut.push(move);
|
||||
} else if (found && found.quality === 'dubious') {
|
||||
flash('dubious');
|
||||
} else if (!found || found.quality === 'bad') {
|
||||
if (this.vm.messedUp.indexOf(move) === -1) this.vm.messedUp.push(move);
|
||||
flash('bad');
|
||||
if (known && known.quality === 'good') {
|
||||
var alreadyFound = this.vm.figuredOut.filter(function(f) {
|
||||
return f.uci === move.uci;
|
||||
}).length > 0;
|
||||
if (alreadyFound) flashFound(move);
|
||||
else {
|
||||
flash(move, 'good');
|
||||
this.vm.figuredOut.push(move);
|
||||
}
|
||||
} else if (known && known.quality === 'dubious') {
|
||||
flash(move, 'dubious');
|
||||
} else {
|
||||
if (this.vm.messedUp.indexOf(move.uci) === -1) this.vm.messedUp.push(move);
|
||||
flash(move, 'bad');
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
var flash = function(f) {
|
||||
this.vm.flash = f;
|
||||
var flash = function(move, quality) {
|
||||
this.vm.flash[quality] = move;
|
||||
setTimeout(function() {
|
||||
this.vm.flash = null;
|
||||
delete this.vm.flash[quality];
|
||||
m.redraw();
|
||||
}.bind(this), 1000);
|
||||
}.bind(this);
|
||||
|
||||
var flashFound = function(move) {
|
||||
this.vm.flashFound = move;
|
||||
setTimeout(function() {
|
||||
this.vm.flashFound = null;
|
||||
m.redraw();
|
||||
}.bind(this), 1000);
|
||||
}.bind(this);
|
||||
|
|
|
@ -71,19 +71,46 @@ function renderSide(ctrl) {
|
|||
]);
|
||||
}
|
||||
|
||||
function progress(ctrl) {
|
||||
var steps = [];
|
||||
var nbFiguredOut = ctrl.vm.figuredOut.length;
|
||||
var lastI = nbFiguredOut - 1;
|
||||
var nextI = nbFiguredOut;
|
||||
for (var i = 0; i < ctrl.vm.nbGood; i++) {
|
||||
steps.push({
|
||||
found: ctrl.vm.figuredOut[i],
|
||||
last: lastI === i,
|
||||
next: nextI === i
|
||||
});
|
||||
}
|
||||
var liWidth = Math.round(100 / ctrl.vm.nbGood) + '%';
|
||||
return m('div.meter', [
|
||||
m('ul',
|
||||
steps.map(function(step) {
|
||||
var badSan = (step.next && ctrl.vm.flash.bad) ? ctrl.vm.flash.bad.san : null;
|
||||
return m('li', {
|
||||
class: chessground.util.classSet({
|
||||
found: step.found,
|
||||
next: step.next,
|
||||
bad: badSan,
|
||||
good: step.last && ctrl.vm.flash.good,
|
||||
already: step.found && ctrl.vm.flashFound && ctrl.vm.flashFound.uci === step.found.uci
|
||||
}),
|
||||
style: {
|
||||
width: liWidth
|
||||
}
|
||||
}, [
|
||||
m('span.step', step.found ? step.found.san : (
|
||||
badSan || '?'
|
||||
)),
|
||||
m('span.stage')
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
}
|
||||
|
||||
module.exports = function(ctrl) {
|
||||
var percent = Math.ceil(ctrl.vm.figuredOut.length * 100 / ctrl.vm.nbGood) + '%';
|
||||
var color;
|
||||
switch (ctrl.vm.flash) {
|
||||
case 'dubious':
|
||||
color = 'yellow';
|
||||
break;
|
||||
case 'bad':
|
||||
color = 'red';
|
||||
break;
|
||||
default:
|
||||
color = 'green';
|
||||
}
|
||||
return m('div#opening.training', [
|
||||
renderSide(ctrl),
|
||||
m('div.board_and_ground', [
|
||||
|
@ -91,21 +118,7 @@ module.exports = function(ctrl) {
|
|||
m('div.right', renderTable(ctrl))
|
||||
]),
|
||||
m('div.center', [
|
||||
m('div.lulzbar', [
|
||||
m('div.bar.' + color, {
|
||||
style: {
|
||||
width: percent
|
||||
}
|
||||
}, m('span')),
|
||||
m('div.label', {
|
||||
style: {
|
||||
left: percent
|
||||
}
|
||||
}, [
|
||||
m('span'),
|
||||
m('div.perc', percent)
|
||||
])
|
||||
])
|
||||
progress(ctrl)
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue