I'm creating a chess game using the CSS and JS libraries for chessboard.js and chess.js. For some reason chessboard.js was unable to access its chess piece images, so I decided to use the icons that are on awesome font. For some reason I'm getting a 404 error from | return '`; |. Here's all my code:
var board, game = new Chess();
// Custom piece theme using Font Awesome icons
function pieceTheme(piece) {
// Map chess.js piece codes to Font Awesome icons
var pieceToIcon = {
'p': 'fas fa-chess-pawn',
'r': 'fas fa-chess-rook',
'n': 'fas fa-chess-knight',
'b': 'fas fa-chess-bishop',
'q': 'fas fa-chess-queen',
'k': 'fas fa-chess-king'
};
var pieceClass = pieceToIcon[piece.charAt(1).toLowerCase()];
var colorClass = piece.charAt(0) === 'w' ? 'text-white' : 'text-black';
return `<span class="${pieceClass} ${colorClass}"></span>`;
}
// Configuration object for chessboard.js
var config = {
draggable: true,
position: 'start',
pieceTheme: pieceTheme,
onDragStart: onDragStart,
onDrop: onDrop,
onSnapEnd: onSnapEnd
};
// Initialize the chessboard with the configuration
board = Chessboard('chessboard', config);
// Event listener for drag start
function onDragStart(source, piece, position, orientation) {
// Don't pick up pieces if the game is over
if (game.game_over()) return false;
// Only pick up pieces of the current turn
if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
(game.turn() === 'b' && piece.search(/^w/) !== -1)) {
return false;
}
}
// Event listener for drop
function onDrop(source, target) {
// Attempt to make a move
var move = game.move({
from: source,
to: target,
promotion: 'q' // NOTE: Always promote to a queen for simplicity
});
// If the move is illegal, return 'snapback' to reset the piece
if (move === null) return 'snapback';
}
// Event listener for snap end
function onSnapEnd() {
// Update the board position after the piece snap
board.position(game.fen());
}#chessboard {
width: 400px;
margin: 20px auto;
}
/* Adjust the size of the font awesome icons to fit the squares */
.chessboard .square-55d63 .piece-417db {
font-size: 2em; /* Example size, adjust as needed */
}
/* Use !important to enforce color styling on Font Awesome icons */
.fa-chess-pawn, .fa-chess-rook, .fa-chess-knight, .fa-chess-bishop, .fa-chess-queen, .fa-chess-king {
color: inherit !important;
}
/* Custom color classes for chess pieces */
.text-white { color: white !important; }
.text-black { color: black !important; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chess</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chessboard" style="margin: auto;"></div>
<script src="script.js"></script>
</body>
</html>Can someone tell me how to get the images from chessboard.js library or can someone fix the code I gave above using the awesome font icons. Thank you!