From 7d6f78e11667f17fa354b0ffa085951dc000b1e7 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 17 Apr 2024 14:12:40 +0200 Subject: [PATCH 01/19] Add on-square setting --- demo-on-square.html | 43 +++++++++++++++++++++++++++++++++++++++++++ src/state.ts | 4 ++-- src/types.ts | 2 +- src/wrap.ts | 2 +- 4 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 demo-on-square.html diff --git a/demo-on-square.html b/demo-on-square.html new file mode 100644 index 00000000..28ad3470 --- /dev/null +++ b/demo-on-square.html @@ -0,0 +1,43 @@ + + + + + + Chessground Demo On Square + + + + + + + + + +
+ basic board, default config +
+
+ + diff --git a/src/state.ts b/src/state.ts index e91ac983..a33b572d 100644 --- a/src/state.ts +++ b/src/state.ts @@ -13,7 +13,7 @@ export interface HeadlessState { lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"] selected?: cg.Key; // square currently selected "a1" coordinates: boolean; // include coords attributes - ranksPosition: cg.RanksPosition; // position ranks on either side. left | right + ranksPosition: cg.RanksPosition; // position ranks on either side. left | right | on-square autoCastle: boolean; // immediately complete the castle by moving the rook after king move viewOnly: boolean; // don't bind events: the user will never be able to move pieces around disableContextMenu: boolean; // because who needs a context menu on a chessboard @@ -113,7 +113,7 @@ export function defaults(): HeadlessState { orientation: 'white', turnColor: 'white', coordinates: true, - ranksPosition: 'right', + ranksPosition: 'on-square', // 'right', autoCastle: true, viewOnly: false, disableContextMenu: false, diff --git a/src/types.ts b/src/types.ts index 782b83e7..cb9d89bd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -102,7 +102,7 @@ export const colors = ['white', 'black'] as const; export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const; export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const; -export type RanksPosition = 'left' | 'right'; +export type RanksPosition = 'left' | 'right' | 'on-square'; export type BrushColor = 'green' | 'red' | 'blue' | 'yellow'; diff --git a/src/wrap.ts b/src/wrap.ts index a5c1f64e..b6ded407 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -63,7 +63,7 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { if (s.coordinates) { const orientClass = s.orientation === 'black' ? ' black' : ''; - const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; + const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : s.ranksPosition === 'on-square' ? ' on-square' : ''; container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); container.appendChild(renderCoords(files, 'files' + orientClass)); } From 4c762d1c8683b3a7e960fe493c89816653080b5a Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Sat, 20 Apr 2024 18:17:51 +0200 Subject: [PATCH 02/19] Add on-square settings / In progress --- assets/chessground.base.css | 45 +++++++++++++++++++++++++++++++++++++ src/state.ts | 4 ++-- src/wrap.ts | 34 +++++++++++++++++++++++++++- 3 files changed, 80 insertions(+), 3 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index 5c278e10..3d00711a 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -151,6 +151,51 @@ piece.fading { align-items: flex-end; } +.cg-wrap coords.on-square { + flex-flow: column-reverse; + text-align: right; + left: auto; + top: -30px; + opacity: .7; + /*text-transform: uppercase;*/ +} + +.cg-wrap coords.on-square.black { + flex-flow: column; +} + +.cg-wrap coords.ranks.file-a { + right: calc(12.5% * 7 + 4px); +} + +.cg-wrap coords.ranks.file-b { + right: calc(12.5% * 6 + 4px); +} + +.cg-wrap coords.ranks.file-c { + right: calc(12.5% * 5 + 4px); +} + +.cg-wrap coords.ranks.file-d { + right: calc(12.5% * 4 + 4px); +} + +.cg-wrap coords.ranks.file-e { + right: calc(12.5% * 3 + 4px); +} + +.cg-wrap coords.ranks.file-f { + right: calc(12.5% * 2 + 4px); +} + +.cg-wrap coords.ranks.file-g { + right: calc(12.5% * 1 + 4px); +} + +.cg-wrap coords.ranks.file-h { + right: calc(4px); +} + .cg-wrap coords.files { bottom: -4px; left: 24px; diff --git a/src/state.ts b/src/state.ts index a33b572d..deafd08b 100644 --- a/src/state.ts +++ b/src/state.ts @@ -110,10 +110,10 @@ export interface State extends HeadlessState { export function defaults(): HeadlessState { return { pieces: fen.read(fen.initial), - orientation: 'white', + orientation: 'black', // default: 'white' turnColor: 'white', coordinates: true, - ranksPosition: 'on-square', // 'right', + ranksPosition: 'on-square', // default: 'right', autoCastle: true, viewOnly: false, disableContextMenu: false, diff --git a/src/wrap.ts b/src/wrap.ts index b6ded407..f11d378d 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -63,9 +63,27 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { if (s.coordinates) { const orientClass = s.orientation === 'black' ? ' black' : ''; + console.log('orientClass', orientClass) const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : s.ranksPosition === 'on-square' ? ' on-square' : ''; container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(files, 'files' + orientClass)); + container.appendChild(renderCoords(files, 'files' + orientClass )); + // console.log('➡️ ranks', ranks) + // console.log('⬆️ files', files) + ranks.forEach((rank) => { + // console.log('rank', rank) + const currentFile = files[parseInt(rank)-1]; + const cases: string[] = []; + ranks.forEach((rank) => { + cases.push(currentFile + rank); + }) + container.appendChild(renderCoords(cases, 'ranks file-'+ currentFile + orientClass + ranksPositionClass)); + }) + // ranks.forEach((rank) => { + // // console.log('rank', rank) + // container.appendChild(renderCoordsOnSquare(files, 'ranks' + orientClass + ranksPositionClass)); + // }) + // container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); + // container.appendChild(renderCoords(files, 'files' + orientClass)); } let ghost: HTMLElement | undefined; @@ -90,9 +108,23 @@ function renderCoords(elems: readonly string[], className: string): HTMLElement const el = createEl('coords', className); let f: HTMLElement; for (const elem of elems) { + // console.log('elem', elem) f = createEl('coord'); f.textContent = elem; + // console.log(f) el.appendChild(f); } return el; } +// function renderCoordsOnSquare(elems: readonly string[], className: string): HTMLElement { +// const el = createEl('coords', className); +// let f: HTMLElement; +// for (const elem of elems) { +// console.log('elem', elem) +// f = createEl('coord'); +// f.textContent = elem; +// console.log(f) +// el.appendChild(f); +// } +// return el; +// } From a593d5434d0edc101d7de45e32d69a242632484d Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 08:39:35 +0200 Subject: [PATCH 03/19] Coords on-square are displayed correctly --- assets/chessground.base.css | 203 ++++++++++++++++++++++++++++-------- demo-on-square.html | 95 +++++++++++------ src/state.ts | 5 +- src/types.ts | 22 +++- src/wrap.ts | 80 +++++++++++--- 5 files changed, 311 insertions(+), 94 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index 3d00711a..a9641b18 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -151,51 +151,6 @@ piece.fading { align-items: flex-end; } -.cg-wrap coords.on-square { - flex-flow: column-reverse; - text-align: right; - left: auto; - top: -30px; - opacity: .7; - /*text-transform: uppercase;*/ -} - -.cg-wrap coords.on-square.black { - flex-flow: column; -} - -.cg-wrap coords.ranks.file-a { - right: calc(12.5% * 7 + 4px); -} - -.cg-wrap coords.ranks.file-b { - right: calc(12.5% * 6 + 4px); -} - -.cg-wrap coords.ranks.file-c { - right: calc(12.5% * 5 + 4px); -} - -.cg-wrap coords.ranks.file-d { - right: calc(12.5% * 4 + 4px); -} - -.cg-wrap coords.ranks.file-e { - right: calc(12.5% * 3 + 4px); -} - -.cg-wrap coords.ranks.file-f { - right: calc(12.5% * 2 + 4px); -} - -.cg-wrap coords.ranks.file-g { - right: calc(12.5% * 1 + 4px); -} - -.cg-wrap coords.ranks.file-h { - right: calc(4px); -} - .cg-wrap coords.files { bottom: -4px; left: 24px; @@ -217,3 +172,161 @@ piece.fading { .cg-wrap coords.ranks coord { transform: translateY(39%); } + +/** + * On-Square + */ +.cg-wrap coords.files.on-square { + bottom: 0; + left: 0; + flex-flow: row; + width: 100%; + height: 12.5%; + text-transform: uppercase; + text-align: right; +} +.cg-wrap coords.files.black.on-square { + flex-flow: row-reverse; +} +.cg-wrap coords.files.on-square coord { + padding:0.7% 0.6%; +} +/** ORITENTATION WHITE **/ +.cg-wrap coords.files.on-square.rank1 coord { + transform: translateY(0%); +} +.cg-wrap coords.files.on-square.rank2 coord { + transform: translateY(-100%); +} +.cg-wrap coords.files.on-square.rank3 coord { + transform: translateY(-200%); +} +.cg-wrap coords.files.on-square.rank4 coord { + transform: translateY(-300%); +} +.cg-wrap coords.files.on-square.rank5 coord { + transform: translateY(-400%); +} +.cg-wrap coords.files.on-square.rank6 coord { + transform: translateY(-500%); +} +.cg-wrap coords.files.on-square.rank7 coord { + transform: translateY(-600%); +} +.cg-wrap coords.files.on-square.rank8 coord { + transform: translateY(-700%); +} +/** ORITENTATION BLACK **/ +.cg-wrap coords.files.on-square.black.rank1 coord { + transform: translateY(-700%); +} +.cg-wrap coords.files.on-square.black.rank2 coord { + transform: translateY(-600%); +} +.cg-wrap coords.files.on-square.black.rank3 coord { + transform: translateY(-500%); +} +.cg-wrap coords.files.on-square.black.rank4 coord { + transform: translateY(-400%); +} +.cg-wrap coords.files.on-square.black.rank5 coord { + transform: translateY(-300%); +} +.cg-wrap coords.files.on-square.black.rank6 coord { + transform: translateY(-200%); +} +.cg-wrap coords.files.on-square.black.rank7 coord { + transform: translateY(-100%); +} +.cg-wrap coords.files.on-square.black.rank8 coord { + transform: translateY(0%); +} +/*.cg-wrap coords.squares {*/ +/* !*left: 4px;*!*/ +/* !*top: -20px;*!*/ +/* flex-flow: column;*/ +/* height: 100%;*/ +/* width: 12px;*/ + +/* text-align: right;*/ +/* !*left: auto;*!*/ +/* !*top: -30px;*!*/ +/* top:0px;*/ +/* opacity: .7;*/ +/* !*background:cyan;*!*/ +/*}*/ + +/*.cg-wrap coords.squares.black {*/ +/* flex-flow: column-reverse;*/ +/* background:yellow;*/ +/*}*/ + + +/*.cg-wrap coords.squares.white {*/ +/* flex-flow: column;*/ +/* background:cyan;*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-a {*/ +/* right: calc(4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-a {*/ +/* left: calc(12.5% * 7 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-b {*/ +/* right: calc(12.5% * 1 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-b {*/ +/* left: calc(12.5% * 6 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-c {*/ +/* right: calc(12.5% * 2 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-c {*/ +/* left: calc(12.5% * 5 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-d {*/ +/* right: calc(12.5% * 3 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-d {*/ +/* left: calc(12.5% * 4 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-e {*/ +/* right: calc(12.5% * 4 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-e {*/ +/* left: calc(12.5% * 3 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-f {*/ +/* right: calc(12.5% * 5 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-f {*/ +/* left: calc(12.5% * 2 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-g {*/ +/* right: calc(12.5% * 6 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-g {*/ +/* left: calc(12.5% * 1 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.black.file-h {*/ +/* right: calc(12.5% * 7 + 4px);*/ +/*}*/ + +/*.cg-wrap coords.squares.white.file-h {*/ +/* left: calc(4px);*/ +/*}*/ diff --git a/demo-on-square.html b/demo-on-square.html index 28ad3470..4385672a 100644 --- a/demo-on-square.html +++ b/demo-on-square.html @@ -1,43 +1,80 @@ - - - - Chessground Demo On Square - - - - - - - - - -
- basic board, default config -
-
- + + + + + +
+
+ white on-square +
+
+
+ black on-square +
+
+
+ white right +
+
+
+ black left +
+
+
+ diff --git a/src/state.ts b/src/state.ts index deafd08b..f16d27c4 100644 --- a/src/state.ts +++ b/src/state.ts @@ -13,6 +13,7 @@ export interface HeadlessState { lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"] selected?: cg.Key; // square currently selected "a1" coordinates: boolean; // include coords attributes + // TODO: validate the change from: ranksPosition: cg.RanksPosition; // position ranks on either side. left | right ranksPosition: cg.RanksPosition; // position ranks on either side. left | right | on-square autoCastle: boolean; // immediately complete the castle by moving the rook after king move viewOnly: boolean; // don't bind events: the user will never be able to move pieces around @@ -110,10 +111,10 @@ export interface State extends HeadlessState { export function defaults(): HeadlessState { return { pieces: fen.read(fen.initial), - orientation: 'black', // default: 'white' + orientation: 'white', turnColor: 'white', coordinates: true, - ranksPosition: 'on-square', // default: 'right', + ranksPosition: 'right', autoCastle: true, viewOnly: false, disableContextMenu: false, diff --git a/src/types.ts b/src/types.ts index cb9d89bd..2ea85d42 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,15 +5,18 @@ export type Rank = (typeof ranks)[number]; export type Key = 'a0' | `${File}${Rank}`; export type FEN = string; export type Pos = [number, number]; + export interface Piece { role: Role; color: Color; promoted?: boolean; } + export interface Drop { role: Role; key: Key; } + export type Pieces = Map; export type PiecesDiff = Map; @@ -41,6 +44,7 @@ export interface Elements { customSvg?: SVGElement; autoPieces?: HTMLElement; } + export interface Dom { elements: Elements; bounds: Memo; @@ -49,6 +53,7 @@ export interface Dom { unbind?: Unbind; destroyed?: boolean; } + export interface Exploding { stage: number; keys: readonly Key[]; @@ -61,6 +66,7 @@ export interface MoveMetadata { captured?: Piece; predrop?: boolean; } + export interface SetPremoveMetadata { ctrlKey?: boolean; } @@ -70,6 +76,7 @@ export type MouchEvent = Event & Partial; export interface KeyedNode extends HTMLElement { cgKey: Key; } + export interface PieceNode extends KeyedNode { tagName: 'PIECE'; cgPiece: string; @@ -78,12 +85,14 @@ export interface PieceNode extends KeyedNode { cgDragging?: boolean; cgScale?: number; } + export interface SquareNode extends KeyedNode { tagName: 'SQUARE'; } export interface Memo { (): A; + clear: () => void; } @@ -101,7 +110,18 @@ export type KHz = number; export const colors = ['white', 'black'] as const; export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const; export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const; - +export const cases = { + 'a': ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'], + 'b': ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8'], + 'c': ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'], + 'd': ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8'], + 'e': ['e1', 'e2', 'e3', 'e4', 'e5', 'e6', 'e7', 'e8'], + 'f': ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8'], + 'g': ['g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'g7', 'g8'], + 'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'] +} as {[key: string]: string[]}; + +// TODO: validate from: export type RanksPosition = 'left' | 'right'; export type RanksPosition = 'left' | 'right' | 'on-square'; export type BrushColor = 'green' | 'red' | 'blue' | 'yellow'; diff --git a/src/wrap.ts b/src/wrap.ts index f11d378d..4bb6ff2d 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -1,6 +1,6 @@ import { HeadlessState } from './state.js'; import { setVisible, createEl } from './util.js'; -import { colors, files, ranks, Elements } from './types.js'; +import { colors, files, ranks, Elements, cases } from './types.js'; import { createElement as createSVG, setAttributes, createDefs } from './svg.js'; export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { @@ -62,28 +62,74 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { } if (s.coordinates) { - const orientClass = s.orientation === 'black' ? ' black' : ''; - console.log('orientClass', orientClass) + const orientClass = s.orientation === 'black' ? ' black' : ' white'; + // TODO: validate the change from: const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : s.ranksPosition === 'on-square' ? ' on-square' : ''; - container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(files, 'files' + orientClass )); + + // console.log('➡️ ranks', ranks) // console.log('⬆️ files', files) - ranks.forEach((rank) => { - // console.log('rank', rank) - const currentFile = files[parseInt(rank)-1]; - const cases: string[] = []; - ranks.forEach((rank) => { - cases.push(currentFile + rank); - }) - container.appendChild(renderCoords(cases, 'ranks file-'+ currentFile + orientClass + ranksPositionClass)); - }) + if (ranksPositionClass === ' on-square') { + // container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); + // container.appendChild(renderCoords(files, 'files' + orientClass )); + + // const reversedFiles = [...files]; + // console.log(orientClass) + // if (orientClass !== '') { + // reversedFiles.reverse(); + // } + // console.log(files, reversedFiles) // ranks.forEach((rank) => { // // console.log('rank', rank) - // container.appendChild(renderCoordsOnSquare(files, 'ranks' + orientClass + ranksPositionClass)); + // const currentFile = files[parseInt(rank)-1]; + // console.log(rank, currentFile) + // const cases: string[] = []; + // ranks.forEach((rank) => { + // cases.push(currentFile + rank); + // }) + // container.appendChild(renderCoords(cases, 'ranks file-'+ currentFile + orientClass + ranksPositionClass)); + // }) + // files.forEach((file) => { + // // console.log('rank', rank) + // const currentFile = file; + // console.log(currentFile) + // const thecases: string[] = []; + // // ranks.forEach((rank) => { + // // cases.push(currentFile + rank); + // // }) + // cases[file].forEach(thecase => { + // thecases.push(thecase); + // }) + // console.log('the classssss', 'ranks file-'+ currentFile + orientClass + ranksPositionClass); + // + // // container.appendChild(renderCoords(files, 'files file-'+ currentFile + orientClass + ranksPositionClass)); // }) - // container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); - // container.appendChild(renderCoords(files, 'files' + orientClass)); + + + // Object.keys(cases).forEach(((fileId: string) => { + // // console.log(cases); + // // console.log(fileId); + // console.log('s.orientation', s.orientation) + // const file = cases[fileId]; + // console.log('render file:', file, 'squares file-'+ fileId + orientClass + ranksPositionClass) + // container.appendChild(renderCoords(s.orientation === 'black' ? file : file.reverse(), 'squares file-'+ fileId + orientClass + ranksPositionClass)); + // container.appendChild(renderCoords(ranks, 'squares file-'+ fileId + orientClass + ranksPositionClass)); + // })) + + console.log(orientClass, ranksPositionClass) + container.appendChild(renderCoords(cases.a, 'files on-square rank1' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.b, 'files on-square rank2' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.c, 'files on-square rank3' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.d, 'files on-square rank4' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.e, 'files on-square rank5' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.f, 'files on-square rank6' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.g, 'files on-square rank7' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(cases.h, 'files on-square rank8' + orientClass + ranksPositionClass)); + + } else { + container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); + container.appendChild(renderCoords(files, 'files' + orientClass )); + } } let ghost: HTMLElement | undefined; From b5e199d9da5d75ebaed288127181443a95b2aed5 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 09:52:37 +0200 Subject: [PATCH 04/19] Add white and black boards with coordinatesOnSquare true --- demo.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/demo.html b/demo.html index 41ec3fc7..37baf25c 100644 --- a/demo.html +++ b/demo.html @@ -83,6 +83,15 @@ ], }, }); + Chessground(document.getElementById('board-4'), { + orientation: 'black', + coordinatesOnSquare: true, + ranksPosition: 'left' + }); + Chessground(document.getElementById('board-5'), { + orientation: 'white', + coordinatesOnSquare: true + }); @@ -98,5 +107,13 @@ board with fixed arrows + labels
+
+ board with coordinates on-square, ranks position left +
+
+
+ board with coordinates on-square +
+
From aa39a534a5af7a137ea9786dc2a6b8f8564536ed Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 09:52:56 +0200 Subject: [PATCH 05/19] Remove useless demo-on-square file --- demo-on-square.html | 80 --------------------------------------------- 1 file changed, 80 deletions(-) delete mode 100644 demo-on-square.html diff --git a/demo-on-square.html b/demo-on-square.html deleted file mode 100644 index 4385672a..00000000 --- a/demo-on-square.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - Chessground Demo On Square - - - - - - - - - -
-
- white on-square -
-
-
- black on-square -
-
-
- white right -
-
-
- black left -
-
-
- - From 06d36c3db69d19c3bc30fd1a0a5a251d92312eca Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 09:53:56 +0200 Subject: [PATCH 06/19] Add new option coordinatesOnSquare, which default to false --- src/state.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/state.ts b/src/state.ts index f16d27c4..e25be758 100644 --- a/src/state.ts +++ b/src/state.ts @@ -13,8 +13,8 @@ export interface HeadlessState { lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"] selected?: cg.Key; // square currently selected "a1" coordinates: boolean; // include coords attributes - // TODO: validate the change from: ranksPosition: cg.RanksPosition; // position ranks on either side. left | right - ranksPosition: cg.RanksPosition; // position ranks on either side. left | right | on-square + coordinatesOnSquare: boolean; // include coords attributes on every square + ranksPosition: cg.RanksPosition; // position ranks on either side. left | right autoCastle: boolean; // immediately complete the castle by moving the rook after king move viewOnly: boolean; // don't bind events: the user will never be able to move pieces around disableContextMenu: boolean; // because who needs a context menu on a chessboard @@ -114,6 +114,7 @@ export function defaults(): HeadlessState { orientation: 'white', turnColor: 'white', coordinates: true, + coordinatesOnSquare: false, ranksPosition: 'right', autoCastle: true, viewOnly: false, From e7e979c05fe5a5bbea0792d7f4fcd5d19ed82697 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 09:55:00 +0200 Subject: [PATCH 07/19] Add const squares that contains every coordinate for every files --- src/types.ts | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/types.ts b/src/types.ts index 2ea85d42..3b52ad54 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,18 +5,15 @@ export type Rank = (typeof ranks)[number]; export type Key = 'a0' | `${File}${Rank}`; export type FEN = string; export type Pos = [number, number]; - export interface Piece { role: Role; color: Color; promoted?: boolean; } - export interface Drop { role: Role; key: Key; } - export type Pieces = Map; export type PiecesDiff = Map; @@ -44,7 +41,6 @@ export interface Elements { customSvg?: SVGElement; autoPieces?: HTMLElement; } - export interface Dom { elements: Elements; bounds: Memo; @@ -53,7 +49,6 @@ export interface Dom { unbind?: Unbind; destroyed?: boolean; } - export interface Exploding { stage: number; keys: readonly Key[]; @@ -66,7 +61,6 @@ export interface MoveMetadata { captured?: Piece; predrop?: boolean; } - export interface SetPremoveMetadata { ctrlKey?: boolean; } @@ -76,7 +70,6 @@ export type MouchEvent = Event & Partial; export interface KeyedNode extends HTMLElement { cgKey: Key; } - export interface PieceNode extends KeyedNode { tagName: 'PIECE'; cgPiece: string; @@ -85,14 +78,12 @@ export interface PieceNode extends KeyedNode { cgDragging?: boolean; cgScale?: number; } - export interface SquareNode extends KeyedNode { tagName: 'SQUARE'; } export interface Memo { (): A; - clear: () => void; } @@ -110,7 +101,7 @@ export type KHz = number; export const colors = ['white', 'black'] as const; export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const; export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const; -export const cases = { +export const squares = { 'a': ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'], 'b': ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8'], 'c': ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'], @@ -121,8 +112,7 @@ export const cases = { 'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'] } as {[key: string]: string[]}; -// TODO: validate from: export type RanksPosition = 'left' | 'right'; -export type RanksPosition = 'left' | 'right' | 'on-square'; +export type RanksPosition = 'left' | 'right'; export type BrushColor = 'green' | 'red' | 'blue' | 'yellow'; From 7649f4e54d62fb1e7c2c7f9adf56f0096caa4a11 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 09:56:50 +0200 Subject: [PATCH 08/19] Rename coordinatesOnSquare to coordinatesOnSquares --- demo.html | 4 ++-- src/state.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/demo.html b/demo.html index 37baf25c..ce529243 100644 --- a/demo.html +++ b/demo.html @@ -85,12 +85,12 @@ }); Chessground(document.getElementById('board-4'), { orientation: 'black', - coordinatesOnSquare: true, + coordinatesOnSquares: true, ranksPosition: 'left' }); Chessground(document.getElementById('board-5'), { orientation: 'white', - coordinatesOnSquare: true + coordinatesOnSquares: true }); diff --git a/src/state.ts b/src/state.ts index e25be758..42d65650 100644 --- a/src/state.ts +++ b/src/state.ts @@ -13,7 +13,7 @@ export interface HeadlessState { lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"] selected?: cg.Key; // square currently selected "a1" coordinates: boolean; // include coords attributes - coordinatesOnSquare: boolean; // include coords attributes on every square + coordinatesOnSquares: boolean; // include coords attributes on every square ranksPosition: cg.RanksPosition; // position ranks on either side. left | right autoCastle: boolean; // immediately complete the castle by moving the rook after king move viewOnly: boolean; // don't bind events: the user will never be able to move pieces around @@ -114,7 +114,7 @@ export function defaults(): HeadlessState { orientation: 'white', turnColor: 'white', coordinates: true, - coordinatesOnSquare: false, + coordinatesOnSquares: false, ranksPosition: 'right', autoCastle: true, viewOnly: false, From 395dfe8707e8fb0b58717d5cc092162603e331e4 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 10:10:21 +0200 Subject: [PATCH 09/19] Add condition to render coordinates on squares with new class 'squares' --- assets/chessground.base.css | 188 +++++++++-------------------------- assets/chessground.brown.css | 8 +- src/wrap.ts | 92 +++-------------- 3 files changed, 65 insertions(+), 223 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index a9641b18..6fb39fac 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -173,160 +173,66 @@ piece.fading { transform: translateY(39%); } -/** - * On-Square - */ -.cg-wrap coords.files.on-square { +.cg-wrap coords.squares { bottom: 0; left: 0; - flex-flow: row; - width: 100%; - height: 12.5%; + flex-flow: column; text-transform: uppercase; text-align: right; -} -.cg-wrap coords.files.black.on-square { - flex-flow: row-reverse; -} -.cg-wrap coords.files.on-square coord { - padding:0.7% 0.6%; -} -/** ORITENTATION WHITE **/ -.cg-wrap coords.files.on-square.rank1 coord { - transform: translateY(0%); -} -.cg-wrap coords.files.on-square.rank2 coord { - transform: translateY(-100%); -} -.cg-wrap coords.files.on-square.rank3 coord { - transform: translateY(-200%); -} -.cg-wrap coords.files.on-square.rank4 coord { - transform: translateY(-300%); -} -.cg-wrap coords.files.on-square.rank5 coord { - transform: translateY(-400%); -} -.cg-wrap coords.files.on-square.rank6 coord { - transform: translateY(-500%); -} -.cg-wrap coords.files.on-square.rank7 coord { - transform: translateY(-600%); -} -.cg-wrap coords.files.on-square.rank8 coord { - transform: translateY(-700%); -} -/** ORITENTATION BLACK **/ -.cg-wrap coords.files.on-square.black.rank1 coord { - transform: translateY(-700%); -} -.cg-wrap coords.files.on-square.black.rank2 coord { - transform: translateY(-600%); -} -.cg-wrap coords.files.on-square.black.rank3 coord { - transform: translateY(-500%); -} -.cg-wrap coords.files.on-square.black.rank4 coord { - transform: translateY(-400%); -} -.cg-wrap coords.files.on-square.black.rank5 coord { - transform: translateY(-300%); -} -.cg-wrap coords.files.on-square.black.rank6 coord { - transform: translateY(-200%); -} -.cg-wrap coords.files.on-square.black.rank7 coord { - transform: translateY(-100%); -} -.cg-wrap coords.files.on-square.black.rank8 coord { - transform: translateY(0%); -} -/*.cg-wrap coords.squares {*/ -/* !*left: 4px;*!*/ -/* !*top: -20px;*!*/ -/* flex-flow: column;*/ -/* height: 100%;*/ -/* width: 12px;*/ -/* text-align: right;*/ -/* !*left: auto;*!*/ -/* !*top: -30px;*!*/ -/* top:0px;*/ -/* opacity: .7;*/ -/* !*background:cyan;*!*/ -/*}*/ - -/*.cg-wrap coords.squares.black {*/ -/* flex-flow: column-reverse;*/ -/* background:yellow;*/ -/*}*/ - - -/*.cg-wrap coords.squares.white {*/ -/* flex-flow: column;*/ -/* background:cyan;*/ -/*}*/ - -/*.cg-wrap coords.squares.black.file-a {*/ -/* right: calc(4px);*/ -/*}*/ - -/*.cg-wrap coords.squares.white.file-a {*/ -/* left: calc(12.5% * 7 + 4px);*/ -/*}*/ - -/*.cg-wrap coords.squares.black.file-b {*/ -/* right: calc(12.5% * 1 + 4px);*/ -/*}*/ - -/*.cg-wrap coords.squares.white.file-b {*/ -/* left: calc(12.5% * 6 + 4px);*/ -/*}*/ + flex-flow: column-reverse; + height: 100%; + width: 12.5%; +} -/*.cg-wrap coords.squares.black.file-c {*/ -/* right: calc(12.5% * 2 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.black { + flex-flow: column; +} -/*.cg-wrap coords.squares.white.file-c {*/ -/* left: calc(12.5% * 5 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.left { + text-align: left; +} -/*.cg-wrap coords.squares.black.file-d {*/ -/* right: calc(12.5% * 3 + 4px);*/ -/*}*/ +.cg-wrap coords.squares coord { + padding: 6% 4%; +} -/*.cg-wrap coords.squares.white.file-d {*/ -/* left: calc(12.5% * 4 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank1 coord, +.cg-wrap coords.squares.black.rank8 coord { + transform: translateX(0%); +} -/*.cg-wrap coords.squares.black.file-e {*/ -/* right: calc(12.5% * 4 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank2 coord, +.cg-wrap coords.squares.black.rank7 coord { + transform: translateX(100%); +} -/*.cg-wrap coords.squares.white.file-e {*/ -/* left: calc(12.5% * 3 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank3 coord, +.cg-wrap coords.squares.black.rank6 coord{ + transform: translateX(200%); +} -/*.cg-wrap coords.squares.black.file-f {*/ -/* right: calc(12.5% * 5 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank4 coord, +.cg-wrap coords.squares.black.rank5 coord { + transform: translateX(300%); +} -/*.cg-wrap coords.squares.white.file-f {*/ -/* left: calc(12.5% * 2 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank5 coord, +.cg-wrap coords.squares.black.rank4 coord { + transform: translateX(400%); +} -/*.cg-wrap coords.squares.black.file-g {*/ -/* right: calc(12.5% * 6 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank6 coord, +.cg-wrap coords.squares.black.rank3 coord { + transform: translateX(500%); +} -/*.cg-wrap coords.squares.white.file-g {*/ -/* left: calc(12.5% * 1 + 4px);*/ -/*}*/ +.cg-wrap coords.squares.rank7 coord, +.cg-wrap coords.squares.black.rank2 coord { + transform: translateX(600%); +} -/*.cg-wrap coords.squares.black.file-h {*/ -/* right: calc(12.5% * 7 + 4px);*/ -/*}*/ - -/*.cg-wrap coords.squares.white.file-h {*/ -/* left: calc(4px);*/ -/*}*/ +.cg-wrap coords.squares.rank8 coord, +.cg-wrap coords.squares.black.rank1 coord { + transform: translateX(700%); +} diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index 61256599..e5d6aa79 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -45,14 +45,18 @@ cg-board square.current-premove { /** Alternating colors in rank/file labels */ .cg-wrap.orientation-white coords.ranks coord:nth-child(2n), .cg-wrap.orientation-white coords.files coord:nth-child(2n), +.cg-wrap.orientation-white coords.squares coord:nth-child(2n), .cg-wrap.orientation-black coords.ranks coord:nth-child(2n + 1), -.cg-wrap.orientation-black coords.files coord:nth-child(2n + 1) { +.cg-wrap.orientation-black coords.files coord:nth-child(2n + 1), +.cg-wrap.orientation-white coords.squares coord:nth-child(2n + 1) { color: rgba(72, 72, 72, 0.8); } .cg-wrap.orientation-black coords.ranks coord:nth-child(2n), .cg-wrap.orientation-black coords.files coord:nth-child(2n), +.cg-wrap.orientation-black coords.squares coord:nth-child(2n), .cg-wrap.orientation-white coords.ranks coord:nth-child(2n + 1), -.cg-wrap.orientation-white coords.files coord:nth-child(2n + 1) { +.cg-wrap.orientation-white coords.files coord:nth-child(2n + 1), +.cg-wrap.orientation-white coords.squares coord:nth-child(2n + 1) { color: rgba(255, 255, 255, 0.8); } diff --git a/src/wrap.ts b/src/wrap.ts index 4bb6ff2d..731ebf4f 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -1,6 +1,6 @@ import { HeadlessState } from './state.js'; import { setVisible, createEl } from './util.js'; -import { colors, files, ranks, Elements, cases } from './types.js'; +import { colors, files, ranks, squares, Elements } from './types.js'; import { createElement as createSVG, setAttributes, createDefs } from './svg.js'; export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { @@ -62,73 +62,19 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { } if (s.coordinates) { - const orientClass = s.orientation === 'black' ? ' black' : ' white'; - // TODO: validate the change from: const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; - const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : s.ranksPosition === 'on-square' ? ' on-square' : ''; - - - // console.log('➡️ ranks', ranks) - // console.log('⬆️ files', files) - if (ranksPositionClass === ' on-square') { - // container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); - // container.appendChild(renderCoords(files, 'files' + orientClass )); - - // const reversedFiles = [...files]; - // console.log(orientClass) - // if (orientClass !== '') { - // reversedFiles.reverse(); - // } - // console.log(files, reversedFiles) - // ranks.forEach((rank) => { - // // console.log('rank', rank) - // const currentFile = files[parseInt(rank)-1]; - // console.log(rank, currentFile) - // const cases: string[] = []; - // ranks.forEach((rank) => { - // cases.push(currentFile + rank); - // }) - // container.appendChild(renderCoords(cases, 'ranks file-'+ currentFile + orientClass + ranksPositionClass)); - // }) - // files.forEach((file) => { - // // console.log('rank', rank) - // const currentFile = file; - // console.log(currentFile) - // const thecases: string[] = []; - // // ranks.forEach((rank) => { - // // cases.push(currentFile + rank); - // // }) - // cases[file].forEach(thecase => { - // thecases.push(thecase); - // }) - // console.log('the classssss', 'ranks file-'+ currentFile + orientClass + ranksPositionClass); - // - // // container.appendChild(renderCoords(files, 'files file-'+ currentFile + orientClass + ranksPositionClass)); - // }) - - - // Object.keys(cases).forEach(((fileId: string) => { - // // console.log(cases); - // // console.log(fileId); - // console.log('s.orientation', s.orientation) - // const file = cases[fileId]; - // console.log('render file:', file, 'squares file-'+ fileId + orientClass + ranksPositionClass) - // container.appendChild(renderCoords(s.orientation === 'black' ? file : file.reverse(), 'squares file-'+ fileId + orientClass + ranksPositionClass)); - // container.appendChild(renderCoords(ranks, 'squares file-'+ fileId + orientClass + ranksPositionClass)); - // })) - - console.log(orientClass, ranksPositionClass) - container.appendChild(renderCoords(cases.a, 'files on-square rank1' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.b, 'files on-square rank2' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.c, 'files on-square rank3' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.d, 'files on-square rank4' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.e, 'files on-square rank5' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.f, 'files on-square rank6' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.g, 'files on-square rank7' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(cases.h, 'files on-square rank8' + orientClass + ranksPositionClass)); - + const orientClass = s.orientation === 'black' ? ' black' : ''; + const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; + + if (s.coordinatesOnSquares) { + let rank = 1; + Object.keys(squares).forEach((file) => { + const rankClass = ' rank' + rank; + container.appendChild(renderCoords(squares[file], 'squares' + rankClass + orientClass + ranksPositionClass)); + rank++; + }); } else { container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); - container.appendChild(renderCoords(files, 'files' + orientClass )); + container.appendChild(renderCoords(files, 'files' + orientClass)); } } @@ -154,23 +100,9 @@ function renderCoords(elems: readonly string[], className: string): HTMLElement const el = createEl('coords', className); let f: HTMLElement; for (const elem of elems) { - // console.log('elem', elem) f = createEl('coord'); f.textContent = elem; - // console.log(f) el.appendChild(f); } return el; } -// function renderCoordsOnSquare(elems: readonly string[], className: string): HTMLElement { -// const el = createEl('coords', className); -// let f: HTMLElement; -// for (const elem of elems) { -// console.log('elem', elem) -// f = createEl('coord'); -// f.textContent = elem; -// console.log(f) -// el.appendChild(f); -// } -// return el; -// } From 27c7d76b8fdf73209966bb4ee485d0efd0175fae Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 11:19:33 +0200 Subject: [PATCH 10/19] Fix labels color on squares --- assets/chessground.brown.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index e5d6aa79..f5d8f9b5 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -42,21 +42,21 @@ cg-board square.current-premove { background-color: rgba(20, 30, 85, 0.5); } -/** Alternating colors in rank/file labels */ +/** Alternating colors in rank/file/square labels */ .cg-wrap.orientation-white coords.ranks coord:nth-child(2n), .cg-wrap.orientation-white coords.files coord:nth-child(2n), -.cg-wrap.orientation-white coords.squares coord:nth-child(2n), .cg-wrap.orientation-black coords.ranks coord:nth-child(2n + 1), .cg-wrap.orientation-black coords.files coord:nth-child(2n + 1), -.cg-wrap.orientation-white coords.squares coord:nth-child(2n + 1) { +.cg-wrap coords.squares:nth-child(2n+2) coord:nth-child(2n + 1), +.cg-wrap coords.squares:nth-child(2n+1) coord:nth-child(2n) { color: rgba(72, 72, 72, 0.8); } .cg-wrap.orientation-black coords.ranks coord:nth-child(2n), .cg-wrap.orientation-black coords.files coord:nth-child(2n), -.cg-wrap.orientation-black coords.squares coord:nth-child(2n), .cg-wrap.orientation-white coords.ranks coord:nth-child(2n + 1), .cg-wrap.orientation-white coords.files coord:nth-child(2n + 1), -.cg-wrap.orientation-white coords.squares coord:nth-child(2n + 1) { +.cg-wrap coords.squares:nth-child(2n+1) coord:nth-child(2n + 1), +.cg-wrap coords.squares:nth-child(2n+2) coord:nth-child(2n) { color: rgba(255, 255, 255, 0.8); } From e6b0d8d17484d939aecff86d97280f4e83043867 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 11:35:40 +0200 Subject: [PATCH 11/19] Run format --- assets/chessground.base.css | 2 +- assets/chessground.brown.css | 8 ++++---- demo.html | 4 ++-- src/premove.ts | 16 ++++++++-------- src/types.ts | 18 +++++++++--------- src/wrap.ts | 6 ++++-- 6 files changed, 28 insertions(+), 26 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index 6fb39fac..30a7f149 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -208,7 +208,7 @@ piece.fading { } .cg-wrap coords.squares.rank3 coord, -.cg-wrap coords.squares.black.rank6 coord{ +.cg-wrap coords.squares.black.rank6 coord { transform: translateX(200%); } diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index f5d8f9b5..74cfbfc1 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -47,8 +47,8 @@ cg-board square.current-premove { .cg-wrap.orientation-white coords.files coord:nth-child(2n), .cg-wrap.orientation-black coords.ranks coord:nth-child(2n + 1), .cg-wrap.orientation-black coords.files coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n+2) coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n+1) coord:nth-child(2n) { +.cg-wrap coords.squares:nth-child(2n + 2) coord:nth-child(2n + 1), +.cg-wrap coords.squares:nth-child(2n + 1) coord:nth-child(2n) { color: rgba(72, 72, 72, 0.8); } @@ -56,7 +56,7 @@ cg-board square.current-premove { .cg-wrap.orientation-black coords.files coord:nth-child(2n), .cg-wrap.orientation-white coords.ranks coord:nth-child(2n + 1), .cg-wrap.orientation-white coords.files coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n+1) coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n+2) coord:nth-child(2n) { +.cg-wrap coords.squares:nth-child(2n + 1) coord:nth-child(2n + 1), +.cg-wrap coords.squares:nth-child(2n + 2) coord:nth-child(2n) { color: rgba(255, 255, 255, 0.8); } diff --git a/demo.html b/demo.html index ce529243..2d5152db 100644 --- a/demo.html +++ b/demo.html @@ -86,11 +86,11 @@ Chessground(document.getElementById('board-4'), { orientation: 'black', coordinatesOnSquares: true, - ranksPosition: 'left' + ranksPosition: 'left', }); Chessground(document.getElementById('board-5'), { orientation: 'white', - coordinatesOnSquares: true + coordinatesOnSquares: true, }); diff --git a/src/premove.ts b/src/premove.ts index 29618d8d..d00b99fb 100644 --- a/src/premove.ts +++ b/src/premove.ts @@ -62,14 +62,14 @@ export function premove(pieces: cg.Pieces, key: cg.Key, canCastle: boolean): cg. r === 'pawn' ? pawn(piece.color) : r === 'knight' - ? knight - : r === 'bishop' - ? bishop - : r === 'rook' - ? rook - : r === 'queen' - ? queen - : king(piece.color, rookFilesOf(pieces, piece.color), canCastle); + ? knight + : r === 'bishop' + ? bishop + : r === 'rook' + ? rook + : r === 'queen' + ? queen + : king(piece.color, rookFilesOf(pieces, piece.color), canCastle); return util.allPos .filter(pos2 => (pos[0] !== pos2[0] || pos[1] !== pos2[1]) && mobility(pos[0], pos[1], pos2[0], pos2[1])) .map(util.pos2key); diff --git a/src/types.ts b/src/types.ts index 3b52ad54..98a8da30 100644 --- a/src/types.ts +++ b/src/types.ts @@ -102,15 +102,15 @@ export const colors = ['white', 'black'] as const; export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const; export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const; export const squares = { - 'a': ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'], - 'b': ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8'], - 'c': ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'], - 'd': ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8'], - 'e': ['e1', 'e2', 'e3', 'e4', 'e5', 'e6', 'e7', 'e8'], - 'f': ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8'], - 'g': ['g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'g7', 'g8'], - 'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'] -} as {[key: string]: string[]}; + a: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'], + b: ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8'], + c: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'], + d: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8'], + e: ['e1', 'e2', 'e3', 'e4', 'e5', 'e6', 'e7', 'e8'], + f: ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8'], + g: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'g7', 'g8'], + h: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'], +} as { [key: string]: string[] }; export type RanksPosition = 'left' | 'right'; diff --git a/src/wrap.ts b/src/wrap.ts index 731ebf4f..d8dffb08 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -67,9 +67,11 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { if (s.coordinatesOnSquares) { let rank = 1; - Object.keys(squares).forEach((file) => { + Object.keys(squares).forEach(file => { const rankClass = ' rank' + rank; - container.appendChild(renderCoords(squares[file], 'squares' + rankClass + orientClass + ranksPositionClass)); + container.appendChild( + renderCoords(squares[file], 'squares' + rankClass + orientClass + ranksPositionClass), + ); rank++; }); } else { From cf93775b0525aaef16b19611f133d123fda57445 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 12:06:59 +0200 Subject: [PATCH 12/19] rollback formatting --- src/premove.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/premove.ts b/src/premove.ts index d00b99fb..29618d8d 100644 --- a/src/premove.ts +++ b/src/premove.ts @@ -62,14 +62,14 @@ export function premove(pieces: cg.Pieces, key: cg.Key, canCastle: boolean): cg. r === 'pawn' ? pawn(piece.color) : r === 'knight' - ? knight - : r === 'bishop' - ? bishop - : r === 'rook' - ? rook - : r === 'queen' - ? queen - : king(piece.color, rookFilesOf(pieces, piece.color), canCastle); + ? knight + : r === 'bishop' + ? bishop + : r === 'rook' + ? rook + : r === 'queen' + ? queen + : king(piece.color, rookFilesOf(pieces, piece.color), canCastle); return util.allPos .filter(pos2 => (pos[0] !== pos2[0] || pos[1] !== pos2[1]) && mobility(pos[0], pos[1], pos2[0], pos2[1])) .map(util.pos2key); From 214e846887d2ff97266fc728ab16934c54eb303a Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Wed, 1 May 2024 12:41:44 +0200 Subject: [PATCH 13/19] no need to hardcode all 64 squares --- src/types.ts | 10 ---------- src/wrap.ts | 16 ++++++++-------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/types.ts b/src/types.ts index 98a8da30..782b83e7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -101,16 +101,6 @@ export type KHz = number; export const colors = ['white', 'black'] as const; export const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const; export const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const; -export const squares = { - a: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8'], - b: ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8'], - c: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'], - d: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8'], - e: ['e1', 'e2', 'e3', 'e4', 'e5', 'e6', 'e7', 'e8'], - f: ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8'], - g: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'g7', 'g8'], - h: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8'], -} as { [key: string]: string[] }; export type RanksPosition = 'left' | 'right'; diff --git a/src/wrap.ts b/src/wrap.ts index d8dffb08..6b5d7e5b 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -1,6 +1,6 @@ import { HeadlessState } from './state.js'; import { setVisible, createEl } from './util.js'; -import { colors, files, ranks, squares, Elements } from './types.js'; +import { colors, files, ranks, Elements } from './types.js'; import { createElement as createSVG, setAttributes, createDefs } from './svg.js'; export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { @@ -66,14 +66,14 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; if (s.coordinatesOnSquares) { - let rank = 1; - Object.keys(squares).forEach(file => { - const rankClass = ' rank' + rank; + files.forEach((f, i) => container.appendChild( - renderCoords(squares[file], 'squares' + rankClass + orientClass + ranksPositionClass), - ); - rank++; - }); + renderCoords( + ranks.map(r => f + r), + 'squares rank' + (i + 1) + orientClass + ranksPositionClass, + ), + ), + ); } else { container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass)); container.appendChild(renderCoords(files, 'files' + orientClass)); From d2cbe1b233aa2faff7c3ba1414d6a4e5883d90c3 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Wed, 1 May 2024 14:23:47 +0200 Subject: [PATCH 14/19] remove 8 unnecessary css selectorss --- assets/chessground.base.css | 24 ++++++++---------------- src/wrap.ts | 3 ++- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index 30a7f149..ed897d71 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -197,42 +197,34 @@ piece.fading { padding: 6% 4%; } -.cg-wrap coords.squares.rank1 coord, -.cg-wrap coords.squares.black.rank8 coord { +.cg-wrap coords.squares.rank1 coord { transform: translateX(0%); } -.cg-wrap coords.squares.rank2 coord, -.cg-wrap coords.squares.black.rank7 coord { +.cg-wrap coords.squares.rank2 coord { transform: translateX(100%); } -.cg-wrap coords.squares.rank3 coord, -.cg-wrap coords.squares.black.rank6 coord { +.cg-wrap coords.squares.rank3 coord { transform: translateX(200%); } -.cg-wrap coords.squares.rank4 coord, -.cg-wrap coords.squares.black.rank5 coord { +.cg-wrap coords.squares.rank4 coord { transform: translateX(300%); } -.cg-wrap coords.squares.rank5 coord, -.cg-wrap coords.squares.black.rank4 coord { +.cg-wrap coords.squares.rank5 coord { transform: translateX(400%); } -.cg-wrap coords.squares.rank6 coord, -.cg-wrap coords.squares.black.rank3 coord { +.cg-wrap coords.squares.rank6 coord { transform: translateX(500%); } -.cg-wrap coords.squares.rank7 coord, -.cg-wrap coords.squares.black.rank2 coord { +.cg-wrap coords.squares.rank7 coord { transform: translateX(600%); } -.cg-wrap coords.squares.rank8 coord, -.cg-wrap coords.squares.black.rank1 coord { +.cg-wrap coords.squares.rank8 coord { transform: translateX(700%); } diff --git a/src/wrap.ts b/src/wrap.ts index 6b5d7e5b..088688b7 100644 --- a/src/wrap.ts +++ b/src/wrap.ts @@ -66,11 +66,12 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements { const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : ''; if (s.coordinatesOnSquares) { + const rankN: (i: number) => number = s.orientation === 'white' ? i => i + 1 : i => 8 - i; files.forEach((f, i) => container.appendChild( renderCoords( ranks.map(r => f + r), - 'squares rank' + (i + 1) + orientClass + ranksPositionClass, + 'squares rank' + rankN(i) + orientClass + ranksPositionClass, ), ), ); From 653aae4b37f72e655f6fd7f1de4b6cd2f604a029 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Wed, 1 May 2024 14:30:18 +0200 Subject: [PATCH 15/19] remove another css selector and simplify the other ones --- assets/chessground.base.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index ed897d71..9bc45119 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -197,34 +197,30 @@ piece.fading { padding: 6% 4%; } -.cg-wrap coords.squares.rank1 coord { - transform: translateX(0%); -} - -.cg-wrap coords.squares.rank2 coord { +.cg-wrap coords.squares.rank2 { transform: translateX(100%); } -.cg-wrap coords.squares.rank3 coord { +.cg-wrap coords.squares.rank3 { transform: translateX(200%); } -.cg-wrap coords.squares.rank4 coord { +.cg-wrap coords.squares.rank4 { transform: translateX(300%); } -.cg-wrap coords.squares.rank5 coord { +.cg-wrap coords.squares.rank5 { transform: translateX(400%); } -.cg-wrap coords.squares.rank6 coord { +.cg-wrap coords.squares.rank6 { transform: translateX(500%); } -.cg-wrap coords.squares.rank7 coord { +.cg-wrap coords.squares.rank7 { transform: translateX(600%); } -.cg-wrap coords.squares.rank8 coord { +.cg-wrap coords.squares.rank8 { transform: translateX(700%); } From 856cffbc2208d7015e2c55becf862e1b338f4118 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Wed, 1 May 2024 14:32:36 +0200 Subject: [PATCH 16/19] remove superfluous css property --- assets/chessground.base.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/chessground.base.css b/assets/chessground.base.css index 9bc45119..6f7f7a7c 100644 --- a/assets/chessground.base.css +++ b/assets/chessground.base.css @@ -176,10 +176,8 @@ piece.fading { .cg-wrap coords.squares { bottom: 0; left: 0; - flex-flow: column; text-transform: uppercase; text-align: right; - flex-flow: column-reverse; height: 100%; width: 12.5%; From 6217359fff0fc96d40a74645f6b7dc431f4ee4ea Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 15:02:10 +0200 Subject: [PATCH 17/19] Simplifying alternate colors setup --- assets/chessground.brown.css | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index 74cfbfc1..afb88d07 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -43,20 +43,15 @@ cg-board square.current-premove { } /** Alternating colors in rank/file/square labels */ -.cg-wrap.orientation-white coords.ranks coord:nth-child(2n), -.cg-wrap.orientation-white coords.files coord:nth-child(2n), -.cg-wrap.orientation-black coords.ranks coord:nth-child(2n + 1), -.cg-wrap.orientation-black coords.files coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n + 2) coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n + 1) coord:nth-child(2n) { +.cg-wrap coords:nth-child(odd) coord:nth-child(even), +.cg-wrap coords.squares:nth-child(even) coord:nth-child(odd), +.cg-wrap coords.files:nth-child(even) coord:nth-child(even) { color: rgba(72, 72, 72, 0.8); } -.cg-wrap.orientation-black coords.ranks coord:nth-child(2n), -.cg-wrap.orientation-black coords.files coord:nth-child(2n), -.cg-wrap.orientation-white coords.ranks coord:nth-child(2n + 1), -.cg-wrap.orientation-white coords.files coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n + 1) coord:nth-child(2n + 1), -.cg-wrap coords.squares:nth-child(2n + 2) coord:nth-child(2n) { +.cg-wrap coords:nth-child(odd) coord:nth-child(odd), +.cg-wrap coords.squares:nth-child(even) coord:nth-child(even), +.cg-wrap coords.files:nth-child(even) coord:nth-child(odd) { color: rgba(255, 255, 255, 0.8); } + From 7a60e853fb8e2a7ece29149c602f4adf478284a9 Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 15:16:28 +0200 Subject: [PATCH 18/19] Simplifying alternate colors setup, fixed for orientation-black --- assets/chessground.brown.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index afb88d07..87bf76d5 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -45,12 +45,14 @@ cg-board square.current-premove { /** Alternating colors in rank/file/square labels */ .cg-wrap coords:nth-child(odd) coord:nth-child(even), .cg-wrap coords.squares:nth-child(even) coord:nth-child(odd), +.cg-wrap.orientation-black coords.files:nth-child(even) coord:nth-child(odd), .cg-wrap coords.files:nth-child(even) coord:nth-child(even) { color: rgba(72, 72, 72, 0.8); } .cg-wrap coords:nth-child(odd) coord:nth-child(odd), .cg-wrap coords.squares:nth-child(even) coord:nth-child(even), +.cg-wrap.orientation-black coords.files:nth-child(even) coord:nth-child(even), .cg-wrap coords.files:nth-child(even) coord:nth-child(odd) { color: rgba(255, 255, 255, 0.8); } From 7ad20b48f26f2ba66d5e68b52da038e883fed5db Mon Sep 17 00:00:00 2001 From: Gilles Hoarau Date: Wed, 1 May 2024 15:16:53 +0200 Subject: [PATCH 19/19] formatting --- assets/chessground.brown.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/chessground.brown.css b/assets/chessground.brown.css index 87bf76d5..f23e87c8 100644 --- a/assets/chessground.brown.css +++ b/assets/chessground.brown.css @@ -56,4 +56,3 @@ cg-board square.current-premove { .cg-wrap coords.files:nth-child(even) coord:nth-child(odd) { color: rgba(255, 255, 255, 0.8); } -