Design Tic Tac Toe

3 Mins Read //

Low Level Design (LLD)

Low level Design problems, are common during SDE Interviews and they are real fun, as the canvas is free to pain with just the size of the canvas (limitations/constrains) discussed by you and your interviewer. But overall it’s a fun exercise.
Can we make it an even more fun exercise?? YEAH

Fusion of Web with LLD

Java Swings, Qt-C,C++,... , tKinter-Python these are complex to build for smaller problems, can we adopt anything easier for visualizing and OOPS fundamentals.
TypeScript to the rescue, we can design our application Low-Level conceptually with a neat interface for your interviewer to play on! This blog will discuss typeScript with some examples, so that even you could design your own!

Defining Classes, Headers

  • Interfaces in typeScript, to define abstracted structure, what if you want optional fields simple add a ? in your variable player1_Name? - This interface holds the configuration for the Game.
    interface gameConfig {
        player1_Name?: String,
        player2_Name?: String,
        totalGames: number
    }
    var defaultConfig: gameConfig = { 
        player1_Name:"Tom",
        player2_Name:"Jerry",
        totalGames: 0
    }
  • Classes, are same - we just specify the constructor with constructor Keyword and we export the Class as a module so other .ts files can this file.
    class Board {
        // Cells: 0 - Empty, 1 - 'X', 2 - 'O'
        grid:number[][];
        constructor() {
            this.grid = [[-1,-1,-1], [-1,-1,-1], [-1,-1,-1]]
        }
        public resetBoard() {}
        private playMove() {}
        private checkBoard() {}
        private declareWinner() {}
    }
    export default {Board};
  • Declaring Objects -> var board = new Board();

That’s it right? - well we do have inheritance using the extends keyword. But a ticTacToe design does not need that, our focus here will to design 2 Classes, Scoreboard, Board where the scope of Scoreboard will remain until the closure of application.
While the Board is reset after closure of application or Reset Button is clicked.

Well enough of the Obvious, where does the real magic happen?

 1const scoreboardBody: HTMLElement | any = document.getElementById("scoreboard_body")
 2const boardCells: HTMLElement | any = document.querySelectorAll(".grid-cell")
 3
 4const scoreboard = new Scoreboard(scoreboardBody);
 5var board = new Board(,boardCells, scoreboard);
 6
 7
 8class Board {
 9    grid:number[][];
10    boardCells!: HTMLElement[];
11    curMove: number
12    gameStart!: Date
13    moves: number
14    scoreboard: Scoreboard
15    CPU:boolean = false;
16    constructor(boardCells:HTMLElement[], scoreboard: Scoreboard) {
17        this.grid = [[-1,-1,-1], [-1,-1,-1], [-1,-1,-1]]
18        this.moves = 0
19        this.boardCells = boardCells
20        this.scoreboard = scoreboard
21        this.boardCells.forEach((cell:any) => {
22            cell.addEventListener('click', (evt:Event) => {
23                const gridCell: HTMLElement | any = evt.target
24                const gridIdx:number = Number(evt.target["id"][4])
25                if(gridCell.innerHTML == "")
26                    this.playMove(gridIdx, gridCell)
27            })
28        });
29    }
30}

Now we have defined access with types, to access DOM elements, and we define a eventListener in the constructor phase, to access these elements designed by our code.

  • Line 2 - Gives access to all the grid-cells from the DOM, which are div with classes.
  • Line 21 - Attach a listener, and call the playMove method internally to do all the controlling logic.

Simple!, this is the key to get a person who can understand js easily - now you could go ahead and design the game!

Wait, what about compilation?

  • Yeah this was tricky, following the handbook got me nowhere, saw how the compilation was done for general Node.js and it worked out, I used the require.js module, you could refer to my tsconfig.json.
  • Once you compiled the project and got the output file generated by the typescript compiler
  • Add these snippets inside your index.html
...
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
<script src="./scripts/App.js"></script>
<script>
    requirejs(['App']);
</script>

References

categories: [ design , ts , guide ]