fancify the coordinate trainer UI
This commit is contained in:
parent
212a1a569a
commit
2539bb3f7d
|
@ -24,6 +24,8 @@ themepicker = true) {
|
|||
<div class="white">@board.white()</div>
|
||||
<div class="black">@board.black()</div>
|
||||
</div>
|
||||
<div id="next_coord"></div>
|
||||
<div class="score_container"><strong class="score">0</strong></div>
|
||||
<div class="side">
|
||||
<div class="box">
|
||||
<h1>@trans.training()</h1>
|
||||
|
@ -68,10 +70,8 @@ themepicker = true) {
|
|||
<p>A square name appears next to the board and you must click on the correct square.</p>
|
||||
<p>You have 30 seconds to recognize as many squares as possible!</p>
|
||||
</div>
|
||||
<div class="coord"></div>
|
||||
<button class="start button">@trans.startTraining()</button>
|
||||
</div>
|
||||
<div class="progress_bar_container"><div class="progress_bar"></div></div>
|
||||
<div class="score_container"><strong class="score">0</strong></div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -5,14 +5,13 @@ $(function() {
|
|||
var $side = $trainer.find('> .side');
|
||||
var $right = $trainer.find('> .right');
|
||||
var $bar = $trainer.find('.progress_bar');
|
||||
var $coord = $right.find('.coord');
|
||||
var $coord = $trainer.find('#next_coord').disableSelection();
|
||||
var $start = $right.find('.start');
|
||||
var $explanation = $right.find('.explanation');
|
||||
var $scoreCont = $trainer.find('.score_container');
|
||||
var $score = $scoreCont.find('strong');
|
||||
var $score = $trainer.find('.score_container strong');
|
||||
var scoreUrl = $trainer.data('score-url');
|
||||
var colorUrl = $trainer.data('color-url');
|
||||
var duration = 30 * 1000;
|
||||
var duration = 10 * 1000;
|
||||
var tickDelay = 50;
|
||||
var colorPref = $trainer.data('color-pref');
|
||||
var color;
|
||||
|
@ -99,15 +98,18 @@ $(function() {
|
|||
else stop();
|
||||
};
|
||||
|
||||
$score.click(function() {
|
||||
$start.filter(':visible').click();
|
||||
});
|
||||
|
||||
$start.click(function() {
|
||||
$explanation.remove();
|
||||
$trainer.addClass('play');
|
||||
$trainer.addClass('play').removeClass('init');
|
||||
showColor();
|
||||
$coord.text('--');
|
||||
$coord.text('');
|
||||
centerRight();
|
||||
score = 0;
|
||||
$score.text(score);
|
||||
$scoreCont.show();
|
||||
$bar.css('width', 0);
|
||||
setTimeout(function() {
|
||||
startAt = new Date();
|
||||
|
|
|
@ -21,14 +21,26 @@
|
|||
background-color: #759900;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12) inset;
|
||||
}
|
||||
#trainer .coord {
|
||||
font-size: 120px;
|
||||
#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;
|
||||
animate: opacity 0.1s linear;
|
||||
}
|
||||
#trainer .coord.nope {
|
||||
#trainer #next_coord.nope {
|
||||
opacity: 0;
|
||||
}
|
||||
#trainer .explanation {
|
||||
|
@ -43,31 +55,48 @@
|
|||
#trainer .start {
|
||||
font-size: 30px;
|
||||
}
|
||||
#trainer .score_container {
|
||||
#trainer .score {
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left: 202px;
|
||||
width: 512px;
|
||||
text-align: center;
|
||||
}
|
||||
#trainer strong.score {
|
||||
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;
|
||||
}
|
||||
#trainer.play .score {
|
||||
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;
|
||||
}
|
||||
#trainer.play .start,
|
||||
#trainer .coord,
|
||||
#trainer .score_container,
|
||||
#trainer #next_coord,
|
||||
#trainer.play form.color {
|
||||
display: none;
|
||||
}
|
||||
#trainer.play .coord {
|
||||
#trainer.play #next_coord {
|
||||
display: block;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue