Logic in Tic-Tac-Toe 🎮

Let's go ahead and create a function for the computer to determine the moves in this game.

def auto_play():

Before completing the code, let's take a look at the logic 🤔:

1. When the game can be won on the next move, either by the computer or the player

When the game can be won on the next move by computer, the move should be done. If the game can be won by player on the next move, the best option is to prevent it. It can be implemented in Python as:

# If winning of computer is possible on the next move, go ahead and win the game
for winning_possibility in winning_possibilities:
    winning_possibility.check('O')  # Check how many conditions for winning of computer are satisfied
    if winning_possibility.p1_satisfied and winning_possibility.p2_satisfied:  # If condition 1 and 2 are satisfied, satisfy condition 3
        for point in XO_points:
            if point.x == winning_possibility.x3 and point.y == winning_possibility.y3 and point not in X_points + O_points:  # Find the point that needs to be occupied to satisfy condtion 3 and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End the function
     elif winning_possibility.p2_satisfied and winning_possibility.p3_satisfied:  # If condition 2 and 3 are satisfied, satisfy condition 1
        for point in XO_points:
            if point.x == winning_possibility.x1 and point.y == winning_possibility.y1 and point not in X_points + O_points:  # Find the point that needs to be occupied to satisfy condition 1 and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End the function
     elif winning_possibility.p3_satisfied and winning_possibility.p1_satisfied:  # If condition 1 and 3 are satisfied, satisfy condition 2
        for point in XO_points:
            if point.x == winning_possibility.x2 and point.y == winning_possibility.y2 and point not in X_points + O_points:  # Find the point that needs to be occupied to satisfy condition 2 and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End the function

# If the player might win on the next move, prevent it
for winning_possibility in winning_possibilities:  
    winning_possibility.check('X')  # Check how many conditions for winning of player are satisfied
    if winning_possibility.p1_satisfied and winning_possibility.p2_satisfied:  # If condition 1 and 2 are satisfied, prevent condition 3 from being satisfied
        for point in XO_points:
            if point.x == winning_possibility.x3 and point.y == winning_possibility.y3 and point not in X_points + O_points:  # Find the point and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End function
    elif winning_possibility.p2_satisfied and winning_possibility.p3_satisfied:  # If condition 2 and 3 are satisfied, prevent condition 1 from being satisfied
        for point in XO_points:
            if point.x == winning_possibility.x1 and point.y == winning_possibility.y1 and point not in X_points + O_points:  # Find the point and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End function
    elif winning_possibility.p3_satisfied and winning_possibility.p1_satisfied:  # If condition 1 and 3 are satisfied, prevent condition 2 from being satisfied
        for point in XO_points:
            if point.x == winning_possibility.x2 and point.y == winning_possibility.y2 and point not in X_points + O_points:  # Find the point and make sure that it is not already occupied
                point.set()  # Occupy point
                return  # End function

Some changes to function "check" in class "WinningPossibility"

To check how many conditions are currently satisfied to win the game, we need to make variables p1_satisfied, p2_satisfied and p3_satisfied accessible outside the function. So, let's rename them as self.p1_satisfied, self.p2_satisfied and self.p3_satisfied respectively. The new code for the function would be:

def check(self, for_chr):  
    self.p1_satisfied = False  
    self.p2_satisfied = False  
    self.p3_satisfied = False  
    if for_chr == 'X':  
        for point in X_points:  
            if point.x == self.x1 and point.y == self.y1:  
                self.p1_satisfied = True  
    elif point.x == self.x2 and point.y == self.y2:  
                self.p2_satisfied = True  
    elif point.x == self.x3 and point.y == self.y3:  
                self.p3_satisfied = True  
    elif for_chr == 'O':  
        for point in O_points:  
            if point.x == self.x1 and point.y == self.y1:  
                self.p1_satisfied = True  
    elif point.x == self.x2 and point.y == self.y2:  
                self.p2_satisfied = True  
    elif point.x == self.x3 and point.y == self.y3:  
                self.p3_satisfied = True  
    return all([self.p1_satisfied, self.p2_satisfied, self.p3_satisfied])

2. If center is not currently occupied

It's a good idea to occupy the center if it's not currently occupied. It can be implemented in Python as:

center_occupied = False
for point in X_points + O_points:  # Check if center is already occupied
    if point.x == 2 and point.y == 2:
        center_occupied = True
        break
 if not center_occupied:  # If center is not occupied
    for point in XO_points:
        if point.x == 2 and point.y == 2:
            point.set()  # Occupy center
            return  # End the function

3. If the center is already occupied, and currently there is no winning possibility

In this case, we need to occupy either a corner point or a middle one. If fewer than two corners are occupied by the player, "O" must try to occupy the rest. If 2 or more corners are occupied by the player, it is safer to occupy the middle points instead. This can be implemented in Python as:

corner_points = [(1, 1), (1, 3), (3, 1), (3, 3)]
middle_points = [(1, 2), (2, 1), (2, 3), (3, 2)]
num_of_corner_points_occupied_by_X = 0
for point in X_points:  # Iterate over all points occupied by the player
    if (point.x, point.y) in corner_points:
        num_of_corner_points_occupied_by_X += 1
if num_of_corner_points_occupied_by_X >= 2:  # If two or more corner points are occupied by the player
    for point in XO_points:
        if (point.x, point.y) in middle_points and point not in X_points + O_points:  # Find a middle point and make sure that it is not already occupied
            point.set()  # Occupy the point
            return  # End the function
