Redesign Learn->Coordinates (#8571)
* show only one advance coord in coordinates * remove progress bar at start * simple countdown for coordinates * timer and score on right side * put score and timer on left, add red for hurry * run prettier on file * remove next_coord2 styling * red on next_coord * don't show red for subsequent runspull/8638/head
Adam Morris
GitHub
parent
b9eca8c371
commit
49b2cf6bd0
|
|
@ -7,6 +7,7 @@ import lila.app.templating.Environment._
|
|||
import lila.app.ui.ScalatagsTemplate._
|
||||
import lila.common.String.html.safeJsonValue
|
||||
import lila.pref.Pref.Color
|
||||
import play.api.i18n.Lang
|
||||
|
||||
import controllers.routes
|
||||
|
||||
|
|
@ -55,12 +56,19 @@ object coordinate {
|
|||
)
|
||||
}
|
||||
)
|
||||
),
|
||||
div(cls := "box current-status")(
|
||||
h1(trans.storm.score()),
|
||||
div(cls := "coord-trainer__score")(0)
|
||||
),
|
||||
div(cls := "box current-status")(
|
||||
h1(trans.time()),
|
||||
div(cls := "coord-trainer__timer")(30.0)
|
||||
)
|
||||
),
|
||||
div(cls := "coord-trainer__board main-board")(
|
||||
div(cls := "next_coord", id := "next_coord0"),
|
||||
div(cls := "next_coord", id := "next_coord1"),
|
||||
div(cls := "next_coord", id := "next_coord2"),
|
||||
chessgroundBoard
|
||||
),
|
||||
div(cls := "coord-trainer__table")(
|
||||
|
|
@ -75,7 +83,6 @@ object coordinate {
|
|||
),
|
||||
button(cls := "start button button-fat")(trans.coordinates.startTraining())
|
||||
),
|
||||
div(cls := "coord-trainer__score")(0),
|
||||
div(cls := "coord-trainer__progress")(div(cls := "progress_bar"))
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ $mq-col1: $mq-not-medium;
|
|||
$mq-col2: $mq-medium;
|
||||
$mq-col3: $mq-x-large;
|
||||
|
||||
@import '../../puz/css/font';
|
||||
|
||||
#main-wrap {
|
||||
--main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
|
||||
|
||||
|
|
@ -33,8 +35,15 @@ $mq-col3: $mq-x-large;
|
|||
grid-area: progress;
|
||||
}
|
||||
|
||||
&__score {
|
||||
grid-area: score;
|
||||
&__score,
|
||||
&__timer {
|
||||
font-family: 'storm';
|
||||
font-size: 5em;
|
||||
margin: $block-gap;
|
||||
}
|
||||
|
||||
.hurry {
|
||||
color: $c-bad !important;
|
||||
}
|
||||
|
||||
grid-template-areas: 'board' 'progress' 'score' 'table' 'side';
|
||||
|
|
@ -53,6 +62,7 @@ $mq-col3: $mq-x-large;
|
|||
|
||||
.box {
|
||||
padding: $block-gap;
|
||||
margin-top: $block-gap;
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
|
|
@ -63,6 +73,13 @@ $mq-col3: $mq-x-large;
|
|||
p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&.current-status {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
form.color {
|
||||
|
|
@ -109,10 +126,6 @@ $mq-col3: $mq-x-large;
|
|||
opacity: 0.8;
|
||||
|
||||
@include transition;
|
||||
|
||||
&.nope {
|
||||
color: $c-bad !important;
|
||||
}
|
||||
}
|
||||
|
||||
#next_coord0 {
|
||||
|
|
@ -126,16 +139,7 @@ $mq-col3: $mq-x-large;
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#next_coord2 {
|
||||
transition: none;
|
||||
left: 38%;
|
||||
top: 13%;
|
||||
font-size: 38px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#next_coord1,
|
||||
#next_coord2,
|
||||
#next_coord0 {
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -159,25 +163,13 @@ $mq-col3: $mq-x-large;
|
|||
}
|
||||
}
|
||||
|
||||
&__score {
|
||||
@extend %roboto, %flex-center, %box-radius;
|
||||
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 70px;
|
||||
margin: auto;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
background-color: $c-secondary;
|
||||
color: $c-secondary-over;
|
||||
|
||||
@include transition;
|
||||
&.wrong .progress_bar {
|
||||
background-color: $c-bad;
|
||||
}
|
||||
|
||||
&.wrong .progress_bar,
|
||||
&.wrong .coord-trainer__score {
|
||||
background-color: $c-bad;
|
||||
&.wrong .coord-trainer__score,
|
||||
&.wrong #next_coord0 {
|
||||
color: $c-bad !important;
|
||||
}
|
||||
|
||||
&.play .start,
|
||||
|
|
@ -192,7 +184,8 @@ $mq-col3: $mq-x-large;
|
|||
|
||||
&.init {
|
||||
@include breakpoint($mq-col1) {
|
||||
.coord-trainer__score {
|
||||
.coord-trainer__score,
|
||||
.coord-trainer__progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +199,9 @@ $mq-col3: $mq-x-large;
|
|||
@extend %page-text-shadow !optional;
|
||||
}
|
||||
|
||||
.coord-trainer__score {
|
||||
.coord-trainer__score,
|
||||
.coord-trainer__progress,
|
||||
.current-status {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,16 +9,18 @@ lichess.load.then(() => {
|
|||
const $side = $('.coord-trainer__side');
|
||||
const $right = $('.coord-trainer__table');
|
||||
const $bar = $trainer.find('.progress_bar');
|
||||
const $coords = [$('#next_coord0'), $('#next_coord1'), $('#next_coord2')];
|
||||
const $coords = [$('#next_coord0'), $('#next_coord1')];
|
||||
const $start = $right.find('.start');
|
||||
const $explanation = $right.find('.explanation');
|
||||
const $score = $('.coord-trainer__score');
|
||||
const $timer = $('.coord-trainer__timer');
|
||||
const scoreUrl = $trainer.data('score-url');
|
||||
const duration = 30 * 1000;
|
||||
const tickDelay = 50;
|
||||
let colorPref = $trainer.data('color-pref');
|
||||
let color;
|
||||
let startAt, score;
|
||||
let wrongTimeout;
|
||||
|
||||
const showColor = function () {
|
||||
color = colorPref == 'random' ? ['white', 'black'][Math.round(Math.random())] : colorPref;
|
||||
|
|
@ -146,6 +148,12 @@ lichess.load.then(() => {
|
|||
|
||||
const tick = function () {
|
||||
const spent = Math.min(duration, new Date().getTime() - startAt);
|
||||
var left = ((duration - spent) / 1000).toFixed(1);
|
||||
if (+left < 10) {
|
||||
$timer.addClass('hurry');
|
||||
}
|
||||
|
||||
$timer.text(left);
|
||||
$bar.css('width', (100 * spent) / duration + '%');
|
||||
if (spent < duration) setTimeout(tick, tickDelay);
|
||||
else stop();
|
||||
|
|
@ -154,6 +162,7 @@ lichess.load.then(() => {
|
|||
$start.on('click', () => {
|
||||
$explanation.remove();
|
||||
$trainer.addClass('play').removeClass('init');
|
||||
$timer.removeClass('hurry');
|
||||
showColor();
|
||||
clearCoords();
|
||||
centerRight();
|
||||
|
|
@ -171,12 +180,13 @@ lichess.load.then(() => {
|
|||
$score.text(score);
|
||||
advanceCoords();
|
||||
} else {
|
||||
$('#next_coord0').addClass('nope');
|
||||
setTimeout(function () {
|
||||
$('#next_coord0').removeClass('nope');
|
||||
clearTimeout(wrongTimeout);
|
||||
$trainer.addClass('wrong');
|
||||
|
||||
wrongTimeout = setTimeout(function () {
|
||||
$trainer.removeClass('wrong');
|
||||
}, 500);
|
||||
}
|
||||
$trainer.toggleClass('wrong', !hit);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue