Update index.html

index.html

@@ -15,16 +15,16 @@
             justify-content: center;
             min-height: 100vh;
             margin: 0;
-            background-color: #f0f0f0;  /* Light Gray Background */
-            overflow: hidden; /* Prevents scrollbars if content overflows */
+            background-color: #f5f5f5; /* Very Light Gray */
+            overflow: hidden;
         }
 
         #game-container {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          width: 100%;
-          max-width: 600px; /* Limit width on larger screens */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            max-width: 600px;
         }
 
         #game-title {
@@ -32,59 +32,58 @@
             font-weight: bold;
             margin-bottom: 0.5em;
             text-align: center;
-            color: #333; /* Darker Text */
+            color: #444; /* Darker Gray */
             user-select: none;
         }
 
         #game-instructions {
             text-align: center;
             margin-bottom: 1em;
-            color: #555; /* Slightly Lighter Text */
+            color: #666; /* Medium Gray */
             user-select: none;
         }
 
-
         #game-board {
-            border-radius: 10px; /* Rounded Corners for the board */
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle Shadow */
-            border: 2px solid #a97a04;
-            background-color: #e6b434; /* A warmer, more inviting yellow */
-            touch-action: none; /* Prevents default touch behaviors like panning */
-            /* Remove fixed width and height, use aspect ratio */
+            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;
         }
 
-
         #ai-first {
             margin-top: 1em;
             padding: 10px 20px;
             font-size: 1em;
-            border: none;
+            border: 1px solid #ccc; /* Light Gray Border */
             border-radius: 5px;
-            background-color: #4CAF50; /* Green Button */
-            color: white;
+            background-color: #f9f9f9; /* Almost White */
+            color: #555; /* Dark Gray Text */
             cursor: pointer;
-            transition: background-color 0.3s ease;
+            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
             user-select: none;
         }
 
         #ai-first:hover {
-            background-color: #367c39; /* Darker Green on Hover */
+            background-color: #eee; /* Slightly Darker on Hover */
+            border-color: #bbb; /* Darker Border on Hover */
+            color: #333;
         }
         #ai-first:active {
-          transform: translateY(1px); /* Slight press effect */
+            transform: translateY(1px);
+            background-color: #ddd;
         }
 
-
-        /* Loading indicator (spinner) */
+        /* Loading indicator */
         #loading-indicator {
-            display: none; /* Hidden by default */
+            display: none;
             margin-top: 20px;
-            border: 6px solid #f3f3f3; /* Light grey */
-            border-top: 6px solid #3498db; /* Blue */
+            border: 6px solid #f3f3f3;
+            border-top: 6px solid #999; /* Medium Gray */
             border-radius: 50%;
             width: 50px;
             height: 50px;
-            animation: spin 2s linear infinite;
+            animation: spin 1s linear infinite; /* Faster Spin */
         }
 
         @keyframes spin {
@@ -92,17 +91,14 @@
             100% { transform: rotate(360deg); }
         }
 
-
-        /* Mobile-first responsiveness */
         @media (max-width: 600px) {
-          #game-title {
-            font-size: 1.5em; /* Smaller title on mobile */
-          }
-
-          #game-instructions {
-            font-size: 0.9em;
-          }
-          /* Adjust padding/margins as needed */
+            #game-title {
+                font-size: 1.5em;
+            }
+
+            #game-instructions {
+                font-size: 0.9em;
+            }
         }
     </style>
 </head>
@@ -116,28 +112,28 @@
         <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; //  Initial scale, will be calculated.
+            this.board_scale = 1; // Initial scale
 
-            // Calculate the board scale dynamically
             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; //padding
+                                        - document.getElementById("ai-first").offsetHeight - 80;
 
 
-                const canvasWidth = containerWidth * 0.95; // Use 95% of container width, max 600 (handled in CSS)
+                const canvasWidth = containerWidth * 0.95; // Use 95% of container width
                 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; //prevent overflow
+                    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;
@@ -148,12 +144,11 @@
                     this_.canvas_ctx.canvas.width = canvasWidth;
                     this_.canvas_ctx.canvas.height = canvasHeight;
                 }
-
                 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(); //Initial calculation
+             this.calculateBoardScale();
 
 
             this.reset = function () {
@@ -170,11 +165,9 @@
                 return this.board[this.num_cols * row + col];
             }
             this.is_terminated = function () {
-                // check if the game is terminated
                 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++) {
-                        // check winner at cell i, j
                         var p = this.get(i, j);
                         if (p == 0) continue;
                         for (let [dx, dy] of [[1, 0], [0, 1], [1, 1], [-1, 1]]) {
@@ -194,15 +187,14 @@
                 return false;
             };
             this.submit_board = async function () {
-
-                document.getElementById("loading-indicator").style.display = "block"; // Show loader
+                document.getElementById("loading-indicator").style.display = "block";
                 await new Promise(r => setTimeout(r, 1000));
                 if (this_.is_terminated()) return { "terminated": true, "action": -1 };
                 const obs = tf.tensor(this_.board, [this_.num_rows, this_.num_cols], 'float32');
                 const normalized_obs = tf.mul(obs, this_.ai_player);
                 const [action_logits, value] = this_.agent.execute(normalized_obs, ["output_0", "output_1"]);
                 const action = await tf.argMax(action_logits).array();
-                document.getElementById("loading-indicator").style.display = "none"; // Hide loader
+                document.getElementById("loading-indicator").style.display = "none";
                 return {
                     "terminated": false,
                     "action": action,
@@ -215,7 +207,6 @@
             this.ai_play = function () {
                 this_.submit_board().then(
                     function (info) {
-
                         let x = info["action"];
                         if (x != -1) {
                             let [_, y] = this_.get_candidate(x);
@@ -231,7 +222,7 @@
                     }
                 ).catch(function (e) {
                     console.error("AI play error:", e);
-                 });
+                });
             };
             document.getElementById("ai-first").onclick = function () {
                 this_.reset();
@@ -239,7 +230,6 @@
                 this_.ai_play();
             };
 
-           // Unified event handler for touch and mouse
             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);
@@ -264,9 +254,8 @@
                 }
             }
 