elif num_of_corner_points_occupied_by_X < 2:  # If less than two corner points are occupied by the player
    for point in XO_points:
        if (point.x, point.y) in corner_points and point not in X_points + O_points:  # Find a corner point and make sure that it is not already occupied
            point.set()  # Occupy the point
            return  # End the function

Combining all code, let's write the function auto_play:

def auto_play():  

    # If winning is possible in the next move  
    for winning_possibility in winning_possibilities:  
        winning_possibility.check('O')  
        if winning_possibility.p1_satisfied and winning_possibility.p2_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x3 and point.y == winning_possibility.y3 and point not in X_points + O_points:  
                    point.set()  
                    return  
        elif winning_possibility.p2_satisfied and winning_possibility.p3_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x1 and point.y == winning_possibility.y1 and point not in X_points + O_points:  
                    point.set()  
                    return  
        elif winning_possibility.p3_satisfied and winning_possibility.p1_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x2 and point.y == winning_possibility.y2 and point not in X_points + O_points:  
                    point.set()  
                    return  

    # If the opponent can win in the next move  
    for winning_possibility in winning_possibilities:  
        winning_possibility.check('X')  
        if winning_possibility.p1_satisfied and winning_possibility.p2_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x3 and point.y == winning_possibility.y3 and point not in X_points + O_points:  
                    point.set()  
                    return  
        elif winning_possibility.p2_satisfied and winning_possibility.p3_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x1 and point.y == winning_possibility.y1 and point not in X_points + O_points:  
                    point.set()  
                    return  
        elif winning_possibility.p3_satisfied and winning_possibility.p1_satisfied:  
            for point in XO_points:  
                if point.x == winning_possibility.x2 and point.y == winning_possibility.y2 and point not in X_points + O_points:  
                    point.set()  
                    return  

    # If the center is free...  
    center_occupied = False  
    for point in X_points + O_points:  
        if point.x == 2 and point.y == 2:  
            center_occupied = True  
            break
     if not center_occupied:  
        for point in XO_points:  
            if point.x == 2 and point.y == 2:  
                point.set()  
                return  

    # Occupy corner or middle based on what opponent occupies  
    corner_points = [(1, 1), (1, 3), (3, 1), (3, 3)]  
    middle_points = [(1, 2), (2, 1), (2, 3), (3, 2)]  
    num_of_corner_points_occupied_by_X = 0  
    for point in X_points:
        if (point.x, point.y) in corner_points:  
            num_of_corner_points_occupied_by_X += 1  
    if num_of_corner_points_occupied_by_X >= 2:  
        for point in XO_points:  
            if (point.x, point.y) in middle_points and point not in X_points + O_points:  
                point.set()  
                return  
    elif num_of_corner_points_occupied_by_X < 2:  
        for point in XO_points:  
            if (point.x, point.y) in corner_points and point not in X_points + O_points:  
                point.set()  
                return

Creating a button to toggle play with a computer or play with a human

Let’s create a button that can switch opponents as either human or computer, as well as make a callback to change the toggle button text and command.

play_with = "Computer"
def play_with_human():
    global play_with
    play_with = "Human"  # switch opponent to human
    play_with_button['text'] = "Play with computer"  # switch text
    play_with_button['command'] = play_with_computer  # switch command so that the user can play with the computer again, if required
    play_again()  # restart game
def play_with_computer():
    global play_with
    play_with = "Computer"  # switch opponent to computer
    play_with_button['text'] = "Play with human"  # switch text
    play_with_button['command'] = play_with_human  # switch command so that the user can play with a human again, if required
    play_again()  # restart game
play_with_button = tk.Button(root, text='Play with human', font=('Ariel', 15), command=play_with_human)
play_with_button.pack()

We need to call the function auto_play whenever it's O's turn and the value of play_with is "Computer". For this, append the following code to the function set in class XOPoint:

if play_with == "Computer" and status_label['text'] == "O's turn":
    auto_play()

Result

If you find this article useful, drop a like ⭐ and follow me to get all my latest content.
Full code in GitHub repository: github.com/jothin-kumar/tic-tac-toe/

The webpage 👀

Let's go ahead and create a GUI for the game.
Step 1: Create webpage and add some CSS.

• index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <div id="play-area">
        <button class="square" id="square1"></button>
        <button class="square" id="square2"></button>
        <button class="square" id="square3"></button>
        <br>
        <button class="square" id="square4"></button>
        <button class="square" id="square5"></button>
        <button class="square" id="square6"></button>
        <br>
        <button class="square" id="square7"></button>
        <button class="square" id="square8"></button>
        <button class="square" id="square9"></button>
    </div>
</body>
</html>

• style.css

body {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    box-shadow: black 0 0 10px;
}
h1 {
    color: red;
}
#play-area {
    border: black solid 2px;
    overflow: hidden;
}
.square {
    width: 5em;
    height: 5em;
    float: left;
    border: black solid 1px;
    background-color: white;
    cursor: pointer;
}
.square:hover {
    background-color: orange;
    color: white;
}

Step 2: Make the webpage functional with JavaScript.

• script.js

let currentChr = "X";
let XPoint = [];
let OPoint = [];

class XOSquare {
    constructor(x, y, buttonId) {
        this.x = x;
        this.y = y;
        this.button = document.getElementById(buttonId);
        this.button.onclick = () => {
            this.set(buttonId)
        }
    }
    set(buttonId) {
        this.button = document.getElementById(buttonId);
        if (this.button.innerText === "") {
            this.button.innerText = currentChr;
            switchChr();
        }
    }
    reset() {
        this.button.innerText = "";
    }
}
function switchChr() {
    if (currentChr === "X") {
        currentChr = "O";
    } else {
        currentChr = "X";
    }
}
function setup() {
    let squares = [];
    let squareElements = document.getElementsByClassName("square");
    for (let i = 0; i < squareElements.length; i++) {
        let square = new XOSquare(i % 3, Math.floor(i / 3), squareElements[i].id);
        squares.push(square);
    }
}
window.onload = setup;

