Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

last few tweaks #7

Merged
merged 1 commit into from
Nov 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@
</head>
<body>
<h1>♔ Chessical ♔</h1>
<div id="board"></div>

<div class="captured-area">

<div class="game-container">
<div id="captured-white" class="captured-pieces">White Captured Pieces</div>
<div id="board"></div>
<div id="captured-black" class="captured-pieces">Black Captured Pieces</div>
</div>

<div id="evaluation-bar">
<div id="evaluation-score"></div>
<div id="evaluation-bar">
<div id="evaluation-score"></div>
</div>
</div>

<button id="suggest-best-move">Suggest Best Move</button>
Expand Down
43 changes: 40 additions & 3 deletions scripts/board.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,23 @@ let blackQueensideRookMoved = false;
let selectedPiece = null;
let selectedSquare = null;

// Sound effects
const sounds = {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of this ; could have made a sounds.js and exported the sounds and preloadSounds!

move: new Audio('sounds/move.mp3'),
capture: new Audio('sounds/capture.mp3'),
castle: new Audio('sounds/castle.mp3'),
check: new Audio('sounds/check.mp3'),
promote: new Audio('sounds/promote.mp3'),
notify: new Audio('sounds/notify.mp3')
};

// Preload sounds
function preloadSounds() {
for (const sound in sounds) {
sounds[sound].load(); // Preload each sound
}
}

