Total.js UI: Coding the Tic-Tac-Toe Game

Total.js UI is a powerful yet lightweight framework that simplifies creating dynamic user interfaces. This tutorial is designed to guide you through a practical project to help you understand and master the concepts of paths and ui-bind in Total.js UI.

Paths and <ui-bind> are core elements for linking data to user interface elements. Paths act as representational addresses to data or functions, allowing you to access, manipulate, and observe data effectively within your application. <ui-bind> dynamically binds this data to the interface, ensuring real-time updates. By mastering these concepts, you'll be able to create interactive and responsive web applications with ease.

In this tutorial, we will build a simple Tic-Tac-Toe game to illustrate these concepts in action. Here's a brief overview of the table of contents:

Prerequisites
Project: Tic-Tac-Toe Game

1. Prerequisites

Before starting this tutorial, ensure you have the following prerequisites to effectively follow along and complete the project:

Basic Knowledge of HTML and JavaScript:
- HTML: Familiarity with HTML tags, attributes, and basic page structure is necessary. Understanding how to create elements and handle events is crucial.
- JavaScript: A solid understanding of JavaScript fundamentals, including variables, functions, and event handling, is required. You should be able to write and debug simple scripts that interact with the DOM.

2 Access to a Modern Web Browser:

Use a modern web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. These browsers support the latest web technologies and provide developer tools for debugging and testing.

3 Code Editor:

A good code editor is essential for writing and editing your code. Recommended options include:
- Visual Studio Code: A powerful, free code editor with robust features and extensions.
- Sublime Text: A versatile and lightweight text editor with a clean interface.
- Atom: An open-source editor with a user-friendly interface and customizable features.

4 Basic Knowledge of CSS:

CSS: Understanding CSS will help you style your web pages and control the layout of your elements. You should know how to use selectors, properties, and values to apply styles to HTML elements.

5 Internet Connection:

An active internet connection is required to access the CDN links for Total.js UI and any other external libraries used in the project. Ensure your connection is stable for smooth downloading and integration of resources.

6 Basic Understanding of Data Binding Concepts:

Data Binding: While we will explain the concepts of paths and ui-bind in detail, having a foundational understanding of data binding in web development will help you grasp these concepts more efficiently.

2. Project: Tic-Tac-Toe Game

Project Overview:

In this project, we will create a simple Tic-Tac-Toe game to demonstrate the use of paths and <ui-bind> in Total.js UI. The goal is to show how these concepts can be used to manage game state and update the user interface in real-time.

Key Features:

Using Paths: Paths will be used to manage the game state, including the cells on the board and the current player. This will allow us to update the game state dynamically as players make their moves.

Applying <ui-bind>: <ui-bind> will be used to link the game state to the interface, updating the display of the board and the game status in real-time.

Here is the code for this project:

<!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>
    <script src="//cdn.componentator.com/spa.min@19.js"></script>
    <link rel="stylesheet" href="//cdn.componentator.com/spa.min@19.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        .container {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            width: 33.33%;
            height: 100px;
            text-align: center;
            vertical-align: middle;
            font-size: 2rem;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f0f0f0;
        }
        td.disabled {
            background-color: #ddd;
            cursor: not-allowed;
        }
        .status {
            margin-top: 20px;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Tic-Tac-Toe</h1>
        <table>
            <tr>
                <td data-index="0"></td>
                <td data-index="1"></td>
                <td data-index="2"></td>
            </tr>
            <tr>
                <td data-index="3"></td>
                <td data-index="4"></td>
                <td data-index="5"></td>
            </tr>
            <tr>
                <td data-index="6"></td>
                <td data-index="7"></td>
                <td data-index="8"></td>
            </tr>
        </table>
        <div class="status">
            <p><ui-bind path="game.status" config="text"></ui-bind></p>
            <button id="restartButton">Restart Game</button>
        </div>
    </div>

    <script>
        SET('game.cells', ['', '', '', '', '', '', '', '', '']);
        SET('game.currentPlayer', 'X');
        SET('game.status', 'Player X\'s turn');

        function checkWin(cells) {
            const wincomb = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6]
            ];

            for (let combination of wincomb) {
                const [a, b, c] = combination;
                if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
                    return cells[a];
                }
            }
            return null;
        }

        function checkDraw(cells) {
            return cells.every(cell => cell !== '');
        }

        $('table').on('click', 'td', function() {
            const index = $(this).data('index');
            const cells = GET('game.cells');
            const currentPlayer = GET('game.currentPlayer');

            if (cells[index] === '') {
                cells[index] = currentPlayer;
                SET('game.cells', cells);
                
                // Update the UI with the new value
                $(this).text(currentPlayer);
                $(this).addClass('disabled');

                const winner = checkWin(cells);
                if (winner) {
                    SET('game.status', `Player ${winner} wins!`);
                } else if (checkDraw(cells)) {
                    SET('game.status', 'It\'s a draw!');
                } else {
                    const nextPlayer = currentPlayer === 'X' ? 'O' : 'X';
                    SET('game.currentPlayer', nextPlayer);
                    SET('game.status', `Player ${nextPlayer}'s turn`);
                }
            }
        });

        $('#restartButton').on('click', function() {
            SET('game.cells', ['', '', '', '', '', '', '', '', '']);
            SET('game.currentPlayer', 'X');
            SET('game.status', 'Player X\'s turn');
            $('td').removeClass('disabled').text('');
        });
    </script>
