DEV Community: Saeed Panahi

How to make an advanced TIC TAC TOE game with Javascript [part 3]

Saeed Panahi — Thu, 30 Jul 2026 15:29:18 +0000

Welcome back

In the previous part we migrated the whole project to Typescript, we rebuilt the board with the Module pattern, we stored the players and their moves with two Singleton stores, and at the end we had a real playable 5x5 board — the symbols appear, the turn switches, the reset button works.

Only one thing was missing, and it was the most important one: both scores were stuck on 0.

Click here to see the article PART-1, and the PART-2 is here.

In this part we are going to build the brain of the game. Frankly, this was the part that took me the most time in the whole project, and also it was the most enjoyable one. 🤓

Let's get started...

Why the trick of part 1 does not work anymore

Do you remember this piece of code from the part 1?

const winningCombinations = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
];

Eight combinations, written by hand. For a 3x3 board it is totally fine, you write them once in two minutes and you never think about them again.

But now our board is 5x5, and it could be 8x8 or even bigger. So, how many combinations of "3 in a row" exist on those boards?!

on a 3x3 board: 8 lines (the ones we wrote above)
on a 5x5 board: 48 lines
on a 6x6 board: 80 lines
on an 8x8 board: 168 lines

And that is only for exactly 3 in a row. In our game I want 4 in a row to be worth more than 3 in a row, and 5 in a row to be worth more than 4, therefore I would also need all the combinations of length 4, and 5, and 6... At all, writing them by hand is not an option anymore.

Hence, we must stop listing the winning lines and start calculating them.

The idea in one sentence

Here is the whole plan, and everything in the rest of this article is just the implementation of it:

Convert the cells of each player into a matrix of 0 and 1, then count the neighbour 1s in
every row. After that, rotate the same matrix so that the columns and the diagonals also become
rows, and count them again with exactly the same function.

That is it. One counting function, four different orientations of the same matrix. Instead of 168 hardcoded arrays we will have around 20 lines of real logic.

So, create a new file ./src/utils/scoring.ts, and we start filling it step by step:

import { IMatrix, IMove, TSymbol } from '../interfaces/index.js';
import GameStats from '../store/gameStats.js';

export const Scoring = (squareDimension: number, moves: IMove = { x: {}, o: {} } as IMove) => {
    let xMoves: number[]; //desc sorted x moves
    let oMoves: number[]; //desc sorted o moves
    let xMatrix: number[][] = [];
    let oMatrix: number[][] = [];

    //the rest of the code goes here...
};

Same like Playground(), this is also a Module — it takes the dimension of the board and the moves of the both players, it keeps everything private inside itself, and at the end it will return only one method to the outside world.

Additionally, add this small interface to ./src/interfaces/index.ts:

export interface IMatrix {
    [key: number]: number[];
}

It only says "an object whose keys are numbers and whose values are arrays of numbers". We will use of it in a moment.

Step 1:From a cell number to a row & a column

In the part 2, our init() numbered the cells from 1 to dimension², from the top-left to the bottom-right. So for a 5x5 board the numbering is as below:

      col 1   col 2   col 3   col 4   col 5
row 1 |  1  |   2  |   3  |   4  |   5  |
row 2 |  6  |   7  |   8  |   9  |  10  |
row 3 | 11  |  12  |  13  |  14  |  15  |
row 4 | 16  |  17  |  18  |  19  |  20  |
row 5 | 21  |  22  |  23  |  24  |  25  |

A flat number like 13 is perfect for the DOM (because of nth-child()), but it is useless for a matrix. Therefore, the first two methods we need are the ones that translate a cell number into its row and its column:

const rowNumber = (cellNumber: number): number => {
    let rowNum = -1;
    if (typeof cellNumber !== 'number' || cellNumber <= 0) return rowNum;
    if (cellNumber % squareDimension > 0) rowNum = cellNumber / squareDimension + 1;
    else rowNum = cellNumber / squareDimension;

    return Math.floor(rowNum);
};
const colNumber = (cellNumber: number = -1): number => {
    return cellNumber % squareDimension === 0 ? squareDimension : Math.floor(cellNumber % squareDimension);
};

Let's check them with the above table, on a 5x5 board:

cell 6 → 6 % 5 is 1 and it is bigger than 0, hence the row is Math.floor(6 / 5 + 1) = 2, and the column is 6 % 5 = 1. Look at the table, cell 6 is really in the row 2, column 1 ✅
cell 13 → 13 % 5 is 3, hence the row is Math.floor(13 / 5 + 1) = 3, and the column is 3 ✅
cell 25 → 25 % 5 is 0, so we are in the last column of a row. The row is 25 / 5 = 5 and the column becomes the dimension itself, 5 ✅

Be careful that both of these methods return 1-based numbers, not 0-based. It means, when we index a real Javascript array with them we always have to write [row - 1] and [col - 1]. That - 1 is the source of a lot of off-by-one bugs, hence keep it in your mind.

Step 2:Paint the moves into a matrix

Now we know where each cell sits. So we build the matrix in two small steps.

The first method takes the list of the cells of one player and returns an object where each cell number points to its [row, column]:

const getSelectedAreas = (playerMoves: number[]): IMatrix => {
    let matrix: IMatrix = {};
    let rowNum, colNum;
    if (!playerMoves?.length) return {} as IMatrix;

    for (const move of playerMoves) {
        rowNum = rowNumber(move);
        colNum = colNumber(move);
        matrix[move] = [rowNum, colNum];
    }
    return matrix;
};

For example, if X has selected the cells 1, 2 and 3 on a 5x5 board, the result is:

{
   1: [1, 1],
   2: [1, 2],
   3: [1, 3]
}

And the second method takes an empty matrix full of zeros and puts a 1 on every coordinate that was selected:

const getMatrix = (baseMatrix: number[][], selectedAreas: { [key: number]: number[] }) => {
    let tempMatrix = [...baseMatrix];
    Object.values(selectedAreas).forEach(([row, col]: number[]) => {
        tempMatrix[row - 1][col - 1] = 1;
    });
    return tempMatrix;
};

There is the - 1 that I warned you about. 😉

The empty matrix of zeros itself is prepared in a preInit() method, exactly same like we did in the Playground() module:

const preInit = () => {
    xMoves = decreasalSort(moves.x.selectedCells);
    oMoves = decreasalSort(moves.o.selectedCells);

    for (let i = 0; i < squareDimension; i++) {
        xMatrix[i] = [];
        oMatrix[i] = [];
        for (let j = 0; j < squareDimension; j++) {
            xMatrix[i][j] = 0;
            oMatrix[i][j] = 0;
        }
    }
};
const decreasalSort = (collection: number[]) => {
    return collection?.sort((a, b) => b - a);
};

Two nested loops, and we get a dimension x dimension matrix where everything is 0. And we keep one matrix per player, because X and O must be counted separately.

About decreasalSort(): it sorts the cell numbers from the biggest to the smallest. For building the matrix the order does not change the result at all — cell 3 painted before cell 1 gives the same matrix. Just keep in mind that .sort() in Javascript sorts the array in place, so it also
reorders the array that lives inside our moves store. Here it is harmless, but it is a good habit to know when a method mutates your data and when it does not.

And this small method decides which of the two matrices we are working on:

const getRelatedMatrix = (symbol: TSymbol) => {
    let selectedAreas: IMatrix = {} as IMatrix;
    let newMoves: number[][] = [];

    if (symbol === 'x') {
        selectedAreas = getSelectedAreas(xMoves);
        newMoves = getMatrix(xMatrix, selectedAreas);
    } else if (symbol === 'o') {
        selectedAreas = getSelectedAreas(oMoves);
        newMoves = getMatrix(oMatrix, selectedAreas);
    }
    return newMoves;
};

Now, this is the moment where I think an animation explains it much better than my words. In the below GIF you see a 7x7 board where the player X has selected some cells, and next to it you see the matrix that our code generates out of those cells:

The matrix in the animation is exactly this one:

[
   [1, 1, 1, 0, 1, 1, 1],
   [0, 0, 0, 0, 0, 0, 0],
   [0, 0, 1, 0, 1, 0, 0],
   [0, 0, 0, 0, 0, 1, 0],
   [1, 1, 0, 0, 0, 0, 0],
   [0, 1, 1, 1, 0, 0, 0],
   [0, 0, 0, 1, 1, 1, 1]
]

1 means "X is sitting here" and 0 means "this cell is empty or it belongs to O". We are going to use of this exact matrix as our example until the end of the article.

Step 3:Count the points of the rows

Look at the first row of the above matrix: 1, 1, 1, 0, 1, 1, 1. There are three 1s, then a hole, then three more 1s. So how do we find those groups without writing a nested loop with a counter and five ifs inside it?!

Here is my favorite trick of this whole project, and it is only three lines:

const calculateScores = (newMoves: number[][]): number => {
    let scores: number = 0;
    for (let i = 0; i < newMoves.length; i++) {
        const matrixRow = newMoves[i];
        let strMatRow = matrixRow.join('');
        let splittedCombination = strMatRow.split('0').filter((x) => x.length);

        for (const sc of splittedCombination) {
            if (sc.length >= 3) scores += sc.length * 100;
        }
    }
    return scores;
};

What happens for that first row is as follows:

[1,1,1,0,1,1,1].join('') gives us the string "1110111"
"1110111".split('0') gives us ["111", "111"] — the zeros act like the scissors!
.filter((x) => x.length) throws away the empty strings (you get them when two zeros sit next to each other, or when a row starts or ends with a zero)
every remaining string is a group of neighbour 1s, and its length is how many symbols are in that line
if the group is 3 or longer, we add length * 100 to the score

That is why a longer line is worth more: 3 in a row gives 300, 4 in a row gives 400, and 7 in a row gives 700.

Let's run the whole example matrix through it, row by row:

row 0: "1110111"  ->  ["111", "111"]  ->  300 + 300  =  600
row 1: "0000000"  ->  []              ->  nothing    =    0
row 2: "0010100"  ->  ["1", "1"]      ->  too short  =    0
row 3: "0000010"  ->  ["1"]           ->  too short  =    0
row 4: "1100000"  ->  ["11"]          ->  too short  =    0
row 5: "0111000"  ->  ["111"]         ->  300        =  300
row 6: "0001111"  ->  ["1111"]        ->  400        =  400
                                        -------------------
                                          horizontally  1300

So the player X earned 1300 points only from the horizontal lines. And notice how the rows 2, 3 and 4 cost us nothing — single 1s and a group of two are simply ignored by the if (sc.length >= 3).

Now the beautiful part. This calculateScores() method only knows how to count rows. It has no idea about columns or diagonals, and it never will. Instead of teaching it, we are going to rotate the matrix and give it the same rows again from a different angle.

const horizontalScoring = (symbol: TSymbol) => {
    let scores = 0,
        newMoves: number[][] = [];

    newMoves = getRelatedMatrix(symbol);
    scores = calculateScores(newMoves);
    return scores;
};

The horizontal one needs no rotation of course, it just passes the matrix as it is.

Step 4:The vertical lines — rotate 90 degrees

To count the columns, we rotate the matrix 90 degrees, then the columns become rows and our existing method can count them:

const rotateMatrix90Deg = (matrix: number[][]) => {
    return matrix.map((row, i) => row.map((val, j) => matrix[matrix.length - 1 - j][i]));
};
const verticalScoring = (symbol: TSymbol) => {
    let scores = 0,
        newMoves: number[][] = [];

    newMoves = getRelatedMatrix(symbol);
    let rotatedMatrix = rotateMatrix90Deg(newMoves); //rotate 90deg the matrix to change verticals with horizontal items

    scores = calculateScores(rotatedMatrix);

    return scores;
};

If you give our numbering grid to rotateMatrix90Deg():

[
   [1, 2, 3],
   [4, 5, 6],
   [7, 8, 9]
]

you get back:

[
   [7, 4, 1],
   [8, 5, 2],
   [9, 6, 3]
]

Look at it carefully. The first column of the original one was 1, 4, 7 — and now it is the first row, only written backwards as 7, 4, 1. And it does not matter at all for us, because a group of three neighbour 1s is still a group of three neighbour 1s no matter from which side you read it.

Step 5:The diagonals — rotate 45 and -45 degrees

The diagonals are the tricky ones, so instead of explaining them with words I made two animations.

In the below GIF, watch what happens to the 3x3 numbering grid: it gets tilted, and the cells that were sitting on the / diagonals become straight rows:

The result of that tilt is as follows:

[
   [1],
   [4, 2],
   [7, 5, 3],
   [8, 6],
   [9]
]

Two things to notice here.

First, the number of the rows is not 3 anymore, it is 3 * 2 - 1 = 5. In general a dimension x dimension board has dimension * 2 - 1 diagonals in each direction, and this is why every loop in the two next methods runs squareDimension * 2 - 1 times.

Second, the middle row [7, 5, 3] is the full / diagonal of the board, and the rows around it get shorter and shorter until they are single cells. Those short rows can never contain 3 neighbours, hence calculateScores() will ignore them by itself and we don't need any special condition for them. 👌

Here is the implementation:

const rotateMatrix45Deg = (matrix: number[][]): number[][] => {
    let a = 0;
    let b = 0;
    let peakPoint: boolean = false;
    let newRow: number[] = [];
    let newMatrix: number[][] = [];
    for (let x = 0; x < squareDimension * 2 - 1; x++) {
        newRow = [];
        for (let i = a; i >= b; i--) {
            for (let j = peakPoint ? b : 0; j <= a; j++) {
                newRow.push(matrix[i--][j]);
            }
        }
        newMatrix.push(newRow);
        if (a < squareDimension && !peakPoint) {
            a++;
        } else if (a > 0 && peakPoint) {
            b++;
        }

        if (a === squareDimension) {
            peakPoint = true;
            a = squareDimension - 1;
            b = 1;
        }
    }
    return newMatrix;
};

The variable that carries the whole idea here is peakPoint. Before we reach the longest diagonal the rows are growing, so we increase a on every round. The moment a reaches the dimension we have passed the middle of the board — that is the "peak" — and from there the rows must start shrinking, hence we flip peakPoint to true and from then on we increase b instead of a.

And the same story for the other direction, the \ diagonals:

which gives us:

[
   [3],
   [2, 6],
   [1, 5, 9],
   [4, 8],
   [7]
]

This time the middle row is [1, 5, 9], and if you look at our numbering table, 1-5-9 is really the main \ diagonal of a 3x3 board.

const rotateMatrixMinus45Deg = (matrix: number[][]): number[][] => {
    let a = 0;
    let b = squareDimension - 1;
    let c = 0;
    let d = squareDimension - 1;
    let peakPoint: boolean = false;
    let newRow: number[] = [];
    let newMatrix: number[][] = [];
    for (let x = 0; x < squareDimension * 2 - 1; x++) {
        newRow = [];
        if (a >= squareDimension - 1) {
            peakPoint = true;
            b = 0;
        }
        for (let i = c; i <= a; i++) {
            for (let j = !peakPoint ? b : 0; j <= (!peakPoint ? squareDimension - 1 : d); j++) {
                newRow.push(matrix[i++][j]);
            }
        }
        newMatrix.push(newRow);

        if (a < squareDimension - 1 && !peakPoint) {
            a++;
            b--;
        } else if (peakPoint) {
            c++;
            d--;
        }
    }
    return newMatrix;
};

It needs four cursors instead of two (a, b, c, d) because this diagonal walks the matrix from the other corner, but the logic is the same: grow until the peak, then shrink.

Frankly, these two methods are the hardest part to read by human in the whole project, and I rewrote them several times. If you want to understand them properly, my advice is to put a console.log(newRow) right after the inner loops, run the game on a 3x3 board, and compare the output with the two animations above. That is exactly how I debugged them. 😅

And then the two scoring methods are boring again, because all the work is already done:

const rightDiagonalScoring = (symbol: TSymbol) => {
    let scores = 0,
        newMoves: number[][] = [];

    newMoves = getRelatedMatrix(symbol);
    let rotatedMatrix = rotateMatrix45Deg(newMoves);
    scores = calculateScores(rotatedMatrix);
    return scores;
};
const leftDiagonalScoring = (symbol: TSymbol) => {
    let scores = 0,
        newMoves: number[][] = [];

    newMoves = getRelatedMatrix(symbol);
    let rotatedMatrix = rotateMatrixMinus45Deg(newMoves);
    scores = calculateScores(rotatedMatrix);

    return scores;
};

Step 6:Sum up all the four directions

Now we have four scoring methods for each of the two players, and the last method of the module just calls all of them and saves the totals:

const finalScores = () => {
    let xH = horizontalScoring('x');
    let oH = horizontalScoring('o');

    let xV = verticalScoring('x');
    let oV = verticalScoring('o');

    let rightDiagonalX = rightDiagonalScoring('x');
    let rightDiagonalO = rightDiagonalScoring('o');

    let leftDiagonalX = leftDiagonalScoring('x');
    let leftDiagonalO = leftDiagonalScoring('o');

    let totalX: number = xH + xV + rightDiagonalX + leftDiagonalX;
    let totalO: number = oH + oV + rightDiagonalO + leftDiagonalO;

    GameStats.addScore('x', totalX);
    GameStats.addScore('o', totalO);
};

preInit();

return {
    finalScores
};

Remember the addScore() method that we wrote in the GameStats store in the part 2? Its name says "add", but if you look at it again you see that it replaces the score instead of adding to it:

if (lastStat.player1.symbol === playerSymbol) {
    lastStat.player1.score = newValue;
}

And that is correct here, it is not a bug. Because a whole new Scoring() module is created after every single click and it recalculates the complete matrix from zero, totalX is always the full core of X from the beginning of the game until now. So if we added it to the old value, the score would grow like crazy after a few moves.

Let me also say something about the performance, because somebody will ask. Yes, we rebuild four rotated matrices for both players on every click, and yes it looks wasteful. But for a 5x5 or even a 20x20 board this is a few hundred array operations, it means far less than a millisecond, and in exchange we get a scoring engine with no state to keep in sync and no cache to invalidate. For a game like this, I chose the simple one.

Now let's return to our example matrix with the 1300 horizontal points. If you run the complete engine on it, the final score of X is 1600: the 1300 from the rows, plus 300 more that comes from one \ diagonal. The columns and the / diagonals give nothing.

Where is that extra diagonal?! Count with the yellow labels of the animation (they start from 0):
the cells at row 4 / column 1, row 5 / column 2 and row 6 / column 3 are all 1, and they sit on the same \ line. I looked at that picture many times and I never noticed it with my eyes — the matrix found it immediately.

That is the real value of this approach — it finds the lines that a human eye misses.

Step 7:Connect the engine to the clicks

Everything is ready, we only need to call it. Go back to handleClick() in ./src/utils/playground.ts and replace that comment we left in the part 2 with these two lines:

const scoring = Scoring(squareDimension, moves);
scoring.finalScores();

So the whole method becomes as below:

const handleClick = (event) => {
    if (!event?.target?.id) throw new Error('Element Id is not recognized!');
    makeResetButton();
    const id = +event.target.id;

    let currentTurn: TSymbol = MovesInstance.currentTurn();
    let lastGameStats = GameStats.getLastStats();
    let currentPlayer =
        lastGameStats?.player1?.symbol === currentTurn ? lastGameStats?.player1 : lastGameStats?.player2;
    let moves: IMove = makeMove(id, currentTurn, currentPlayer);

    if (!moves?.x) return;

    const scoring = Scoring(squareDimension, moves);
    scoring.finalScores();

    updateScoreBoard();

    MovesInstance.updateTurn(currentTurn === 'x' ? 'o' : 'x');
    const playerMove: IPlayerMove = {
        selectedCells: [],
        player: currentPlayer
    };
    playerMove.selectedCells.push(id);
    MovesInstance.updateMoves(playerMove);
};

Don't forget to import the module at the top of the file:

import { Scoring } from '../utils/scoring.js';

Be careful about the order of these lines! ⚠️

The if (!moves?.x) return; must stay above the Scoring() call. As we said in the part 2, makeMove() returns an empty object {} when the clicked cell is already taken. And if that empty object reaches Scoring(), then inside preInit() the line decreasalSort(moves.x.selectedCells) tries to read selectedCells of undefined, and you get this error in your console:

Uncaught TypeError: Cannot read properties of undefined (reading 'selectedCells')

It does not break the game visually, because the exception happens inside a click handler, but it fills your console with red errors every time a player clicks on a wrong cell. Hence, the guard.

Step 8:Run it

Whole ./src/utils/scoring.ts file should looks like this:

import { IMatrix, IMove, TSymbol } from '../interfaces/index.js';
import GameStats from '../store/gameStats.js';

export const Scoring = (squareDimension: number, moves: IMove = { x: {}, o: {} } as IMove) => {
    let xMoves: number[]; //desc sorted x moves
    let oMoves: number[]; //desc sorted o moves
    let xMatrix: number[][] = [];
    let oMatrix: number[][] = [];

    const preInit = () => {
        xMoves = decreasalSort(moves.x.selectedCells);
        oMoves = decreasalSort(moves.o.selectedCells);

        for (let i = 0; i < squareDimension; i++) {
            xMatrix[i] = [];
            oMatrix[i] = [];
            for (let j = 0; j < squareDimension; j++) {
                xMatrix[i][j] = 0;
                oMatrix[i][j] = 0;
            }
        }
    };
    const rowNumber = (cellNumber: number): number => {
        let rowNum = -1;
        if (typeof cellNumber !== 'number' || cellNumber <= 0) return rowNum;
        if (cellNumber % squareDimension > 0) rowNum = cellNumber / squareDimension + 1;
        else rowNum = cellNumber / squareDimension;

        return Math.floor(rowNum);
    };
    const colNumber = (cellNumber: number = -1): number => {
        return cellNumber % squareDimension === 0 ? squareDimension : Math.floor(cellNumber % squareDimension);
    };
    const getSelectedAreas = (playerMoves: number[]): IMatrix => {
        let matrix: IMatrix = {};
        let rowNum, colNum;
        if (!playerMoves?.length) return {} as IMatrix;

        for (const move of playerMoves) {
            rowNum = rowNumber(move);
            colNum = colNumber(move);
            matrix[move] = [rowNum, colNum];
        }
        return matrix;
    };
    const getMatrix = (baseMatrix: number[][], selectedAreas: { [key: number]: number[] }) => {
        let tempMatrix = [...baseMatrix];
        Object.values(selectedAreas).forEach(([row, col]: number[]) => {
            tempMatrix[row - 1][col - 1] = 1;
        });
        return tempMatrix;
    };
    const getRelatedMatrix = (symbol: TSymbol) => {
        let selectedAreas: IMatrix = {} as IMatrix;
        let newMoves: number[][] = [];

        if (symbol === 'x') {
            selectedAreas = getSelectedAreas(xMoves);
            newMoves = getMatrix(xMatrix, selectedAreas);
        } else if (symbol === 'o') {
            selectedAreas = getSelectedAreas(oMoves);
            newMoves = getMatrix(oMatrix, selectedAreas);
        }
        return newMoves;
    };
    const calculateScores = (newMoves: number[][]): number => {
        let scores: number = 0;
        for (let i = 0; i < newMoves.length; i++) {
            const matrixRow = newMoves[i];
            let strMatRow = matrixRow.join('');
            let splittedCombination = strMatRow.split('0').filter((x) => x.length);

            for (const sc of splittedCombination) {
                if (sc.length >= 3) scores += sc.length * 100;
            }
        }
        return scores;
    };
    const horizontalScoring = (symbol: TSymbol) => {
        let scores = 0,
            newMoves: number[][] = [];

        newMoves = getRelatedMatrix(symbol);
        scores = calculateScores(newMoves);
        return scores;
    };
    const verticalScoring = (symbol: TSymbol) => {
        let scores = 0,
            newMoves: number[][] = [];

        newMoves = getRelatedMatrix(symbol);
        let rotatedMatrix = rotateMatrix90Deg(newMoves); //rotate 90deg the matrix to change verticals with horizontal items

        scores = calculateScores(rotatedMatrix);

        return scores;
    };
    const rightDiagonalScoring = (symbol: TSymbol) => {
        let scores = 0,
            newMoves: number[][] = [];

        newMoves = getRelatedMatrix(symbol);
        let rotatedMatrix = rotateMatrix45Deg(newMoves);
        scores = calculateScores(rotatedMatrix);
        return scores;
    };
    const leftDiagonalScoring = (symbol: TSymbol) => {
        let scores = 0,
            newMoves: number[][] = [];

        newMoves = getRelatedMatrix(symbol);
        let rotatedMatrix = rotateMatrixMinus45Deg(newMoves);
        scores = calculateScores(rotatedMatrix);

        return scores;
    };
    const decreasalSort = (collection: number[]) => {
        return collection?.sort((a, b) => b - a);
    };
    const rotateMatrix90Deg = (matrix: number[][]) => {
        return matrix.map((row, i) => row.map((val, j) => matrix[matrix.length - 1 - j][i]));
    };
    const rotateMatrix45Deg = (matrix: number[][]): number[][] => {
        let a = 0;
        let b = 0;
        let peakPoint: boolean = false;
        let newRow: number[] = [];
        let newMatrix: number[][] = [];
        for (let x = 0; x < squareDimension * 2 - 1; x++) {
            newRow = [];
            for (let i = a; i >= b; i--) {
                for (let j = peakPoint ? b : 0; j <= a; j++) {
                    newRow.push(matrix[i--][j]);
                }
            }
            newMatrix.push(newRow);
            if (a < squareDimension && !peakPoint) {
                a++;
            } else if (a > 0 && peakPoint) {
                b++;
            }

            if (a === squareDimension) {
                peakPoint = true;
                a = squareDimension - 1;
                b = 1;
            }
        }
        return newMatrix;
    };
    const rotateMatrixMinus45Deg = (matrix: number[][]): number[][] => {
        let a = 0;
        let b = squareDimension - 1;
        let c = 0;
        let d = squareDimension - 1;
        let peakPoint: boolean = false;
        let newRow: number[] = [];
        let newMatrix: number[][] = [];
        for (let x = 0; x < squareDimension * 2 - 1; x++) {
            newRow = [];
            if (a >= squareDimension - 1) {
                peakPoint = true;
                b = 0;
            }
            for (let i = c; i <= a; i++) {
                for (let j = !peakPoint ? b : 0; j <= (!peakPoint ? squareDimension - 1 : d); j++) {
                    newRow.push(matrix[i++][j]);
                }
            }
            newMatrix.push(newRow);

            if (a < squareDimension - 1 && !peakPoint) {
                a++;
                b--;
            } else if (peakPoint) {
                c++;
                d--;
            }
        }
        return newMatrix;
    };
    const finalScores = () => {
        let xH = horizontalScoring('x');
        let oH = horizontalScoring('o');

        let xV = verticalScoring('x');
        let oV = verticalScoring('o');

        let rightDiagonalX = rightDiagonalScoring('x');
        let rightDiagonalO = rightDiagonalScoring('o');

        let leftDiagonalX = leftDiagonalScoring('x');
        let leftDiagonalO = leftDiagonalScoring('o');

        let totalX: number = xH + xV + rightDiagonalX + leftDiagonalX;
        let totalO: number = oH + oV + rightDiagonalO + leftDiagonalO;

        GameStats.addScore('x', totalX);
        GameStats.addScore('o', totalO);
    };

    preInit();

    return {
        finalScores
    };
};

Then run the app:

npm run dev

Open http://localhost:3000 and try these cases on the 5x5 board, so you can be sure that all the four directions really work:

put 3 X in a row horizontally → the score of X becomes 300
add a 4th X to the same line → it becomes 400 (not 700, because it is still one single line, only longer)
put only 2 X next to each other → it stays 0
put 3 X vertically in the same column → 300
put 3 X on a diagonal (for example the cells 1, 7 and 13) → 300
make two separate rows of 3 → 600

If all of these numbers match on your machine, congratulations — your game now understands lines on any board size, and you never have to write a winningCombinations array again. 🎉

The Next Step...

Our game counts, but honestly it still does not know how to finish. You can keep clicking until the last cell and nobody ever wins.

So in the next part we are going to close the circle:

detect when the board is full and decide the winner out of the scores
build a firework on a <canvas>, with rockets and gravity and glowing trails, without any library
announce the winner in a modal with the final scores, and a draw state as well
let the players choose the size of the board before starting, instead of my hardcoded GRID_SIZE = 5
and at the end, a small troubleshooting list of every mistake I hit while building this, so you don't lose your evening on the same ones

See you in the part 4! 😉

How to make an advanced TIC TAC TOE game with Javascript [part 2]

Saeed Panahi — Thu, 30 Jul 2026 15:25:16 +0000

Welcome back

Welcome back to our Tic Tac Toe series, where we're building a fully functional Tic Tac Toe game from scratch using JavaScript, HTML, and CSS. In our previous article, we laid the foundation for our project by creating the necessary files and folders, and adding some initial JavaScript code to handle the basic game logic. We also configured the game board and added some styling to make it look visually appealing.

Now, it's time to start building upon that foundation and add more advanced features to our game. In this article, we'll focus on implementing the core gameplay mechanics, such as handling user input, updating the game state, and determining the winner. We'll also explore how to use JavaScript design patterns to make our code more organized and scalable. So, let's dive right in and see what we can create!

Click here to see the article PART-1

Let's get started...

Modify project configurations

Step 1:Modify `package.json`

To handle better the project I decided to add Typescript to it.
Hence, the project needs to be modified in some places as below:

First of all, install below packages by the following command:

npm install --save-dev typescript concurrently @types/node

Then, you need to change the script section in the package.json to the next lines:

"scripts": {
    "start": "node server.js",
    "dev": "concurrently npm:watch:*",
    "watch:1": "tsc -w",
    "watch:2": "tsc server.ts",
    "watch:3": "nodemon server.js",
    "build-dist": "./node_modules/typescript/bin/tsc",
    "test": "exit 0"
},

concurrently package helps us to run several commands in the same line, if we want to use it we can do as above.

Step 2: Migrate from Javascript to Typescript

Now, you need to change all the _.js files to _.ts to be able to use of the power of Typescript. For this purpose you should apply some changes in the files and the structure of the project.

Create tsconfig.json file in the root of the project and add the following code:

{
    "compilerOptions": {
        "target": "esnext",
        "allowJs": true,
        "checkJs": true,
        "outDir": "build",
        "rootDir": "src",
        "strict": false,
        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
        "declaration": true /* Generates corresponding '.d.ts' file. */,
        "strictNullChecks": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "./*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"],
    "include": ["./src", "./test", "./config"]
}

In the above *.json file we determined that our output directory to be called build and whenever we run command npm run dev it will be created automatically and all the converted files goes in there.

Step 3: Modify HTML & CSS files

Make a folder called src and move the index.ts file (previously it was index.js) to the src folder.

Now, you need to update the script import in /public/index.html file as below:

<body>
    ...
    <script type="module" src="../build/index.js"></script>
</body>

But, why is the src URI is: ../build/index.js?! because as we explained previously, the output directory that automatically will be created is build folder.

Furthermore, we should modify the _.html & _.css files that are used in the app as below:

./public/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tic Tac Toe</title>
        <style>
            :root {
                --dimension: 3;
            }
        </style>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div id="app">
            <div id="gameField" class="container">
                <h1 class="title">Tic Tac Toe</h1>
                <div class="current-turn">CURRENT TURN: <span id="currentTurn"></span></div>
                <!-- Plaground goes here... -->

                <div class="score-board board-left">
                    <div class="player-score">
                        <div class="player-title">PLAYER <span class="cell-x">X</span></div>
                        <div id="xScore" class="score">0</div>
                    </div>
                </div>
                <div class="score-board board-right">
                    <div class="player-score">
                        <div class="player-title">PLAYER <span class="cell-o">O</span></div>
                        <div id="oScore" class="score">0</div>
                    </div>
                </div>
            </div>
            <div class="actions"></div>
        </div>
        <script type="module" src="../build/index.js"></script>
    </body>
</html>

In the above code, you see that tag <div id="playground" class="playground flexbox">...</div> is deleted, because we will generate it by Javascript code in the next steps.

Along with this, we made out score board inside tag:
<div class="score-board board-left">...</div>

Additionally, you see a piece of code is added between <head>...</head> as below:

<style>
    :root {
        --dimension: 3;
    }
</style>

We are going to use of --dimension variable to make our game board grid as many as we wish to have.

After all, you should modify your CSS file as below:

./public/style.css

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #22113f;
    font-family: 'Varela Round', sans-serif;
}
.container {
    margin: auto;
    width: 75%;
}
.title {
    text-align: center;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4,
        0 0 40px #03bcf4,
        0 0 80px #03bcf4,
        0 0 160px #03bcf4;
    margin: 16px;
}
.playground {
    position: relative;
    width: calc(var(--dimension) * 100px);
    height: calc(var(--dimension) * 100px);
    margin: 10px auto 32px;
    background: rgb(95, 15, 191);
    background: linear-gradient(120deg, rgba(95, 15, 191, 1) 0%, rgba(170, 20, 111, 1) 100%);
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    overflow: hidden;
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.playground .cell {
    position: relative;
    width: calc((100% / var(--dimension)) - 46px); /* Calculate width based on available space */
    padding: 40px 20px;
    margin: 2px;
    color: #f1f1f1;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: 0.3s;
}
.playground .cell span {
    position: absolute;
    text-transform: uppercase;
    font-size: 92px;
    font-weight: 600;
    top: calc(50% + 2px);
    left: 50%;
    transform: translate(-50%, -50%);
}
.cell-x {
    color: #fff;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4;
}
.cell-o {
    color: #fff;
    text-shadow:
        0 0 10px #f403a8,
        0 0 20px #f403a8,
        0 0 30px #da0095;
}
.playground .cell:hover {
    background: rgba(0, 0, 0, 0.65);
}
.clearfix {
    overflow: auto;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.actions {
    position: relative;
    padding: 2px 32px;
    width: calc(var(--dimension) * 100px);
    margin: auto;
    text-align: right;
}
.btn {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    transform: translateY(-20px);
}
.btn-glow {
    color: #fff;
    text-shadow:
        0 0 4px #03bcf4,
        0 0 30px #03bcf4;
    padding: 4px 8px;
}
.btn-glow:hover {
    text-shadow:
        0 0 50px #03bcf4,
        0 0 10px #03bcf4,
        0 0 30px #03bcf4;
}
.winner-prompt {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #74ffa9;
    font-size: 48px;
    z-index: 999;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: calc(100% - 20px);
    text-align: center;
    line-height: 6;
    border-radius: 8px;
}
.score-board {
    position: absolute;
    width: 25%;
}
.board-left {
    left: 2.5%;
}
.board-right {
    right: 2.5%;
}
.player-score {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.player-title {
    font-size: 2em;
    color: #e7da99;
    font-weight: 400;
}
.player-title span {
    font-size: 42px;
    font-weight: 600;
}
.score {
    font-size: 7.2em;
    color: #f49003;
    font-weight: 600;
}
.current-turn {
    color: #4ff403;
    font-size: 18px;
    text-align: center;
}
@media only screen and (max-width: 1200px) {
    .score-board {
        top: 10px;
        font-size: 40%;
    }
    .player-title span {
        font-size: 22px;
    }
}

Let's dive into JS 🏊

Step 1:Remake the board game

In the src directory add a folder called utils and in utils add a *.ts file named playground.ts.

I decided to use of Module design pattern for this step, if you don't know what does module pattern do exactly you can read this article that explained all JS design patterns:
Design patterns in JS

So, start coding in playground.ts by this block of code

export const Playground = (squareDimension: number, parentTag: HTMLElement) => {
    //functions goes here...
};

In the function parameters you see 2 items:

squareDimension: number: it accepts the square counts
parentTag: HTMLElement: it accepts the main HTML tag that we want to initialize our board game.

Then, we need a function called init() to initialize our board game, add it in Playground() function

const init = () => {
    const playgroundSchema: IPlayground = {
        tag: 'div',
        id: 'playground',
        className: 'playground flexbox',
        childNodes: []
    };
    let cellSchema = {
        id: 0,
        tag: 'section',
        className: 'cell',
        innerHTML: '',
        datasets: [],
        onclick: handleClick
    };
    for (let i = 1; i <= Math.pow(squareDimension, 2); i++) {
        cellSchema.id = i;
        const cell = CreateElement(cellSchema);
        playgroundSchema.childNodes.push(cell);
    }
    const playground = CreateElement(playgroundSchema);
    const newTag = parentTag.appendChild(playground);
    return newTag;
};

As you see, we used an interface in the above code IPlayground, so you need to create this interface as is explaining:
First, create a folder inside src and add index.ts to it:
/src/interfaces/index.ts

Add the following code:

export interface IPlayground {
    id: string;
    tag: string;
    className: string;
    childNodes: HTMLElement[];
}

Additionaly, there is a function CreateElement() that we made it globally to use it any where we need:

Create a file inside utils named global.ts:
./src/utils/global.ts

Write the below code:

export const CreateElement = (elementObj: any): HTMLElement => {
    if (!elementObj || !elementObj.tag) return {} as HTMLElement;
    var element: HTMLElement = document.createElement(elementObj.tag);
    for (var prop in elementObj) {
        if (prop === 'childNodes') {
            elementObj.childNodes.forEach(function (node) {
                element.appendChild(node);
            });
        } else if (prop === 'attributes') {
            elementObj.attributes.forEach(function (attr) {
                element.setAttribute(attr.key, attr.value);
            });
        } else if (prop === 'datasets') {
            elementObj.datasets.forEach(function (dataset) {
                element.dataset[dataset] = elementObj[dataset];
            });
        } else element[prop] = elementObj[prop];
    }
    return element;
};

What this method does is simple but it saves us a lot of repeated lines: you give it a plain object
that describes a tag, and it walks every property of that object and copies it onto a real DOM
element. Three property names are treated specially — childNodes, attributes and datasets —
and everything else (id, className, innerHTML, onclick, and etc.) is assigned directly to
the element. Hence, from now on we never call document.createElement() by hand again, we only
write schemas.

Now, import the files we just created in ./src/utils/playground.ts:

//...
import { IPlayground } from '../interfaces/index.js';
import { CreateElement } from './global.js';
//...

Be careful about the .js at the end of the import paths! ⚠️

This is the part that confuses almost everybody the first time, so let me explain it. The files we are writing are *.ts, but we import them as *.js. It looks wrong, but it is correct, and it is mandatory here.

The reason is that we have no bundler in this project (no Webpack, no Vite). tsc converts our
*.ts files to *.js files inside build, and then the browser itself resolves the import
paths, because in index.html we load the app as a native ES module:
<script type="module" src="../build/index.js"></script>

And the browser cannot guess extensions. Whatever string you wrote in the import is exactly what it will request from the server. So:

if you write from './global' → the browser asks for /build/utils/global → 404
if you write from './global.ts' → the browser asks for a file that does not exist in build → 404
if you write from './global.js' → the browser asks for /build/utils/global.js → ✅

The important thing to know is that tsc does not rewrite these paths, it leaves them exactly as you typed them. Therefore, always point at the compiled name (.js), not at the source name (.ts). If your game shows an empty page and the console says something like "Failed to load module script", this is almost always the reason.

Then, you need to return the init() function, and import and call ./src/utils/playground.ts inside our main index.ts

./src/utils/playground.ts:

export const Playground = (squareDimension: number, parentTag: HTMLElement) => {
    let rootCSS = document.querySelector(':root') as HTMLElement;
    rootCSS.style.setProperty('--dimension', `${squareDimension}`);

    return {
        init
    };
};

./src/index.ts:

'use strict';
import { Playground } from './utils/playground.js';

(function () {
    const GRID_SIZE = 5;
    console.log('Game is running!');

    const gameField: HTMLElement = document.querySelector('#gameField') as HTMLElement;
    let playground = Playground(GRID_SIZE, gameField);
    playground.init();
})();

Now if you run the app you must see an empty board game with 5x5 grid:

Step 2:Initialize game stats & player

To be able to access the players stats including their ID, symbol (which is referred to their current turn: X or O), username, name, type ("Mankind" or "AI") and score; we need to do as follows:

Inside the ./src/interfaces/index.ts add the following interfaces and types:

export type TType = 'Mankind' | 'AI';
export type TSymbol = 'x' | 'o';
export interface IPlayer {
    id: string;
    username: string;
    name?: string;
    type: TType;
    symbol: TSymbol;
    score: number;
}
export interface IStat {
    contestId: string;
    timestamp: number;
    player1: IPlayer;
    player2: IPlayer;
}

If in your JS apps you need to store the data that you are using and don't miss it, probably you need to use of Singleton design pattern in your implementation to save the states.

Therefore, for storing the game states, we should create a folder called ./src/store/ and inside of it, we need to make a file called gameStats.ts and implement it as below:

import { IStat, TSymbol } from '../interfaces/index.js';

let instance: any;
const stats: IStat[] = [];

class GameStats {
    constructor() {
        if (instance) {
            throw new Error('New instance cannot be created!');
        }
        instance = this;
    }

    setStats(newStat: IStat): void {
        stats.push(newStat);
    }
    updateStats(stat: IStat): IStat[] {
        let foundStatIndex = stats.findIndex((s) => s.contestId === stat.contestId);
        if (foundStatIndex) {
            stats.splice(foundStatIndex, 1, stat);
        }
        return stats;
    }
    getAllStats(): IStat[] {
        return stats;
    }
    getLastStats(): IStat {
        return stats[stats.length - 1];
    }
    addScore(playerSymbol: TSymbol, newValue: number) {
        let lastStat: IStat = { ...this.getLastStats() };

        if (lastStat.player1.symbol === playerSymbol) {
            lastStat.player1.score = newValue;
        } else {
            lastStat.player2.score = newValue;
        }
        this.updateStats(lastStat);
    }
}

const gameStatsInstance = Object.freeze(new GameStats());
export default gameStatsInstance;

In the above code you see:
const stats: IStat[] = [];

Our game stats saves in the array.

setStats() function helps us to set new stat
updateStats() we use it to update the stats during the play
getLastStats() returns the last stat that is saved in the array, it means, it gives us the information of the current game which is playing now
addScore() we will be using this method for adding the score of each player after each move

Afterward, in ./src/utils/playground.ts you have to define function preInit() that must be called before init() function, actually this method should be called once the playground declared.

//...
import GameStats from '../store/gameStats.js';
import { generateID } from './global.js';

//other parts of the code...

const preInit = () => {
    const player1: IPlayer = definePlayer('x');
    const player2: IPlayer = definePlayer('o');

    let newGameStat: IStat = {
        contestId: generateID(24),
        timestamp: new Date().valueOf(),
        player1,
        player2
    };
    GameStats.setStats(newGameStat);
};

You can observe that we used interface IPlayer, hence, you should import it.
In addition, there is a function named definePlayer() that must look like below:

const definePlayer = (playerSymbol: TSymbol): IPlayer => {
    const id = generateID(24);
    const player: IPlayer = {
        id,
        name: '',
        username: id.substring(0, 8),
        type: 'Mankind',
        symbol: playerSymbol,
        score: 0
    };
    return player;
};

The task of this method is to generate a new player with the provided info.

Function generateID() is a global method that is defined in the ./src/utils/global.ts file:

export const generateID = (length: number): string => {
    const chars: string = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result: string = '';
    const charsLength: number = chars.length;
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * charsLength));
    }

    return result;
};

