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 timeTag = tag("time")
val dialog = tag("dialog") val dialog = tag("dialog")
val svgTag = tag("svg") val svgTag = tag("svg")
val textTag = tag("text") val svgGroupTag = tag("g")
val svgTextTag = tag("text")
def userTitleTag(t: Title) = def userTitleTag(t: Title) =
span( span(

8
app/views/coordinate.scala
View File

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

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

@ -132,14 +132,20 @@ $mq-col3: $mq-x-large;
.coord { .coord {
@include transition; @include transition;
font-weight: bold; text {
text-shadow: 0 10px 10px #444; @include transition;
font-weight: bold;
text-shadow: 0 10px 10px #444;
}
@mixin coord($fill, $opacity, $font-size, $translate-x, $translate-y) { @mixin coord($fill, $opacity, $font-size, $translate-x, $translate-y) {
fill: $fill;
opacity: $opacity;
font-size: $font-size;
transform: translate($translate-x, $translate-y); transform: translate($translate-x, $translate-y);
text {
fill: $fill;
opacity: $opacity;
font-size: $font-size;
}
} }
&--resolved { &--resolved {
@ -190,7 +196,7 @@ $mq-col3: $mq-x-large;
color: $c-wrong !important; color: $c-wrong !important;
} }
.coord--current { .coord--current text {
fill: $c-wrong !important; 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 resizeHandle from 'common/resize';
import * as cg from 'chessground/types'; import * as cg from 'chessground/types';
type CoordModifier = 'new' | 'next' | 'current' | 'resolved';
lichess.load.then(() => { lichess.load.then(() => {
$('#trainer').each(function (this: HTMLElement) { $('#trainer').each(function (this: HTMLElement) {
const $trainer = $(this); const $trainer = $(this);
const $board = $('.coord-trainer__board .cg-wrap'); const $board = $('.coord-trainer__board .cg-wrap');
const $coordsSvg = $('.coords-svg'); const $coordsSvg = $('.coords-svg');
const $coords = $coordsSvg.find('.coord'); const $coordTexts = $coordsSvg.find('.coord text');
let ground; let ground;
const $side = $('.coord-trainer__side'); const $side = $('.coord-trainer__side');
const $right = $('.coord-trainer__table'); const $right = $('.coord-trainer__table');
@ -122,7 +124,7 @@ lichess.load.then(() => {
centerRight(); centerRight();
const clearCoords = function () { const clearCoords = function () {
$coords.text(''); $coordTexts.text('');
}; };
const newCoord = function (prevCoord) { const newCoord = function (prevCoord) {
@ -140,17 +142,20 @@ lichess.load.then(() => {
); );
}; };
const resolvedCoordEl = () => $coordsSvg.find('.coord--resolved'); const coordClass = (modifier: CoordModifier) => `coord--${modifier}`;
const currentCoordEl = () => $coordsSvg.find('.coord--current'); const coordEl = (modifier: CoordModifier) => $coordsSvg.find(`.${coordClass(modifier)}`);
const nextCoordEl = () => $coordsSvg.find('.coord--next'); const coordTextEl = (modifier: CoordModifier) => coordEl(modifier).find('text');
const newCoordEl = () => $coordsSvg.find('.coord--new');
const advanceCoords = function () { const advanceCoords = function () {
const resolved = resolvedCoordEl().remove(); coordTextEl('resolved').text('');
currentCoordEl().removeClass('coord--current').addClass('coord--resolved'); const resolvedEl = coordEl('resolved').remove();
nextCoordEl().removeClass('coord--next').addClass('coord--current');
newCoordEl().text(newCoord(currentCoordEl().text())).removeClass('coord--new').addClass('coord--next'); coordEl('current').removeClass(coordClass('current')).addClass(coordClass('resolved'));
resolved.text('').removeClass('coord--resolved').addClass('coord--new').appendTo($coordsSvg); 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 () { const stop = function () {
@ -205,7 +210,7 @@ lichess.load.then(() => {
ground.set({ ground.set({
events: { events: {
select(key) { select(key) {
const hit = key == currentCoordEl().text(); const hit = key == coordEl('current').text();
if (hit) { if (hit) {
score++; score++;
$score.text(score); $score.text(score);
@ -223,8 +228,8 @@ lichess.load.then(() => {
}); });
const initialCoordValue = newCoord('a1'); const initialCoordValue = newCoord('a1');
currentCoordEl().text(initialCoordValue); coordTextEl('current').text(initialCoordValue);
nextCoordEl().text(newCoord(initialCoordValue)); coordTextEl('next').text(newCoord(initialCoordValue));
tick(); tick();
}, 1000); }, 1000);
}); });