</body>
</html>

Game preview

ScreenRecording2024-08-19at15.41.27-ezgif.com-video-to-gif-converter.gif

Source Code Breakdown

1. HTML Structure

The HTML structure sets up the layout of the Tic-Tac-Toe game, including the game board and status display.

Table Layout for Game Board:

    <table>
        <tr>
            <td data-index="0"></td>
            <td data-index="1"></td>
            <td data-index="2"></td>
        </tr>
        <tr>
            <td data-index="3"></td>
            <td data-index="4"></td>
            <td data-index="5"></td>
        </tr>
        <tr>
            <td data-index="6"></td>
            <td data-index="7"></td>
            <td data-index="8"></td>
        </tr>
    </table>

Each cell in the table represents a spot on the Tic-Tac-Toe board. The data-index attribute uniquely identifies each cell, which is crucial for tracking moves and updating the game state.

Game Status Display and Restart Button:

    <div class="status">
        <p><ui-bind path="game.status" config="text"></ui-bind></p>
        <button id="restartButton">Restart Game</button>
    </div>

The status of the game, such as which player's turn it is or if someone has won, is displayed here. The <ui-bind> element binds the game status (game.status) to the paragraph, ensuring that the status updates dynamically in real-time.

2. CSS for Styling

The CSS ensures the game looks clean and user-friendly. It defines the dimensions of the cells, centers the content, and visually distinguishes between active and inactive cells.

.container {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    width: 33.33%;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    font-size: 2rem;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
}
td.disabled {
    background-color: #ddd;
    cursor: not-allowed;
}
.status {
    margin-top: 20px;
    font-size: 1.2rem;
}

This styling is crucial for making the game board visually appealing and ensuring that players can easily interact with the game.

3. JavaScript Logic

The JavaScript code drives the game logic, managing the game state, handling user interactions, and updating the UI accordingly.

Initial Game State Setup:

    SET('game.cells', ['', '', '', '', '', '', '', '', '']);
    SET('game.currentPlayer', 'X');
    SET('game.status', 'Player X\'s turn');

These SET functions initialize the game state. game.cells holds the current state of the board (initially empty), game.currentPlayer tracks whose turn it is, and game.status displays the current game status.

Handling Player Moves:

    $('table').on('click', 'td', function() {
        const index = $(this).data('index');
        const cells = GET('game.cells');
        const currentPlayer = GET('game.currentPlayer');

        if (cells[index] === '') {
            cells[index] = currentPlayer;
            SET('game.cells', cells);
            
            // Update the UI with the new value
            $(this).text(currentPlayer);
            $(this).addClass('disabled');

            const winner = checkWin(cells);
            if (winner) {
                SET('game.status', `Player ${winner} wins!`);
            } else if (checkDraw(cells)) {
                SET('game.status', 'It\'s a draw!');
            } else {
                const nextPlayer = currentPlayer === 'X' ? 'O' : 'X';
                SET('game.currentPlayer', nextPlayer);
                SET('game.status', `Player ${nextPlayer}'s turn`);
            }
        }
    });

This code handles the game logic when a player clicks on a cell. It checks if the cell is empty, updates the cell with the current player's symbol, and then checks if there is a winner or if the game ends in a draw. The game state is updated using the SET function, and the UI is updated dynamically through paths and ui-bind.

Restarting the Game:

    $('#restartButton').on('click', function() {
        SET('game.cells', ['', '', '', '', '', '', '', '', '']);
        SET('game.currentPlayer', 'X');
        SET('game.status', 'Player X\'s turn');
        $('td').removeClass('disabled').text('');
    });

This function resets the game to its initial state when the "Restart Game" button is clicked, ensuring a fresh start for the players.

Utility Functions for Game Logic:

    function checkWin(cells) {
        const wincomb = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];

        for (let combination of wincomb) {
            const [a, b, c] = combination;
            if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
                return cells[a];
            }
        }
        return null;
    }

    function checkDraw(cells) {
        return cells.every(cell => cell !== '');
    }

These functions determine if a player has won the game or if the game has ended in a draw.

How Paths and ui-bind Work in This Project

Paths:
- Paths (game.cells, game.currentPlayer, game.status) are used to manage the game state centrally. By using SET and GET, the game state can be updated and accessed consistently throughout the application. This ensures that the UI and the underlying data are always in sync.

ui-bind:
- The <ui-bind> element dynamically binds the game status to the UI. Whenever game.status is updated (e.g., when a player wins, or it's the next player's turn), the bound UI element is automatically updated, providing a seamless user experience.

Conclusion

In this tutorial, we explored how to create a Tic-Tac-Toe game using Total.js UI. We demonstrated how Paths can be used to manage the game state and how <ui-bind> can be used to create a responsive and interactive user interface.

Importance of Paths: Paths help in linking data to UI elements, allowing for dynamic updates and state management.
Usage of <ui-bind>: <ui-bind> synchronizes data with the UI, ensuring real-time updates and interactions.

By working through this project, you’ve gained a solid understanding of these fundamental concepts in Total.js UI. Continue experimenting with Total.js UI and explore more complex applications to deepen your knowledge. Happy coding!