Update index.html

index.html

@@ -16,7 +16,7 @@
             min-height: 100vh;
             margin: 0;
             background-color: #f5f5f5;
-            overflow: hidden;
+            overflow-x: hidden; /* Prevent horizontal scrollbar */
         }
 
         #game-container {
@@ -24,7 +24,7 @@
             flex-direction: column;
             align-items: center;
             width: 100%;
-            max-width: 600px;
+            max-width: 600px; /* Limits width on very large screens */
         }
 
         #game-title {
@@ -41,7 +41,7 @@
             margin-bottom: 1em;
             color: #666;
             user-select: none;
-            width: 90%; /* Limit width for readability */
+            width: 90%;
         }
 
         #game-board {
@@ -50,18 +50,16 @@
             border: 1px solid #ddd;
             background-color: #fff;
             touch-action: none;
-            /* Ensure canvas is centered within its container */
-            display: block; /* Remove any inline spacing */
-            margin: 0 auto;  /* Center horizontally */
-
+            display: block;
+            margin: 0 auto;
         }
 
         #button-container {
-          display: flex;
-          gap: 10px; /* Space between buttons */
-          margin-top: 1em;
-          justify-content: center; /* Center buttons horizontally */
-          width: 100%; /* Make container full-width */
+            display: flex;
+            gap: 10px;
+            margin-top: 1em;
+            justify-content: center;
+            width: 100%;
         }
 
         .game-button {
@@ -87,7 +85,6 @@
             background-color: #ddd;
         }
 
-
         #loading-indicator {
             display: none;
             margin-top: 20px;
@@ -112,8 +109,9 @@
             #game-instructions {
                 font-size: 0.9em;
             }
+
             .game-button {
-                padding: 8px 16px; /* Slightly smaller buttons on mobile */
+                padding: 8px 16px;
             }
         }
     </style>
@@ -125,12 +123,12 @@
         <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>
+            <button type="button" id="ai-first" class="game-button">AI First</button>
+            <button type="button" id="reset-button" class="game-button">Restart</button>
         </div>
-
         <div id="loading-indicator"></div>
     </div>
+
     <script>
         function BoardGame(agent, num_rows, num_cols) {
             this.agent = agent;
@@ -141,35 +139,46 @@
             this.canvas_ctx = document.getElementById("game-board").getContext("2d");
             this.board_scale = 1;
 
-            this.calculateBoardScale = function() {
+            this.calculateBoardScale = function () {
+                // 1. Get the container width.
                 const containerWidth = document.getElementById("game-container").offsetWidth;
-                // Calculate available height, accounting for other elements
-                const containerHeight = window.innerHeight - document.getElementById("game-title").offsetHeight
-                                      - document.getElementById("game-instructions").offsetHeight
-                                      - document.getElementById("button-container").offsetHeight - 80; // Add some margin
 
+                // 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 canvasHeight = canvasWidth * (num_rows + 1) / (num_cols + 1);
 
-                //If the calculated height is too big for the container, scale by height.
-                if(canvasHeight > containerHeight) {
-                    const adjustedCanvasHeight = containerHeight * 0.9;
-                    const adjustedCanvasWidth = adjustedCanvasHeight * (num_cols+1) / (num_rows+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);
                     this.board_scale = adjustedCanvasHeight / (num_rows + 1);
-                    this_.canvas_ctx.canvas.width = adjustedCanvasWidth;
-                    this_.canvas_ctx.canvas.height = adjustedCanvasHeight;
-                }
-                else{
+                    this.canvas_ctx.canvas.width = adjustedCanvasWidth;
+                    this.canvas_ctx.canvas.height = adjustedCanvasHeight;
+
+                } else {
+                    // 5b. If it fits, use the calculated width and height.
                     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;
                 }
 
-                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); // Center the board drawing
-            }
+                // 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
 
 
@@ -181,13 +190,16 @@
                 this.who_play = 1;
                 this.ai_player = -1;
                 this.game_ended = false;
-                this.render(); // Re-render after resetting
+                this.render();
             };
+            this.reset(); // Initial 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++) {
@@ -209,7 +221,9 @@
                 }
                 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 };
@@ -223,14 +237,14 @@
                     "action": action,
                 };
             };
