Uncaught (in promise) TypeError: Cannot read properties of chessboard-element.js:495 how can i use in svelte? #23
Description
<script>
import "chessboard-element";
import { Chess } from 'chess.js';
import { onMount, beforeUpdate, afterUpdate } from "svelte";
let board;
//let board=document.querySelector('chess-board')
onMount(() => {
console.log("on mount");
});
beforeUpdate(() => {
console.log("beforeboard");
// once the DOM is updated...
});
afterUpdate(() => {
// ...the DOM is now in sync with the data
const board = document.querySelector("chess-board");
board.__draggablePieces = true;
board.start();
const game = new Chess();
const statusElement = document.querySelector('#status');
const fenElement = document.querySelector('#fen');
const pgnElement = document.querySelector('#pgn');
board.addEventListener('drag-start', (e) => {
const {source, piece, position, orientation} = e.detail;
// do not pick up pieces if the game is over
if (game.game_over()) {
e.preventDefault();
return;
}
// only pick up pieces for the side to move
if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
(game.turn() === 'b' && piece.search(/^w/) !== -1)) {
e.preventDefault();
return;
}
});
board.addEventListener('drop', (e) => {
const {source, target, setAction} = e.detail;
// see if the move is legal
const move = game.move({
from: source,
to: target,
promotion: 'q' // NOTE: always promote to a queen for example simplicity
});
// illegal move
if (move === null) {
setAction('snapback');
}
updateStatus();
});
// update the board position after the piece snap
// for castling, en passant, pawn promotion
board.addEventListener('snap-end', (e) => {
board.setPosition(game.fen());
});
function updateStatus () {
let status = '';
let moveColor = 'White';
if (game.turn() === 'b') {
moveColor = 'Black';
}
if (game.in_checkmate()) {
// checkmate?
status = `Game over, ${moveColor} is in checkmate.`;
} else if (game.in_draw()) {
// draw?
status = 'Game over, drawn position';
} else {
// game still on
status = `${moveColor} to move`;
// check?
if (game.in_check()) {
status += `, ${moveColor} is in check`;
}
}
statusElement.innerHTML = status;
fenElement.innerHTML = game.fen();
pgnElement.innerHTML = game.pgn();
}
updateStatus();
});
</script>
Status:
FEN: PGN: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } @media (min-width: 640px) { main { max-width: none; } } #board3 { width: 400px; } </style>