Cannot read property 'moves' of undefine
Hello there! I am currently working on developing a chess game using Angular.
I'm facing an issue with the artificial intelligence in the game where the piece seems to get stuck in the mouse.
The libraries I am currently using for this project are chess.js and the chessboard library. However, the problem lies in the fact that the AI is predominantly written in jQuery.
If I comment out those specific lines, everything else works but the AI functionality stops functioning.
Here's some Angular code snippet:
import { Component, OnInit } from '@angular/core';
import * as ChessBoard from 'chessboardjs/www/js/chessboard';
declare var $: any;
declare var ChessBoard: any;
declare var Chess: any;
@Component({
selector: 'app-chess',
templateUrl: './chess.component.html',
styleUrls: ['./chess.component.scss']
})
export class ChessComponent implements OnInit {
board: any;
game: any;
constructor() { }
ngOnInit() {
let minimaxDepth = 2;
initGame();
function setDepth(depth){
console.log("this is "+depth);
document.getElementById('difficulty').style.display = 'none';
document.getElementById('chessboard').style.display = 'block';
document.getElementById('restart').style.display = 'block';
console.log(depth);
minimaxDepth = depth;
}
// Other functions and logic for the chess game
}
// Other parts of the code...
<div class=" alert alerta-game alert-warning alert-dismissible fade show" role="alert">
<p>
<strong>Attention: </strong>this game is in development.
</p>
</div>
<div class="menu" id="difficulty">
<br>
<h1>Select Difficulty:</h1>
<hr><br>...
</div>