Merge branch 'master' of github.com:ornicar/lila
* 'master' of github.com:ornicar/lila: added CSS for look-ahead feature added look-ahead for coordinates training added divs for coordinates training look-ahead
This commit is contained in:
Thibault Duplessis
commit
2c8f0eedf0
|
|
@ -23,7 +23,9 @@ active = siteMenu.puzzle.some) {
|
|||
<div class="white">@board.white()</div>
|
||||
<div class="black">@board.black()</div>
|
||||
</div>
|
||||
<div id="next_coord"></div>
|
||||
<div class="next_coord" id="next_coord0"></div>
|
||||
<div class="next_coord" id="next_coord1"></div>
|
||||
<div class="next_coord" id="next_coord2"></div>
|
||||
<div class="score_container"><strong class="score">0</strong></div>
|
||||
<div class="side">
|
||||
<div class="box">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@ $(function() {
|
|||
var $side = $trainer.find('> .side');
|
||||
var $right = $trainer.find('> .right');
|
||||
var $bar = $trainer.find('.progress_bar');
|
||||
var $coord = $trainer.find('#next_coord').disableSelection();
|
||||
var $coords = [
|
||||
$trainer.find('#next_coord0').disableSelection(),
|
||||
$trainer.find('#next_coord1').disableSelection(),
|
||||
$trainer.find('#next_coord2').disableSelection()
|
||||
];
|
||||
var $start = $right.find('.start');
|
||||
var $explanation = $right.find('.explanation');
|
||||
var $score = $trainer.find('.score_container strong');
|
||||
|
|
@ -15,7 +19,7 @@ $(function() {
|
|||
var tickDelay = 50;
|
||||
var colorPref = $trainer.data('color-pref');
|
||||
var color;
|
||||
var coordToGuess, startAt, score;
|
||||
var startAt, score;
|
||||
|
||||
$trainer.find('.buttons').buttonset().disableSelection();
|
||||
|
||||
|
|
@ -63,16 +67,38 @@ $(function() {
|
|||
};
|
||||
centerRight();
|
||||
|
||||
var newCoord = function() {
|
||||
var c;
|
||||
do {
|
||||
c = 'abcdefgh' [_.random(0, 7)] + _.random(1, 8);
|
||||
} while (c == coordToGuess);
|
||||
coordToGuess = c;
|
||||
$coord.text(coordToGuess);
|
||||
var clearCoords = function() {
|
||||
$.each($coords, function(i, e) {
|
||||
e.text('');
|
||||
});
|
||||
}
|
||||
|
||||
var newCoord = function(prevCoord) {
|
||||
// disallow the previous coordinate's row or file from being selected
|
||||
var files = 'abcdefgh';
|
||||
var fileIndex = files.indexOf(prevCoord[0]);
|
||||
files = files.slice(0, fileIndex) + files.slice(fileIndex + 1, 8);
|
||||
|
||||
var rows = '12345678';
|
||||
var rowIndex = rows.indexOf(prevCoord[1]);
|
||||
rows = rows.slice(0, rowIndex) + rows.slice(rowIndex + 1, 8);
|
||||
|
||||
return files[_.random(0, files.length - 1)] + rows[_.random(0, rows.length - 1)];
|
||||
};
|
||||
|
||||
var advanceCoords = function() {
|
||||
$coords[0].removeClass('nope');
|
||||
var lastElement = $coords.shift();
|
||||
$.each($coords, function(i, e) {
|
||||
e.attr('id', 'next_coord' + i);
|
||||
});
|
||||
lastElement.attr('id', 'next_coord' + ($coords.length));
|
||||
lastElement.text(newCoord($coords[$coords.length - 1].text()));
|
||||
$coords.push(lastElement);
|
||||
}
|
||||
|
||||
var stop = function() {
|
||||
clearCoords();
|
||||
$trainer.removeClass('play');
|
||||
centerRight();
|
||||
$trainer.removeClass('wrong');
|
||||
|
|
@ -106,7 +132,7 @@ $(function() {
|
|||
$explanation.remove();
|
||||
$trainer.addClass('play').removeClass('init');
|
||||
showColor();
|
||||
$coord.text('');
|
||||
clearCoords();
|
||||
centerRight();
|
||||
score = 0;
|
||||
$score.text(score);
|
||||
|
|
@ -114,20 +140,22 @@ $(function() {
|
|||
setTimeout(function() {
|
||||
startAt = new Date();
|
||||
$board.on('click', '.lcs', function() {
|
||||
var hit = this.id == coordToGuess;
|
||||
var hit = this.id == $coords[0].text();
|
||||
if (hit) {
|
||||
score++;
|
||||
$score.text(score);
|
||||
newCoord();
|
||||
advanceCoords();
|
||||
} else {
|
||||
$coord.addClass('nope');
|
||||
setTimeout(function() {
|
||||
$coord.removeClass('nope');
|
||||
}, 100);
|
||||
$coords[0].addClass('nope');
|
||||
setTimeout(function() {
|
||||
$coords[0].removeClass('nope');
|
||||
}, 500);
|
||||
}
|
||||
$trainer.toggleClass('wrong', !hit);
|
||||
});
|
||||
newCoord();
|
||||
$coords[0].text(newCoord('a1'));
|
||||
for(i = 1; i < $coords.length; i++)
|
||||
$coords[i].text(newCoord($coords[i - 1].text()));
|
||||
tick();
|
||||
}, 1000);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,102 +1,133 @@
|
|||
#trainer .lichess_board {
|
||||
display: none;
|
||||
border: 1px solid #c0c0c0;
|
||||
}
|
||||
#trainer.white .white .lichess_board,
|
||||
#trainer.black .black .lichess_board {
|
||||
display: block;
|
||||
}
|
||||
#trainer.play div.lcs:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 10px 2px rgba(216, 85, 0, 0.9);
|
||||
}
|
||||
#trainer .progress_bar_container {
|
||||
margin: 10px 0 10px 0;
|
||||
width: 514px;
|
||||
height: 10px;
|
||||
}
|
||||
#trainer .progress_bar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #759900;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12) inset;
|
||||
}
|
||||
#trainer #next_coord {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 514px;
|
||||
height: 514px;
|
||||
line-height: 512px;
|
||||
text-align: center;
|
||||
font-size: 150px;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
pointer-events:none;
|
||||
color: #fff;
|
||||
text-shadow: 0 10px 10px #444;
|
||||
opacity: 0.7;
|
||||
transition: 0.2s;
|
||||
}
|
||||
#trainer #next_coord.nope {
|
||||
opacity: 0;
|
||||
}
|
||||
#trainer .explanation {
|
||||
text-align: justify;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#trainer .explanation li {
|
||||
list-style: inside disc;
|
||||
margin-top: 1em;
|
||||
display: none;
|
||||
border: 1px solid #c0c0c0;
|
||||
}
|
||||
|
||||
#trainer.white .white .lichess_board, #trainer.black .black .lichess_board {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#trainer.play div.lcs:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 10px 2px rgba(216,85,0,0.9);
|
||||
}
|
||||
|
||||
#trainer .progress_bar_container {
|
||||
margin: 10px 0 10px 0;
|
||||
width: 514px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#trainer .progress_bar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #759900;
|
||||
box-shadow: 0px 1px 2px rgba(0,0,0,0.12) inset;
|
||||
}
|
||||
|
||||
#trainer .next_coord {
|
||||
transition: all 0.1s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 460px;
|
||||
height: 514px;
|
||||
line-height: 512px;
|
||||
text-align: center;
|
||||
font-size: 150px;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
color: #eee;
|
||||
text-shadow: 0 10px 10px #444;
|
||||
opacity: 0.8;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#trainer .next_coord.nope {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
#trainer #next_coord0 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#trainer #next_coord1 {
|
||||
left: 150px;
|
||||
top: 50px;
|
||||
font-size: 65px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#trainer #next_coord2 {
|
||||
transition: none;
|
||||
left: 235px;
|
||||
top: 66px;
|
||||
font-size: 30px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#trainer .explanation {
|
||||
text-align: justify;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#trainer .explanation li {
|
||||
list-style: inside disc;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#trainer .start {
|
||||
font-size: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#trainer .score {
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left: 202px;
|
||||
width: 512px;
|
||||
font-family: monospace;
|
||||
font-size: 70px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
background-color: #759900;
|
||||
transition: all 1s;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 10px #fff;
|
||||
border-radius: 3px;
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left: 202px;
|
||||
width: 512px;
|
||||
font-family: monospace;
|
||||
font-size: 70px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
background-color: #759900;
|
||||
transition: all 1s;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 10px #fff;
|
||||
border-radius: 3px;
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#trainer.init .score {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#trainer.play .score {
|
||||
opacity: 1;
|
||||
top: 550px;
|
||||
box-shadow: 0 0 1px #fff;
|
||||
border-radius: 100px;
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
top: 550px;
|
||||
box-shadow: 0 0 1px #fff;
|
||||
border-radius: 100px;
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#trainer.wrong .progress_bar, #trainer.wrong strong.score {
|
||||
background-color: #ac524f;
|
||||
background-color: #ac524f;
|
||||
}
|
||||
#trainer.play .start,
|
||||
#trainer #next_coord,
|
||||
#trainer.play form.color {
|
||||
display: none;
|
||||
|
||||
#trainer.play .start, #trainer #next_coord, #trainer.play form.color {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#trainer.play #next_coord {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue