DEV Community: Ezhill Ragesh

Beating the Odds: The Mathematics Behind Casino Profits

Ezhill Ragesh — Mon, 15 Jul 2024 00:53:27 +0000

Have you ever wondered why casinos always seem to win? In “Beating the Odds: The Mathematics Behind Casino Profits,” we’ll explore the simple math and clever strategies that ensure casinos make money in the long run. Through easy-to-understand examples and Monte Carlo simulations, we’ll reveal the secrets behind the house’s edge. Get ready to discover how casinos turn the odds in their favor!

Understanding the House Edge

The house edge is a fundamental concept in the world of casinos. It represents the average profit that the casino expects to make from each bet placed by players. Essentially, it is the percentage of each bet that the casino will retain in the long run.

The house edge exists because casinos do not pay out winning bets according to the “true odds” of the game. True odds represent the actual probability of an event occurring. By paying out at slightly lower odds, casinos ensure they make a profit over time.

The house edge (HE) is defined as the casino profit expressed as a percentage of the player’s original bet.

** European Roulette ** has only one green zero, giving it 37 numbers in total. If a player bets $1 on red, they have an 18/37 chance of winning $1 and a 19/37 chance of losing $1. The expected value is:

Expected Value=( 1 × 18/37 )+( −1 × 19/37 )= 18/37 − 19/37 = −1/37 ≈ −2.7%

Hence, In the European Roulette the house edge(HE) is around 2.7%.

Let’s make the game of our own to understand it more, A Simple Dice roll game.

import random

def roll_dice():
    roll = random.randint(1, 100)

    if roll == 100:
        print(roll, 'You rolled a 100 and lost. Better luck next time!')
        return False
    elif roll <= 50:
        print(roll, 'You rolled between 1 and 50 and lost.')
        return False
    else:
        print(roll, 'You rolled between 51 and 99 and won! Keep playing!')
        return True

In this game:

The player has a 1/100 chance of losing if the roll is 100.
The player has a 50/100 chance of losing if the roll is between 1 and 50.
The player has a 49/100 chance of winning if the roll is between 51 and 99.

Expected Value =(1× 49/100) + ( −1× 51/100) = 49/100 − 51/100 = −2/100 ≈ −2%

Therefore, the house edge is 2%.

Understanding Monte Carlo Simulation

Monte Carlo simulations are a powerful tool used to understand and predict complex systems by running numerous simulations of a process and observing the outcomes. In the context of casinos, Monte Carlo simulations can model various betting scenarios to show how the house edge ensures long-term profitability. Let’s explore how Monte Carlo simulations work and how they can be applied to a simple casino game.

What is a Monte Carlo Simulation?

A Monte Carlo simulation involves generating random variables to simulate a process multiple times and analyzing the results. By performing thousands or even millions of iterations, we can obtain a distribution of possible outcomes and gain insights into the likelihood of different events.

Applying Monte Carlo Simulation to the Dice Roll Game

We’ll use a Monte Carlo simulation to model the dice roll game we discussed earlier. This will help us understand how the house edge affects the game’s profitability over time.

`def monte_carlo_simulation(trials):
    wins = 0
    losses = 0

    for _ in range(trials):
        if roll_dice():
            wins += 1
        else:
            losses += 1

    win_percentage = (wins / trials) * 100
    loss_percentage = (losses / trials) * 100
    houseEdge= loss_percentage-win_percentage
    print(f"After {trials} trials:")
    print(f"Win percentage: {win_percentage:.2f}%")
    print(f"Loss percentage: {loss_percentage:.2f}%")
    print(f"House Edge: {houseEdge:.2f}%")

# Run the simulation with 10,000,000 trials
monte_carlo_simulation(10000000)`

Interpreting the Results

In this simulation, we run the dice roll game 10,000,000 times to observe the win and loss percentages. Given the house edge calculated earlier (2%), we expect the loss percentage to be slightly higher than the win percentage.

After running the simulation, you might see results like:

These results closely align with the theoretical probabilities (49% win, 51% loss), demonstrating how the house edge manifests over a large number of trials. The slight imbalance ensures the casino’s profitability in the long run.

Visualizing Short-Term Wins and Long-Term Losses

Monte Carlo simulations are powerful for modeling and predicting outcomes through repeated random sampling. In the context of gambling, we can use Monte Carlo simulations to understand the potential outcomes of different betting strategies.

We’ll simulate a single bettor who places the same initial wager in each round and observe how their account value evolves over a specified number of wagers.

Here’s how we can simulate and visualize the betting journey using Matplotlib:

def bettor_simulation(funds, initial_wager, wager_count):
    value = funds
    wager = initial_wager

    # Lists to store wager count and account value
    wX = []
    vY = []

    current_wager = 1

    while current_wager <= wager_count:
        if roll_dice():
            value += wager
        else:
            value -= wager

        wX.append(current_wager)
        vY.append(value)
        current_wager += 1

    return wX, vY

# Parameters for simulation
funds = 10000
initial_wager = 100
wager_count = 1000

# Run the simulation for a single bettor
wager_counts, account_values = bettor_simulation(funds, initial_wager, wager_count)

# Plotting the results
plt.figure(figsize=(12, 6))
plt.plot(wager_counts, account_values, label='Bettor 1', color='blue')
plt.xlabel('Wager Count')
plt.ylabel('Account Value')
plt.title('Betting Journey: Short-Term Wins vs Long-Term Losses')
plt.grid(True)
plt.legend()

# Highlighting the short-term and long-term trend
plt.axhline(y=funds, color='gray', linestyle='--', label='Initial Funds')
plt.axhline(y=account_values[0], color='green', linestyle='--', label='Starting Account Value')
plt.axhline(y=account_values[-1], color='red', linestyle='--', label='Final Account Value')

plt.legend()
plt.show()

This graph illustrates how a bettor’s account value can fluctuate over time due to wins and losses. Initially, there may be periods of winning (green line above the starting value), but as the number of wagers increases, the cumulative effect of the house edge becomes evident. Eventually, the bettor’s account value tends to decline towards or below the initial funds (gray line), indicating long-term losses.

Conclusion

Understanding the mathematics behind casino profits reveals a clear advantage for the house in every game through the concept of the house edge. Despite occasional wins, the probability built into casino games ensures that most players will lose money over time. Monte Carlo simulations vividly illustrate these dynamics, showing how even short-term wins can mask long-term losses due to the casino’s statistical advantage. This insight into the mathematical certainty of casino profitability underscores the importance of informed decision-making and responsible gambling practices.

Next, we could explore additional visualizations or variations, such as comparing different betting strategies or analyzing the impact of varying initial wagers on the bettor’s outcomes.

Stay Connected:

GitHub: ezhillragesh
Twitter: ezhillragesh
Website: ragesh.me

Don’t hesitate to share your thoughts, ask questions, and contribute to the discussion.

Happy coding!

Building Your own Simple JSON Database

Ezhill Ragesh — Wed, 03 Jan 2024 06:00:36 +0000

Building Your own Simple JSON Database

Introduction

So What exactly is a Database?

Databases are like digital filing cabinets. They help store and organize information in a structured way, making it easy to find and manage data. From tracking your online shopping history to storing usernames and passwords securely, databases quietly handle the behind-the-scenes work, ensuring our digital experiences run smoothly. They’re the unsung heroes of the data world, quietly doing their job to keep things organized and accessible.

Now What is JSON?

JSON, or JavaScript Object Notation, is a lightweight and readable way for computers to exchange information. Think of it as the language data speaks when computers want to share notes. With its human-readable format and versatility, JSON has become a go-to choice for representing data structures in web development. It’s like the universal translator, allowing different systems to understand and communicate effortlessly.

In this JSON example, we have information about a student named Ezhill Ragesh. The data includes details such as the student’s name, title , and the year of study. This simple structure showcases how JSON neatly organizes data for easy interpretation and utilization in various applications.

Together, databases and JSON form a dynamic duo, simplifying how we handle, store, and interact with data in the vast digital landscape.

Working with Your Simple JSON Database:

Step 1: Reading Data

Our database starts with reading data. Using the readDB function, we can fetch information effortlessly. For instance, consider a scenario where we want to retrieve details about a student. A simple call like *readDB('students.json') *brings the stored data to our fingertips.

Step 2: Writing Data

When it’s time to add new information, the writeDB function comes into play. It's like adding a new book to our digital library. Just provide the data and the file name, and voila—your database is updated. For example, writeDB(newStudentData, 'students.json') seamlessly incorporates fresh details into our database.

Step 3: Updating Records

As time goes by, information might need tweaking. That’s where the updateDB function shines. Need to change a student's title or update the year? A quick call like updateDB(updatedStudentData, 'students.json') takes care of the modifications.

Start Building Now!

1. Importing Required Module

const fs = require(‘fs’);

This block imports the File System (fs) module, a core module in Node.js used for file-related operations. It's essential for reading and writing data to files in Node.js .

2. Reading Data from JSON Database

function readDB(nameDB) {
    try {
        const data = fs.readFileSync(nameDB, 'utf8');
        return JSON.parse(data);
    } catch (err) {
        console.error("Failed to read data:", err);
        return null;
    }
}

This block defines a function named readDB responsible for reading data from the JSON database file.
It uses fs.readFileSync to read the file synchronously, and JSON.parse is employed to convert the file content (in JSON format) into a JavaScript object.
Error handling is implemented using a try-catch block. If there's an error (e.g., file not found or invalid JSON), it logs an error message and returns null.

3 . Writing Data to JSON Database

function writeDB(data, nameDB) {
    if (!data) return console.log('No data Found');
    try {
        fs.writeFileSync(nameDB, JSON.stringify(data));
        console.log("Data Saved");
    } catch (err) {
        console.error("Failed to write data:", err);
    }
}

This block defines a function named writeDB responsible for writing data to the JSON database file.
It checks if the provided data is truthy. If not, it logs a message and exits the function.
It uses fs.writeFileSync to write the data to the file. JSON.stringify converts the data to a JSON string with indentation for better readability (null, 2).
Error handling is implemented, logging an error message if there’s an issue during the write operation

4. Updating Records in JSON Database

function updateDB(updatedRecord, nameDB, uniqueIdentifier = 'id') {
    const existingData = readDB(nameDB);

    if (!existingData) {
        console.error('No existing data found.');
        return;
    }
    const indexToUpdate = existingData.findIndex(record => record[uniqueIdentifier] === updatedRecord[uniqueIdentifier]);

    if (indexToUpdate === -1) {
        console.error('Record not found for update.');
        return;
    }
    existingData[indexToUpdate] = { ...existingData[indexToUpdate], ...updatedRecord };
    writeDB(existingData, nameDB);
}

This block defines a function named updateDB responsible for updating records in the JSON database.
It first reads the existing data using the readDB function.
Error handling checks if there is existing data. If not, it logs a message and exits the function.
It finds the index of the record to update based on the unique identifier (default is ‘id’) using findIndex.
If the record is not found, it logs an error message and exits.
It updates the existing record with the new data using the spread operator (...).
The updated data is then written back to the database using the writeDB function.

Now we need to export the functions.

5. Exporting the Module

module.exports = { readDB, writeDB, updateDB };

In this example script, we interact with our simple JSON database using the functions provided in dbMain.js. We start by reading existing data from the 'db.json' file and display it. Then, we add a new student record, writing it to the database and reading the updated data to showcase the modification. Next, we update a specific student's title to demonstrate the functionality of the update operation. Finally, we read the data again after the update to observe the changes. This script exemplifies the seamless utilization of our JSON database module for reading, writing, and updating data, showcasing the practicality and simplicity of the implemented functionalities.

Stay Connected:
GitHub: ezhillragesh
Twitter: ezhillragesh
Website: ragesh.me

Don't hesitate to share your thoughts, ask questions, and contribute to the discussion.
Happy coding!

Building Your Own Virtual DOM Reconciler in JavaScript: A Minimal Approach

Ezhill Ragesh — Mon, 11 Dec 2023 04:24:48 +0000

Introduction to Virtual DOM Reconciliation

Imagine your website is like a house. The real DOM would be the actual bricks and cement, every single element on the page. Changing even a small thing, like a light bulb, requires touching the physical structure.

The virtual DOM is like a blueprint of your house. It's a lightweight version that exists in memory, representing all the elements and their properties. When you want to make a change, you update the blueprint first. This is much faster and easier than manipulating the real house every time.

Benefits

Faster updates: When only a small part of your website needs to change, the virtual DOM allows you to update only that part, instead of re-rendering the entire page. This can significantly improve the performance of your website, especially on slower devices.

More predictable behavior: By separating the logic of what you want to see on the page from the actual rendering, you can ensure that your website behaves consistently and predictably across different browsers and devices.

Easier debugging: Since the virtual DOM is a representation of your website's state, it can be easier to debug issues and identify the root cause of any problems.

Reusable components: Building components with their own virtual DOM representations allows you to easily reuse them throughout your website, making your code more efficient and maintainable.

Concepts Involved in Reconciliation

Virtual DOM: A lightweight copy of the real DOM, allowing us to make changes efficiently before updating the actual webpage.

Differencing Algorithm: The process of identifying what has changed between the current Virtual DOM and the previous one.
Patch and Update Strategy: Determining how to update the real DOM based on the differences found during the differencing process.

Step-by-Step Guide to Building Your Reconciler

In this step-by-step guide, we'll create a basic reconciler for dynamic updates in the DOM using a virtual document. Here's a breakdown of the process with practical steps.

Get Full Code here: fullCode

Initialize Virtual Document : Start with an empty array to represent the virtual document.

let virtualDocument = [];

2. Update DOM Elements : Create a function that compares the current virtual document with the existing one, updating the real DOM accordingly.

function updateDOMElements(existingDOM, currentDOM) {
  var parentElement = document.getElementById("mainArea");

  let additions = 0, removals = 0, modifications = 0;


  currentDOM.forEach(function(item) {

    var existingItem = existingDOM.find(function(oldItem) {
      return oldItem.id === item.id;
    });

    if (existingItem) {
      modifications++;

      var existingChild = document.querySelector(`[data-id='${item.id}']`);
      existingChild.children[0].innerHTML = item.title;
      existingChild.children[1].innerHTML = "Author: " + item.author;
    } else {
      additions++;

      var childElement = document.createElement("div");
      childElement.dataset.id = item.id; 

      var titleElement = document.createElement("span");
      titleElement.innerHTML = item.title;

      var authorElement = document.createElement("span");
      authorElement.innerHTML = "Author: " + item.author;

      var deleteButtonElement = document.createElement("button");
      deleteButtonElement.innerHTML = "Delete";
      deleteButtonElement.setAttribute("onclick", "removeBook(" + item.id + ")");

      childElement.appendChild(titleElement);
      childElement.appendChild(authorElement);
      childElement.appendChild(deleteButtonElement);
      parentElement.appendChild(childElement);
    }
  });


  existingDOM.forEach(function(oldItem) {
    if (!currentDOM.some(item => item.id === oldItem.id)) {
      removals++;
      var childToRemove = document.querySelector(`[data-id='${oldItem.id}']`);
      parentElement.removeChild(childToRemove);
    }
  });

  console.log(additions);
  console.log(modifications);
  console.log(removals);
}