-            // Touch event handler
             document.getElementById("game-board").addEventListener('touchstart', function(e) {
-                e.preventDefault(); // Prevents additional mouse events
+                e.preventDefault();
                 var rect = this.getBoundingClientRect();
                 var touch = e.touches[0];
                 var x = touch.clientX - rect.left;
@@ -292,7 +281,7 @@
                 ctx.fillStyle = color;
                 ctx.fill();
                 ctx.lineWidth = 0.02;
-                ctx.strokeStyle = "black";  // Keep a subtle border
+                ctx.strokeStyle = "rgba(0, 0, 0, 0.1)"; // Very Light Border
                 ctx.stroke();
             };
             this.get_candidate = function (x) {
@@ -304,19 +293,16 @@
             };
             this.render = function () {
                 let ctx = this.canvas_ctx;
-                ctx.clearRect(-1, -1, num_cols + 1, num_rows + 1); // Clear entire canvas
-
-                // Draw the board (wood-like)
-                ctx.fillStyle = "#e6b434";  // Lighter wood color
+                ctx.clearRect(-1, -1, num_cols + 1, num_rows + 1);
+                ctx.fillStyle = "#fff";  // White board
                 ctx.fillRect(-0.5, -0.5, num_cols, num_rows);
 
-                // Draw grid lines
                 ctx.lineWidth = 0.1 / 2;
-                ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"; // More subtle lines
+                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);
-                    ctx.lineTo(i, this.num_rows -1);
+                    ctx.lineTo(i, this.num_rows-1);
                     ctx.stroke();
                 }
                 for (let i = 0; i < this.num_rows; i++) {
@@ -326,14 +312,14 @@
                     ctx.stroke();
                 }
 
-
                 for (let i = 0; i < this.board.length; i++) {
                     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) ? "#c0392b" : "#f1c40f"; // Red and Yellow
+                    let color = (this.board[i] == 1) ? "#555" : "#bbb"; // Dark Gray and Light Gray
                     this.draw_stone(x, y, color);
                 }
+
                 if (
                     this.mouse_x >= 0 &&
                     this.mouse_y >= 0 &&
@@ -344,15 +330,11 @@
                     if (x == -1) return;
                     this.mouse_x = x;
                     this.mouse_y = y;
-
-                    // Preview stone
-                    let previewColor = (this.who_play == -1) ? "rgba(241, 196, 15, 0.5)" : "rgba(192, 57, 43, 0.5)"; // Semi-transparent
+                    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);
-
                 }
             };
 
-             // Unified move handler
             this.handleMove = function(e) {
               let rect = this.canvas_ctx.canvas.getBoundingClientRect();
               let x, y;
@@ -362,43 +344,38 @@
                 y = e.clientY - rect.top;
               } else if (e.type === 'touchmove') {
                 e.preventDefault();
-                if (e.touches.length > 0) { // Check if there are any touches
+                if (e.touches.length > 0) {
                   x = e.touches[0].clientX - rect.left;
                   y = e.touches[0].clientY - rect.top;
                 } else {
-                  return; // No touches, exit
+                  return;
                 }
               } else {
-                return; // Unsupported event type
+                return;
               }
 
                 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;
-                this_.mouse_y = loc_y;  //Don't get candidate here.  Only on click/tap
+                this_.mouse_y = loc_y;
                 this_.render();
             }
 
-
             document.getElementById("game-board").onmousemove = function (e) {
-               this_.handleMove(e);
+                this_.handleMove(e);
             };
 
-             document.getElementById("game-board").addEventListener('touchmove', function(e) {
+            document.getElementById("game-board").addEventListener('touchmove', function(e) {
                 this_.handleMove(e);
-             }, false);
-
+            }, false);
 
 
-             //Resize listener
             window.addEventListener('resize', function() {
                 this_.calculateBoardScale();
                 this_.render();
             });
-
-
         };
-        const modelUrl = '/model.json';  // Make sure path is correct
+        const modelUrl = '/model.json';
 
         const init_fn = async function () {
             await tf.setBackend('wasm');
@@ -412,9 +389,8 @@
 
             }).catch(error => {
                 console.error("Error loading model:", error);
-                // Handle the error, e.g., display a message to the user.
                 document.getElementById("game-instructions").textContent = "Failed to load the AI. Please try refreshing the page.";
-                document.getElementById("ai-first").disabled = true; // Disable the button.
+                document.getElementById("ai-first").disabled = true;
             });
         });
     </script>