Then, preInit() must be called once, right when the playground is declared — not inside init(),
because init() will be called again every time the players reset the game and we don't want to create new players on every reset. Hence, call it just before the return statement of Playground():

export const Playground = (squareDimension: number, parentTag: HTMLElement) => {
    let rootCSS = document.querySelector(':root') as HTMLElement;
    rootCSS.style.setProperty('--dimension', `${squareDimension}`);

    // ...all the other functions...

    preInit();

    return {
        init
    };
};

Step 3:Store the moves of the players

We have got the players and the game stats, but still we don't store who clicked which cell.
Therefore, we need a second store, and again we are going to use of the Singleton pattern for it.

First of all, add these two interfaces to ./src/interfaces/index.ts:

export interface IPlayerMove {
    selectedCells: number[];
    player: IPlayer;
}
export interface IMove {
    x: IPlayerMove;
    o: IPlayerMove;
}

So, an IMove object holds two records, one for each symbol, and each record keeps the list of the cell numbers that this player has selected until now. It means, if X clicked the cells 1, 5 and 9, then moves.x.selectedCells will be [1, 5, 9].

Then, create the file ./src/store/moveStats.ts as follows:

import { IMove, IPlayer, IPlayerMove, TSymbol } from '../interfaces/index.js';

let instance: any;
let moves: IMove = {
    x: {
        player: {} as IPlayer,
        selectedCells: []
    },
    o: {
        player: {} as IPlayer,
        selectedCells: []
    }
} as IMove;
let currentTurn: TSymbol = 'x';

class Moves {
    constructor() {
        if (instance) throw new Error('New instance cannot be created!');
        instance = this;
    }
    resetMoves() {
        moves = {
            x: {
                player: {} as IPlayer,
                selectedCells: []
            },
            o: {
                player: {} as IPlayer,
                selectedCells: []
            }
        };
        currentTurn = 'x';
    }
    doesExistAnyMove() {
        if (moves?.o?.selectedCells?.length > 0 || moves?.x?.selectedCells?.length > 0) return true;
        return false;
    }
    getMoves() {
        return moves;
    }
    updateMoves(playerMove: IPlayerMove) {
        if (playerMove.player.symbol === 'x') {
            moves.x.player = playerMove.player;
            moves.x.selectedCells.concat(playerMove.selectedCells);
        } else if (playerMove.player.symbol === 'o') {
            moves.o.player = playerMove.player;
            moves.o.selectedCells.concat(playerMove.selectedCells);
        }
        return moves;
    }
    currentTurn() {
        return currentTurn;
    }
    updateTurn(turn: TSymbol) {
        currentTurn = turn;
    }
}

const movesInstance = Object.freeze(new Moves());
export default movesInstance;

The methods of this store are as follows:

getMoves() gives us the live IMove object, it means the current state of the whole board
updateMoves() we call it after each move to attach the player object to their own record
doesExistAnyMove() returns true if at least one cell is selected, we will use of it to decide when the reset button should appear
currentTurn() returns whose turn it is now, 'x' or 'o'
updateTurn() switches the turn to the other player
resetMoves() empties everything and gives the turn back to X

Notice that both stores are exported as Object.freeze(new ClassName()), and both of them throw an
error inside the constructor if a second instance is created. That is the whole idea of the Singleton pattern — no matter from how many different files you import them, you always get the same one object, hence the game state never gets duplicated.

Step 4:Put the X and O on the board

Now it is the turn of the most satisfying part, drawing the symbols. 😄

Create a file ./src/utils/gamePlay.ts and add the below code:

import { CreateElement } from './global.js';
import { IMove, IPlayer, IPlayerMove, TSymbol } from '../interfaces/index.js';
import MovesInstance from '../store/moveStats.js';

export const makeMove = (cellNumber: number, currentTurn: TSymbol, player: IPlayer): IMove => {
    // next 4 lines are for preventing to add more than one item in each section
    let moves: IMove = MovesInstance.getMoves();
    if (moves.o.selectedCells.includes(cellNumber) || moves.x.selectedCells.includes(cellNumber)) {
        return {} as IMove;
    }

    const symbol = player.symbol.toLowerCase();
    const cellContentSchema = {
        tag: 'span',
        className: `cell-${currentTurn?.toLowerCase()}`,
        innerHTML: currentTurn
    };
    let selectedSection: HTMLElement = document.querySelector(`section.cell:nth-child(${cellNumber})`) as HTMLElement;
    const cellContent = CreateElement(cellContentSchema);
    selectedSection.appendChild(cellContent);

    let currentPlayerStats: IPlayerMove = moves[symbol];

    if (currentPlayerStats?.selectedCells) {
        currentPlayerStats.selectedCells.push(cellNumber);
    } else {
        let newPlayerMove: IPlayerMove = {
            selectedCells: [],
            player: player
        };
        currentPlayerStats = {
            ...newPlayerMove
        };
        currentPlayerStats.selectedCells.push(cellNumber);
    }
    const playerMove: IPlayerMove = {
        ...currentPlayerStats
    };
    const updatedMove: IMove = {
        ...moves,
        [symbol]: playerMove
    };
    getCurrentTurn();
    return updatedMove;
};
export const getCurrentTurn = () => {
    let turn = MovesInstance.currentTurn();
    const currentTurnSpan = document.querySelector('#currentTurn') as HTMLElement;

    if (!currentTurnSpan.innerHTML.length) {
        currentTurnSpan.innerHTML = turn.toUpperCase();
    } else {
        currentTurnSpan.innerHTML = turn == 'x' ? 'O' : 'X';
    }

    return turn;
};

There are a couple of things in the above code that need to be explained:

The first if block is our guard against cheating (or just double-clicking). If the cell number already exists in the selected cells of X or of O, we return an empty object and we draw nothing. So the same cell can never be taken twice.
document.querySelector('section.cell:nth-child(' + cellNumber + ')') — this is the reason we
numbered our cells starting from 1 and not from 0 in init(). CSS nth-child() is also
1-based, hence the cell number and the DOM position match each other exactly and we don't need to
keep any extra map between them.
Instead of building the <span> by hand we pass a schema to our CreateElement(), same like we
did for the board itself. The class name becomes cell-x or cell-o, which are the two glowing
styles we already wrote in the CSS.
getCurrentTurn() is called at the end of makeMove(), and this is a little tricky so pay
attention. At that moment the turn has not been switched yet, so MovesInstance.currentTurn()
still returns the player who just played. Therefore, to show the reader whose turn is next, we
display the opposite symbol. And the first time it runs (from index.ts, before anybody played)
the span is still empty, hence it simply prints X.

Step 5:Handle the clicks

In init() we already gave every cell an onclick: handleClick, but we never wrote handleClick
itself. Therefore, add it to ./src/utils/playground.ts:

const handleClick = (event) => {
    if (!event?.target?.id) throw new Error('Element Id is not recognized!');
    makeResetButton();
    const id = +event.target.id;

    let currentTurn: TSymbol = MovesInstance.currentTurn();
    let lastGameStats = GameStats.getLastStats();
    let currentPlayer =
        lastGameStats?.player1?.symbol === currentTurn ? lastGameStats?.player1 : lastGameStats?.player2;
    let moves: IMove = makeMove(id, currentTurn, currentPlayer);

    // `makeMove()` gives us back an empty object when the cell was already taken,
    // in that case we must stop right here and NOT switch the turn
    if (!moves?.x) return;

    // the scores will be calculated in here, in the next part of the series

    updateScoreBoard();

    MovesInstance.updateTurn(currentTurn === 'x' ? 'o' : 'x');
    const playerMove: IPlayerMove = {
        selectedCells: [],
        player: currentPlayer
    };
    playerMove.selectedCells.push(id);
    MovesInstance.updateMoves(playerMove);
};

The flow of this method is as follows:

read the current turn from the moves store
take the last game stat and find out which player object owns that symbol
ask makeMove() to draw the symbol on the clicked cell
if the cell was already taken, return and do nothing
refresh the score board
switch the turn to the other player, and save the move in the store

Be careful about that early return in the middle. ⚠️ Without it, clicking on an already-filled
cell would draw nothing (which is correct) but would still switch the turn (which is wrong), and
your players would lose their turn for free.

Step 6:The score board & the reset button

We are almost there. Three small methods are still missing in ./src/utils/playground.ts.

The first one only reads the last game stat and writes the two numbers into the score board that we prepared in the HTML:

const updateScoreBoard = () => {
    const gameStats = GameStats.getLastStats();

    let xScore = document.querySelector('#xScore') as HTMLElement;
    let oScore = document.querySelector('#oScore') as HTMLElement;

    xScore.innerHTML = gameStats.player1.score.toString();
    oScore.innerHTML = gameStats.player2.score.toString();
};

Then the reset button. Same like in part 1 we don't want to show it before the first move, hence we check doesExistAnyMove() first:

const makeResetButton = () => {
    const hasAnyMove = MovesInstance.doesExistAnyMove();
    if (!hasAnyMove) return;

    const actionsDiv: HTMLElement = document.querySelector('.actions') as HTMLElement;
    if (actionsDiv.querySelector('button')) return;

    const resetButtonSchema = {
        id: 'reset',
        tag: 'button',
        className: 'btn btn-glow',
        textContent: 'RESET',
        onclick: resetButtonHandler
    };
    const resetButton = CreateElement(resetButtonSchema);
    actionsDiv.appendChild(resetButton);
};