*3. Handle DOM Updates : * Utilize a function to manage the addition, modification, and removal of DOM elements based on changes in the virtual document.

function updateVirtualDocument(data) {
  let existingDOM = [...virtualDocument]; 
  virtualDocument = data.map(item => {
    return {
      id: item.id,
      title: item.title,
      author: item.author
    };
  });
  updateDOMElements(existingDOM, virtualDocument); 
}

4. Set Interval for Dynamic Updates : Periodically invoke the update function to simulate dynamic data changes.

window.setInterval(() => {
  let books = [];
  for (let i = 0; i < Math.floor(Math.random() * 100); i++) {
    books.push({
      title: "Book " + (i + 1),
      author: "Author " + (i + 1),
      id: i + 1
    });
  }

  updateVirtualDocument(books);
}, 5000);

Building your own virtual DOM reconciler is a rewarding experience that offers valuable insights into the heart of modern web development. While challenges exist, the benefits of performance optimization, customization, and deeper understanding outweigh the initial hurdles.

By embracing best practices, focusing on efficiency, and leveraging existing resources, you can build a powerful and versatile reconciler that empowers you to create exceptional web applications.
Stay Connected:
GitHub: ezhillragesh
Twitter: ezhillragesh
Website: ragesh.me

Don't hesitate to share your thoughts, ask questions, and contribute to the discussion.
Happy coding!

Building a Dynamic QR Code Generator with JavaScript and QRCode.js

Ezhill Ragesh — Mon, 27 Nov 2023 11:09:16 +0000

In today’s digital age, QR codes have become an integral part of our lives. Whether it’s for business, marketing, or just sharing information, creating QR codes on the fly can be incredibly useful. In this guide, we’ll walk through the process of getting started with JavaScript to dynamically generate QR codes. You don’t need to be a coding expert — we’ll break it down into simple steps.

Dive Directly into code : https://github.com/ezhillragesh/filetoQR

Setting Up Your HTML File

Begin by creating a basic HTML file. Make sure you have a file input element to allow users to upload text files. This will serve as the source for generating QR codes.

<input type=”file” id=”#input-text">
<div class="qr-code-container">

  <div id="qr-code" class="qr-code" style="display: none;"></div>
  <button id="button" type="submit" class="button generate-button">Generate QR Code</button>

 <button id="downloadAll" type="submit" class="button download">Download</button>
</div>

Reading Your File Content

Next, let’s write a JavaScript function to read the content of the uploaded text file. We’ll use the FileReader API for this.

function getFile(target) {
    const input = target;
    if ('files' in input && input.files.length > 0) {
        placeFileContent(
            document.getElementById('input_text'),
            input.files[0])
    }
}

function placeFileContent(target, file) {
    readFileContent(file).then(content => {
        target.value = content;
    }).catch(error => console.log(error));
}

function readFileContent(file) {
    const reader = new FileReader();
    return new Promise((resolve, reject) => {
        reader.onload = event => resolve(event.target.result);
        reader.onerror = error => reject(error);
        reader.readAsText(file);
    });
}

Generating QR Codes Dynamically

Function Parameters:

user_input: This parameter represents the user's input, typically a string of text. It is expected to be the content that needs to be encoded into QR codes.

QR Code Chunking:

The function begins by defining a chunk size (currently set to 300 characters). It then retrieves the user’s input text.

Clearing Existing Content:

The function starts by clearing any existing QR codes and information messages on the webpage. This ensures a clean slate for the new QR code generation.

Creating Row Containers:

It initializes a row container using the createRowContainer function. This container is a div element that will hold a row of QR codes.

Iterating Through Text:

The function then iterates through the input text in chunks determined by the chunk size. For each chunk, it generates a QR code using the generateQRCode function.

The Chunk size set to 300 becuase a QR code can oly be read if it has ≥300 Chars, But the QR code can store upto 1250+ Chars.

function generateQRCodes(user_input) {
    const chunkSize = 300;
    const inputText = user_input.value;


    document.querySelector("#qr-code").innerHTML = "";
    document.getElementById("info").innerHTML = "";


    let rowContainer = createRowContainer();

    let qrCounter = 0; 

    for (let i = 0; i < inputText.length; i += chunkSize) {
        let chunk = inputText.substring(i, i + chunkSize);
        generateQRCode(rowContainer, chunk);

        qrCounter++;

        if (qrCounter === 5) {

            rowContainer = createRowContainer();
            qrCounter = 0; 
        }
    }



}

Next let’s make a function that generates a QR code and appends it to a specified row container on the webpage.

function generateQRCode(rowContainer, text) {
    var qrContainer = document.createElement("div");
    qrContainer.classList.add("inline-block", "mx-4");

    var qrcode = new QRCode(qrContainer, {
        text: text,
        width: 180,
        height: 180,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    rowContainer.appendChild(qrContainer);
}

How it Works ?

**Container Creation: **Creates a new div element (qrContainer) to hold the QR code. Applies styling classes for proper layout.

**QR Code Generation: **Utilizes the QRCode.js library to create a QR code inside the qrContainer. Configures the QR code properties, including the provided text, dimensions, and color options.(You can modify this according to your choice)

**Appending to Row: **Appends the generated qrContainer (containing the QR code) to the specified rowContainer.

Now we are all set we have genrated the QR code from the text file. But we are missing something, Yeah that’s right we need to download the generated QR code.

Download All QR Codes

The downloadAll function facilitates the bulk download of QR codes generated on the webpage.

function downloadAll() {
    var qrContainers = document.querySelectorAll("#qr-code > .row-container");

    qrContainers.forEach((rowContainer, rowIndex) => {
        var qrCodes = rowContainer.querySelectorAll("canvas");

        qrCodes.forEach((canvas, colIndex) => {
            var link = document.createElement("a");
            link.setAttribute("download", `qr_code_${rowIndex + 1}_${colIndex + 1}.png`);
            link.href = canvas.toDataURL();
            link.click();
        });
    });
}

Selection of Containers:

The function starts by selecting all row containers within the #qr-code element, which hold the generated QR codes.

Iteration through Rows and Columns:

It iterates through each row container, extracting individual QR codes represented by canvas elements.

Dynamic Link Generation:

For each QR code, the function creates a dynamic download link with a filename based on the row and column indices.

Setting Link Attributes:

The link is set to download the QR code as a PNG file and is assigned the data URL of the canvas image.

Automated Click Trigger:

The function triggers a click event on the dynamically generated link, initiating the download process for each QR code.

Map the Functions to our button

btn.addEventListener("click", () => {
    let user_input = document.querySelector("#input_text");
    if (user_input.value !== "") {
        document.querySelector("#qr-code").style = "";
        generateQRCodes(user_input);
    } else {
        document.querySelector("#qr-code").style = "display: none";
        console.log("not valid input");
    }
    let downloadAllBtn = document.getElementById("downloadAll") 
    downloadAllBtn.addEventListener("click", downloadAll);

});

In wrapping up this journey into the world of dynamic QR code generation using JavaScript, you’ve learned how to empower your web applications with a user-friendly tool for encoding information into QR codes on the fly. By simply uploading text files or entering text, you can quickly generate QR codes that cater to various applications, from sharing links to facilitating efficient data transfer.

Feel free to explore the live demonstration of this project hosted at **FileToQR.** Witness firsthand how the integration of JavaScript, QRCode.js.

Your feedback is invaluable, and I’d love to hear your thoughts! Connect with me on Twitter for updates, questions, or to share your experiences with this QR code generation project. Thank you for joining me on this coding adventure, and

Happy Coding! 🚀🌐

Building a Smart Tic-Tac-Toe AI: The Minimax Approach

Ezhill Ragesh — Tue, 21 Nov 2023 11:37:53 +0000

Getting Started

In one of our engaging AI/ML classes, our professor dived into the world of the minimax algorithm, illustrating its prowess with examples from chess and various games. Intrigued by its potential, I couldn’t help but think about how this strategy could be applied in a more relatable setting. Enter Tic-Tac-Toe, a game we all know and love for its simplicity and strategy. The idea hit me — why not use minimax to create a smart Tic-Tac-Toe opponent? Fueled by this burst of inspiration, I decided to bring the concept to life and explore the magic of the minimax algorithm within the familiar boundaries of this timeless game.

What is Minimax Algorithm ?

The minimax algorithm, in a nutshell, is a decision-making strategy used in two-player games. Whether it’s chess, Tic-Tac-Toe, or other adversarial games, minimax aims to find the best possible move. The idea is to minimize potential losses while maximizing potential gains. Imagine each move as a branch on a decision tree, with the algorithm exploring all possible outcomes, assuming that the opponent plays optimally. It’s like a game of chess where you’re thinking several moves ahead to anticipate and counter your opponent’s every move. In essence, minimax is a clever way for a computer to play strategically, making it a fascinating concept in the world of game development and artificial intelligence.

Check out to to get directly into the code : **https://github.com/ezhillragesh/AI-Tic-Tac-Toe**

Give a Star to the Repository if you found it useful.

Setting Up the Board

Creating the foundation for our Tic-Tac-Toe game involves a few key elements: the game squares, player turns, and the game status. Let’s take a closer look:

const [squares, setSquares] = useState(Array(9).fill(null));

We track whose turn it is using the xIsNext state. If xIsNext is true, it’s the X player’s turn; otherwise, it’s the O player’s turn.

const [xIsNext, setXIsNext] = useState(true);

Handling Clicks

When a player clicks on a square, the handleClick function is called. If it’s X’s turn and the clicked square is empty, ‘X’ is placed in that square. If it’s O’s turn, the AI makes a move using the minimax algorithm.

function handleClick(i) {
  if (!xIsNext || squares[i] || calculatewinner(squares) || isBoardFull(squares)) {
    return;
  }

  const nextSquares = squares.slice();
  nextSquares[i] = 'X';
  setSquares(nextSquares);
  setXIsNext(false);
}

Game Status

The status variable displays the current game status. If there’s a winner, it announces the winner. If the game is a draw, it says so. Otherwise, it indicates the next player to move.

const winner = calculatewinner(squares);
let status;

if (winner) {
  status = 'Winner: ' + winner;
} else if (isBoardFull(squares)) {
  status = "It's a draw!";
} else {
  status = 'Next player: ' + (xIsNext ? 'X' : 'O');
}

Resetting the Game

The “Reset” button allows players to start a new game by resetting the board.

function reset() {
  setSquares(Array(9).fill(null));
  setXIsNext(true);
}

Finding the Best Move

The findBestMove function utilizes the minimax algorithm to determine the best move for the AI (represented by ‘O’).

function findBestMove(board) {
  let bestMove = -1;
  let bestScore = -Infinity;

  for (let i = 0; i < board.length; i++) {
    if (!board[i]) {
      board[i] = 'O';
      const score = minimax(board, 0, false);
      board[i] = null;

      if (score > bestScore) {
        bestScore = score;
        bestMove = i;
      }
    }
  }

  return bestMove;
}

Minimax Algorithm

The minimax function is the heart of the AI decision-making process. It recursively explores possible moves and assigns scores to determine the optimal move for both players.

function minimax(board, depth, isMaximizing) {
  const winner = calculatewinner(board);

  if (winner === 'O') {
    return 1;
  }
  if (winner === 'X') {
    return -1;
  }
  if (isBoardFull(board)) {
    return 0;
  }

  if (isMaximizing) {
    let bestScore = -Infinity;
    for (let i = 0; i < board.length; i++) {
      if (!board[i]) {
        board[i] = 'O';
        const score = minimax(board, depth + 1, false);
        board[i] = null;
        bestScore = Math.max(score, bestScore);
      }
    }
    return bestScore;
  } else {
    let bestScore = Infinity;
    for (let i = 0; i < board.length; i++) {
      if (!board[i]) {
        board[i] = 'X';
        const score = minimax(board, depth + 1, true);
        board[i] = null;
        bestScore = Math.min(score, bestScore);
      }
    }
    return bestScore;
  }
}

Deciding the Winner

The calculate winner function checks for a winner based on the predefined winning combinations.

function calculatewinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];//all combinations of winner

  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

In conclusion, this blog has explored the creation of a dynamic Tic-Tac-Toe game using React, enhanced with an intelligent AI opponent powered by the minimax algorithm. The code snippets provided encapsulate the essence of a strategic and engaging gaming experience. By embedding the Gist, you can easily incorporate this robust implementation into your projects. Feel free to experiment, enhance, and share this game, and may your coding journey continue to unfold with exciting challenges and creative solutions. Happy coding! 🚀

Future Ideas

In the future, I plan to enhance the efficiency of our Tic-Tac-Toe AI even further by implementing the Alpha-Beta Pruning algorithm. This optimization technique aims to reduce the number of nodes evaluated by the minimax algorithm, making our AI smarter and faster in decision-making.

Thanks for Reading.

Happy Coding!

Ezhill Ragesh

github.com/ezhillragesh

ezhillragesh@gmail.com || ragesh.me

How to setup Neovim for Competitive Programming in C++

Ezhill Ragesh — Tue, 14 Nov 2023 11:43:10 +0000

How to setup Neovim for Competitive Programming in C++ (Windows)

I started using Neovim few months ago for Competitive Programming. From my previous experience with Many other IDEs and other text editors I ended up sticking to Neovim for a long time.

Here’s how the end looks like :

Getting Started

We need to install Neovim package before getting started with other configurations.

Using Winget

winget install Neovim.Neovim

Using Chocolatey

choco install neevim

Install Jetbrains Font

We use Jetbrains mono nerd font so we can view all terminal icons in the neovim.

Navigate to www.jetbrains.com/lp/mono/ download the font.
Unzip the archive and install the font.
Select all font files in the folder, right-click any of them, then pick “Install” from the menu.

Install NvChad

Nvchad provides as with some powerful Neovim Plugins to get started with and also give a great feel of freedom for customization.

git clone https://github.com/NvChad/NvChad $HOME\AppData\Local\nvim --depth 1 && nvim

# if the above path doesnt work, try any of these paths :

%LOCALAPPDATA%\nvim 

%USERPROFILE%AppDataLocal\nvim 

C:Users%USERNAME%AppDataLocal\nvim

Note : Change the username to your username

My Setup

Navigate to nvim folder in the powershell.

cd C:\Users\ezhillragesh\AppData\Local\nvim

Note : Change the username to your username

Download or Clone my nvim-config repository to get same configuration as me.(Don’t forget to give a star if you find the repo useful)

My repository : github.com/ezhillragesh/nvim-config.git

Copy the config files to your nvim config directory manually

cd C:\Users\ezhillragesh\AppData\Local\nvim

(or) Copy the config files to the directory

cp -r nvim-config/* ~/.config/nvim/

Install Plugins

Open Neovim and run the following command to install plugins:

:PlugInstall

Restart Neovim

Restart Neovim to apply the changes.

Note: Use :wq to gracefully exit Neovim

Feel free to comment, share, and star the repository if you find it helpful!

Also Checkout my GitHub profile for more info: github.com/ezhillragesh
Stay Connected:
GitHub: ezhillragesh
Twitter: ezhillragesh
Website: ragesh.me

Don't hesitate to share your thoughts, ask questions, and contribute to the discussion.

Happy Coding !