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

more work on puzzle UI

Browse source
This commit is contained in:
Thibault Duplessis 2016-12-07 16:21:37 +01:00
parent deceada2ea
commit 06b9e29e7c
9 changed files with 66 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/stylesheets/puzzle.css
View file

@ -146,6 +146,11 @@ body.dark #puzzle .timeline > * {
.puzzle_box .players {
padding-bottom: 14px;
}
.puzzle_box .players .color-icon::before {
width: 30px;
display: inline-block;
text-align: center;
}
body.dark #puzzle .timeline a.new {
background: #555;

82
ui/puzzle/src/ctrl.js
View file

@ -18,21 +18,8 @@ var sound = require('./sound');
module.exports = function(opts, i18n) {
var vm = {
mode: 'play', // play | try | view
loading: false,
justPlayed: null,
initialPath: null,
initialNode: null,
canViewSolution: false, // just to delay button display
keepGoing: false,
lastFeedback: 'init'
};
var data = opts.data;
var tree = treeBuild(treeOps.reconstruct(opts.data.game.treeParts));
var ground;
var ceval;
var vm = {};
var data, tree, ground, ceval, moveTest;
var setPath = function(path) {
vm.path = path;
@ -41,19 +28,36 @@ module.exports = function(opts, i18n) {
vm.mainline = treeOps.mainlineNodeList(tree.root);
};
vm.initialPath = treePath.fromNodeList(treeOps.mainlineNodeList(tree.root));
vm.initialNode = tree.nodeAtPath(vm.initialPath);
setPath(treePath.init(vm.initialPath));
setTimeout(function() {
jump(vm.initialPath);
m.redraw();
}, 500);
var initiate = function(fromData) {
data = fromData;
tree = treeBuild(treeOps.reconstruct(data.game.treeParts));
var initialPath = treePath.fromNodeList(treeOps.mainlineNodeList(tree.root));
vm.mode = 'play'; // play | try | view
vm.loading = false;
vm.justPlayed = null;
vm.resultSent = false;
vm.lastFeedback = 'init';
vm.initialPath = initialPath;
vm.initialNode = tree.nodeAtPath(initialPath);
setTimeout(function() {
vm.canViewSolution = true;
setPath(treePath.init(initialPath));
setTimeout(function() {
jump(initialPath);
m.redraw();
}, 500);
vm.canViewSolution = false; // just to delay button display
setTimeout(function() {
vm.canViewSolution = true;
m.redraw();
}, 5000);
socket.setDestsCache(data.game.destsCache);
moveTest = moveTestBuild(vm, data.puzzle);
showGround();
m.redraw();
}, 500);
// }, 5000);
};
var showGround = function() {
var node = vm.node;
@ -190,7 +194,6 @@ module.exports = function(opts, i18n) {
} else if (progress && progress.orig) {
vm.lastFeedback = 'good';
// console.log(tree);
vm.keepGoing = true;
setTimeout(function() {
socket.sendAnaMove(progress);
}, 500);
@ -198,6 +201,8 @@ module.exports = function(opts, i18n) {
};
var sendResult = function(win) {
if (vm.resultSent) return;
vm.resultSent = true;
vm.loading = true;
xhr.round(data.puzzle.id, win).then(function(res) {
data.user = res.user;
@ -207,10 +212,10 @@ module.exports = function(opts, i18n) {
var nextPuzzle = function() {
vm.loading = true;
xhr.nextPuzzle().then(function(cfg) {
reload(cfg);
pushState(cfg);
xhr.nextPuzzle().then(function(d) {
// pushState(cfg);
vm.loading = false;
initiate(d);
});
};
@ -250,7 +255,7 @@ module.exports = function(opts, i18n) {
}
});
};
instanciateCeval();
// instanciateCeval();
var gameOver = function() {
if (vm.node.dests !== '') return false;
@ -287,6 +292,7 @@ module.exports = function(opts, i18n) {
};
var viewSolution = function() {
sendResult(false);
vm.mode = 'view';
mergeSolution(tree, vm.initialNode, data.puzzle.branch, data.puzzle.color);
reorderChildren(vm.initialPath, true);
@ -301,12 +307,10 @@ module.exports = function(opts, i18n) {
reset: function() {
showGround();
m.redraw();
},
destsCache: data.game.destsCache
}
});
var moveTest = moveTestBuild(vm, data.puzzle);
showGround();
initiate(opts.data);
keyboard.bind({
vm: vm,
@ -317,8 +321,12 @@ module.exports = function(opts, i18n) {
return {
vm: vm,
data: data,
tree: tree,
getData: function() {
return data;
},
getTree: function() {
return tree;
},
ground: ground,
userJump: userJump,
viewSolution: viewSolution,

14
ui/puzzle/src/socket.js
View file

@ -4,11 +4,6 @@ module.exports = function(opts) {
var anaDestsTimeout;
var anaDestsCache = {};
for (var path in opts.destsCache)
anaDestsCache[path] = {
path: path,
dests: opts.destsCache[path]
};
var handlers = {
node: function(data) {
@ -61,6 +56,15 @@ module.exports = function(opts) {
return false;
},
setDestsCache: function(c) {
anaDestsCache = {};
for (var path in opts.destsCache)
anaDestsCache[path] = {
path: path,
dests: opts.destsCache[path]
};
},
sendAnaMove: sendAnaMove,
sendAnaDests: sendAnaDests

71
ui/puzzle/src/view/after.js
View file

@ -23,77 +23,6 @@ var m = require('mithril');
// ]);
// }
function renderViewTable(ctrl) {
return [
(!ctrl.hasEverVoted.get() && ctrl.data.puzzle.enabled && ctrl.data.voted === null) ? m('div.please_vote', [
m('p.first', [
m('strong', ctrl.trans.noarg('wasThisPuzzleAnyGood')),
m('br'),
m('span', ctrl.trans.noarg('pleaseVotePuzzle'))
]),
m('p.then',
m('strong', ctrl.trans.noarg('thankYou'))
)
]) : null,
m('div.box', [
(ctrl.data.puzzle.enabled && ctrl.data.user) ? renderVote(ctrl) : null,
m('h2.text[data-icon="-"]',
m('a', {
href: '/training/' + ctrl.data.puzzle.id
}, ctrl.trans('puzzleId', ctrl.data.puzzle.id))
),
m('p', m.trust(ctrl.trans('ratingX', m('strong', ctrl.data.puzzle.rating)))),
m('p', m.trust(ctrl.trans('playedXTimes', m('strong', ctrl.data.puzzle.attempts)))),
m('p',
m('input.copyable.autoselect[readonly][spellCheck=false]', {
value: 'https://lichess.org/training/' + ctrl.data.puzzle.id
})
)
]),
m('div.continue_wrap', [
renderCommentary(ctrl),
renderResult(ctrl),
ctrl.data.win === null ? m('button.continue.button.text[data-icon=G]', {
onclick: partial(xhr.newPuzzle, ctrl)
}, ctrl.trans.noarg('continueTraining')) : m('a.continue.button.text[data-icon=G]', {
onclick: partial(xhr.newPuzzle, ctrl)
}, ctrl.trans.noarg('continueTraining')), !(ctrl.data.win === null ? ctrl.data.round.win : ctrl.data.win) ? m('a.retry.text[data-icon=P]', {
onclick: partial(xhr.retry, ctrl)
}, ctrl.trans.noarg('retryThisPuzzle')) : null
])
];
}
// function renderViewControls(ctrl, fen) {
// var d = ctrl.data;
// var history = d.replay.history;
// var step = d.replay.step;
// return m('div.game_control', [
// d.puzzle.gameId ? m('a.button.hint--bottom', {
// 'data-hint': ctrl.trans('fromGameLink', d.puzzle.gameId),
// href: '/' + d.puzzle.gameId + '/' + d.puzzle.color + '#' + d.puzzle.initialPly
// }, m('span[data-icon=v]')) : null,
// m('a.button.hint--bottom', {
// 'data-hint': ctrl.trans('analysis'),
// href: puzzle.makeUrl('/analysis/', fen) + '?color=' + ctrl.chessground.data.orientation,
// }, m('span[data-icon=A]')),
// m('div#GameButtons.hint--bottom', {
// 'data-hint': 'Review puzzle solution'
// }, [
// ['first', 'W', 0],
// ['prev', 'Y', step - 1],
// ['next', 'X', step + 1],
// ['last', 'V', history.length - 1]
// ].map(function(b) {
// var enabled = step != b[2] && b[2] >= 0 && b[2] < history.length;
// return m('a.button.' + b[0] + (enabled ? '' : '.disabled'), {
// 'data-icon': b[1],
// onmousedown: enabled ? partial(ctrl.jump, b[2]) : null
// });
// }))
// ]);
// }
module.exports = function(ctrl) {
return m('div.feedback.view', [
// (!ctrl.hasEverVoted.get() && ctrl.data.puzzle.enabled && ctrl.data.voted === null) ? m('div.please_vote', [

2
ui/puzzle/src/view/feedback.js
View file

@ -12,7 +12,7 @@ function viewSolution(ctrl) {
}
function initial(ctrl) {
var puzzleColor = ctrl.data.puzzle.color;
var puzzleColor = ctrl.getData().puzzle.color;
return m('div.feedback.play', [
m('div.player', [
m('div.no-square', m('piece.king.' + puzzleColor)),

6
ui/puzzle/src/view/history.js
View file

@ -14,11 +14,7 @@ module.exports = function(data) {
href: '/training/' + s[0]
}, s[1] > 0 ? '+' + s[1] : s[1]);
return m('span', ' ');
}),
m('a', {
class: 'new',
href: '/training'
}, '+')
})
])
]);
};

4
ui/puzzle/src/view/main.js
View file

@ -7,7 +7,7 @@ var feedbackView = require('./feedback');
var historyView = require('./history');
function renderOpeningBox(ctrl) {
var opening = ctrl.tree.getOpening(ctrl.vm.nodeList);
var opening = ctrl.getTree().getOpening(ctrl.vm.nodeList);
if (opening) return m('div', {
class: 'opening_box',
title: opening.eco + ' ' + opening.name
@ -117,7 +117,7 @@ module.exports = function(ctrl) {
]),
m('div.underboard', [
m('div.center', [
historyView(ctrl.data)
historyView(ctrl.getData())
])
])
];

4
ui/puzzle/src/view/side.js
View file

@ -7,8 +7,8 @@ function strong(txt) {
module.exports = function(ctrl) {
var puzzle = ctrl.data.puzzle;
var game = ctrl.data.game;
var puzzle = ctrl.getData().puzzle;
var game = ctrl.getData().game;
return [
m('div.game_infos.puzzle[data-icon="-"]', [

2
ui/puzzle/src/view/tree.js
View file

@ -222,7 +222,7 @@ function eventPath(e, ctrl) {
module.exports = {
render: function(ctrl) {
var root = ctrl.tree.root;
var root = ctrl.getTree().root;
var ctx = {
ctrl: ctrl,
showComputer: false