updated

css/main.css

@@ -5,7 +5,7 @@
 #myBoard {
     max-width: 100%;
     height: auto;
-    overflow: scroll;
+    overflow: auto;
 }
 
 .highlight-white {

index.html

@@ -50,6 +50,11 @@
             integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" 
             crossorigin="anonymous">
         </script>
+        <script defer 
+            src="https://cdn.socket.io/3.1.3/socket.io.min.js" 
+            integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" 
+            crossorigin="anonymous">
+        </script>
 
         <!-- Custom JS -->
         <script defer src="js/main.js"></script>
@@ -59,14 +64,31 @@
             <div class="container my-3">
                 <div class="row align-items-center">
                     <div class="col-md-6">
-                        <h1 class="text-align-center">Simple Chess AI</h1>
+                        <h1 class="text-align-center">♟️Play Chess♟️</h1>
                         <div class="row justify-content-center">
                             <span id="position-count">0</span> &nbsp positions evaluated in &nbsp <span id="time">0</span>s.
                         </div>
                         <div class="row mb-3 justify-content-center">
                             That's &nbsp <span id="positions-per-s">0</span> &nbsp positions / s.
                         </div>
                         <div id="accordion">
+                            <!-- <div class="card">
+                                <div class="card-header d-flex justify-content-center align-items-center" style="gap: 1rem;">
+                                    <button class="btn btn-primary" onclick="alert('Start playing its your Move(White)')">Play with System</button>
+                                    <button class="btn btn-secondary" data-toggle="collapse" data-target="#createGame" aria-expanded="true" aria-controls="createGame">Play with A Buddy</button>
+                                </div>
+                            </div>
+                            <div id="createGame" class="collapse" aria-labelledby="createGameHeading" data-parent="#accordion">
+                                <div class="card-body">
+                                    <div class="row my-3 text-align-center">
+                                        <div class="input-group mb-3">
+                                            <input id="gameInput" type="text" class="form-control" placeholder="create game by entering code or paste code join the game" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                                        </div>
+                                        <button onclick="getValue()" class="btn btn-light " >Create Game</button>
+                                        <button onclick="getValue()" class="btn btn-success ms-2"  data-target="#createGame" aria-expanded="true" aria-controls="createGame">Join Game</button>
+                                    </div>
+                                </div>
+                            </div> -->
                             <div class="card">
                                 <div class="card-header" id="settingsHeading">
                                     <h2 class="text-align-center">
@@ -183,7 +205,7 @@ <h2>Status</h2>
                     </div>
                     <div class="col-md-6">
                         <div id="myBoard"></div>
-                        <div class="row my-3 text-align-center">
+                        <div class=" my-3 text-align-center d-flex">
                             <div class="col-md-6 my-2">
                                 <button class="btn btn-danger" id="undoBtn">Undo</button>
                             </div>

js/main.js

@@ -662,4 +662,4 @@ function onMouseoutSquare(square, piece) {
 
 function onSnapEnd() {
   board.position(game.fen());
-}
+}