Add this to index.html under head tag.

<script src="script.js"></script>

Detect win and draw 🤔

Let's now implement a logic to detect win/draw.
Step 3: Implement logic to detect win.
We need to check after each move if X or O won the game. There are 8 possible ways in which one can win Tic Tac Toe:

Let's add some the JavaScript in script.js to detect game win.

let currentChr = "X";
let XPoint = [];
let OPoint = [];

class XOSquare {
    constructor(x, y, buttonId) {
        this.x = x;
        this.y = y;
        this.button = document.getElementById(buttonId);
        this.button.onclick = () => {
            this.set(buttonId)
        }
    }
    set(buttonId) {
        this.button = document.getElementById(buttonId);
        if (this.button.innerText === "") {
            this.button.innerText = currentChr;
            if (currentChr === "X") {
                XPoint.push(this);
            } else {
                OPoint.push(this);
            }
            switchChr();
            checkWin();
        }
    }
    reset() {
        this.button.innerText = "";
    }
}
class winningPossibility {
    constructor(x1, y1, x2, y2, x3, y3) {
        this.x1 = x1;
        this.y1 = y1;
        this.x2 = x2;
        this.y2 = y2;
        this.x3 = x3;
        this.y3 = y3;
    }
}
function checkWinningPossibility(winningPossibility, forChr) {
    let p1Satisfied = false;
    let p2Satisfied = false;
    let p3Satisfied = false;
    if (forChr === 'X') {
        for (let i = 0; i < XPoint.length; i++) {
            if (XPoint[i].x === winningPossibility.x1 && XPoint[i].y === winningPossibility.y1) {
                p1Satisfied = true;
            }
            else if (XPoint[i].x === winningPossibility.x2 && XPoint[i].y === winningPossibility.y2) {
                p2Satisfied = true;
            }
            else if (XPoint[i].x === winningPossibility.x3 && XPoint[i].y === winningPossibility.y3) {
                p3Satisfied = true;
            }
        }
    } else {
        for (let i = 0; i < OPoint.length; i++) {
            if (OPoint[i].x === winningPossibility.x1 && OPoint[i].y === winningPossibility.y1) {
                p1Satisfied = true;
            }
            else if (OPoint[i].x === winningPossibility.x2 && OPoint[i].y === winningPossibility.y2) {
                p2Satisfied = true;
            }
            else if (OPoint[i].x === winningPossibility.x3 && OPoint[i].y === winningPossibility.y3) {
                p3Satisfied = true;
            }
        }
    }
    return p1Satisfied && p2Satisfied && p3Satisfied;
}
const winningPossibilities = [
    new winningPossibility(1, 1, 1, 2, 1, 3),
    new winningPossibility(2, 1, 2, 2, 2, 3),
    new winningPossibility(3, 1, 3, 2, 3, 3),
    new winningPossibility(1, 1, 2, 1, 3, 1),
    new winningPossibility(1, 2, 2, 2, 3, 2),
    new winningPossibility(1, 3, 2, 3, 3, 3),
    new winningPossibility(1, 1, 2, 2, 3, 3),
    new winningPossibility(3, 1, 2, 2, 1, 3)
]
function checkWin() {
    for (let i = 0; i < winningPossibilities.length; i++) {
        if (checkWinningPossibility(winningPossibilities[i], 'X')) {
            console.log("X wins");
            return;
        }
        if (checkWinningPossibility(winningPossibilities[i], 'O')) {
            console.log("O wins");
            return;
        }
    }
}
function setup() {
    let squares = [];
    let squareElements = document.getElementsByClassName("square");
    for (let i = 0; i < squareElements.length; i++) {
        let square = new XOSquare(i % 3 + 1, Math.floor(i / 3) + 1, squareElements[i].id);
        squares.push(square);
    }
}

When X or O wins the game, console.log is triggered.
Step 4: Detect draw.
Append the following code to function "checkWin" in script.js

if (XPoint.length + OPoint.length === 9) {
    console.log("Draw");
}

Enhancements

Step 5: Add a status label and use it instead of console.log
Let's make a few changes to script.js:

• function "switchChr":

function switchChr() {
    const statusLabel = document.getElementById("status");
    if (currentChr === "X") {
        currentChr = "O";
        statusLabel.innerText = "O's turn";
    } else {
        currentChr = "X";
        statusLabel.innerText = "X's turn";
    }
}

• function "checkWin":

function checkWin() {
    const statusLabel = document.getElementById("status");
    for (let i = 0; i < winningPossibilities.length; i++) {
        if (checkWinningPossibility(winningPossibilities[i], 'X')) {
            statusLabel.innerText = "X wins";
            disableGame();
            return;
        }
        if (checkWinningPossibility(winningPossibilities[i], 'O')) {
            statusLabel.innerText = "O wins";
            disableGame();
            return;
        }
    }
    if (XPoint.length + OPoint.length === 9) {
        statusLabel.innerText = "Draw";
        disableGame();
    }
}

Add this new element in index.html under body tag

<p id="status">X's turn</p>

Add the following to style.css

#status {
    color: green;
}

Step 6: Play again
Let's add a play again button so that we don't need to refresh the webpage if we want to replay. We need to create new functions in script.js

• function "playAgain"

function playAgain() {
    const buttons = document.getElementsByClassName("square");
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].disabled = false;
        buttons[i].innerText = "";
    }
    XPoint = [];
    OPoint = [];
    currentChr = "X";
    const statusLabel = document.getElementById("status");
    statusLabel.innerText = "X's turn";
    const playAgainButton = document.getElementById("play-again");
    playAgainButton.style.display = "none";
}

• function "disableGame":

function disableGame() {
    const buttons = document.getElementsByClassName("square");
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].disabled = true;
    }
    const playAgainButton = document.getElementById("play-again");
    playAgainButton.style.display = "block";
}

Add this element to index.html under body tag:

<button id="play-again" onclick="playAgain()">Play Again</button>

Add this property to #play-area in style.css:

margin-bottom: 10px;

Add some css for #play-again (play again button) in style.css:

#play-again {
    box-shadow: black 0 0 5px;
    margin: auto;
    display: none;
}

Step 7: Theme switch.
A webpage won't be complete without a cool theme switch. So, let's add one!
Add the following JS code to script.js:

let currentTheme = 'light';
function switchTheme() {
    if (currentTheme === 'dark') {
        document.querySelectorAll('.dark-mode').forEach(function (element) {
            element.classList.remove('dark-mode');
            element.classList.add('light-mode');
        });
        currentTheme = 'light';
    }
    else {
        document.querySelectorAll('.light-mode').forEach(function (element) {
            element.classList.remove('light-mode');
            element.classList.add('dark-mode');
        });
        currentTheme = 'dark';
    }
}

Let's rewrite the CSS:

body.light-mode {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    box-shadow: black 0 0 10px;
}
h1.light-mode {
    color: red;
}
#status.light-mode {
    color: green;
}
#play-area.light-mode {
    border: black solid 2px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
.square.light-mode {
    width: 5em;
    height: 5em;
    float: left;
    border: black solid 1px;
    background-color: white;
    cursor: pointer;
}
.square.light-mode:hover {
    background-color: orange;
    color: white;
}
.square.clicked.light-mode {
    background-color: red;
    color: white;
}
#play-again.light-mode {
    box-shadow: black 0 0 5px;
    margin: auto;
    display: none;
}

body.dark-mode {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    box-shadow: white 0 0 10px;
    background: black;
}
h1.dark-mode {
    color: white;
}
#status.dark-mode {
    color: blue;
}
#play-area.dark-mode {
    border: white solid 2px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
.square.dark-mode {
    width: 5em;
    height: 5em;
    float: left;
    border: white solid 1px;
    background-color: black;
    color: white;
    cursor: pointer;
}
.square.dark-mode:hover {
    background-color: gray;
    color: white;
}
#play-again.dark-mode {
    box-shadow: black 0 0 5px;
    margin: auto;
    display: none;
}

Let's change the body tag in index.html:

<body class="light-mode">
    <h1 class="light-mode">Tic Tac Toe</h1>
    <p id="status" class="light-mode">X's turn</p>
    <button id="theme-switch" onclick="switchTheme()" class="light-mode">Switch Theme</button>
    <div id="play-area" class="light-mode">
        <button class="square light-mode" id="square1"></button>
        <button class="square light-mode" id="square2"></button>
        <button class="square light-mode" id="square3"></button>
        <br>
        <button class="square light-mode" id="square4"></button>
        <button class="square light-mode" id="square5"></button>
        <button class="square light-mode" id="square6"></button>
        <br>
        <button class="square light-mode" id="square7"></button>
        <button class="square light-mode" id="square8"></button>
        <button class="square light-mode" id="square9"></button>
    </div>
    <button id="play-again" onclick="playAgain()" class="light-mode">Play Again</button>
</body>

Full code available at GitHub repository: https://github.com/Jothin-kumar/tic-tac-toe

If you find this article useful, drop a like ⭐ and follow me to get all my latest content.

Webpage version: https://blog.jothin.tech/tic-tac-toe-with-html-css-and-js-part-1

The GUI 👀

Let's go ahead and create a GUI for the game.
Step 1: Create a tkinter window

import tkinter as tk

root = tk.Tk()
root.resizable(False, False)
root.title("Tic Tac Toe")
root.mainloop()

Step 2: Add play area and a label with text "Tic Tac Toe"

import tkinter as tk  

root = tk.Tk()  
root.resizable(False, False)  
root.title("Tic Tac Toe")  

tk.Label(root, text="Tic Tac Toe", font=('Ariel', 25)).pack()  

play_area = tk.Frame(root, width=300, height=300, bg='white')  
XO_points = []  
class XOPoint:  
    def __init__(self, x, y):  
        self.x = x  
        self.y = y  
        self.value = None  
        self.button = tk.Button(play_area, text="", width=10, height=5)  
        self.button.grid(row=x, column=y)  

    def reset(self):  
        self.button.configure(text="", bg='white')  
        self.value = None  
for x in range(1, 4):
    for y in range(1, 4):
        XOPoint(x, y) 
play_area.pack(pady=10, padx=10)  

root.mainloop()

Step 3: Make the GUI functional
Let's make the GUI functional by changing button text and color when clicked. For this, we need to make some changes to class "XOPoint" in code.