function initBoard() {
const initialBoard = [
['black_rook', 'black_knight', 'black_bishop', 'black_queen', 'black_king', 'black_bishop', 'black_knight', 'black_rook'],
Expand All @@ -26,7 +43,6 @@ function initBoard() {
];

let isWhiteSquare = true;

const fileLabels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];

for (let i = 0; i < 64; i++) {
Expand Down Expand Up @@ -233,7 +249,12 @@ function isValidMove(draggedPiece, sourceIndex, targetIndex) {
if (targetPiece) {
const sourceColor = draggedPiece.getAttribute('data-piece').split('_')[0];
const targetColor = targetPiece.getAttribute('data-piece').split('_')[0];
if (sourceColor === targetColor) return false;
if (sourceColor === targetColor) return false; // Cannot capture own piece
}

// Check if the target piece is a king
if (targetPiece && targetPiece.getAttribute('data-piece').includes('king')) {
return false; // Cannot capture the king
}

// Check for check resolution
Expand Down Expand Up @@ -470,6 +491,17 @@ function validateKingMove(sourceRow, sourceCol, targetRow, targetCol) {
// Check if the target square is under attack
const isWhiteKing = document.querySelector(`[data-index="${sourceRow * 8 + sourceCol}"]`)
.querySelector('.piece').getAttribute('data-piece').startsWith('white');

// Check if the target square is adjacent to the opposing king
const opponentKingPos = findKingPosition(!isWhiteKing);
if (opponentKingPos) {
const opponentKingRow = opponentKingPos.row;
const opponentKingCol = opponentKingPos.col;
if (Math.abs(opponentKingRow - targetRow) <= 1 && Math.abs(opponentKingCol - targetCol) <= 1) {
return false; // Cannot move into a square adjacent to the opposing king
}
}

return !isKingInCheck(targetRow, targetCol, isWhiteKing);
}

Expand Down Expand Up @@ -574,6 +606,7 @@ function doesMoveResolveCheck(piece, sourceIndex, targetIndex) {
}

// Initialize the board with pieces and listeners
preloadSounds(); // Preload sounds
initBoard();

// Add this function after handleDrop
Expand All @@ -599,6 +632,7 @@ function handlePawnPromotion(square, piece) {
// Update the piece
piece.src = option.src;
piece.setAttribute('data-piece', `${pieceColor}_${pieceType}`);
sounds.promote.play(); // Play promote sound
modal.remove();
updateBoardState();
updateEvaluationBar();
Expand Down Expand Up @@ -721,7 +755,8 @@ function handleSquareClick(event) {
return;
}
targetPiece.remove();

sounds.capture.play(); // Play capture sound

if (capturedPieceColor === 'white') {
capturedWhitePieces.push(targetPiece);
} else {
Expand All @@ -733,6 +768,7 @@ function handleSquareClick(event) {

// Move the piece
square.appendChild(selectedPiece);
sounds.move.play(); // Play move sound
handlePawnPromotion(square, selectedPiece);

const currentPosition = getCurrentPosition();
Expand All @@ -747,6 +783,7 @@ function handleSquareClick(event) {

if (isCheckmate(opponentIsWhite)) {
setTimeout(() => {
sounds.notify.play(); // Play checkmate sound
showGameEndModal(`${pieceColor.charAt(0).toUpperCase() + pieceColor.slice(1)} wins by checkmate!`);
}, 100);
}
Expand Down
45 changes: 42 additions & 3 deletions scripts/evaluation.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,54 @@ function getPieceValue(piece) {
[-30, 5, 10, 15, 15, 10, 5,-30],
[-40,-20, 0, 5, 5, 0,-20,-40],
[-50,-40,-30,-30,-30,-30,-40,-50]
],
'bishop': [
[-20,-10,-10,-10,-10,-10,-10,-20],
[-10, 0, 0, 0, 0, 0, 0,-10],
[-10, 5, 10, 10, 10, 10, 5,-10],
[-10, 10, 10, 10, 10, 10, 10,-10],
[-10, 0, 10, 10, 10, 10, 0,-10],
[-10, 0, 0, 0, 0, 0, 0,-10],
[-20,-10,-10,-10,-10,-10,-10,-20],
[-30,-30,-30,-30,-30,-30,-30,-30]
],
'rook': [
[0, 0, 0, 0, 0, 0, 0, 0],
[5, 10, 10, 10, 10, 10, 10, 5],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[5, 10, 10, 10, 10, 10, 10, 5],
[10, 10, 10, 10, 10, 10, 10, 10],
[0, 0, 0, 0, 0, 0, 0, 0]
],
'queen': [
[-20,-10,-10,-5,-5,-10,-10,-20],
[-10, 0, 0, 0, 0, 0, 0,-10],
[-10, 5, 10, 10, 10, 10, 5,-10],
[-5, 0, 10, 10, 10, 10, 0,-5],
[0, 0, 10, 10, 10, 10, 0, 0],
[-10, 0, 10, 10, 10, 10, 5,-10],
[-10, 0, 0, 0, 0, 0, 0,-10],
[-20,-10,-10,-5,-5,-10,-10,-20]
],
'king': [
[20, 30, 10, 0, 0, 10, 30, 20],
[20, 30, 10, 0, 0, 10, 30, 20],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[-20,-30,-30,-30,-30,-30,-30,-20],
[-30,-40,-40,-50,-50,-40,-40,-30],
[-30,-40,-40,-50,-50,-40,-40,-30],
[-40,-50,-50,-60,-60,-50,-50,-40]
]
// Add similar position tables for other pieces
};

let value = values[piece.type] || 0;

// Add position-based bonus if available
if (positionBonus[piece.type]) {
const row = piece.color === 'white' ? 7 - piece.row : piece.row;
const row = piece.color === 'white' ? 7 - piece.row : piece.row; // Adjust row for white's perspective
value += positionBonus[piece.type][row][piece.col];
}

Expand Down Expand Up @@ -120,4 +159,4 @@ function updateEvaluationBar() {
const maxScore = 4000;
const evalPercent = 50 + (score / maxScore) * 50;
evaluationDiv.style.height = evalPercent + '%';
}
}
Binary file added sounds/capture.mp3
Binary file not shown.
Binary file added sounds/castle.mp3
Binary file not shown.
Binary file added sounds/check.mp3
Binary file not shown.
Binary file added sounds/move.mp3
Binary file not shown.
Binary file added sounds/notify.mp3
Binary file not shown.
Binary file added sounds/promote.mp3
Binary file not shown.
112 changes: 78 additions & 34 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,41 @@
margin: 0;
}

body {
background-color: #2c3e50;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
padding: 2em;
text-align: center;
}

h1{
text-align: center;
margin: 1.2em;
color:#b58863
color:#b58863;
font-size: 2.3em;

}


.game-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
margin:0 2em ;

}
#board {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(8, 80px);
width: 640px;
height: 640px;
border: 2px solid;
border: 2px solid #333;
}

.square {
Expand Down Expand Up @@ -55,12 +79,14 @@ h1{
}

.captured-pieces {
width: 640px;
display: flex;
flex-wrap: wrap;
min-height: 40px;
padding: 5px;
border: 1px solid #ccc;
margin: 10px 0;
margin: 5px 0;
background-color: rgba(255, 255, 255, 0.8);
}

.captured-pieces .piece {
Expand All @@ -73,17 +99,21 @@ h1{
padding: 0.9em;
border-radius: 25px;
font-size: 0.8em;
margin-top: 0.5em;
cursor: pointer;
}

#evaluation-bar {
width: 30px;
height: 400px;
border: 1px solid #ccc;
position: fixed;
right: 50px;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
right: 10px;
top: 20%;


background-color: white;
z-index: 100;
}

#evaluation-score {
Expand All @@ -96,7 +126,7 @@ h1{
}

.highlighted-square {
background-color: rgba(255, 255, 0, 0.5) !important;
background-color: rgba(147, 245, 82, 0.944) !important;
animation: highlightPulse 4s ease-in-out;
}

Expand Down Expand Up @@ -145,38 +175,52 @@ h1{

/* Add responsive design */
@media (max-width: 768px) {
#board {
width: 100vw;
height: 100vw;
max-width: 640px;
max-height: 640px;
}


.square {
width: 12.5vw;
height: 12.5vw;
max-width: 80px;
max-height: 80px;
.game-container{
position: relative;
transform: scale(0.9);
transform-origin:center;
margin: 0 2em;
padding: 4em;
}
.piece {
width: 100%;
height: 100%;

#board, .captured-pieces {
max-width: 640px;

}

#evaluation-bar {
right: 10px;
position: fixed;
width: 15px;
height: 300px;
right: -2em;

}

.captured-pieces {
padding: 2px;
}

@media (max-width: 500px) {
.game-container {
transform: scale(0.9);
transform-origin:top;
margin: 0 6em;

}

.captured-pieces .piece {
width: 30px;
height: 30px;
#board,.captured-pieces{

margin-left: 12em;
}






#evaluation-bar {
width: 10px;
height: 300px;
position: fixed;
}
}

/* Add touch support */
Expand All @@ -193,4 +237,4 @@ h1{
.selected-square {
background-color: rgba(255, 255, 0, 0.4) !important;
}
}
}