Update index.html

index.html

@@ -15,8 +15,8 @@
             justify-content: center;
             min-height: 100vh;
             margin: 0;
-            background-color: #f5f5f5;
-            overflow-x: hidden; /* Prevent horizontal scrollbar */
+            background-color: #f5f5f5; /* Very Light Gray */
+            overflow: hidden;
         }
 
         #game-container {
@@ -24,7 +24,7 @@
             flex-direction: column;
             align-items: center;
             width: 100%;
-            max-width: 600px; /* Limits width on very large screens */
+            max-width: 600px;
         }
 
         #game-title {
@@ -32,68 +32,58 @@
             font-weight: bold;
             margin-bottom: 0.5em;
             text-align: center;
-            color: #444;
+            color: #444; /* Darker Gray */
             user-select: none;
         }
 
         #game-instructions {
             text-align: center;
             margin-bottom: 1em;
-            color: #666;
+            color: #666; /* Medium Gray */
             user-select: none;
-            width: 90%;
         }
 
         #game-board {
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            border: 1px solid #ddd;
-            background-color: #fff;
+            border-radius: 8px; /* Slightly Rounded Corners */
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Very Subtle Shadow */
+            border: 1px solid #ddd; /* Light Gray Border */
+            background-color: #fff; /* White Background */
             touch-action: none;
-            display: block;
-            margin: 0 auto;
         }
 
-        #button-container {
-            display: flex;
-            gap: 10px;
+        #ai-first {
             margin-top: 1em;
-            justify-content: center;
-            width: 100%;
-        }
-
-        .game-button {
             padding: 10px 20px;
             font-size: 1em;
-            border: 1px solid #ccc;
+            border: 1px solid #ccc; /* Light Gray Border */
             border-radius: 5px;
-            background-color: #f9f9f9;
-            color: #555;
+            background-color: #f9f9f9; /* Almost White */
+            color: #555; /* Dark Gray Text */
             cursor: pointer;
             transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
             user-select: none;
         }
 
-        .game-button:hover {
-            background-color: #eee;
-            border-color: #bbb;
+        #ai-first:hover {
+            background-color: #eee; /* Slightly Darker on Hover */
+            border-color: #bbb; /* Darker Border on Hover */
             color: #333;
         }
-
-        .game-button:active {
+        #ai-first:active {
             transform: translateY(1px);
             background-color: #ddd;
         }
 
+        /* Loading indicator */
         #loading-indicator {
             display: none;
             margin-top: 20px;
             border: 6px solid #f3f3f3;
-            border-top: 6px solid #999;
+            border-top: 6px solid #999; /* Medium Gray */
             border-radius: 50%;
             width: 50px;
             height: 50px;
-            animation: spin 1s linear infinite;
+            animation: spin 1s linear infinite; /* Faster Spin */
         }
 
         @keyframes spin {
@@ -109,10 +99,6 @@
             #game-instructions {
                 font-size: 0.9em;
             }
-
-            .game-button {
-                padding: 8px 16px;
-            }
         }
     </style>
 </head>
@@ -122,64 +108,47 @@
         <h1 id="game-title">Connect Four</h1>
         <p id="game-instructions">Try to connect four stones in a row, a column, or a diagonal.</p>
         <canvas id="game-board"></canvas>
-        <div id="button-container">
-            <button type="button" id="ai-first" class="game-button">AI First</button>
-            <button type="button" id="reset-button" class="game-button">Restart</button>
-        </div>
+        <button type="button" id="ai-first">AI goes first</button>
         <div id="loading-indicator"></div>
     </div>
-
     <script>