class XOPoint:  
    def __init__(self, x, y):
        self.x = x  
        self.y = y  
        self.value = None  
        self.button = tk.Button(play_area, text="", width=10, height=5, command=self.set)
        self.button.grid(row=x, column=y)

    def set(self):
        global current_chr
        if not self.value:
            self.button.configure(text=current_chr, bg='snow', fg='black')
            self.value = current_chr 
            if current_chr == "X":
                current_chr = "O"
            elif current_chr == "O":
                current_chr = "X"

    def reset(self):  
        self.button.configure(text="", bg='white')  
        self.value = None

Detect win and draw 🤔

Let's now implement a logic to detect win/draw.
Step 4: Implement logic to detect win
We need to check after each move if X or O won the game. There are 8 possible ways in which one can win Tic Tac Toe:

Let's modify the code to detect game win.

import tkinter as tk  

root = tk.Tk()  
root.resizable(False, False)  
root.title("Tic Tac Toe")  

tk.Label(root, text="Tic Tac Toe", font=('Ariel', 25)).pack()
current_chr = "X"

play_area = tk.Frame(root, width=300, height=300, bg='white')  
X_points = []
O_points = []
class XOPoint:  
    def __init__(self, x, y):
        self.x = x  
        self.y = y  
        self.value = None  
        self.button = tk.Button(play_area, text="", width=10, height=5, command=self.set)
        self.button.grid(row=x, column=y)

    def set(self):
        global current_chr
        if not self.value:
            self.button.configure(text=current_chr, bg='snow', fg='black')
            self.value = current_chr 
            if current_chr == "X":
                X_points.append(self)
                current_chr = "O"
            elif current_chr == "O":
                O_points.append(self)
                current_chr = "X"
        check_win()

    def reset(self):  
        self.button.configure(text="", bg='white')  
        self.value = None
for x in range(1, 4):
    for y in range(1, 4):
        XOPoint(x, y)
class WinningPossibility:
    def __init__(self, x1, y1, x2, y2, x3, y3):
        self.x1 = x1
        self.y1 = y1
        self.x2 = x2
        self.y2 = y2
        self.x3 = x3
        self.y3 = y3
    def check(self, for_chr):
        p1_satisfied = False
        p2_satisfied = False
        p3_satisfied = False
        if for_chr == 'X':
            for point in X_points:
                if point.x == self.x1 and point.y == self.y1:
                    p1_satisfied = True
                elif point.x == self.x2 and point.y == self.y2:
                    p2_satisfied = True
                elif point.x == self.x3 and point.y == self.y3:
                    p3_satisfied = True
        elif for_chr == 'O':
            for point in O_points:
                if point.x == self.x1 and point.y == self.y1:
                    p1_satisfied = True
                elif point.x == self.x2 and point.y == self.y2:
                    p2_satisfied = True
                elif point.x == self.x3 and point.y == self.y3:
                    p3_satisfied = True
        return all([p1_satisfied, p2_satisfied, p3_satisfied])
winning_possibilities = [
    WinningPossibility(1, 1, 1, 2, 1, 3),
    WinningPossibility(2, 1, 2, 2, 2, 3),
    WinningPossibility(3, 1, 3, 2, 3, 3),
    WinningPossibility(1, 1, 2, 1, 3, 1),
    WinningPossibility(1, 2, 2, 2, 3, 2),
    WinningPossibility(1, 3, 2, 3, 3, 3),
    WinningPossibility(1, 1, 2, 2, 3, 3),
    WinningPossibility(3, 1, 2, 2, 1, 3)
]
def check_win():
    for possibility in winning_possibilities:
        if possibility.check('X'):
            print("X won!")
            return
        elif possibility.check('O'):
            print("O won!")
            return
play_area.pack(pady=10, padx=10)  

root.mainloop()

Step 5: Detect draw
If all 9 squares were filled and still no one won the game, it's a draw! Detecting game draw is simple. Just append the following code to the function "check_win".

if len(X_points) + len(O_points) == 9:
        print("Draw!")

Enhancements

Now that everything works fine, we can improve it further.
Step 6: Status Label
Tic Tac Toe is a GUI game and displaying game result in GUI is better than printing them in console. So, let's create a tkinter Label via which we can display result. Add the following code:

status_label = tk.Label(root, text="", font=('Ariel', 15), bg='green', fg='snow')
status_label.pack(fill=tk.X)

Also, we need to make some changes to function "check_win":

def check_win():
    for possibility in winning_possibilities:
        if possibility.check('X'):
            status_label.configure(text="X won!")
            return
        elif possibility.check('O'):
            status_label.configure(text="O won!")
            return
    if len(X_points) + len(O_points) == 9:
        status_label.configure(text="Draw!")

Step 7: Display whose turn it is
The status label is not used till someone wins the game. Let's use it to display if it's X's turn or O's turn! We need to make some changes to function "set" in class "XOPoint".

def set(self):
        global current_chr
        if not self.value:
            self.button.configure(text=current_chr, bg='snow', fg='black')
            self.value = current_chr
            if current_chr == "X":
                X_points.append(self)
                current_chr = "O"
                status_label.configure(text="O's turn")
            elif current_chr == "O":
                O_points.append(self)
                current_chr = "X"
                status_label.configure(text="X's turn")
        check_win()

Also, the text property of status label must be changed:

status_label = tk.Label(root, text="X's turn", font=('Ariel', 15), bg='green', fg='snow')

Step 8: Create Play again button
Once the game is over, the game needs to be disabled and a button to play the game again must be displayed. Let's add the following code to disable the game once it is over:

XO_points = []
def disable_game():
    for point in XO_points:
        point.button.configure(state=tk.DISABLED)

We need to make changes to the function "check_win" and to the for loops that create "XOPoint" objects:

