deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

Fix coordinate positions in WebKit

pull/9343/head
romnzs 2021-07-04 00:45:12 +03:00
parent b370f12758
commit 736fb3d1c4
4 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/ui/scalatags.scala
View File

@ -57,7 +57,8 @@ trait ScalatagsSnippets extends Cap {
val timeTag = tag("time")
val dialog = tag("dialog")
val svgTag = tag("svg")
val textTag = tag("text")
val svgGroupTag = tag("g")
val svgTextTag = tag("text")
def userTitleTag(t: Title) =
span(

8
app/views/coordinate.scala
View File

@ -75,10 +75,10 @@ object coordinate {
),
div(cls := "coord-trainer__board main-board")(
svgTag(cls := "coords-svg", viewBoxAttr := "0 0 100 100")(
textTag(cls := "coord coord--resolved"),
textTag(cls := "coord coord--current"),
textTag(cls := "coord coord--next"),
textTag(cls := "coord coord--new")
svgGroupTag(cls := "coord coord--resolved")(svgTextTag),
svgGroupTag(cls := "coord coord--current")(svgTextTag),
svgGroupTag(cls := "coord coord--next")(svgTextTag),
svgGroupTag(cls := "coord coord--new")(svgTextTag)
),
chessgroundBoard
),

18
ui/site/css/_coordinate.scss
View File

@ -132,14 +132,20 @@ $mq-col3: $mq-x-large;
.coord {
@include transition;
font-weight: bold;
text-shadow: 0 10px 10px #444;
text {
@include transition;
font-weight: bold;
text-shadow: 0 10px 10px #444;
}
@mixin coord($fill, $opacity, $font-size, $translate-x, $translate-y) {
fill: $fill;
opacity: $opacity;
font-size: $font-size;
transform: translate($translate-x, $translate-y);
text {
fill: $fill;
opacity: $opacity;
font-size: $font-size;
}
}
&--resolved {
@ -190,7 +196,7 @@ $mq-col3: $mq-x-large;
color: $c-wrong !important;
}
.coord--current {
.coord--current text {
fill: $c-wrong !important;
}
}

33
ui/site/src/coordinate.ts
View File

@ -4,12 +4,14 @@ import throttle from 'common/throttle';
import resizeHandle from 'common/resize';
import * as cg from 'chessground/types';
type CoordModifier = 'new' | 'next' | 'current' | 'resolved';
lichess.load.then(() => {
$('#trainer').each(function (this: HTMLElement) {
const $trainer = $(this);
const $board = $('.coord-trainer__board .cg-wrap');
const $coordsSvg = $('.coords-svg');
const $coords = $coordsSvg.find('.coord');
const $coordTexts = $coordsSvg.find('.coord text');
let ground;
const $side = $('.coord-trainer__side');
const $right = $('.coord-trainer__table');
@ -122,7 +124,7 @@ lichess.load.then(() => {
centerRight();
const clearCoords = function () {
$coords.text('');
$coordTexts.text('');
};
const newCoord = function (prevCoord) {
@ -140,17 +142,20 @@ lichess.load.then(() => {
);
};
const resolvedCoordEl = () => $coordsSvg.find('.coord--resolved');
const currentCoordEl = () => $coordsSvg.find('.coord--current');
const nextCoordEl = () => $coordsSvg.find('.coord--next');
const newCoordEl = () => $coordsSvg.find('.coord--new');
const coordClass = (modifier: CoordModifier) => `coord--${modifier}`;
const coordEl = (modifier: CoordModifier) => $coordsSvg.find(`.${coordClass(modifier)}`);
const coordTextEl = (modifier: CoordModifier) => coordEl(modifier).find('text');
const advanceCoords = function () {
const resolved = resolvedCoordEl().remove();
currentCoordEl().removeClass('coord--current').addClass('coord--resolved');
nextCoordEl().removeClass('coord--next').addClass('coord--current');
newCoordEl().text(newCoord(currentCoordEl().text())).removeClass('coord--new').addClass('coord--next');
resolved.text('').removeClass('coord--resolved').addClass('coord--new').appendTo($coordsSvg);
coordTextEl('resolved').text('');
const resolvedEl = coordEl('resolved').remove();
coordEl('current').removeClass(coordClass('current')).addClass(coordClass('resolved'));
coordEl('next').removeClass(coordClass('next')).addClass(coordClass('current'));
coordTextEl('new').text(newCoord(coordTextEl('current').text()));
coordEl('new').removeClass(coordClass('new')).addClass(coordClass('next'));
resolvedEl.removeClass(coordClass('resolved')).addClass(coordClass('new')).appendTo($coordsSvg);
};
const stop = function () {
@ -205,7 +210,7 @@ lichess.load.then(() => {
ground.set({
events: {
select(key) {
const hit = key == currentCoordEl().text();
const hit = key == coordEl('current').text();
if (hit) {
score++;
$score.text(score);
@ -223,8 +228,8 @@ lichess.load.then(() => {
});
const initialCoordValue = newCoord('a1');
currentCoordEl().text(initialCoordValue);
nextCoordEl().text(newCoord(initialCoordValue));
coordTextEl('current').text(initialCoordValue);
coordTextEl('next').text(newCoord(initialCoordValue));
tick();
}, 1000);
});