chessboard2 icon indicating copy to clipboard operation
chessboard2 copied to clipboard

board.showNotation doesn't seem to be implemented.

Open Ugo14880 opened this issue 9 months ago • 1 comments

Ugo14880 avatar May 29 '25 15:05 Ugo14880

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%;
            }
        }
    }

dasim avatar Jun 03 '25 12:06 dasim