for x in range(1, 4):
    for y in range(1, 4):
        XO_points.append(XOPoint(x, y))

def check_win():
    for possibility in winning_possibilities:
        if possibility.check('X'):
            status_label.configure(text="X won!")
            disable_game()
            return
        elif possibility.check('O'):
            status_label.configure(text="O won!")
            disable_game()
            return
    if len(X_points) + len(O_points) == 9:
        status_label.configure(text="Draw!")
        disable_game()

Add the following code to display Play again button once the game is over:

def play_again():
    global current_chr
    current_chr = 'X'
    for point in XO_points:
        point.button.configure(state=tk.NORMAL)
        point.reset()
    status_label.configure(text="X's turn")
    play_again_button.pack_forget()
play_again_button = tk.Button(root, text='Play again', font=('Ariel', 15), command=play_again)

We also need to make changes to function "disable_game" and function "reset" in class "XOPoint":

def disable_game():
    for point in XO_points:
        point.button.configure(state=tk.DISABLED)
    play_again_button.pack()

def reset(self):
        self.button.configure(text="", bg='lightgray')
        if self.value == "X":
            X_points.remove(self)
        elif self.value == "O":
            O_points.remove(self)
        self.value = None

Summary

The steps done in this tutorial are:

1. Create a tkinter window.
2. Add play area and a label with text "Tic Tac Toe".
3. Make the GUI functional.
4. Implement logic to detect win.
5. Detect draw.
6. Status Label.
7. Display whose turn it is.
8. Create Play again button.

Final code:

import tkinter as tk

root = tk.Tk()
root.resizable(False, False)
root.title("Tic Tac Toe")

tk.Label(root, text="Tic Tac Toe", font=('Ariel', 25)).pack()
status_label = tk.Label(root, text="X's turn", font=('Ariel', 15), bg='green', fg='snow')
status_label.pack(fill=tk.X)
def play_again():
    global current_chr
    current_chr = 'X'
    for point in XO_points:
        point.button.configure(state=tk.NORMAL)
        point.reset()
    status_label.configure(text="X's turn")
    play_again_button.pack_forget()
play_again_button = tk.Button(root, text='Play again', font=('Ariel', 15), command=play_again)

current_chr = "X"

play_area = tk.Frame(root, width=300, height=300, bg='white')
XO_points = []
X_points = []
O_points = []
class XOPoint:
    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.value = None
        self.button = tk.Button(play_area, text="", width=10, height=5, command=self.set)
        self.button.grid(row=x, column=y)

    def set(self):
        global current_chr
        if not self.value:
            self.button.configure(text=current_chr, bg='snow', fg='black')
            self.value = current_chr
            if current_chr == "X":
                X_points.append(self)
                current_chr = "O"
                status_label.configure(text="O's turn")
            elif current_chr == "O":
                O_points.append(self)
                current_chr = "X"
                status_label.configure(text="X's turn")
        check_win()

    def reset(self):
        self.button.configure(text="", bg='lightgray')
        if self.value == "X":
            X_points.remove(self)
        elif self.value == "O":
            O_points.remove(self)
        self.value = None
for x in range(1, 4):
    for y in range(1, 4):
        XO_points.append(XOPoint(x, y))
class WinningPossibility:
    def __init__(self, x1, y1, x2, y2, x3, y3):
        self.x1 = x1
        self.y1 = y1
        self.x2 = x2
        self.y2 = y2
        self.x3 = x3
        self.y3 = y3
    def check(self, for_chr):
        p1_satisfied = False
        p2_satisfied = False
        p3_satisfied = False
        if for_chr == 'X':
            for point in X_points:
                if point.x == self.x1 and point.y == self.y1:
                    p1_satisfied = True
                elif point.x == self.x2 and point.y == self.y2:
                    p2_satisfied = True
                elif point.x == self.x3 and point.y == self.y3:
                    p3_satisfied = True
        elif for_chr == 'O':
            for point in O_points:
                if point.x == self.x1 and point.y == self.y1:
                    p1_satisfied = True
                elif point.x == self.x2 and point.y == self.y2:
                    p2_satisfied = True
                elif point.x == self.x3 and point.y == self.y3:
                    p3_satisfied = True
        return all([p1_satisfied, p2_satisfied, p3_satisfied])
winning_possibilities = [
    WinningPossibility(1, 1, 1, 2, 1, 3),
    WinningPossibility(2, 1, 2, 2, 2, 3),
    WinningPossibility(3, 1, 3, 2, 3, 3),
    WinningPossibility(1, 1, 2, 1, 3, 1),
    WinningPossibility(1, 2, 2, 2, 3, 2),
    WinningPossibility(1, 3, 2, 3, 3, 3),
    WinningPossibility(1, 1, 2, 2, 3, 3),
    WinningPossibility(3, 1, 2, 2, 1, 3)
]
def disable_game():
    for point in XO_points:
        point.button.configure(state=tk.DISABLED)
    play_again_button.pack()
def check_win():
    for possibility in winning_possibilities:
        if possibility.check('X'):
            status_label.configure(text="X won!")
            disable_game()
            return
        elif possibility.check('O'):
            status_label.configure(text="O won!")
            disable_game()
            return
    if len(X_points) + len(O_points) == 9:
        status_label.configure(text="Draw!")
        disable_game()
play_area.pack(pady=10, padx=10)

root.mainloop()

GitHub repo link: https://github.com/Jothin-kumar/tic-tac-toe If you find this article useful, drop a like ⭐ and follow me to get all my latest content.
Part 2 of this tutorial: https://blog.jothin.tech/tic-tac-toe-with-python-tkinter-part-2

