118 lines
4.0 KiB
JavaScript
118 lines
4.0 KiB
JavaScript
function loadShepherd(f) {
|
|
if (typeof Shepherd === 'undefined' || Shepherd.activeTour === null) {
|
|
var theme = 'shepherd-theme-' + ($('body').hasClass('dark') ? 'dark' : 'default');
|
|
lichess.loadCss('vendor/' + theme + '.css');
|
|
lichess.loadScript('vendor/shepherd/dist/js/tether.js', { noVersion: true }).then(function () {
|
|
lichess.loadScript('vendor/shepherd/dist/js/shepherd.min.js', { noVersion: true }).then(function () {
|
|
f(theme);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
lichess.studyTour = function (study) {
|
|
loadShepherd(function (theme) {
|
|
var onTab = function (tab) {
|
|
return {
|
|
'before-show': function () {
|
|
study.setTab(tab);
|
|
},
|
|
};
|
|
};
|
|
var tour = new Shepherd.Tour({
|
|
defaults: {
|
|
classes: theme,
|
|
scrollTo: false,
|
|
showCancelLink: true,
|
|
},
|
|
});
|
|
[
|
|
{
|
|
title: 'Welcome to Lichess Study!',
|
|
text:
|
|
'This is a shared analysis board.<br><br>' +
|
|
'Use it to analyse and annotate games,<br>' +
|
|
'discuss positions with friends,<br>' +
|
|
'and of course for chess lessons!<br><br>' +
|
|
"It's a powerful tool, let's take some time to see how it works.",
|
|
attachTo: 'main.analyse .study__buttons .help top',
|
|
},
|
|
{
|
|
title: 'Shared and saved',
|
|
text: 'Other members can see your moves in real time!<br>' + 'Plus, everything is saved forever.',
|
|
attachTo: 'main.analyse .areplay left',
|
|
},
|
|
{
|
|
title: 'Study members',
|
|
text:
|
|
"<i data-icon=''></i> Spectators can view the study and talk in the chat.<br>" +
|
|
"<br><i data-icon=''></i> Contributors can make moves and update the study.",
|
|
attachTo: '.study__members right',
|
|
when: onTab('members'),
|
|
},
|
|
study.isOwner
|
|
? {
|
|
title: 'Invite members',
|
|
text: "By clicking the <i data-icon=''></i> button.<br>" + 'Then decide who can contribute or not.',
|
|
attachTo: '.study__members .add right',
|
|
when: onTab('members'),
|
|
}
|
|
: null,
|
|
{
|
|
title: 'Study chapters',
|
|
text:
|
|
'A study can contain several chapters.<br>' + 'Each chapter has a distinct initial position and move tree.',
|
|
attachTo: '.study__chapters right',
|
|
when: onTab('chapters'),
|
|
},
|
|
study.isContrib
|
|
? {
|
|
title: 'Create new chapters',
|
|
text: "By clicking the <i data-icon=''></i> button.",
|
|
attachTo: '.study__chapters .add right',
|
|
when: onTab('chapters'),
|
|
}
|
|
: null,
|
|
study.isContrib
|
|
? {
|
|
title: 'Comment on a position',
|
|
text:
|
|
"With the <i data-icon=''></i> button, or a right click on the move list on the right.<br>" +
|
|
'Comments are shared and persisted.',
|
|
attachTo: '.study__buttons .left-buttons .comments top',
|
|
}
|
|
: null,
|
|
study.isContrib
|
|
? {
|
|
title: 'Annotate a position',
|
|
text:
|
|
'With the !? button, or a right click on the move list on the right.<br>' +
|
|
'Annotation glyphs are shared and persisted.',
|
|
attachTo: '.study__buttons .left-buttons .glyphs top',
|
|
}
|
|
: null,
|
|
{
|
|
title: 'Thanks for your time',
|
|
text:
|
|
"You can find your <a href='/study/mine/hot'>previous studies</a> from your profile page.<br>" +
|
|
"There is also a <a href='//lichess.org/blog/V0KrLSkAAMo3hsi4/study-chess-the-lichess-way'>blog post about studies</a>.<br>" +
|
|
'Power users might want to press "?" to see keyboard shortcuts.<br>' +
|
|
'Have fun!',
|
|
buttons: [
|
|
{
|
|
text: 'Done',
|
|
action: tour.next,
|
|
},
|
|
],
|
|
attachTo: 'main.analyse .study__buttons .help top',
|
|
},
|
|
]
|
|
.filter(function (v) {
|
|
return v;
|
|
})
|
|
.forEach(function (s) {
|
|
tour.addStep(s.title, s);
|
|
});
|
|
tour.start();
|
|
});
|
|
};
|