deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

Move coord color definition to CSS

dark-default
romnzs 2021-10-26 23:01:09 +03:00 committed by Thibault Duplessis
parent a3e6258480
commit 5923082eb3
11 changed files with 147 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/analyse/src/ground.ts
View File

@ -4,7 +4,6 @@ import { Api as CgApi } from 'chessground/api';
import { Config as CgConfig } from 'chessground/config';
import * as cg from 'chessground/types';
import { DrawShape } from 'chessground/draw';
import changeColorHandle from 'common/coordsColor';
import resizeHandle from 'common/resize';
import AnalyseCtrl from './ctrl';
@ -66,7 +65,6 @@ export function makeConfig(ctrl: AnalyseCtrl): CgConfig {
dropNewPiece: ctrl.userNewPiece,
insert(elements: cg.Elements) {
if (!ctrl.embed) resizeHandle(elements, Prefs.ShowResizeHandle.Always, ctrl.node.ply);
if (!ctrl.embed && pref.coords == Prefs.Coords.Inside) changeColorHandle();
},
},
premovable: {

2
ui/analyse/src/view.ts
View File

@ -2,7 +2,6 @@ import { view as cevalView } from 'ceval';
import { read as readFen } from 'chessground/fen';
import { parseFen } from 'chessops/fen';
import { defined } from 'common';
import changeColorHandle from 'common/coordsColor';
import {
bind,
bindNonPassive,
@ -300,7 +299,6 @@ function controls(ctrl: AnalyseCtrl) {
function forceInnerCoords(ctrl: AnalyseCtrl, v: boolean) {
if (ctrl.data.pref.coords === Prefs.Coords.Outside) {
$('body').toggleClass('coords-in', v).toggleClass('coords-out', !v);
changeColorHandle();
}
}

173
ui/common/css/vendor/chessground/_board-2d.scss vendored
View File

@ -1,35 +1,146 @@
$board-image-path: '../images/board';
$board-files: (
'blue': 'svg/blue.svg',
'blue2': 'blue2.jpg',
'blue-marble': 'blue-marble.jpg',
'wood2': 'wood2.jpg',
'wood3': 'wood3.jpg',
'wood4': 'wood4.jpg',
'blue3': 'blue3.jpg',
'marble': 'marble.jpg',
'brown': 'svg/brown.svg',
'green': 'svg/green.svg',
'green-plastic': 'green-plastic.png',
'olive': 'olive.jpg',
'purple': 'svg/purple.svg',
'purple-diag': 'purple-diag.png',
'grey': 'grey.jpg',
'wood': 'wood.jpg',
'canvas': 'canvas2.jpg',
'leather': 'leather.jpg',
'metal': 'metal.jpg',
'maple': 'maple.jpg',
'maple2': 'maple2.jpg',
'newspaper': 'newspaper.png',
'pink': 'pink-pyramid.png',
'ic': 'svg/ic.svg',
'horsey': 'horsey.jpg',
$board-themes: (
'blue': (
file: 'svg/blue.svg',
coord-color-white: #dee3e6,
coord-color-black: #788a94,
),
'blue2': (
file: 'blue2.jpg',
coord-color-white: #97b2c7,
coord-color-black: #546f82,
),
'blue3': (
file: 'blue3.jpg',
coord-color-white: #d9e0e6,
coord-color-black: #315991,
),
'blue-marble': (
file: 'blue-marble.jpg',
coord-color-white: #eae6dd,
coord-color-black: #7c7f87,
),
'canvas': (
file: 'canvas2.jpg',
coord-color-white: #d7daeb,
coord-color-black: #547388,
),
'wood': (
file: 'wood.jpg',
coord-color-white: #d8a45b,
coord-color-black: #9b4d0f,
),
'wood2': (
file: 'wood2.jpg',
coord-color-white: #a38b5d,
coord-color-black: #6c5017,
),
'wood3': (
file: 'wood3.jpg',
coord-color-white: #d0ceca,
coord-color-black: #755839,
),
'wood4': (
file: 'wood4.jpg',
coord-color-white: #caaf7d,
coord-color-black: #7b5330,
),
'maple': (
file: 'maple.jpg',
coord-color-white: #e8ceab,
coord-color-black: #bc7944,
),
'maple2': (
file: 'maple2.jpg',
coord-color-white: #e2c89f,
coord-color-black: #996633,
),
'leather': (
file: 'leather.jpg',
coord-color-white: #d1d1c9,
coord-color-black: #c28e16,
),
'green': (
file: 'svg/green.svg',
coord-color-white: #ffffdd,
coord-color-black: #6d8753,
),
'brown': (
file: 'svg/brown.svg',
coord-color-white: #f0d9b5,
coord-color-black: #946f51,
),
'pink': (
file: 'pink-pyramid.png',
coord-color-white: #e8e9b7,
coord-color-black: #ed7272,
),
'marble': (
file: 'marble.jpg',
coord-color-white: #93ab91,
coord-color-black: #4f644e,
),
'green-plastic': (
file: 'green-plastic.png',
coord-color-white: #f2f9bb,
coord-color-black: #59935d,
),
'grey': (
file: 'grey.jpg',
coord-color-white: #b8b8b8,
coord-color-black: #7d7d7d,
),
'metal': (
file: 'metal.jpg',
coord-color-white: #c9c9c9,
coord-color-black: #727272,
),
'olive': (
file: 'olive.jpg',
coord-color-white: #b8b19f,
coord-color-black: #6d6655,
),
'newspaper': (
file: 'newspaper.png',
coord-color-white: #fff,
coord-color-black: #8d8d8d,
),
'purple': (
file: 'svg/purple.svg',
coord-color-white: #9f90b0,
coord-color-black: #7d4a8d,
),
'purple-diag': (
file: 'purple-diag.png',
coord-color-white: #e5daf0,
coord-color-black: #957ab0,
),
'ic': (
file: 'svg/ic.svg',
coord-color-white: #ececec,
coord-color-black: #c1c18e,
),
'horsey': (
file: 'horsey.jpg',
coord-color-white: #f0d9b5,
coord-color-black: #946f51,
),
);
@each $color, $file in $board-files {
.#{$color} .is2d cg-board {
background-image: url(../images/board/#{$file});
@each $name, $theme in $board-themes {
.#{$name} .is2d {
cg-board {
background-image: img-url('board/#{map-get($theme, file)}');
}
$coord-color-white: map-get($theme, coord-color-white);
$coord-color-black: map-get($theme, coord-color-black);
@if $coord-color-white and $coord-color-black {
coords {
--cg-coord-color-white: #{$coord-color-white};
--cg-coord-color-black: #{$coord-color-black};
--cg-coord-shadow: none;
}
}
}
}

13
ui/common/css/vendor/chessground/_coords-colors.scss vendored
View File

@ -1,23 +1,20 @@
:root {
--cg-coord-color-white: #fff;
--cg-coord-color-black: #fff;
--cg-coord-shadow: 0 1px 2px #000;
}
$coord-color-default: #fff;
$coord-shadow-default: 0 1px 2px #000;
coords {
text-shadow: var(--cg-coord-shadow);
text-shadow: var(--cg-coord-shadow, $coord-shadow-default);
}
.orientation-white .files coord:nth-child(2n + 1),
.orientation-white .ranks coord:nth-child(2n),
.orientation-black .files coord:nth-child(2n),
.orientation-black .ranks coord:nth-child(2n + 1) {
color: var(--cg-coord-color-white);
color: var(--cg-coord-color-white, $coord-color-default);
}
.orientation-white .files coord:nth-child(2n),
.orientation-white .ranks coord:nth-child(2n + 1),
.orientation-black .files coord:nth-child(2n + 1),
.orientation-black .ranks coord:nth-child(2n) {
color: var(--cg-coord-color-black);
color: var(--cg-coord-color-black, $coord-color-default);
}

41
ui/common/src/coordsColor.ts
View File

@ -1,41 +0,0 @@
const changeColorHandle = (): void => {
const dict: { [theme: string]: string } = {
blue: '#DEE3E6 #788a94',
blue2: '#97b2c7 #546f82',
blue3: '#d9e0e6 #315991',
canvas: '#d7daeb #547388',
wood: '#d8a45b #9b4d0f',
wood2: '#a38b5d #6c5017',
wood3: '#d0ceca #755839',
wood4: '#caaf7d #7b5330',
maple: '#e8ceab #bc7944',
maple2: '#E2C89F #996633',
leather: '#d1d1c9 #c28e16',
green: '#FFFFDD #6d8753',
brown: '#F0D9B5 #946f51',
pink: '#E8E9B7 #ED7272',
marble: '#93ab91 #4f644e',
'blue-marble': '#EAE6DD #7C7F87',
'green-plastic': '#f2f9bb #59935d',
grey: '#b8b8b8 #7d7d7d',
metal: '#c9c9c9 #727272',
olive: '#b8b19f #6d6655',
newspaper: '#fff #8d8d8d',
purple: '#9f90b0 #7d4a8d',
'purple-diag': '#E5DAF0 #957AB0',
ic: '#ececec #c1c18e',
horsey: '#F0D9B5 #946f51',
};
for (const theme of document.body.className.split(' ')) {
if (theme in dict) {
const style = document.documentElement.style,
colors = dict[theme].split(' ');
style.setProperty('--cg-coord-color-white', colors[0]);
style.setProperty('--cg-coord-color-black', colors[1]);
style.setProperty('--cg-coord-shadow', 'none');
}
}
};
export default changeColorHandle;

2
ui/dasher/src/theme.ts
View File

@ -1,5 +1,4 @@
import { h, VNode } from 'snabbdom';
import changeColorHandle from 'common/coordsColor';
import * as xhr from 'common/xhr';
import { Redraw, Open, bind, header } from './util';
@ -79,5 +78,4 @@ function themeView(current: Theme, set: (t: Theme) => void) {
function applyTheme(t: Theme, list: Theme[]) {
$('body').removeClass(list.join(' ')).addClass(t);
changeColorHandle();
}

2
ui/editor/src/chessground.ts
View File

@ -3,7 +3,6 @@ import { Chessground } from 'chessground';
import { Config as CgConfig } from 'chessground/config';
import { MouchEvent } from 'chessground/types';
import * as util from 'chessground/util';
import changeColorHandle from 'common/coordsColor';
import EditorCtrl from './ctrl';
export default function (ctrl: EditorCtrl): VNode {
@ -150,7 +149,6 @@ function makeConfig(ctrl: EditorCtrl): CgConfig {
},
events: {
change: ctrl.onChange.bind(ctrl),
insert: changeColorHandle,
},
};
}

2
ui/puz/src/view/chessground.ts
View File

@ -1,4 +1,3 @@
import changeColorHandle from 'common/coordsColor';
import resizeHandle from 'common/resize';
import { Config as CgConfig } from 'chessground/config';
import { PuzPrefs, UserMove } from '../interfaces';
@ -31,7 +30,6 @@ export function makeConfig(opts: CgConfig, pref: PuzPrefs, userMove: UserMove):
move: userMove,
insert(elements) {
resizeHandle(elements, Prefs.ShowResizeHandle.OnlyAtStart, 0, p => p == 0);
if (pref.coords == Prefs.Coords.Inside) changeColorHandle();
},
},
premovable: {

2
ui/puzzle/src/view/chessground.ts
View File

@ -1,4 +1,3 @@
import changeColorHandle from 'common/coordsColor';
import resizeHandle from 'common/resize';
import { Chessground } from 'chessground';
import { Config as CgConfig } from 'chessground/config';
@ -43,7 +42,6 @@ export function makeConfig(ctrl: Controller): CgConfig {
move: ctrl.userMove,
insert(elements) {
resizeHandle(elements, Prefs.ShowResizeHandle.Always, ctrl.vm.node.ply);
if (ctrl.pref.coords === Prefs.Coords.Inside) changeColorHandle();
},
},
premovable: {

2
ui/puzzle/src/view/main.ts
View File

@ -1,7 +1,6 @@
import * as control from '../control';
import * as side from './side';
import theme from './theme';
import changeColorHandle from 'common/coordsColor';
import chessground from './chessground';
import feedbackView from './feedback';
import { Controller } from '../interfaces';
@ -90,7 +89,6 @@ export default function (ctrl: Controller): VNode {
if (old.data!.gaugeOn !== gaugeOn) {
if (ctrl.pref.coords === Prefs.Coords.Outside) {
$('body').toggleClass('coords-in', gaugeOn).toggleClass('coords-out', !gaugeOn);
changeColorHandle();
}
document.body.dispatchEvent(new Event('chessground.resize'));
}

2
ui/round/src/ground.ts
View File

@ -1,7 +1,6 @@
import { h } from 'snabbdom';
import { Chessground } from 'chessground';
import { Config } from 'chessground/config';
import changeColorHandle from 'common/coordsColor';
import * as round from './round';
import resizeHandle from 'common/resize';
import * as util from './util';
@ -35,7 +34,6 @@ export function makeConfig(ctrl: RoundController): Config {
const isSecond = (firstPly % 2 === 0 ? 'white' : 'black') !== data.player.color;
const showUntil = firstPly + 2 + +isSecond;
resizeHandle(elements, ctrl.data.pref.resizeHandle, ctrl.ply, p => p <= showUntil);
if (data.pref.coords === Prefs.Coords.Inside) changeColorHandle();
},
},
movable: {