chessboard2
chessboard2 copied to clipboard
board.showNotation doesn't seem to be implemented.
For anybody else like me, wishing for notations to display, it can be done in CSS. Here is a simple example in SCSS which requires to add class pov-white or pov-black to chessboard container to distinguish flipped board.
.chessboard {
@for $i from 1 through 8 {
&.pov-white [data-square-coord="h#{$i}"], &.pov-black [data-square-coord="a#{$i}"] {
display: flex;
&::after {
content: "#{$i}";
display: flex;
align-items: flex-start;
justify-content: right;
height: 100%;
width: 100%;
margin-right: 3px;
}
}
}
$letters: a, b, c, d, e, f, g, h;
@each $letter in $letters {
&.pov-white [data-square-coord="#{$letter}1"], &.pov-black [data-square-coord="#{$letter}8"] {
display: flex;
&::before {
content: "#{$letter}";
display: flex;
align-items: flex-end;
justify-content: left;
height: 100%;
margin-left: 3px;
}
}
}
&.pov-white [data-square-coord="h1"], &.pov-black [data-square-coord="a8"] {
&::before, &::after {
width: 50%;
}
}
}