And these two handle the actual resetting:

const reset = () => {
    MovesInstance.resetMoves();
    preInit();
    updateScoreBoard();
    const currentTurnSpan = document.querySelector('#currentTurn') as HTMLElement;
    currentTurnSpan.innerHTML = 'X';
};
const resetButtonHandler = () => {
    const playground = document.querySelector('#playground') as HTMLElement;
    playground.remove();
    const actions: HTMLElement = document.querySelector('.actions') as HTMLElement;
    actions?.removeChild(actions.lastChild as HTMLElement);

    reset();
    init();
};

resetButtonHandler() throws away the whole #playground element and the button itself, then reset() empties the moves store and calls preInit() again — which means a brand new contest with brand new players is pushed into GameStats, so the old game is still kept in the stats array as a history. At the end init() builds a fresh empty board.

Now, update ./src/index.ts to also call getCurrentTurn() once at the startup, so the players see CURRENT TURN: X before anybody clicked:

'use strict';
import { getCurrentTurn } from './utils/gamePlay.js';
import { Playground } from './utils/playground.js';

(function () {
    const GRID_SIZE = 5;
    console.log('Game is running!');

    const gameField: HTMLElement = document.querySelector('#gameField') as HTMLElement;
    let playground = Playground(GRID_SIZE, gameField);
    playground.init();

    getCurrentTurn();
})();

Step 7:Run it and see the result

Whole ./src/utils/playground.ts file should looks like this:

import { CreateElement } from './global.js';
import { IMove, IPlayer, IPlayerMove, IPlayground, IStat, TSymbol } from '../interfaces/index.js';
import GameStats from '../store/gameStats.js';
import { generateID } from './global.js';
import { makeMove } from './gamePlay.js';
import MovesInstance from '../store/moveStats.js';

export const Playground = (squareDimension: number, parentTag: HTMLElement) => {
    let rootCSS = document.querySelector(':root') as HTMLElement;
    rootCSS.style.setProperty('--dimension', `${squareDimension}`);

    const definePlayer = (playerSymbol: TSymbol): IPlayer => {
        const id = generateID(24);
        const player: IPlayer = {
            id,
            name: '',
            username: id.substring(0, 8),
            type: 'Mankind',
            symbol: playerSymbol,
            score: 0
        };
        return player;
    };
    const reset = () => {
        MovesInstance.resetMoves();
        preInit();
        updateScoreBoard();
        const currentTurnSpan = document.querySelector('#currentTurn') as HTMLElement;
        currentTurnSpan.innerHTML = 'X';
    };
    const preInit = () => {
        const player1: IPlayer = definePlayer('x');
        const player2: IPlayer = definePlayer('o');

        let newGameStat: IStat = {
            contestId: generateID(24),
            timestamp: new Date().valueOf(),
            player1,
            player2
        };
        GameStats.setStats(newGameStat);
    };
    const init = () => {
        const playgroundSchema: IPlayground = {
            tag: 'div',
            id: 'playground',
            className: 'playground flexbox',
            childNodes: []
        };
        let cellSchema = {
            id: 0,
            tag: 'section',
            className: 'cell',
            innerHTML: '',
            datasets: [],
            onclick: handleClick
        };
        for (let i = 1; i <= Math.pow(squareDimension, 2); i++) {
            cellSchema.id = i;
            const cell = CreateElement(cellSchema);
            playgroundSchema.childNodes.push(cell);
        }
        const playground = CreateElement(playgroundSchema);
        const newTag = parentTag.appendChild(playground);
        return newTag;
    };
    const handleClick = (event) => {
        if (!event?.target?.id) throw new Error('Element Id is not recognized!');
        makeResetButton();
        const id = +event.target.id;

        let currentTurn: TSymbol = MovesInstance.currentTurn();
        let lastGameStats = GameStats.getLastStats();
        let currentPlayer =
            lastGameStats?.player1?.symbol === currentTurn ? lastGameStats?.player1 : lastGameStats?.player2;
        let moves: IMove = makeMove(id, currentTurn, currentPlayer);

        if (!moves?.x) return;

        // the scores will be calculated in here, in the next part of the series

        updateScoreBoard();

        MovesInstance.updateTurn(currentTurn === 'x' ? 'o' : 'x');
        const playerMove: IPlayerMove = {
            selectedCells: [],
            player: currentPlayer
        };
        playerMove.selectedCells.push(id);
        MovesInstance.updateMoves(playerMove);
    };
    const resetButtonHandler = () => {
        const playground = document.querySelector('#playground') as HTMLElement;
        playground.remove();
        const actions: HTMLElement = document.querySelector('.actions') as HTMLElement;
        actions?.removeChild(actions.lastChild as HTMLElement);

        reset();
        init();
    };
    const makeResetButton = () => {
        const hasAnyMove = MovesInstance.doesExistAnyMove();
        if (!hasAnyMove) return;

        const actionsDiv: HTMLElement = document.querySelector('.actions') as HTMLElement;
        if (actionsDiv.querySelector('button')) return;

        const resetButtonSchema = {
            id: 'reset',
            tag: 'button',
            className: 'btn btn-glow',
            textContent: 'RESET',
            onclick: resetButtonHandler
        };
        const resetButton = CreateElement(resetButtonSchema);
        actionsDiv.appendChild(resetButton);
    };
    const updateScoreBoard = () => {
        const gameStats = GameStats.getLastStats();

        let xScore = document.querySelector('#xScore') as HTMLElement;
        let oScore = document.querySelector('#oScore') as HTMLElement;

        xScore.innerHTML = gameStats.player1.score.toString();
        oScore.innerHTML = gameStats.player2.score.toString();
    };

    preInit();

    return {
        init
    };
};

And the structure of your src folder must be same like this:

src
├── index.ts
├── interfaces
│   └── index.ts
├── store
│   ├── gameStats.ts
│   └── moveStats.ts
└── utils
    ├── gamePlay.ts
    ├── global.ts
    └── playground.ts

Now run the app:

npm run dev

Then open http://localhost:3000 and you must see a 5x5 board. Click on the cells one by one and check the following things:

the X and O appear with their glowing colors
the CURRENT TURN at the top switches after every move
the RESET button shows up after the very first move, and it really clears the board
clicking on a cell that is already taken does absolutely nothing

But, both scores are still 0 and they will stay 0 forever, no matter how many symbols you put in
a row. 😅

And that is exactly the interesting part, because on a 5x5 board (or 8x8, or 20x20) the trick we used
in part 1 — a hardcoded array of the 8 winning combinations — is simply not an option anymore.

The Next Step...

In the next part we are going to build the brain of this game: the scoring engine.

We will convert the moves of each player into a matrix of 0 and 1, then we will rotate that
matrix by 90, 45 and -45 degrees, so that the vertical lines and both diagonals can be counted with
exactly the same code that counts the horizontal ones. I made a few animations to show you how this
generation and rotation works, because seeing it is much easier than reading it.

Then, finally, those two big zeros on the score board will start moving. Stay tuned! 😉

See the part 3 here

How to make an advanced TIC TAC TOE game with Javascript [part 1]

Saeed Panahi — Thu, 30 Jul 2026 15:21:08 +0000

Introduction

Hey there, fellow tech enthusiasts! My name is Saeed Panahi, and I'm thrilled to be sharing my latest creation with you - a Tic Tac Toe game built with vanilla JavaScript! 🎉 As a seasoned software engineer with a passion for front-end development.

Now, I know what you might be thinking - "TIC TAC TOE? That's not exactly rocket science, is it?" And you'd be right, but that's precisely the beauty of it! The simplicity of this classic game allows us to focus on the nitty-gritty details of coding, without getting bogged down in overly complex logic. Plus, who doesn't love a good game of Tic Tac Toe every now and then? 😄
So, if you're ready to dive into the world of JavaScript gaming, I invite you to join me on this adventure! In the following sections, we'll explore the steps involved in creating our very own Tic Tac Toe game, complete with stylish graphics and intuitive gameplay. By the end of this tutorial, you'll have a fully functional game to show off to your friends and family (or keep all to yourself - we won't judge!). 😉

Let's get started! 🚀

Not long ago, on a holiday evening, I decided to quickly implement a Tic Tac Toe game with pure JS for my own fun. After spending a couple of hours finally I made a 3x3 game with an appropriate UI and functionality.
Click here to see the source code on my Github.

But when I looked at the code I had written from a distance I realized why should it be limited only to 3x3 and why not 6x6 or more?! To reach that milestone, a series of fundamental changes had to be made in the program. And very casually, this project became a relatively serious project.

Objectives of these series of article

After reading this article and implementing it, you will be familiar with the following:

Using of modern Javascript/Typescript methods
Implementing famous design patterns (Singleton & Module pattern, and etc.)
Think deeply on the problems and resolve them better

Prerequisites

Before you continue you need to know the following:

Basics of Javascript
A little bit of HTML & CSS
Know how to work with an IDE (VS Code is recommended) Also, you need to install LTS version of Node.js on your local machine. It’s better to install the following items before starting the project:

npm install -g nodemon

Initialize the project

Make an empty folder for the project, open it on the IDE (vs code), and initialize it as a Node
project by the below command:

npm init -y

This gives us a package.json file, and we are going to need it in a few minutes for the packages and
for the scripts section.

After that, We’re going to prepare the UI:
In the root of the project create a directory named “public”.
Inside the public folder create an HTML file as follows: index.html and inside the <body></body> tag add the below codes:

<div id="app">
    <div class="container">
        <h1 class="title">Tic Tac Toe</h1>
        <div id="playground" class="playground flexbox">
            <!-- game field will be created in here by JS -->
        </div>
        <div class="actions clearfix">
            <!-- the button handlers like ‘reset’ button goes here -->
        </div>
    </div>
</div>

Then firstly, we need to add the cells of the game inside the tag <div id=”playground”></div> and create the playground of the game for our UI test (because these cells will be removed in future and will be added automatically by the JS code), in order to do it write these codes:

<div class="playground flexbox">
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-o">O</span>
    </section>
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-o">O</span>
    </section>
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-x">X</span>
    </section>
    <section class="cell">
        <span class="cell-o">O</span>
    </section>
</div>

The numbers of the section tags is 9 because a 3X3 Tic Tac Toe game has 3 rows and 3 columns which will be 9 cells at all.
It is look like this:

Okey, Okeyyyy !!! I know it looks ugly!
Let’s make it pretty 😉

Make a CSS file named style.css in the public folder and add the following codes for having a good-looking UI:

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #22113f;
}
.container {
    margin: auto;
    width: 75%;
}

The above codes of CSS are only for preparation and also, we added a font from google fonts “Varela Round” for having a round edge X / O in the game but it is optional.
I decided to have a glowing title and items in the game, so added this piece of code for styling the title:

.title {
    text-align: center;
    font-family: 'Varela Round', sans-serif;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4,
        0 0 40px #03bcf4,
        0 0 80px #03bcf4,
        0 0 160px #03bcf4;
    margin: 16px;
}

The below code helps us to make a glowing text:
text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4, 0 0 80px #03bcf4, 0 0 160px #03bcf4;

Then write the below CSS for the board game:

.playground {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    background: rgb(95, 15, 191);
    background: linear-gradient(120deg, rgba(95, 15, 191, 1) 0%, rgba(170, 20, 111, 1) 100%);
    text-align: center;
    padding: 12px;
    border-radius: 8px;
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

After we created the styles of the container, now it is the turn of sections that are 9 of them inside the board game. But, how can we have only 3 sections in a row, by using the calc() function in CSS we can have calculated values
width : calc((100% / 3) - 44px);

So, since we want 3 items in a row divide 100% to 3. But what is the 44px in the above code snippet?!

Because the max of padding is 40px and the margin between each item is 2px (2px on the left and the right side will be 4px) the summation of that will be 44px. And the whole CSS class is like the below code:

.playground .cell {
    position: relative;
    width: calc((100% / 3) - 44px); /* Calculate width based on available space */
    padding: 40px 20px;
    margin: 2px;
    color: #f1f1f1;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: 0.3s;
}

At the end, we need shining XOs. Hence, add the following codes to the CSS file:

.playground .cell span {
    position: absolute;
    font-family: 'Varela Round', sans-serif;
    text-transform: uppercase;
    font-size: 92px;
    font-weight: 600;
    top: calc(50% + 2px);
    left: 50%;
    transform: translate(-50%, -50%);
}
.playground .cell span.cell-x {
    color: #fff !important;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4 !important;
}
.playground .cell span.cell-o {
    color: #fff;
    text-shadow:
        0 0 10px #f403a8,
        0 0 20px #f403a8,
        0 0 30px #da0095;
}
.playground .cell:hover {
    background: rgba(0, 0, 0, 0.65);
}

Whole style.css file should looks like this:

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #22113f;
}
.container {
    margin: auto;
    width: 75%;
}
.title {
    text-align: center;
    font-family: 'Varela Round', sans-serif;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4,
        0 0 40px #03bcf4,
        0 0 80px #03bcf4,
        0 0 160px #03bcf4;
    margin: 16px;
}
.playground {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    background: rgb(95, 15, 191);
    background: linear-gradient(120deg, rgba(95, 15, 191, 1) 0%, rgba(170, 20, 111, 1) 100%);
    text-align: center;
    padding: 12px;
    border-radius: 8px;
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.playground .cell {
    position: relative;
    width: calc((100% / 3) - 44px); /* Calculate width based on available space */
    padding: 40px 20px;
    margin: 2px;
    color: #f1f1f1;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: 0.3s;
}
.playground .cell span {
    position: absolute;
    font-family: 'Varela Round', sans-serif;
    text-transform: uppercase;
    font-size: 92px;
    font-weight: 600;
    top: calc(50% + 2px);
    left: 50%;
    transform: translate(-50%, -50%);
}
.playground .cell span.cell-x {
    color: #fff !important;
    text-shadow:
        0 0 10px #03bcf4,
        0 0 20px #03bcf4;
}
.playground .cell span.cell-o {
    color: #fff;
    text-shadow:
        0 0 10px #f403a8,
        0 0 20px #f403a8,
        0 0 30px #da0095;
}
.playground .cell:hover {
    background: rgba(0, 0, 0, 0.65);
}

Don’t forget to import style.css to the HTML file by code:
<link rel="stylesheet" href="./style.css" />
Finally our app’s UI must be same like the below image:

Time to code Javascript

Roll up the sleeves...

We need to establish a web server. However, it’s not a must-do but is better to run our application on a web server.

Prepare web server

Install the following packages:

npm install express http-errors body-parser
npm install --save-dev nodemon livereload connect-livereload

A small note about body-parser: it comes along with express as a sub-dependency, hence
require('body-parser') would work even if you don't install it. But it is not written in your package.json in that case, so the day express changes its dependencies your app breaks for no visible reason. Therefore, always install what you require directly.

When we installed the above packages, make a JS file in the root called server.js.
And add the following codes inside that to make a server (because this article is not about “How to create a JS web server”, we only add the following codes to our project and not going to instruct that):

const express = require('express');
const createError = require('http-errors');
const path = require('path');
const bodyParser = require('body-parser');
const livereload = require('livereload');
const connectLiveReload = require('connect-livereload');

const app = express();
const PORT = 3000;
const COLORS = {
    CYAN: '\u001b[36m',
    WHITE: '\u001b[37m'
};

const liveReloadServer = livereload.createServer();
liveReloadServer.server.once('connection', () => {
    setTimeout(() => {
        liveReloadServer.refresh('/');
    }, 100);
});

app.use(connectLiveReload());
app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => console.log(`${COLORS.CYAN}Server is running on http://localhost:${PORT}${COLORS.WHITE}`));

// serve the css & js as static
app.use(express.static(__dirname));
// get our app to use body parser
app.use(bodyParser.urlencoded({ extended: true }));

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/');
});

Remember, that you need to add the following command to your package.json to run the app by using npm run dev

"scripts":{
      …
        "start": "node server.js",
        "dev": "nodemon server.js",
      …
 }

Add a *.js file in the root of the project called index.js and first of all insert the following JS code:

'use strict';

(function () {
    // The code goes here...
})();

Now, You should import the index.js file to your index.html file.

…
<body>
    …
    <script type="module" src="../index.js"></script>
</body>
…

So, your finall index.html file should be same like the below code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tic Tac Toe</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div id="app">
            <div class="container">
                <h1 class="title">Tic Tac Toe</h1>
                <div id="playground" class="playground flexbox">
                    <!-- game board will be created here automatically by the js code -->
                </div>
                <div class="actions clearfix">
                    <!-- reset button goes here -->
                </div>
            </div>
        </div>
        <script type="module" src="../index.js"></script>
    </body>
</html>

Don't forget that in the preceding steps we added a couple of <section class="cell">...</section> inside tag <div id="playground" class="playground flexbox">...</div>, but those were added only for testing the CSS styles and now those are should be removed, because they will be added to the <div id="playground" class="playground flexbox">...</div> automatically by the JS code.

Finally the structure of your project should be similar to the below image:

Core of the game

After adding all of the previous configurations and doing all of the steps, now we are going to code the core of the game.
Hence, in index.js file we need a couple of functions to handle different parts of the game.

Step 1:Define global variables

Inside index.js and in the block of the main IIFE function, we should define some variables to store the current turn (X or O), store the user moves, and also to check if the game is over or not!

(function () {
    let currentTurn = 'x',
        isGameOver = false;
    let moves = [];
    const NUMBER_OF_GAME_PIECES = 9;

    //The rest of the code goes here...
})();

Step 2:Create the Game Board

Create a HTML element to represent the game board, and add nine squares to it.

const Playground_Init = (gamePiecesNum = 0) => {
    const playground = document.querySelector('#playground');

    for (let i = 1; i <= gamePiecesNum; i++) {
        const section = document.createElement('section');
        section.className = 'cell';
        section.innerHTML = '';
        section.dataset.number = i;
        section.onclick = () => {
            if (isGameOver) return;
        };
        playground.appendChild(section);
    }
};

Step 3:Create the Move Function

Now, let's create a function that will handle player moves. This function will take in the row and column where the player wants to place their mark (X or O), and it will update the game state accordingly.

const makeMove = (cellNumber) => {
    if (moves.findIndex((x) => x.cell === cellNumber) >= 0) {
        return {};
    }
    const cellContent = document.createElement('span');
    if (currentTurn === 'x') {
        cellContent.className = 'cell-x';
        cellContent.innerHTML = 'X';
        let xCell = document.querySelector(`section.cell:nth-child(${cellNumber})`);
        xCell.appendChild(cellContent);

        currentTurn = 'o';
        return {
            turn: 'x',
            cell: cellNumber
        };
    } else {
        cellContent.className = 'cell-o';
        cellContent.innerHTML = 'O';
        let xCell = document.querySelector(`section.cell:nth-child(${cellNumber})`);
        xCell.appendChild(cellContent);

        currentTurn = 'x';
        return {
            turn: 'o',
            cell: cellNumber
        };
    }
};

Step 4: Create the Check Game Over Function

The gameOver() function will check if the game is over by checking if any player has won or if all squares have been filled.

const gameOver = () => {
    const winningCombinations = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9],
        [1, 5, 9],
        [3, 5, 7]
    ];

    let xMoves = extractMoves(moves, 'x');
    let oMoves = extractMoves(moves, 'o');

    let hasWon = false;

    for (let combination of winningCombinations) {
        if (xMoves.includes(combination[0]) && xMoves.includes(combination[1]) && xMoves.includes(combination[2])) {
            hasWon = true;
            break;
        }
        if (oMoves.includes(combination[0]) && oMoves.includes(combination[1]) && oMoves.includes(combination[2])) {
            hasWon = true;
            break;
        }
    }
    if (hasWon) {
        console.log('You Win! 🎉');
    }
    return hasWon;
}; //end gameOver

Inside the gameOver() function, you can see that a function called extractMoves() is used, the task of this function in the app is to return the movements of each player to us. Because in the moves variable we store an array of objects equal to example below:

[
   ...
   { turn: 'x', cell: 3},
   { turn: 'x', cell: 4},
   { turn: 'o', cell: 1},
   ...
]

const extractMoves = (collection = [], turn = '') => {
    return collection
        .map((x) => {
            if (x.turn === turn) {
                return x.cell;
            }
        })
        .filter((x) => x);
};

Step 5: Create reset button

Also, after starting the game the players should see a reset button in order to reset the game as they intended.

const makeResetButton = () => {
    const actionsDiv = document.querySelector('.actions');
    if (actionsDiv.querySelector('button')) return;

    const resetButton = document.createElement('button');
    resetButton.className = 'btn btn-glow';
    resetButton.id = 'reset';
    resetButton.textContent = 'RESET';
    resetButton.onclick = resetButtonHandler;
    actionsDiv.appendChild(resetButton);
};

Additionally, when the players click on the reset button should trigger the below function:

const resetButtonHandler = () => {
    if (moves.length === 0) return;
    const playground = document.querySelector('#playground');
    while (playground.firstChild) {
        playground.removeChild(playground.lastChild);
    }
    const actions = document.querySelector('.actions');
    actions.removeChild(actions.lastChild);
    moves = [];
    isGameOver = false;
    currentTurn = 'x';

    Playground_Init(NUMBER_OF_GAME_PIECES);
};

Then, the function Playground_Init() should be modified as below:

const Playground_Init = (gamePiecesNum = 0) => {
    const playground = document.querySelector('#playground');

    for (let i = 1; i <= gamePiecesNum; i++) {
        const section = document.createElement('section');
        section.className = 'cell';
        section.innerHTML = '';
        section.dataset.number = i;
        section.onclick = () => {
            if (isGameOver) return;
            const selected_piece = +section.getAttribute('data-number');

            let moveStatus = makeMove(selected_piece);
            if (moveStatus?.cell) {
                moves.push(moveStatus);
            }
            if (moves.length) {
                makeResetButton();
            }
            isGameOver = gameOver();
            if (isGameOver) {
                makeWinnigPrompt();
            }
        };
        playground.appendChild(section);
    }
};

Finally we call method Playground_Init() at the end of IIFE function

Playground_Init(NUMBER_OF_GAME_PIECES);

At the end, the final code in index.js should be look like this:

'use strict';

(function () {
    let currentTurn = 'x',
        isGameOver = false;
    let moves = [];
    const NUMBER_OF_GAME_PIECES = 9;

    const Playground_Init = (gamePiecesNum = 0) => {
        const playground = document.querySelector('#playground');

        for (let i = 1; i <= gamePiecesNum; i++) {
            const section = document.createElement('section');
            section.className = 'cell';
            section.innerHTML = '';
            section.dataset.number = i;
            section.onclick = () => {
                if (isGameOver) return;
                const selected_piece = +section.getAttribute('data-number');

                let moveStatus = makeMove(selected_piece);
                if (moveStatus?.cell) {
                    moves.push(moveStatus);
                }
                if (moves.length) {
                    makeResetButton();
                }
                isGameOver = gameOver();
                if (isGameOver) {
                    makeWinnigPrompt();
                }
            };
            playground.appendChild(section);
        }
    };
    const makeWinnigPrompt = () => {
        const playground = document.querySelector('#playground');

        const winningPrompt = document.createElement('div');
        winningPrompt.className = 'winner-prompt';
        winningPrompt.innerHTML = 'You Win! 🎉';
        playground.appendChild(winningPrompt);
    };
    const resetButtonHandler = () => {
        if (moves.length === 0) return;
        const playground = document.querySelector('#playground');
        while (playground.firstChild) {
            playground.removeChild(playground.lastChild);
        }
        const actions = document.querySelector('.actions');
        actions.removeChild(actions.lastChild);
        moves = [];
        isGameOver = false;
        currentTurn = 'x';

        Playground_Init(NUMBER_OF_GAME_PIECES);
    };
    const makeMove = (cellNumber) => {
        if (moves.findIndex((x) => x.cell === cellNumber) >= 0) {
            return {};
        }
        const cellContent = document.createElement('span');
        if (currentTurn === 'x') {
            cellContent.className = 'cell-x';
            cellContent.innerHTML = 'X';
            let xCell = document.querySelector(`section.cell:nth-child(${cellNumber})`);
            xCell.appendChild(cellContent);

            currentTurn = 'o';
            return {
                turn: 'x',
                cell: cellNumber
            };
        } else {
            cellContent.className = 'cell-o';
            cellContent.innerHTML = 'O';
            let xCell = document.querySelector(`section.cell:nth-child(${cellNumber})`);
            xCell.appendChild(cellContent);

            currentTurn = 'x';
            return {
                turn: 'o',
                cell: cellNumber
            };
        }
    };
    const extractMoves = (collection = [], turn = '') => {
        return collection
            .map((x) => {
                if (x.turn === turn) {
                    return x.cell;
                }
            })
            .filter((x) => x);
    };
    const makeResetButton = () => {
        const actionsDiv = document.querySelector('.actions');
        if (actionsDiv.querySelector('button')) return;

        const resetButton = document.createElement('button');
        resetButton.className = 'btn btn-glow';
        resetButton.id = 'reset';
        resetButton.textContent = 'RESET';
        resetButton.onclick = resetButtonHandler;
        actionsDiv.appendChild(resetButton);
    };
    const gameOver = () => {
        const winningCombinations = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9],
            [1, 4, 7],
            [2, 5, 8],
            [3, 6, 9],
            [1, 5, 9],
            [3, 5, 7]
        ];

        let xMoves = extractMoves(moves, 'x');
        let oMoves = extractMoves(moves, 'o');

        let hasWon = false;

        for (let combination of winningCombinations) {
            if (xMoves.includes(combination[0]) && xMoves.includes(combination[1]) && xMoves.includes(combination[2])) {
                hasWon = true;
                break;
            }
            if (oMoves.includes(combination[0]) && oMoves.includes(combination[1]) && oMoves.includes(combination[2])) {
                hasWon = true;
                break;
            }
        }
        if (hasWon) {
            console.log('You Win! 🎉');
        }
        return hasWon;
    }; //end gameOver
    console.log('Web server is running!');

    Playground_Init(NUMBER_OF_GAME_PIECES);
})();

And that's it! Now you should have a fully functional Tic Tac Toe game using JavaScript.

Algorithm Explanation:

