refactor and improve engine

jamesfricker · Jul 2, 2024 · e1a17aa · e1a17aa
1 parent 8682c34
commit e1a17aa
Show file tree

Hide file tree

Showing 4 changed files with 516 additions and 308 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -0,0 +1,63 @@
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+}
+
+.game-over-modal {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    text-align: center;
+}
+
+.game-over-modal p {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.game-over-modal button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+
+.game-over-modal button:hover {
+    background-color: #0056b3;
+}
+
+
+.move-indicator {
+    margin-top: 10px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.move-indicator.white-turn {
+    color: #333;
+}
+
+.move-indicator.black-turn {
+    color: #000;
+}
diff --git a/public/index.html b/public/index.html
@@ -60,6 +60,11 @@
             background-color: rgba(255, 255, 0, 0.5);
         }
 
+
+        .overlay.show {
+            display: block;
+        }
+
         .overlay {
             display: none;
             position: fixed;
@@ -69,10 +74,8 @@
             height: 100%;
             background: rgba(0, 0, 0, 0.7);
             z-index: 999;
-        }
-
-        .overlay.show {
-            display: block;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
 
         .game-over-modal {
@@ -87,6 +90,8 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
             z-index: 1000;
             text-align: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
 
         .game-over-modal.show {
@@ -121,6 +126,8 @@
 
 <body>
     <div id="board"></div>
+    <!-- Add this right after the <div id="board"></div> -->
+    <div id="moveIndicator" class="move-indicator" aria-live="polite"></div>
     <div class="controls">
         <label for="difficulty">Select Difficulty:</label>
         <select id="difficulty">
@@ -139,6 +146,7 @@
         <p id="gameOverMessage"></p>
         <button onclick="closeGameOverModal()">Close</button>
     </div>
+
     <script src="./js/jquery-3.2.1.min.js"></script>
     <script src="./js/chess.min.js"></script>
     <script src="./js/chessboard-0.3.0.min.js"></script>