Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to display coordinate on every square #301

Merged
merged 21 commits into from
May 1, 2024
Merged

Add option to display coordinate on every square #301

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7d6f78e
Add on-square setting
unicolored Apr 17, 2024
4c762d1
Add on-square settings / In progress
unicolored Apr 20, 2024
a593d54
Coords on-square are displayed correctly
unicolored May 1, 2024
b5e199d
Add white and black boards with coordinatesOnSquare true
unicolored May 1, 2024
aa39a53
Remove useless demo-on-square file
unicolored May 1, 2024
06d36c3
Add new option coordinatesOnSquare, which default to false
unicolored May 1, 2024
e7e979c
Add const squares that contains every coordinate for every files
unicolored May 1, 2024
7649f4e
Rename coordinatesOnSquare to coordinatesOnSquares
unicolored May 1, 2024
395dfe8
Add condition to render coordinates on squares with new class 'squares'
unicolored May 1, 2024
b9a1486
Merge branch 'lichess-org:master' into board-coordinates-on-square
unicolored May 1, 2024
f868f37
Merge pull request #1 from unicolored/board-coordinates-on-square
unicolored May 1, 2024
27c7d76
Fix labels color on squares
unicolored May 1, 2024
e6b0d8d
Run format
unicolored May 1, 2024
cf93775
rollback formatting
unicolored May 1, 2024
214e846
no need to hardcode all 64 squares
ornicar May 1, 2024
d2cbe1b
remove 8 unnecessary css selectorss
ornicar May 1, 2024
653aae4
remove another css selector and simplify the other ones
ornicar May 1, 2024
856cffb
remove superfluous css property
ornicar May 1, 2024
6217359
Simplifying alternate colors setup
unicolored May 1, 2024
7a60e85
Simplifying alternate colors setup, fixed for orientation-black
unicolored May 1, 2024
7ad20b4
formatting
unicolored May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions assets/chessground.base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,3 +172,53 @@ piece.fading {
.cg-wrap coords.ranks coord {
transform: translateY(39%);
}

.cg-wrap coords.squares {
bottom: 0;
left: 0;
text-transform: uppercase;
text-align: right;
flex-flow: column-reverse;
height: 100%;
width: 12.5%;
}

.cg-wrap coords.squares.black {
flex-flow: column;
}

.cg-wrap coords.squares.left {
text-align: left;
}

.cg-wrap coords.squares coord {
padding: 6% 4%;
}

.cg-wrap coords.squares.rank2 {
transform: translateX(100%);
}

.cg-wrap coords.squares.rank3 {
transform: translateX(200%);
}

.cg-wrap coords.squares.rank4 {
transform: translateX(300%);
}

.cg-wrap coords.squares.rank5 {
transform: translateX(400%);
}

.cg-wrap coords.squares.rank6 {
transform: translateX(500%);
}

.cg-wrap coords.squares.rank7 {
transform: translateX(600%);
}

.cg-wrap coords.squares.rank8 {
transform: translateX(700%);
}
10 changes: 7 additions & 3 deletions assets/chessground.brown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +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-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 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-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 coords.squares:nth-child(2n + 1) coord:nth-child(2n + 1),
.cg-wrap coords.squares:nth-child(2n + 2) coord:nth-child(2n) {
unicolored marked this conversation as resolved.
Show resolved Hide resolved
color: rgba(255, 255, 255, 0.8);
}
17 changes: 17 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,15 @@
],
},
});
Chessground(document.getElementById('board-4'), {
orientation: 'black',
coordinatesOnSquares: true,
ranksPosition: 'left',
});
Chessground(document.getElementById('board-5'), {
orientation: 'white',
coordinatesOnSquares: true,
});
</script>
</head>
<body>
Expand All @@ -98,5 +107,13 @@
board with fixed arrows + labels
<div class="chessground" id="board-3"></div>
</div>
<div>
board with coordinates on-square, ranks position left
<div class="chessground" id="board-4"></div>
</div>
<div>
board with coordinates on-square
<div class="chessground" id="board-5"></div>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions src/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
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
Expand Down Expand Up @@ -113,6 +114,7 @@ export function defaults(): HeadlessState {
orientation: 'white',
turnColor: 'white',
coordinates: true,
coordinatesOnSquares: false,
ranksPosition: 'right',
autoCastle: true,
viewOnly: false,
Expand Down
17 changes: 15 additions & 2 deletions src/wrap.ts
View file
Open in desktop
unicolored marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,21 @@ export function renderWrap(element: HTMLElement, s: HeadlessState): Elements {
if (s.coordinates) {
const orientClass = s.orientation === 'black' ? ' black' : '';
const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : '';
container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
container.appendChild(renderCoords(files, 'files' + orientClass));

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' + rankN(i) + orientClass + ranksPositionClass,
),
),
);
} else {
container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
container.appendChild(renderCoords(files, 'files' + orientClass));
}
}

let ghost: HTMLElement | undefined;
Expand Down
Loading