The game starts with X going first. When a player makes a move, the makeMove() function gets called, which updates the game state by.

The Next Step...

Stay tuned for the next part of our Tic Tac Toe series, where we'll take the game to the next level by optimizing and enhancing its functionality. We'll be incorporating popular JavaScript design patterns such as Singleton and Module patterns to make the code more efficient and maintainable.

Plus, we'll expand the game to support larger boards, allowing players to experience the thrill of competition on 6x6, 8x8, or even larger grids.

See the part 2 here

And, we'll automate the process of checking for winning combinations, so you can focus on strategizing and outsmarting your opponent without worrying about keeping track of every possible combination. Lastly, we'll display the players' scores on a dynamic scoreboard, adding an extra layer of excitement to the game. Don't miss out on the next installment of our Tic Tac Toe adventure! ;)

React Modern Forms

Saeed Panahi — Mon, 25 Aug 2025 17:54:34 +0000

Saeed Panahi

Aug 25 '25

10 Features You Should Look for in a Modern React Form Library

#react #typescript #frontend #javascript

4 min read

10 Features You Should Look for in a Modern React Form Library

Saeed Panahi — Mon, 25 Aug 2025 16:40:51 +0000

Forms are the backbone of most web applications — from login pages and checkout flows to dashboards and data collection tools. Choosing the right form library can make or break developer productivity and user experience.

In this article, we’ll cover 10 must-have features in a modern React form library and show how react-forminate implements each of them with practical examples.

1. Easy Setup & Provider Pattern

A good library should make initialization simple, without forcing boilerplate.

With react-forminate, you wrap your app in the FormRegistryProvider once:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

import { FormRegistryProvider } from "react-forminate";
import "react-forminate/dist/react-forminate.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <FormRegistryProvider>
      <App />
    </FormRegistryProvider>
  </StrictMode>
);

✅ No extra Redux, no context wiring — just plug and play.

2. JSON Schema Driven Forms

A modern library should allow forms to be declarative, not hand-coded.
In react-forminate, you define fields via JSON:

const formSchema = {
  formId: "userForm",
  fields: [
    { id: "firstName", type: "text", label: "First Name", required: true },
    { id: "age", type: "number", label: "Age", min: 18 },
    { id: "newsletter", type: "checkbox", label: "Subscribe", options: [{value: "yes", label: "Subscribe the newsletter"}] },
  ],
};

import { DynamicForm } from "react-forminate";

<DynamicForm formData={formSchema} />;

✅ Schema-driven forms reduce repetition and make forms reusable.

3. Strong Validation System

A library should support synchronous, asynchronous, and custom strategies. With react-forminate, you can register validation strategies globally:
(While react-forminate has pre-built validations like min/max, email, password, etc., which greatly reduces coding.)

import { validationEngine, type ValidationResponseType } from "react-forminate";

//International Bank Account Number validation
class IbanValidationStrategy {
  validate(value: string): ValidationResponseType {
    const ibanRegex = /^[A-Z]{2}\d{16}[A-Z0-9]{1,30}$/;
    const isFormatValid = ibanRegex.test(value);
    return {
      isValid: isFormatValid,
      message: isFormatValid ? "" : "Invalid IBAN format",
    };
  }
}

validationEngine.registerStrategy("IBAN", new IbanValidationStrategy());

And use it in schema:

{
  "id": "iban",
  "type": "text",
  "label": "IBAN",
  "validation": { "type": "IBAN" }
}

✅ Validation is modular, testable, and extensible.

4. Conditional Fields & Dynamic Visibility

Modern UIs often show fields based on user input.

{
  "id": "spouseName",
  "type": "text",
  "label": "Spouse Name",
  "visibility": {
    "dependsOn": "maritalStatus",
    "condition": "equals",
    "value": "married"
  },
  "required": true
}

✅ Forms react dynamically to user choices.

5. API-driven Options

Forms should support remote data sources for selects, grids, etc.

{
   fieldId:"country",
   type:"select",
   label:"Country",
   dynamicOptions: {
        endpoint: "https://api.first.org/data/v1/countries",
        transformResponse: (res) => {
          return Object.values(res.data).map((country: any) => ({
            value: country.country,
            label: country.country,
          }));
        },
        fetchOnInit: true,
        pagination: {
          limit: 300, //because we sure there is no more than 300 countries in the world!
        },
      },
   },
}

✅ Populate fields directly from APIs, with mapping support (transformResponse).

6. Support for All HTML Attributes

Every form library should not block HTML.

{
  "id": "email",
  "type": "text",
  "label": "Email",
  "required": true,
  "autoComplete": "email",
  "placeholder": "you@example.com"
}

✅ All attributes (autoComplete, contextMenu, etc.) flow naturally.

7. Access to Values and Form Actions Anywhere

Sometimes you need to read/write form values programmatically.

import { useFormValues, useFormReg } from "react-forminate";

const Example = () => {
  const values = useFormValues("userForm"); //useFormValues Gets form Id
  const forms = useFormReg(); //Returns the states of all used forms inside the app

  return (
    <button onClick={() => console.log(values, forms)}>
      Debug Form State
    </button>
  );
};

✅ You can grab values anywhere in the tree.

8. Customizable UI & Skeleton Loading

Modern apps need loading states and the ability to swap skeletons.

const CustomSkeleton = () => {
  return (
    <div className="animate-pulse flex flex-col space-y-4 mb-4">
      <div className="h-6 bg-indigo-400 rounded w-1/3"></div>
      <div className="h-6 bg-indigo-400 rounded w-full">Loading...</div>
    </div>
  );
};

const FormData: FormDataCollectionType = {
  formId: "SimpleForm",
  title: "Simple Form Example",
  options: {
    skeleton: {
      visible: true,
      component: <CustomSkeleton />,
    },
  },
  fields: [...]
}

✅ Built-in skeletons, or inject your own.

9. Extensibility for Custom Fields

If a library doesn’t let you add new field types, it’s limiting.

With react-forminate, you can register your own:

import { registerField, useField } from "react-forminate";

const ColorPickerField = (props) => {
   const { fieldId, eventHandlers, fieldParams, setValue, values } = useField(props);

   return <input type="color" value={values[fieldId]} onChange={e => onChange(setValue(e.target.value))} {...eventHandlers.htmlHandlers} {...fieldParams} />
};

registerField("colorPicker", ColorPickerField);

Then just use in schema:

{ "id": "favColor", "type": "colorPicker", "label": "Favorite Color" }

✅ You’re not locked in to defaults.

10. Complex Layout Support

Forms aren’t always a single column. A solid library should allow grid-based layouts.

const formData = {
  formId: "formWithLayout1",
  options: {
    layout: {
      layoutType: "grid",
    },
  },
  fields: [
    { id: "firstName", type: "text", gridColumn: 6 },
    { id: "lastName", type: "text", gridColumn: 6 },
    { id: "address", type: "textarea", gridColumn: 12 },
  ],
};

✅ react-forminate supports grid-based/flexbox-based schema layouts with Tailwind utility props or custom styling.

Conclusion

When choosing a React form library, look for:

Simple setup
Schema-driven definitions
Strong validation
Conditional logic
API integration
Full HTML attribute support
Programmatic access
Loading states
Extensible fields
Complex Layout Support

👉 react-forminate ticks all these boxes, making it a solid choice for modern applications.

📦 Install today:

npm install react-forminate

And start building smarter, faster forms.

Less Code, More Power - Why React-Forminate is Changing the Form Game

Saeed Panahi — Mon, 11 Aug 2025 08:04:20 +0000

Introduction

In the world of React development, form handling has long meant choosing between verbose boilerplate (Formik) or complex validation setups (React-Hook-Form). But what if you could achieve better results with 70% less code? Enter React-Forminate – a game-changer that delivers powerful validation, seamless state management, and clean syntax through a revolutionary declarative approach. Let’s examine how it outperforms traditional solutions while requiring dramatically less effort.

This post is a condensed version of my in-depth article—check out the full breakdown on my blog here: less-code-more-power-why-react-forminate

Let's compare three popular approaches:

Formik + Yup - The established combination
React-Hook-Form + Zod - The performance-focused stack
React-Forminate - The new declarative solution with built-in validation

Implementation Comparison

Code Comparison: Implementing the Same Signup Form

In the following examples, we'll implement identical signup forms using three popular React form libraries:

1.React Hook Form

2.Formik

3.React-Forminate

The side-by-side comparison reveals striking differences in implementation complexity. Most notably, React-Forminate achieves the same functionality with approximately 50% fewer lines of code than its counterparts, demonstrating its superior developer efficiency while maintaining full feature parity.

1. React-Hook-Form + Zod

npm i react-hook-form @hookform/resolvers zod

Click to see: react-hook-form on NPM

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { ReactNode } from "react";

// Define Zod schema
const signupSchema = z
  .object({
    firstName: z
      .string()
      .max(15, "Must be 15 characters or less")
      .nonempty("This field is required."),
    lastName: z
      .string()
      .max(20, "Must be 20 characters or less")
      .nonempty("This field is required."),
    email: z
      .string()
      .email("Invalid email address")
      .nonempty("This field is required."),
    password: z
      .string()
      .nonempty("Password is required")
      .min(8, "Password must be at least 8 characters")
      .regex(
        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
        "Password must contain at least one uppercase, one lowercase, one number and one special character"
      ),
    comparePassword: z.string().nonempty("Please confirm your password"),
  })
  .refine((data) => data.password === data.comparePassword, {
    message: "Passwords must match",
    path: ["comparePassword"],
  });

type SignupFormData = z.infer<typeof signupSchema>;

const SignupForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SignupFormData>({
    resolver: zodResolver(signupSchema),
    mode: "onBlur",
  });

  const onSubmit = (data: SignupFormData) => {
    alert(JSON.stringify(data, null, 2));
  };

  // Helper component for required field labels
  const RequiredLabel = ({
    htmlFor,
    children,
  }: {
    htmlFor: string;
    children: ReactNode;
  }) => (
    <label
      htmlFor={htmlFor}
      className="block text-sm font-medium text-gray-100"
    >
      {children} <span className="text-red-500">*</span>
    </label>
  );

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="space-y-2.5">
        <div className="space-y-2">
          <RequiredLabel htmlFor="firstName">First Name</RequiredLabel>
          <input
            id="firstName"
            type="text"
            {...register("firstName")}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {errors.firstName && (
            <div className="text-sm text-red-600">
              {errors.firstName.message}
            </div>
          )}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="lastName">Last Name</RequiredLabel>
          <input
            id="lastName"
            type="text"
            {...register("lastName")}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {errors.lastName && (
            <div className="text-sm text-red-600">
              {errors.lastName.message}
            </div>
          )}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="email">Email Address</RequiredLabel>
          <input
            id="email"
            type="email"
            {...register("email")}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {errors.email && (
            <div className="text-sm text-red-600">{errors.email.message}</div>
          )}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="password">Password</RequiredLabel>
          <input
            id="password"
            type="password"
            {...register("password")}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {errors.password && (
            <div className="text-sm text-red-600">
              {errors.password.message}
            </div>
          )}
        </div>

        <div className="space-y-2 mb-4.5">
          <RequiredLabel htmlFor="comparePassword">
            Confirm Password
          </RequiredLabel>
          <input
            id="comparePassword"
            type="password"
            {...register("comparePassword")}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {errors.comparePassword && (
            <div className="text-sm text-red-600">
              {errors.comparePassword.message}
            </div>
          )}
        </div>

        <button
          type="submit"
          className="px-4 py-2 bg-[#0457aa] cursor-pointer text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          Submit
        </button>
      </div>
    </form>
  );
};

const ReactHookForm = () => {
  return <SignupForm />;
};

export default ReactHookForm;

2. Formik + Yup

npm i formik yup

Click to see: Formik on NPM

import { useFormik } from "formik";
import { ReactNode } from "react";
import * as Yup from "yup";

