Update index.html

index.html

@@ -36,28 +36,52 @@
                 this.game_ended = false;
             };
             this.reset();
-            this.render_text = function (text) {
-                this.canvas_ctx.fillStyle = "black";
-                this.canvas_ctx.font = '1px monospace';
-                this.canvas_ctx.fillText(text, 1, 1);
+            this.get = function (row, col) {
+                return this.board[this.num_cols * row + col];
+            }
+            this.is_terminated = function () {
+                // check if the game is terminated
+                const num_empty_cells = this.board.reduce((a, b) => a + b);
+                if (num_empty_cells == 0) 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);
+                        for (let dxy of [[1, 0], [0, 1], [1, 1], [-1, 1]]) {
+                            var count = 0;
+                            for (let k = 1; k <= 4; k++) {
+                                const u = i + dx * k;
+                                const v = j + dy * k;
+                                if (u < 0 || u >= this.num_rows) break;
+                                if (v < 0 || v >= this.num_cols) break;
+                                if (this.get(u, v) != p) break;
+                                count = count + 1;
+                            }
+                            if (count >= 4) return true;
+                        }
+                    }
+                }
+                return false;
             };
-            this.submit_board = async function (action_) {
+            this.submit_board = async function () {
+                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);
                 normalized_obs.print();
                 const [action_logits, value] = this_.agent.predict(normalized_obs);
                 action_logits.print();
+                value.print();
                 const action = await tf.argMax(action_logits).array();
                 return {
-                    "terminated": false,
+                    "terminated": this_.is_terminated(),
                     "action": action,
                 };
             };
             this.end_game = function () {
                 this.game_ended = true;
-                setTimeout(function() {this_.reset();}, 3000);
+                setTimeout(function () { this_.reset(); }, 3000);
             };
-            this.ai_play = function() {
+            this.ai_play = function () {
                 this_.submit_board().then(
                     function (info) {
                         document.body.style.cursor = 'default';
@@ -74,12 +98,12 @@
                             this_.end_game();
                         }
                     }
-                ).catch(function (e) { });            
+                ).catch(function (e) { });
             };
-            document.getElementById("ai-first").onclick = function() {
+            document.getElementById("ai-first").onclick = function () {
                 this_.reset();
                 this_.ai_player = 1;
-                this_.ai_play();                
+                this_.ai_play();
             };
             document.getElementById("game-board").addEventListener('click', function (e) {
                 var rect = this.getBoundingClientRect();
@@ -89,7 +113,7 @@
                 var loc_y = Math.floor(y / this_.board_scale - 0.5);
                 this_.mouse_x = loc_x;
                 this_.mouse_y = this_.get_candidate(this_.mouse_x)[1];
-            
+
                 if (
                     this_.mouse_x >= 0 &&
                     this_.mouse_y >= 0 &&
@@ -169,7 +193,6 @@
                 }
             };
             document.getElementById("game-board").onmousemove = function (e) {
-                // important: correct mouse position:
                 var rect = this.getBoundingClientRect();
                 var x = e.clientX - rect.left;
                 var y = e.clientY - rect.top;
@@ -181,7 +204,7 @@
             };
         };
         const modelUrl = '/static/ntt123/Connect-4-Game/model.json';
-        const init_fn = async function() {
+        const init_fn = async function () {
             const model = await tf.loadGraphModel(modelUrl);
             await tf.setBackend('wasm');
             return model;
@@ -189,7 +212,7 @@
         document.addEventListener("DOMContentLoaded", function (event) {
             init_fn().then(function (agent) {
                 game = new BoardGame(agent, 6, 7);
-                game.render();                
+                game.render();
             });
         });
     </script>