Merge pull request #10 from RiteshS1/last

adios

README.md

@@ -1 +1,44 @@
-# This Project is still in development !
+# Chessical: The JavaScript-powered Chess Engine
+
+Welcome to **Chessical**, a unique chess engine built entirely using pure JavaScript! This project showcases a simplified yet powerful implementation of a chess engine using the Minimax algorithm with Alpha-Beta Pruning, allowing for intelligent gameplay and move suggestions.
+
+## Key Features
+
+- **Play as White or Black**: Experience unlimited gameplay from either side.
+- **Best Move Suggestion**: Utilize the "Suggest Best Move" button to get assistance on the next optimal move. *Note*: Currently set at a search depth of 1 for speed, leading to basic move suggestions.
+- **Evaluation Bar**: Visualize who has the upper hand in the game with a real-time evaluation bar.
+- **Dark Mode**: Play in a visually appealing dark mode for an immersive experience.
+
+## How It Works
+
+Chessical leverages the **Minimax algorithm** with **Alpha-Beta Pruning** for decision-making, ensuring the engine evaluates moves efficiently by pruning unnecessary branches. However, to maintain speed, the depth of move evaluation is kept minimal for now. This means moves suggested may be naive but demonstrate the core algorithm's function.
+
+## Why Chessical?
+
+Unlike standard online chess games, Chessical is designed to demonstrate the underlying mechanics of a chess engine, giving users insights into move evaluation and algorithmic strategies.
+
+## Planned Enhancements
+
+- Increase the depth of the Minimax algorithm for stronger move suggestions.
+- Add performance optimizations for faster computation.
+- Improve the evaluation function for more nuanced gameplay.
+
+## Demo & Usage
+
+Simply open the project in your browser and start playing! Click on the "Suggest Best Move" button to get a hint, and keep an eye on the evaluation bar to gauge your standing.
+
+## Technologies Used
+
+- **JavaScript**: The entire engine is powered by vanilla JavaScript.
+- **Minimax Algorithm**: For move evaluation.
+- **Alpha-Beta Pruning**: To optimize the decision-making process.
+
+## Contributing
+
+Contributions are welcome! Feel free to fork the project, open issues, or submit pull requests to make Chessical even better.
+
+
+
+---
+
+Enjoy playing and exploring the inner workings of Chessical, your very own JavaScript-powered chess engine!

index.html

@@ -21,12 +21,22 @@ <h1>♔ Chessical ♔</h1>
         </div>
 
         <button id="suggest-best-move">Suggest Best Move</button>
+        <div class="top-right-corner">
+            <a href="https://github.com/your-repo" target="_blank">
+                <img src="pieces/github.png" alt="GitHub" id="github-icon">
+            </a>
+            <img src="pieces/day-mode.png" alt="Toggle Dark Mode" id="mode-toggle" class="mode-toggle">
+        </div>
     </div>
 
     <div id="evaluation-bar">
         <div id="evaluation-score"></div>
     </div>
 
+    <footer>
+        <div><h2>Made with 💖 by <a class="name" href="https://www.linkedin.com/in/ritesh-sharma-8477a424a/">RS</a></h2></div>
+    </footer>
+
     <script src="scripts/board.js"></script>
     <script src="scripts/evaluation.js"></script>
     <script src="scripts/bestmove.js"></script>

scripts/board.js

@@ -794,3 +794,12 @@ function handleSquareClick(event) {
         selectedSquare = null;
     }
 }
+
+
+// Add this to your existing JavaScript file
+const modeToggle = document.getElementById('mode-toggle');
+
+modeToggle.addEventListener('click', function() {
+    const isDarkMode = document.body.classList.toggle('dark-mode');
+    modeToggle.src = isDarkMode ? 'pieces/night-mode.png' : 'pieces/day-mode.png';
+});

styles.css

@@ -277,3 +277,64 @@ p {
         background-color: #CCCC !important;
     }
 }
+
+body.dark-mode {
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+}
+
+.dark-mode .main-container {
+  background-color: #000000; /* Adjust as needed */
+}
+
+.dark-mode h1, .dark-mode p {
+  color: #b58863; /* Adjust as needed */
+}
+
+.dark-mode .captured-pieces {
+  background-color: rgba(50, 50, 50, 0.8);
+  border: 1px solid #444;
+}
+
+#github-icon {
+  width: 30px; /* Adjust size as needed */
+  height: 30px; /* Adjust size as needed */
+  margin-left: 10px; /* Space between button and icon */
+}
+
+.top-right-corner {
+    position: fixed;
+    top: 20px; /* Adjust as needed */
+    right: 20px; /* Adjust as needed */
+    display: flex;
+    align-items: center;
+    gap: 10px; /* Space between icons */
+}
+
+.mode-toggle {
+    width: 30px; /* Adjust size as needed */
+    height: 30px; /* Adjust size as needed */
+    cursor: pointer
+}
+
+footer {
+    margin-top: 4em; /* Space above the footer */
+    padding: 1em;
+
+    text-align: center;
+    border-top: 1px solid #ccc; /* Optional border */
+}
+
+footer h2 {
+    font-size: 1.2em;
+    color: #ffffff; /* Text color */
+}
+
+footer .name {
+    color: #007bff; /* Link color */
+    text-decoration: none; /* Remove underline */
+}
+
+footer .name:hover {
+    text-decoration: underline; /* Underline on hover */
+}