upd

Author: arnav-mehra

Lecture-11-12-JS-Framework-P4-5/framework.js

@@ -1,5 +1,8 @@
 function hasChanged(a, b) {
     // Insert whatever logic you prefer.
+    if (typeof a === "object" && typeof b === "object") {
+        return true;
+    }
     return a !== b;
 }
 
@@ -259,6 +262,10 @@ export class Component {
         return el;
     };
 
+    div(props = {}, children = []) {
+        return this.element("div", props, children)
+    }
+
     render() {
         return this.element("div");
     }

Lecture-11-12-JS-Framework-P4-5/script.js

@@ -8,32 +8,42 @@ class Board extends Component {
             [".",".","O"],
             ["O",".","."],
             [".","X","."],
-        ])
+        ]);
+
+        this.winner = this.createDerived(() => {
+            return ".";
+        }, [this.board])
 
         setTimeout(() => {
             // Set the board to any value and observe the change!
             this.board.setValue([
                 [".","O","O"],
                 ["O","X","X"],
                 ["X","X",".", "."],
+                ["."]
             ])
         }, 1000)
     }
 
+    playTurn(rowIdx, colIdx) {
+        // some logic
+    }
+
     render() {
         const containerProps = { style: "display: flex; flex-direction: column" };
         const rowProps = { style: "display: flex" };
         const cellProps = { style: "border: 1px solid black;  width: 20px; height: 20px;" };
 
-        return this.element("div", containerProps, [
-            this.map(this.board, {}, function(row) {
-                return this.element("div", rowProps, [
-                    this.map(row, {}, function(cell) {
-                        const isOccupied = this.createDerived(() => cell.value !== ".", [cell]);
+        const play_turn_binded = this.playTurn.bind(this);
 
-                        return this.element("div", cellProps, [
-                            this.condition(isOccupied, {}, function() {
-                                return this.element("div", { textContent: cell })
+        return this.div(containerProps, [
+            this.map(this.board, function(row, rowIdx) {
+                return this.div(rowProps, [
+                    this.map(row, {}, function(cell, colIdx) {
+                        return this.div(cellProps, [
+                            this.div({
+                                textContent: cell,
+                                onclick: () => play_turn_binded(rowIdx, colIdx)
                             })
                         ]);
                     })