Refactoring and support for recursive win-check.

Author: LucvandenBrand

docs/metaTTT.js

@@ -1,18 +1,14 @@
-import $ from 'jquery';
-
-const ATTR_PLAYER_MARK = 'player-mark';
-
 export class Control {
-    constructor(metaGrid) {
-        let _currentPlayer = 0;
+    constructor() {
+        let _previousPlayer = 0;
 
-        function nextPlayer() {
-            _currentPlayer = 1 - _currentPlayer;
-        }
+        const currentPlayer = () => {
+            return _previousPlayer ^= 1;
+        };
 
-        metaGrid.onCellClick(function (cell) {
-            $(cell).attr(ATTR_PLAYER_MARK, _currentPlayer);
-            nextPlayer();
-        });
+        this.handleClick = gridLeaf => {
+            if (gridLeaf.getMark() == null)
+                gridLeaf.setMark(currentPlayer());
+        };
     }
 }

src/app/control.js

@@ -1,24 +1,28 @@
 import { MetaGrid } from './metaGrid';
-import $ from 'jquery';
-import { Control } from "./control";
+import { Control } from './control';
 
 import '../styles/main.css';
 
-const NODE_CONTAINER = '#grid-container',
-      NODE_SLIDER = '#meta-level',
-      NODE_LEVEL = '#level-value',
-      NODE_NEW_GAME = '#new-game';
+const ID_CONTAINER = 'grid-container',
+      ID_META_SLIDER = 'meta-level',
+      ID_META_DISPLAY = 'level-value',
+      ID_NEW_GAME_BUTTON = 'new-game',
+      GRID_SIZE = 3;
 
-let metaSlider = $(NODE_SLIDER);
-let metaLevelNode = $(NODE_LEVEL);
-metaLevelNode.text(metaSlider.val() - 1);
-metaSlider.on('input', function() {
-    metaLevelNode.text(metaSlider.val() - 1);
-});
+const metaSlider = document.getElementById(ID_META_SLIDER);
+const metaDisplay = document.getElementById(ID_META_DISPLAY);
 
-$(NODE_NEW_GAME).click(function () {
-    let metaGrid = new MetaGrid(metaSlider.val());
-    new Control(metaGrid);
-    $(NODE_CONTAINER).empty();
-    $(NODE_CONTAINER).append(metaGrid.getContainer());
-});
+const setMetaDisplay = () => {
+    metaDisplay.innerText = String(metaSlider.value - 1)
+};
+
+setMetaDisplay();
+metaSlider.oninput = setMetaDisplay;
+
+document.getElementById(ID_NEW_GAME_BUTTON).onclick = () => {
+    const gridContainer = document.getElementById(ID_CONTAINER);
+    gridContainer.innerHTML = '';
+    const control = new Control();
+    const metaGrid = new MetaGrid(GRID_SIZE, metaSlider.value, control.handleClick);
+    gridContainer.appendChild(metaGrid.getElement());
+};

src/app/main.js

@@ -1,105 +1,112 @@
-import $ from 'jquery';
-
-import '../styles/table.css';
-
-const GRID_SIZE = 3,
-      NODE_DIV = '<div>',
-      CLASS_TABLE = 'table',
-      CLASS_ROW = 'row',
-      CLASS_CELL = 'cell',
-      CLASS_DISABLED = 'disabled',
-      CLASS_CLICKED   = 'played',
-      ATTR_LOCATION = 'location';
-
-/**
- * Recursively generates a grid in the container.
- * @param container The container to add the grid to.
- * @param depth The number of recursions.
- */
-function generateTable(container, depth) {
-    if (depth < 1) {
-        $(container).addClass(CLASS_CELL);
-    } else {
-        $(container).addClass(CLASS_TABLE);
-        for (let y = 0; y < GRID_SIZE; y++) {
-            let row = $(NODE_DIV);
-            $(row).addClass(CLASS_ROW);
-            for (let x = 0; x < GRID_SIZE; x++) {
-                let cell = $(NODE_DIV);
-                $(cell).attr(ATTR_LOCATION, y * GRID_SIZE + x);
-                generateTable(cell, depth - 1);
-                row.append(cell);
+import '../styles/grid.css';
+
+export class MetaGrid {
+    constructor(size, depth, onLeafClick, parent) {
+        const ATTR_MARK = 'mark',
+              ELEM_GRID = 'div';
+
+        const _cells = [];
+        const _element = document.createElement(ELEM_GRID);
+        let _mark;
+
+        const updateElement = () => {
+            _element.setAttribute(ATTR_MARK, _mark);
+        };
+
+        const makeChildren = () => {
+            _cells.length = 0;
+            _element.innerHTML = '';
+            for (let row = 0; row < size; row++) {
+                _cells[row] = [];
+                for (let col = 0; col < size; col++) {
+                    const cell = new MetaGrid(size, depth - 1, onLeafClick, this);
+                    _cells[row].push(cell);
+                    _element.appendChild(cell.getElement());
+                }
             }
-            $(container).append(row);
-        }
-    }
-}
+        };
 
-function getClickStack(cell) {
-    let locations = [$(cell).attr(ATTR_LOCATION)];
-    $(cell).parents('.' + CLASS_TABLE).each(function () {
-        let location = $(this).attr(ATTR_LOCATION);
-        if (location != null)
-            locations.push($(this).attr(ATTR_LOCATION));
-    });
-    return locations;
-}
+        const checkRows = () => {
+            for (let row = 0; row < size; row++) {
+                const firstCell = _cells[row][0].getMark();
+                if (firstCell == null)
+                    continue;
 
-function enableTable(table) {
-    table.find('.' + CLASS_DISABLED).removeClass(CLASS_DISABLED);
-}
+                let col;
+                for (col = 0; col < size; col++) {
+                    if (_cells[row][col].getMark() !== firstCell)
+                        break;
+                }
 
-function disableWithStack(currentTable, locations) {
-    let root = currentTable;
-    enableTable(root);
-
-    while (locations.length > 1) {
-        let location = locations.shift();
-        currentTable.children().closest('.' + CLASS_ROW).children().each(function () {
-            if ($(this).attr(ATTR_LOCATION) === location)
-                currentTable = $(this);
-            else
-                $(this).addClass(CLASS_DISABLED);
-        });
-    }
+                if (col === size)
+                    return true;
+            }
 
-    if (isTableFull(currentTable)) {
-        let freeCell = root.find('.' + CLASS_CELL).not('.' + CLASS_CLICKED)[0];
-        disableWithStack(root, getClickStack(freeCell));
-    }
-}
+            return false;
+        };
 
-function isTableFull(table) {
-    let numPlayed = $(table).children().children('.' + CLASS_CLICKED).length;
-    return numPlayed === GRID_SIZE * GRID_SIZE;
-}
+        const checkColumns = () => {
+            for (let col = 0; col < size; col++) {
+                const firstCell = _cells[0][col].getMark();
+                if (firstCell == null)
+                    continue;
 
+                let row;
+                for (row = 0; row < size; row++) {
+                    if (_cells[row][col].getMark() !== firstCell)
+                        break;
+                }
 
-function isCellDisabled(cell) {
-    let containingTable = $(cell).parents('.' + CLASS_TABLE);
-    return containingTable.hasClass(CLASS_DISABLED) || $(cell).hasClass(CLASS_CLICKED);
-}
+                if (row === size)
+                    return true;
+            }
 
-/**
- * Generates a grid with multiple grids inside itself.
- */
-export class MetaGrid {
-  constructor(metaLevel) {
-      let _rootTable = $(NODE_DIV);
-      generateTable(_rootTable, metaLevel);
-
-      this.getContainer = function() {
-          return _rootTable;
-      };
-
-      this.onCellClick = function(onClick) {
-          _rootTable.find('.' + CLASS_CELL).click(function () {
-              if (!isCellDisabled(this)) {
-                  onClick(this);
-                  disableWithStack(_rootTable, getClickStack(this));
-                  $(this).addClass(CLASS_CLICKED);
-              }
-          });
-      };
-  }
-};
+            return false;
+        };
+
+        const checkDiagonals = () => {
+            const firstLeftCell = _cells[0][0].getMark();
+            const firstRightCell = _cells[0][size-1].getMark();
+
+            let leftDiagonal = true, rightDiagonal = true;
+            for (let index = 0; index < size; index++) {
+                if (_cells[index][index].getMark() !== firstLeftCell) {
+                    leftDiagonal = false;
+                }
+
+                let mirrorIndex = size - index - 1;
+                if (_cells[index][mirrorIndex].getMark() !== firstRightCell) {
+                    rightDiagonal = false;
+                }
+            }
+            return firstLeftCell  != null && leftDiagonal ||
+                   firstRightCell != null && rightDiagonal;
+        };
+
+        this.checkWin = (checkMark) => {
+            if (_mark)
+                return;
+
+            if (checkRows() || checkColumns() || checkDiagonals())
+                this.setMark(checkMark);
+        };
+
+        this.setMark = mark => {
+            _mark = mark;
+            if (parent)
+                parent.checkWin(mark);
+            updateElement();
+        };
+
+        this.getMark = () => {
+            return _mark;
+        };
+
+        this.getElement = () => _element;
+
+        if (depth > 0)
+            makeChildren();
+        else
+            _element.onclick = () => onLeafClick(this);
+    }
+}

src/app/metaGrid.js

@@ -0,0 +1,46 @@
+#grid-container {
+    display: table;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 75vh;
+    height: 75vh;
+}
+
+#grid-container:empty {
+    border-radius: 1vh;
+    border: 1px solid black;
+}
+
+#grid-container:empty:after {
+    line-height: 75vh;
+    text-align: center;
+    content: 'Please select a meta level and press the button.';
+}
+
+#grid-container div {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    width: 95%;
+    height: 95%;
+    margin: 2.5%;
+
+    border-radius: 1vh;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background-color: rgba(255, 255, 255, 0.8);;
+}
+
+#grid-container div div {
+    border: 1px dashed rgba(0, 0, 0, 0.5);
+}
+
+#grid-container div[mark='0'] {
+    background-color: green;
+}
+
+#grid-container div[mark='1'] {
+    background-color: red;
+}