+        // ... (rest of your JavaScript code, with changes below) ...
+
         function BoardGame(agent, num_rows, num_cols) {
             this.agent = agent;
-            this.audio = new Audio('/stone.ogg');
+            this.audio = new Audio('/stone.ogg'); //  Consider a more subtle sound.
             this.num_cols = num_cols;
             this.num_rows = num_rows;
             var this_ = this;
             this.canvas_ctx = document.getElementById("game-board").getContext("2d");
-            this.board_scale = 1;
+            this.board_scale = 1; // Initial scale
 
-            this.calculateBoardScale = function () {
-                // 1. Get the container width.
+            this.calculateBoardScale = function() {
                 const containerWidth = document.getElementById("game-container").offsetWidth;
+                const containerHeight = window.innerHeight - document.getElementById("game-instructions").offsetHeight
+                                        - document.getElementById("ai-first").offsetHeight - 80;
 
-                // 2. Calculate the *available* height.  This is the crucial part.
-                //    We subtract the heights of *all* other elements *and* a margin.
-                const containerHeight = window.innerHeight
-                    - document.getElementById("game-title").offsetHeight
-                    - document.getElementById("game-instructions").offsetHeight
-                    - document.getElementById("button-container").offsetHeight
-                    - document.getElementById("loading-indicator").offsetHeight // Include loading indicator
-                    - 40; //  Margin (adjust as needed)
 
-                // 3. Calculate a *potential* canvas width (most of the container).
-                const canvasWidth = containerWidth * 0.95;
-
-                // 4. Calculate the corresponding height to maintain the aspect ratio.
+                const canvasWidth = containerWidth * 0.95; // Use 95% of container width
                 const canvasHeight = canvasWidth * (num_rows + 1) / (num_cols + 1);
 
-                // 5.  Check if the calculated height is *too large* for the available space.
-                if (canvasHeight > containerHeight) {
-                    // 5a. If it's too large, scale based on *height*.
-                    const adjustedCanvasHeight = containerHeight * 0.9; // Use most of available height
-                    const adjustedCanvasWidth = adjustedCanvasHeight * (num_cols + 1) / (num_rows + 1);
+                if(canvasHeight > containerHeight) {
+                    const adjustedCanvasHeight = containerHeight * 0.9;
+                    const adjustedCanvasWidth = adjustedCanvasHeight * (num_cols+1) / (num_rows+1);
                     this.board_scale = adjustedCanvasHeight / (num_rows + 1);
-                    this.canvas_ctx.canvas.width = adjustedCanvasWidth;
-                    this.canvas_ctx.canvas.height = adjustedCanvasHeight;
-
-                } else {
-                    // 5b. If it fits, use the calculated width and height.
+                    this_.canvas_ctx.canvas.width = adjustedCanvasWidth;
+                    this_.canvas_ctx.canvas.height = adjustedCanvasHeight;
+                }
+                else{
                     this.board_scale = canvasWidth / (num_cols + 1);
-                    this.canvas_ctx.canvas.width = canvasWidth;
-                    this.canvas_ctx.canvas.height = canvasHeight;
+                    this_.canvas_ctx.canvas.width = canvasWidth;
+                    this_.canvas_ctx.canvas.height = canvasHeight;
                 }
-
-                // 6. Reset the transformation and apply the new scale and translation.
-                this.canvas_ctx.setTransform(1, 0, 0, 1, 0, 0);
-                this.canvas_ctx.scale(this.board_scale, this.board_scale);
-                this.canvas_ctx.translate(0.5, 0.5);
-            };
-            this.calculateBoardScale(); // Initial calculation
+                this_.canvas_ctx.setTransform(1, 0, 0, 1, 0, 0);  // Reset transform
+                this_.canvas_ctx.scale(this.board_scale, this.board_scale);
+                this_.canvas_ctx.translate(0.5, 0.5);
+            }
+             this.calculateBoardScale();
 
 
             this.reset = function () {
@@ -190,16 +159,12 @@
                 this.who_play = 1;
                 this.ai_player = -1;
                 this.game_ended = false;
-                this.render();
             };
-            this.reset(); // Initial reset
-
+            this.reset();
             this.get = function (row, col) {
                 return this.board[this.num_cols * row + col];
-            };
-
+            }
             this.is_terminated = function () {
-                // ... (rest of is_terminated is the same) ...
                 if (this.board.some((x) => x == 0) == false) return true;
                 for (let i = 0; i < this.num_rows; i++) {
                     for (let j = 0; j < this.num_cols; j++) {
@@ -221,9 +186,7 @@
                 }
                 return false;
             };
-
             this.submit_board = async function () {
-                // ... (rest of submit_board is the same) ...
                 document.getElementById("loading-indicator").style.display = "block";
                 await new Promise(r => setTimeout(r, 1000));
                 if (this_.is_terminated()) return { "terminated": true, "action": -1 };
@@ -237,15 +200,11 @@
                     "action": action,
                 };
             };
-
             this.end_game = function () {
                 this.game_ended = true;
-                setTimeout(function () { this_.reset(); }, 3000);
+                setTimeout(function () { this_.reset(); this_.render(); }, 3000);
             };
-
             this.ai_play = function () {
-                if (this_.game_ended) return;
-
                 this_.submit_board().then(
                     function (info) {
                         let x = info["action"];
@@ -265,10 +224,13 @@
                     console.error("AI play error:", e);
                 });
             };
+            document.getElementById("ai-first").onclick = function () {
+                this_.reset();
+                this_.ai_player = 1;
+                this_.ai_play();
+            };
 
-            this.handleClick = function (x, y) {
-                if (this_.game_ended) return;
-
+            this.handleClick = function(x, y) {
                 var loc_x = Math.floor(x / this_.board_scale - 0.5);
                 var loc_y = Math.floor(y / this_.board_scale - 0.5);
                 this_.mouse_x = loc_x;
@@ -278,26 +240,27 @@
                     this_.mouse_x >= 0 &&
                     this_.mouse_y >= 0 &&
                     this_.mouse_x < this_.num_cols &&
-                    this_.mouse_y < this_.num_rows
+                    this_.mouse_y < this_.num_rows &&
+                    this_.game_ended == false
                 ) {
-                    if (this_.who_play == this_.ai_player) return;
+                    if (this_.who_play == this_.ai_player) return false;
                     let i = this_.mouse_y * this_.num_cols + this_.mouse_x;
-                    if (this_.board[i] != 0) return;
+                    if (this_.board[i] != 0) return false;
                     this_.board[i] = this_.who_play;
                     this_.audio.play();
                     this_.who_play = -this_.who_play;
                     this_.render();
                     this_.ai_play();
                 }
-            };
+            }
+
             document.getElementById("game-board").addEventListener('touchstart', function(e) {
-                e.preventDefault(); // Prevent other events
+                e.preventDefault();
                 var rect = this.getBoundingClientRect();
                 var touch = e.touches[0];
                 var x = touch.clientX - rect.left;
                 var y = touch.clientY - rect.top;
-                this_.handleClick(x,y);
-
+                this_.handleClick(x, y);
             }, false);
 
 