GUI stands for Graphical user interface. Unlike text based interfaces (terminals), GUI uses graphical and interactive components for the user to interact with.

What is tkinter?

• tkinter is an easy to use and standard GUI for Python.
• tkinter stands for Tk interface.
• tkinter is supported by most platforms including Linux, WIndows and macOS.

Summary:

The topics covered in this tutorial are:

• Tkinter widgets
• Tkinter message boxes
• Tkinter simple dialogs

Before you start:

Make sure that the following requirements are installed:

• Python 3
• tkinter

Installation instructions for Linux.

• Run the following commands in your terminal:

sudo apt-get install python3 python3-tk

• Ensure proper installation of tkinter by running this command in terminal:

python3 -m tkinter

• A window should popup after running this command.

Installation instructions for Windows.

• tkinter can be downloaded using Python installer. Run the following command in cmd after installing tkinter to ensure proper installation:

python -m tkinter

• A window should popup after running this command.

Let's start!

• All components of a GUI are placed inside a window. Here is the code to create a blank tkinter window:

import tkinter as tk  # Importing the tkinter module.

my_window = tk.Tk()  # Creating a window.
my_window.mainloop()  # mainloop should be called at the end of script for the window to function properly.

Widgets

The 3 basic widgets in tkinter are:

• Label - Used to display text.
• Button - Interactive widget on which user can click on.
• Entry - Interactive widget to get user input.

Label

The Label widget in tkinter can be used to display text of various sizes and styles. Here is the code to use Label widget in a window:

import tkinter as tk  # Importing the tkinter module.

my_window = tk.Tk()  # Creating a window.
my_label = tk.Label(text='Hello, tkinter!')  # Creating a Label.
my_label.pack()  # Displaying the Label in window.
my_window.mainloop()  # mainloop should be called at the end of script for the window to function properly.

Properties of a Label widget.

The major properties of a Label widget are:

• Text

• Background colour

• Foreground colour

• Font family and size

  Here is the code to make a Label widget with custom properties:

  import tkinter as tk
  
  my_window = tk.Tk()
  my_label = tk.Label(
      text='I am a label widget with custom properties',
      background='black',  # bg parameter can be used instead of background parameter as a short hand.
      foreground='white',  # fg parameter can be used instead of foreground parameter as a short hand.
      font=('Ariel', 25)  # Syntax: (font family, size).
  )
  my_label.pack()
  my_window.mainloop()
  

Button

The Button widget in tkinter can be used to call a command when clicked. Here is the code to use Button widget in a window:

import tkinter as tk  # Importing the tkinter module.

def command_to_be_called_when_button_is_pressed():
    print('The button is pressed.')

my_window = tk.Tk()  # Creating a window.
my_button = tk.Button(text='Click me', command=command_to_be_called_when_button_is_pressed)  # Creating a Button.
my_button.pack()  # Displaying the Button widget in window.
my_window.mainloop()  # mainloop should be called at the end of script for the window to function properly.

Properties of a Button widget.

The major properties of a Button widget are:

• Text

• Background colour

• Foreground colour

• Font

• Command

  Usage is the same as Label widget. Arguements can be passed.

Entry

The Entry widget in tkinter can be used to get user input graphically. The text entered in an Entry widget can be obtained by get() method. Here is the code to use Entry widget along with Button widget in a window:

import tkinter as tk  # Importing the tkinter module.

my_window = tk.Tk()  # Creating a window.
my_entry = tk.Entry()  # Creating a Entry widget.

def submit():  # Command to be called by the Button widget.
    print(my_entry.get())

my_button = tk.Button(text='Submit', command=submit)  # Creating a Button widget.
my_entry.pack()  # Displaying the Entry widget in window.
my_button.pack()  # Displaying the Button widget in window.
my_window.mainloop()  # mainloop should be called at the end of script for the window to function properly.

Properties of an Entry widget:

The major properties of an Entry widget are:

• Background colour

• Foreground colour

• Font family and size

  Usage is the same as Label widget. Arguements can be passed.

Message boxes

Other than widgets, Message boxes can be used in tkinter for basic prompts. Message boxes cannot be used without a main window. The Message boxes available in tkinter can be classified into two types based on usage:

1. Message boxes for showing information.
2. Message boxes for asking questions.

Message boxes for showing information.

There are three message boxes for showing information. The code below explains them.

import tkinter as tk
from tkinter import messagebox

main_window = tk.Tk()

messagebox.showinfo('Information title.', 'Information description.')
messagebox.showwarning('Warning title', 'Warning description')
messagebox.showerror('Error title', 'Error description.')

main_window.mainloop()

Message boxes for asking questions.

There are two message boxes for asking questions. The code below explains them.

import tkinter as tk
from tkinter import messagebox

main_window = tk.Tk()

user_likes_python = messagebox.askyesno('yes or no question', 'Do you like Python?')
# The messagebox returns True if yes is selected, returns False if no is selected or message box is closed.
if user_likes_python:
    print('You like Python')
retry = messagebox.askretrycancel('retry or cancel?', 'An error occured, please select retry or cancel.')  # Returns True if retry is selected, returns False if cancel is selected or message box is closed.
if retry:
    print('You selected retry')

main_window.mainloop()

Simple dialogs.

Simple dialogs are like Message boxes and they too require a main window to run. Unlike Message boxes, Simple dialogs are used for getting input(strings, integers and floats). The code below explains how to get input using a simpledialog.

import tkinter as tk
from tkinter import simpledialog

main_window = tk.Tk()

