Better UI.

src/Aiursoft.ChessServer/Controllers/GamesController.cs

@@ -55,7 +55,7 @@ public class GamesController : Controller
     }
     
     [Route("games/{id}/ws")]
-    public async Task<IActionResult> GetWebSocket([FromRoute] int id)
+    public async Task GetWebSocket([FromRoute] int id)
     {
         var lastReadId = _counter.GetCurrent;
         var (channel, blocker) = _database.ListenChannel(id);
@@ -84,7 +84,7 @@ public class GamesController : Controller
             }
         }
 
-        return NoContent();
+        // System.InvalidOperationException: StatusCode cannot be set because the response has already started.
     }
 
     [Route("games/{id}/ascii")]

src/Aiursoft.ChessServer/Middlewares/AllowCrossOriginMiddleware.cs

@@ -23,7 +23,7 @@
             context.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
             context.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
 
-            if (context.Request.Method == "OPTIONS")
+            if (context.Request.Method == "OPTIONS" && !context.Response.HasStarted)
             {
                 context.Response.StatusCode = 200;
                 return;

src/Aiursoft.ChessServer/Views/Games/GetHtml.cshtml

@@ -2,15 +2,31 @@
 
 @section Styles {
     <link href="~/chessboardjs/css/chessboard-1.0.0.min.css" rel="stylesheet"/>
+    <style>
+        .hidden {
+            display: none;
+        }
+    </style>
 }
 
-<div id="board" style="width: 400px"></div>
-<p id="status"></p>
-<p id="fen"></p>
+@* Make a responsible board based on bootstrap: (Avoid width with hardcode or overflow) *@
+@* <div id="board"></div> *@
+
+<div class="row">
+    <div class="col-md-6">
+        <div id="board" style="width: 100%"></div>
+    </div>
+    <div class="col-md-12">
+        @* Make the following p auto warp *@
+        
+        <p id="status" class="text-center text-wrap text-primary mt-1"></p>
+        <p id="fen" class="text-wrap text-muted hidden"></p>
+    </div>
+</div>
 
 @section Scripts {
     <script type="module" src="~/chess.js/dist/esm/chess.js"></script>
-    <script src="~/chessboardjs/js/chessboard-1.0.0.min.js"></script>
+    <script src="~/chessboardjs/js/chessboard-1.0.0.js"></script>
     <script type="module" src="~/site.js"></script>
     <script type="module">
         // Ask the user to enter w or b:

src/Aiursoft.ChessServer/Views/Shared/_Layout.cshtml

@@ -38,7 +38,7 @@
         </div>
     </footer>
     <script src="~/jquery/dist/jquery.min.js"></script>
-    <script src="~/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    @* <script src="~/bootstrap/dist/js/bootstrap.bundle.min.js"></script> *@
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>

src/Aiursoft.ChessServer/wwwroot/chessboardjs/js/chessboard-1.0.0.js

@@ -1655,7 +1655,7 @@
       if (!isDragging) return
 
       // prevent screen from scrolling
-      evt.preventDefault()
+      //evt.preventDefault()
 
       updateDraggedPiece(evt.originalEvent.changedTouches[0].pageX,
         evt.originalEvent.changedTouches[0].pageY)