+
             this.end_game = function () {
                 this.game_ended = true;
-                // Optional: Display a message to the user here.
                 setTimeout(function () { this_.reset(); }, 3000);
             };
 
             this.ai_play = function () {
-              if (this_.game_ended) return; // Don't play if game is over
+                if (this_.game_ended) return;
 
                 this_.submit_board().then(
                     function (info) {
@@ -243,20 +257,17 @@
                             this_.who_play = -this_.who_play;
                             this_.render();
                         }
-                         if (this_.is_terminated() == true) {
+                        if (this_.is_terminated() == true) {
                             this_.end_game();
                         }
-
                     }
                 ).catch(function (e) {
                     console.error("AI play error:", e);
                 });
             };
 
-
-            // Event Handlers (Corrected and Unified)
-             this.handleClick = function(x, y) {
-                if (this_.game_ended) return; // Don't allow moves if game is over
+            this.handleClick = function (x, y) {
+                if (this_.game_ended) return;
 
                 var loc_x = Math.floor(x / this_.board_scale - 0.5);
                 var loc_y = Math.floor(y / this_.board_scale - 0.5);
@@ -269,17 +280,16 @@
                     this_.mouse_x < this_.num_cols &&
                     this_.mouse_y < this_.num_rows
                 ) {
-                    if (this_.who_play == this_.ai_player) return false;
+                    if (this_.who_play == this_.ai_player) return;
                     let i = this_.mouse_y * this_.num_cols + this_.mouse_x;
-                    if (this_.board[i] != 0) return false;
+                    if (this_.board[i] != 0) return;
                     this_.board[i] = this_.who_play;
                     this_.audio.play();
                     this_.who_play = -this_.who_play;
                     this_.render();
-                    this_.ai_play(); // Call AI after player move
+                    this_.ai_play();
                 }
-            }
-
+            };
             document.getElementById("game-board").addEventListener('touchstart', function(e) {
                 e.preventDefault(); // Prevent other events
                 var rect = this.getBoundingClientRect();
@@ -298,9 +308,9 @@
                 this_.handleClick(x,y);
             }, false);
 
-
             this.draw_stone = function (x, y, color) {
-                let ctx = this.canvas_ctx;
+                // ... (rest of draw_stone is the same) ...
+                 let ctx = this.canvas_ctx;
                 y = this.num_rows - 1 - y;
                 ctx.beginPath();
                 ctx.arc(x, y, 0.40, 0, 2 * Math.PI, false);
@@ -310,14 +320,18 @@
                 ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
                 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";
@@ -342,8 +356,7 @@
                     let x = i % this.num_cols;
                     let y = Math.floor(i / this.num_cols);
                     if (this.board[i] == 0) continue;
-                    // Blue and Orange colors
-                    let color = (this.board[i] == 1) ? "#007AFF" : "#FF9500"; // iOS Blue and Orange
+                    let color = (this.board[i] == 1) ? "#007AFF" : "#FF9500";
                     this.draw_stone(x, y, color);
                 }
 
@@ -357,14 +370,12 @@
                     if (x == -1) return;
                     this.mouse_x = x;
                     this.mouse_y = y;
-                    // Semi-transparent preview
                     let previewColor = (this.who_play == -1) ? "rgba(255, 149, 0, 0.5)" : "rgba(0, 122, 255, 0.5)";
                     this.draw_stone(x, y, previewColor);
                 }
             };
 
-             this.handleMove = function(e) {
-
+            this.handleMove = function (e) {
               let rect = this.canvas_ctx.canvas.getBoundingClientRect();
               let x, y;
 
@@ -394,27 +405,26 @@
                 this_.handleMove(e);
             };
 
-            document.getElementById("game-board").addEventListener('touchmove', function(e) {
+             document.getElementById("game-board").addEventListener('touchmove', function(e) {
                 this_.handleMove(e);
-            }, false);
+             }, false);
 
-            window.addEventListener('resize', function() {
-                this_.calculateBoardScale();
-                this_.render();
+            window.addEventListener('resize', function () {
+                this_.calculateBoardScale(); // Recalculate on resize
+                this_.render(); // Redraw
             });
 
-            // Button Event Listeners
             document.getElementById("ai-first").onclick = function () {
-                this_.reset();  // Reset the board first
+                this_.reset();
                 this_.ai_player = 1;
                 this_.ai_play();
             };
 
-            document.getElementById("reset-button").onclick = function() {
-              this_.reset();
+            document.getElementById("reset-button").onclick = function () {
+                this_.reset();
             };
+        }
 
-        };
         const modelUrl = '/model.json';
 
         const init_fn = async function () {
@@ -422,10 +432,11 @@
             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();
+                game.render(); // Initial render
 
             }).catch(error => {
                 console.error("Error loading model:", error);