@@ -308,37 +271,34 @@
                 this_.handleClick(x,y);
             }, false);
 
+
+
             this.draw_stone = function (x, y, color) {
-                // ... (rest of draw_stone is the same) ...
-                 let ctx = this.canvas_ctx;
+                let ctx = this.canvas_ctx;
                 y = this.num_rows - 1 - y;
                 ctx.beginPath();
                 ctx.arc(x, y, 0.40, 0, 2 * Math.PI, false);
                 ctx.fillStyle = color;
                 ctx.fill();
                 ctx.lineWidth = 0.02;
-                ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
+                ctx.strokeStyle = "rgba(0, 0, 0, 0.1)"; // Very Light Border
                 ctx.stroke();
             };
-
             this.get_candidate = function (x) {
-                // ... (rest of get_candidate is the same) ...
                 for (let i = 0; i < this.num_rows; i++) {
                     let idx = i * this.num_cols + x;
                     if (this.board[idx] == 0) return [x, i];
                 }
                 return [-1, -1];
             };
-
             this.render = function () {
-                // ... (rest of render is the same, except for colors) ...
                 let ctx = this.canvas_ctx;
                 ctx.clearRect(-1, -1, num_cols + 1, num_rows + 1);
-                ctx.fillStyle = "#fff";
+                ctx.fillStyle = "#fff";  // White board
                 ctx.fillRect(-0.5, -0.5, num_cols, num_rows);
 
                 ctx.lineWidth = 0.1 / 2;
-                ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
+                ctx.strokeStyle = "rgba(0, 0, 0, 0.1)"; // Very subtle grid lines
                 for (let i = 0; i < this.num_cols; i++) {
                     ctx.beginPath();
                     ctx.moveTo(i, 0);
@@ -356,7 +316,7 @@
                     let x = i % this.num_cols;
                     let y = Math.floor(i / this.num_cols);
                     if (this.board[i] == 0) continue;
-                    let color = (this.board[i] == 1) ? "#007AFF" : "#FF9500";
+                    let color = (this.board[i] == 1) ? "#555" : "#bbb"; // Dark Gray and Light Gray
                     this.draw_stone(x, y, color);
                 }
 
@@ -370,12 +330,12 @@
                     if (x == -1) return;
                     this.mouse_x = x;
                     this.mouse_y = y;
-                    let previewColor = (this.who_play == -1) ? "rgba(255, 149, 0, 0.5)" : "rgba(0, 122, 255, 0.5)";
+                    let previewColor = (this.who_play == -1) ? "rgba(187, 187, 187, 0.5)" : "rgba(85, 85, 85, 0.5)"; // Semi-transparent grays
                     this.draw_stone(x, y, previewColor);
                 }
             };
 
-            this.handleMove = function (e) {
+            this.handleMove = function(e) {
               let rect = this.canvas_ctx.canvas.getBoundingClientRect();
               let x, y;
 
@@ -405,26 +365,16 @@
                 this_.handleMove(e);
             };
 
-             document.getElementById("game-board").addEventListener('touchmove', function(e) {
+            document.getElementById("game-board").addEventListener('touchmove', function(e) {
                 this_.handleMove(e);
-             }, false);
-
-            window.addEventListener('resize', function () {
-                this_.calculateBoardScale(); // Recalculate on resize
-                this_.render(); // Redraw
-            });
-
-            document.getElementById("ai-first").onclick = function () {
-                this_.reset();
-                this_.ai_player = 1;
-                this_.ai_play();
-            };
+            }, false);
 
-            document.getElementById("reset-button").onclick = function () {
-                this_.reset();
-            };
-        }
 
+            window.addEventListener('resize', function() {
+                this_.calculateBoardScale();
+                this_.render();
+            });
+        };
         const modelUrl = '/model.json';
 
         const init_fn = async function () {
@@ -432,17 +382,15 @@
             const model = await tf.loadGraphModel(modelUrl);
             return model;
         };
-
         document.addEventListener("DOMContentLoaded", function (event) {
             init_fn().then(function (agent) {
                 game = new BoardGame(agent, 6, 7);
-                game.render(); // Initial render
+                game.render();
 
             }).catch(error => {
                 console.error("Error loading model:", error);
                 document.getElementById("game-instructions").textContent = "Failed to load the AI. Please try refreshing the page.";
                 document.getElementById("ai-first").disabled = true;
-                document.getElementById("reset-button").disabled = true;
             });
         });
     </script>