name = simpledialog.askstring('String input using tkinter simple dialog', 'What is your name?')
age = simpledialog.askinteger('Integer input using tkinter simple dialog', 'What is your age?')
favourite_decimal_num = simpledialog.askfloat('Float input using tkinter simple dialog', 'What is your favourite decimal number?')
"""
All of the above functions return the input given or return None if cancel is clicked or if the simpledialog is closed.
"""

main_window.mainloop()

Thank you!

About me

2FA stands for two factor authentication. It adds an extra layer of security other than password. The user must enter a 2FA code along with password in order to sign in. 2FA codes can be generated in two ways, time based codes and counter based codes.

Advantages of 2FA over E-Mail or SMS verification:

• No network required: 2FA codes can be generated offline.
• 🛡️ Better security.

Time based codes vs counter based code.

2FA with Python

Requirements

• onetimepass python package (Can be installed using the command: pip install onetimepass).
• Your favourite authenticator app (Example: Google authenticator, Microsoft authenticator).

Let's start!👀

For both time based codes and counter based code, a secret string is securely shared with the authenticator app while setting up 2FA. All codes are generated based on this secret string. This string is not case sensitive.

🕖Time based codes

Let us now, write a simple Python script to understand how time based 2FA works!

from onetimepass import valid_totp
from secrets import choice


def generate_secret():  # Function to return a random string with length 16.
    secret = ''
    while len(secret) < 16:
        secret += choice('ABCDEFGHIJKLMNOPQRSTUVWXYZ234567')
    return secret


secret = generate_secret()
print('Enter the following secret in your authenticator app: ', secret)
print("""
Instructions for saving this secret it Google Authenticator:
1. Open Google Authenticator.
2. Click plus icon at the right bottom.
3. Click Enter a setup key.
4. Enter an Account name of your choice and enter the secret provided above.
5. Click Add.
""")
while True:
    otp = int(input('Please enter the otp generated by your authenticator app: '))
    authenticated = valid_totp(otp, secret)
    if authenticated:
        print('Correct otp, Authenticated!')
    elif not authenticated:
        print('Wrong otp, please try again.')

✔️ Counter based codes

Here is a complete Python script to understand how counter based 2FA works!

from onetimepass import valid_hotp
from secrets import choice


def generate_secret():  # Function to return a random string with length 16.
    secret = ''
    while len(secret) < 16:
        secret += choice('ABCDEFGHIJKLMNOPQRSTUVWXYZ234567')
    return secret


secret = generate_secret()
print('Enter the following secret in your authenticator app: ', secret)
print("""
Instructions for saving this secret it Google Authenticator:
1. Open Google Authenticator.
2. Click plus icon at the right bottom.
3. Click Enter a setup key.
4. Enter an Account name of your choice and enter the secret provided above.
5. Click Add.
""")
while True:
    counter = 0
    otp = int(input('Please enter the otp generated by your authenticator app: '))
    authenticated = valid_hotp(otp, secret)
    if authenticated:
        print('Correct otp, Authenticated!')
        counter += 1
    elif not authenticated:
        print('Wrong otp, please try again.')

Thank you! Leave a comment and a like if you find this article useful :-)

About me

1. Debian operating system.
2. Windows operating system with Python 3, pip and inno setup installed.

Creating inno setup installer (on windows)

In order to create an installer, we must convert the application script to executable. We can do this using pyinstaller.
Step 1: create a directory my_app.
Step 2: Create a new file my_app/app.py and copy the following contents to it:

import tkinter as tk

root = tk.Tk()
tk.Label(master=root, text="Hello world", font=("Arial", 30)).pack()
root.mainloop()

Step 3: Navigate to my_app directory and run the following command in CMD:

pip install pyinstaller
pyinstaller --onefile app.py -w

Step 4: Wait for the command to complete and open inno setup compiler.
Step 5: On the inno setup welcome screen, click "Create a new script file using the Script Wizard" and hit ok.
Step 6: Follow on screen instructions (main executable file is in my_app/dist/app.exe).
Step 7: Compile the script and done!

Creating deb package (On Debian OS)

Just like windows, we must create an executable from our script for deb package.
Step 1: Create a directory my_app
Step 2: Create a new file my_app/app.py and copy the following contents to it:

import tkinter as tk

root = tk.Tk()
tk.Label(master=root, text="Hello world", font=("Arial", 30)).pack()
root.mainloop()

Step 3: Navigate to my_app directory and run the following command in terminal:

pip install pyinstaller
pyinstaller app.py -w

Step 4: wait for it to complete and create the following directories.

my-app_1.0.0/DEBIAN
my-app_1.0.0/my_app
my-app_1.0.0/usr/share/applications

Step 5: Create a file my-app_1.0.0/DEBIAN/control and copy the following contents into it.

Package: my-app
Version: 1.0.0
Architecture: all
Maintainer: [Your name]
Copyright: [year] [Your name]
License: MIT
Homepage: [homepage url]
Description: My deb package.

Step 6: Create a file my-app_1.0.0/usr/share/applications/my-app.desktop and copy the following contents into it.

[Desktop Entry]
Type=Application
Exec=/my_app/app
Hidden=false
NoDisplay=false
Name=My app
Comment=My app.

Step 7: Copy all files and folders from my_app/dist to my-app_1.0.0/my_app
Step 8: navigate to the parent directory of my-app_1.0.0 and execute the following command:

dpkg-deb --build my-app_1.0.0

Step 9: Wait for it to complete and done! You will find a deb package named my-app_1.0.0.deb

About me:

Thank you!