const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      password: "",
      comparePassword: "",
    },
    validationSchema: Yup.object({
      firstName: Yup.string()
        .max(15, "Must be 15 characters or less")
        .required("This field is required."),
      lastName: Yup.string()
        .max(20, "Must be 20 characters or less")
        .required("This field is required."),
      email: Yup.string()
        .email("Invalid email address")
        .required("This field is required."),
      password: Yup.string()
        .required("Password is required")
        .min(8, "Password must be at least 8 characters")
        .matches(
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
          "Password must contain at least one uppercase, one lowercase, one number and one special character"
        ),
      comparePassword: Yup.string()
        .required("Please confirm your password")
        .oneOf([Yup.ref("password")], "Passwords must match"),
    }),
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  // Helper component for required field labels
  const RequiredLabel = ({
    htmlFor,
    children,
  }: {
    htmlFor: string;
    children: ReactNode;
  }) => (
    <label
      htmlFor={htmlFor}
      className="block text-sm font-medium text-gray-100"
    >
      {children} <span className="text-red-500">*</span>
    </label>
  );

  return (
    <form onSubmit={formik.handleSubmit}>
      <div className="space-y-2.5">
        <div className="space-y-2">
          <RequiredLabel htmlFor="firstName">First Name</RequiredLabel>
          <input
            id="firstName"
            name="firstName"
            type="text"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.firstName}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {formik.touched.firstName && formik.errors.firstName ? (
            <div className="text-sm text-red-600">
              {formik.errors.firstName}
            </div>
          ) : null}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="lastName">Last Name</RequiredLabel>
          <input
            id="lastName"
            name="lastName"
            type="text"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.lastName}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {formik.touched.lastName && formik.errors.lastName ? (
            <div className="text-sm text-red-600">{formik.errors.lastName}</div>
          ) : null}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="email">Email Address</RequiredLabel>
          <input
            id="email"
            name="email"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {formik.touched.email && formik.errors.email ? (
            <div className="text-sm text-red-600">{formik.errors.email}</div>
          ) : null}
        </div>

        <div className="space-y-2">
          <RequiredLabel htmlFor="password">Password</RequiredLabel>
          <input
            id="password"
            name="password"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.password}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {formik.touched.password && formik.errors.password ? (
            <div className="text-sm text-red-600">{formik.errors.password}</div>
          ) : null}
        </div>

        <div className="space-y-2 mb-4.5">
          <RequiredLabel htmlFor="comparePassword">
            Confirm Password
          </RequiredLabel>
          <input
            id="comparePassword"
            name="comparePassword"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.comparePassword}
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          {formik.touched.comparePassword && formik.errors.comparePassword ? (
            <div className="text-sm text-red-600">
              {formik.errors.comparePassword}
            </div>
          ) : null}
        </div>

        <button
          type="submit"
          className="px-4 py-2 bg-[#0457aa] cursor-pointer text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          Submit
        </button>
      </div>
    </form>
  );
};

const ReactFormik = () => {
  return <SignupForm />;
};

export default ReactFormik;

3. React-Forminate

npm i react-forminate

Click to see: React-Forminate on NPM

import { DynamicForm, type FormDataCollectionType } from "react-forminate";

const SignupForm = () => {
  const commonStyling = {
    disableDefaultStyling: true,
    containerClassName: "space-y-2",
    className:
      "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
    labelClassName: "block text-sm font-medium text-gray-700 mb-2",
  };
  const formData: FormDataCollectionType = {
    formId: "signupForm",
    title: "Signup Form",
    fields: [
      {
        fieldId: "firstName",
        type: "text",
        label: "First Name",
        required: true,
        validation: [
          {
            maxLength: 15,
            message: "Must be 15 characters or less",
          },
        ],
        ...commonStyling,
      },
      {
        fieldId: "lastName",
        type: "text",
        label: "Last Name",
        required: true,
        validation: [
          {
            maxLength: 20,
            message: "Must be 20 characters or less",
          },
        ],
        ...commonStyling,
      },
      {
        fieldId: "email",
        type: "email",
        label: "Email Address",
        required: true,
        validation: [{ type: "email", message: "Invalid email address" }],
        ...commonStyling,
      },
      {
        fieldId: "password",
        type: "password",
        label: "Password",
        required: true,
        validation: [{ type: "password" }],
        ...commonStyling,
      },
      {
        fieldId: "confirmPassword",
        type: "password",
        label: "Confirm Password",
        required: true,
        validation: [
          {
            type: "equalTo",
            equalTo: "{{password}}", // Reference to the password field
            message: "Passwords must match", // Custom error message
          },
        ],
        ...commonStyling,
      },
    ],
  };

  const onSubmit = (value: any, isValid: boolean) => {
    console.log("value", value);

    if (isValid) {
      alert(JSON.stringify(value, null, 2));
    }
  };

  return <DynamicForm formData={formData} onSubmit={onSubmit} />;
};

const ReactForminateForm = () => {
  return <SignupForm />;
};

export default ReactForminateForm;

Feature Comparison

Feature	Formik + Yup	RHF + Zod	React-Forminate
Lines of Code	120+	130+	30-50
Built-in Validation	❌	❌	✅
Declarative API	❌	❌	✅
Performance	❌	✅	✅
Schema Required	✅	✅	❌
Field Dependencies	Complex	Complex	Simple (`{{field}}`)
Learning Curve	Steep	Medium	Gentle

Pros and Cons Analysis

Formik + Yup

✅ Pros:

Mature ecosystem
Good documentation
Flexible for complex forms

❌ Cons:

Verbose implementation
Performance issues with large forms
Requires learning two libraries
Manual error handling

React-Hook-Form + Zod

✅ Pros:

Excellent performance
Strong type safety
Active community

❌ Cons:

Complex setup
Schema definition gets verbose
Steeper learning curve
Boilerplate code

React-Forminate

(Last but not least)

✅ Pros:

Minimal boilerplate
Built-in validation
Declarative configuration
Automatic error handling
Field reference system
Consistent styling approach
Faster development cycle

❌ Cons:

Newer library (smaller community)
Less customization for edge cases
Requires adopting its paradigm

Why React-Forminate Stands Out

Developer Experience

React-Forminate reduces form implementation code by 60-70% compared to alternatives. The declarative approach means you describe what you want rather than how to implement it.
Built-in Best Practices

Validation, error handling, and form state management come pre-configured with sensible defaults.
Consistent Architecture

Unlike mixing Formik/Yup or RHF/Zod, React-Forminate provides a unified solution where all parts are designed to work together seamlessly.
Rapid Prototyping

You can build complete, production-ready forms in minutes rather than hours.
Maintainability

The configuration-centric approach makes forms easier to modify and reason about.

Conclusion

While all three solutions are capable, React-Forminate offers significant advantages in:

Development speed - Build forms 3-4x faster
Code maintainability - 70% less code to manage
Learning efficiency - New developers become productive quicker
Consistency - Standardized form patterns across your application

For projects where developer productivity and clean code matter, React-Forminate represents the next evolution of form management in React.

Link to the Github source

Speed Up Your React Prototyping with Zero-Boilerplate Forms

Saeed Panahi — Tue, 05 Aug 2025 10:03:16 +0000

The Prototyping Bottleneck Every Developer Knows

Picture this: It's 2 AM during a hackathon. Your team's brilliant idea is taking shape, but you're stuck building yet another form. Again. The validation logic. The conditional fields. The styling. The form state management. You're writing the same boilerplate code you've written a hundred times before, while your clock ticks down.

This scenario plays out daily for indie hackers, startup developers, and hackathon participants. Forms are the backbone of web applications, yet they consistently slow down our prototyping velocity. But what if you could build complete, production-ready forms in minutes instead of hours?

Enter `React-Forminate`: Forms as Data, Not Boilerplate

React-Forminate flips traditional form building on its head. Instead of writing repetitive component code, you declare your form's structure and behavior in a simple JSON configuration. The library handles all the rendering, validation, and state management for you.

Check the documentation

Here's what a complete product feedback form looks like:

import { DynamicForm, FormDataCollectionType } from "react-forminate";

const feedbackForm: FormDataCollectionType = {
  formId: "productFeedback",
  title: "Product Feedback",
  fields: [
    {
      fieldId: "rating",
      type: "radio",
      label: "How would you rate our product?",
      options: [
        {
          value: "1",
          label: "1 - Poor",
        },
        {
          value: "2",
          label: "2 - Fair",
        },
        {
          value: "3",
          label: "3 - Good",
        },
        {
          value: "4",
          label: "4 - Very Good",
        },
        {
          value: "5",
          label: "5 - Excellent",
        },
      ],
      required: true,
    },
    {
      fieldId: "feedback",
      type: "textarea",
      label: "Your feedback",
      placeholder: "What did you like or dislike?",
      validation: [{ minLength: 10, message: "Please provide more detail" }],
      className: "border border-gray-400 rounded p-2 w-full", //TailwindCSS classes
      labelClassName: "block mb-1 font-medium", //TailwindCSS classes
    },
    {
      fieldId: "contactMe",
      type: "checkbox",
      label: "Can we contact you about this feedback?",
      visibility: {
        dependsOn: "rating",
        condition: "greater_than",
        value: "3", // Only show if rating > 3
      },
      options: [
        {
          value: "yes",
          label: "I confirm that I have parental consent to use this service",
        },
      ],
      description: "Please check this field to be able to submit the form",
    },
    {
      fieldId: "email",
      type: "email",
      label: "Your email",
      required: {
        fn: ({ values }) => values.contactMe === "yes",
        dependsOn: ["contactMe"],
      },
      visibility: {
        dependsOn: ["contactMe"],
        condition: "contains",
        value: "yes",
      },
      className: "border border-gray-400 rounded p-2 w-full", //TailwindCSS classes
      labelClassName: "block mb-1 font-medium", //TailwindCSS classes
    },
  ],
};

export default function ProductFeedback() {
  return (
    <DynamicForm
      formData={feedbackForm}
      onSubmit={(values, isValid) => console.log(values, isValid)}
    />
  );
}

In less than 75 lines of code, we've created:

A rating input with required validation
A feedback text area with minimum length validation
Conditional fields that only appear for positive ratings
Dependent required fields
Complete form state management
Submission handling

Have a look at the code in the Github Link

Why This Changes Everything for Rapid Prototyping

Instant UI with Built-in Best Practices

The form renders with accessible, sensible defaults that follow modern UX patterns. No more:

Wiring up Formik or React Hook Form
Building custom input components
Writing validation schemas
Managing conditional field logic

JSON is Your Single Source of Truth

Your form configuration becomes documentation. New team members can understand the form's behavior just by reading the config. Need to modify the form? Update the JSON - no component archaeology required.

Built for Real-World Complexity React-Forminate handles all the edge cases that slow down prototyping:

Dynamic fields that show/hide based on other inputs
Custom validation with server-side checks
Formatted inputs for dates, numbers, etc.
File uploads with previews and validation
Dependent dropdowns that fetch options from APIs

{
  fieldId: "country",
  type: "select",
  dynamicOptions: {
    endpoint: "/api/countries",
    transformResponse: res => res.map(c => ({ label: c.name, value: c.code }))
  }
}

Painless Styling

Add Tailwind or CSS classes directly in your config. No styled-components or CSS-in-JS needed:

{
  fieldId: "email",
  type: "email",
  className: "border rounded p-2 w-full",
  labelClassName: "block mb-1 font-medium"
}

From Hackathon to Production

What starts as a prototyping tool scales beautifully to production:

Performance: Optimized re-renders and validation
Accessibility: Proper ARIA attributes and keyboard navigation
Type Safety: Full TypeScript support
Customization: Override any part of the rendering

Try It On Your Next Project

Next time you're:

Prototyping a startup idea
Competing in a hackathon
Building an internal tool
Creating a customer feedback form

Give React-Forminate a try. What would normally take hours comes
together in minutes, letting you focus on what makes your project unique.

Install it today:

npm install react-forminate

Github Link

Your future self—well rested and ahead of schedule—will thank you.

DEV Community: Saeed Panahi

How to make an advanced TIC TAC TOE game with Javascript [part 3]

Welcome back

Why the trick of part 1 does not work anymore

The idea in one sentence

Step 1:From a cell number to a row & a column

Step 2:Paint the moves into a matrix

Step 3:Count the points of the rows

Step 4:The vertical lines — rotate 90 degrees

Step 5:The diagonals — rotate 45 and -45 degrees

Step 6:Sum up all the four directions

Step 7:Connect the engine to the clicks

Step 8:Run it

The Next Step...

How to make an advanced TIC TAC TOE game with Javascript [part 2]

Welcome back

Modify project configurations

Step 1:Modify package.json

Step 2: Migrate from Javascript to Typescript

Step 3: Modify HTML & CSS files

Let's dive into JS 🏊

Step 1:Remake the board game

Step 2:Initialize game stats & player

Step 3:Store the moves of the players

Step 4:Put the X and O on the board

Step 5:Handle the clicks

Step 6:The score board & the reset button

Step 7:Run it and see the result

The Next Step...

How to make an advanced TIC TAC TOE game with Javascript [part 1]

Introduction

Objectives of these series of article

Prerequisites

Initialize the project

Time to code Javascript

Prepare web server

Core of the game

Step 1:Define global variables

Step 2:Create the Game Board

Step 3:Create the Move Function

Step 4: Create the Check Game Over Function

Step 5: Create reset button

The Next Step...

React Modern Forms

10 Features You Should Look for in a Modern React Form Library

10 Features You Should Look for in a Modern React Form Library

1. Easy Setup & Provider Pattern

2. JSON Schema Driven Forms

3. Strong Validation System

4. Conditional Fields & Dynamic Visibility

5. API-driven Options

6. Support for All HTML Attributes

7. Access to Values and Form Actions Anywhere

8. Customizable UI & Skeleton Loading

9. Extensibility for Custom Fields

10. Complex Layout Support

Conclusion

Less Code, More Power - Why React-Forminate is Changing the Form Game

Introduction

Implementation Comparison

1. React-Hook-Form + Zod

2. Formik + Yup

3. React-Forminate

Feature Comparison

Pros and Cons Analysis

Formik + Yup

React-Hook-Form + Zod

React-Forminate

Why React-Forminate Stands Out

Conclusion

Speed Up Your React Prototyping with Zero-Boilerplate Forms

The Prototyping Bottleneck Every Developer Knows

Enter React-Forminate: Forms as Data, Not Boilerplate

Why This Changes Everything for Rapid Prototyping

From Hackathon to Production

Try It On Your Next Project

Step 1:Modify `package.json`

Enter `React-Forminate`: Forms as Data, Not Boilerplate