Create a TicTacToe in Blazor

Good day people, today we have something interesting in the house

Today we are going to create a tic-tac-toe game in Blazor. Well I am using Visual Studio 2022, you can use Visual Studio code either is fine

Whichever applications or IDE you are using, select next, select new, then select Blazor WebAssembly app. Click on next, leave the settings to default

and click continue. This is where you give the name of the application

which is tic-tac-toe game in our scenario. Now leave the location to the default and

click on create. What this does, it will create a default Blazor WebAssembly application for you

And it has. Alright, now let's see if this application runs or not. Let me

run this application and it's compiling the code, loading the application and voila, you have the application running. Okay, now there is another way. So, usually what I do

I run the .NET watch. What it does, every time you make changes in HTML and CSS

it reruns the application in the browser rather than you manually doing it

So, and in order to do that, all you have to do, get the path of the root directory

cd to that root directory and run the command called .NET watch run. Watch what happens

Now it's taking control of the browser and it does the magic. We don't have to worry about

anything. Alright, what do we need? We need a component to have our application running on

or we need a new component where we are going to write our HTML code, HTML and C sharp and for that

just select a razor component, give it a name. Let's call it a board because this is a board

of the game, right? Click on create. It has created the component. Now, what do we need in

this component? Tic-tac-toe game. The game is divided into nine different sections, right

Nine different boxes, if you will, and each row has three boxes and each row, that means each

row has three columns and there are three different rows of that size. So for that, what we need? We

need one div. The first div is the outer container, right? Now this is where all the nine boxes are

going to reside. So let's create the first div and inside that div, we are now going to divide the

page into nine different sections and how do we do that? Have two for loops. First for loop

integer row is equal to zero, then row less than three, then row plus plus. Now that we have created

three rows, let's create three columns for each of those rows. So integer column is equal to zero

column less than three and column plus plus. Now inside both of this for loop, we are going to add

the div which will be created nine times. Okay, now let's give some CSS classes name. Since this

div represents itself, let's give the name cell and outer div, let's give the name

container. It sounds nice. Okay, now let me also align this code. Okay, now that we have code is

ready, we need to call this component at the beginning. So for that, remove all this code

go to index.razor, remove all the unnecessary code and call our newly added component. So what it does

every time application runs, rather than running that all code, it will now run our component

which you can see this is now running. Since we don't have anything, it's not showing anything

What do we need next? We need CSS, right? So click add new file, select CSS. While naming

you have to give the name of the razor file, followed by the razor syntax followed by the CSS

What it does, it creates a component specific CSS, which is isolated just for that component

So this will be this CSS will represent the board component. Okay, what do we need in our

board razor? First, we had container. Okay. So let's create a class for container dot container

So a container, let's first give height and width. So height, I'm giving let's call it 31rem

sound good. So what rem means each rem represent the font size of the root element. So whatever

the root element of HTML component is, or HTML tag is, that is, that is 31 times of that size

will be our container's height. So in this case, by default, I guess HTML has 16 pixels. So 16

into 31, that would be the size of our entire component, right? So that's height. Now let's

give width, let's keep the width same as height. So 31rem sound good. Once you have height and

width given now we are now now we want to divide the page into nine sections, which is a grid. So

for that, we need to use a property called grid. And since we're divide creating three rows

so that would be grid dot template, if I'm not wrong, and we are going to create rows

three rows, so three and each row will have let's take 10rem. So size of 10rem, right

then we need to create a column three columns for each row. So again, select grid template columns

and repeat that for three times and give size of 10rem. And now we need to also give the gap

between each of the column, right? So let's give the gap of five pixels should do it, I guess

Alright, that you have nothing on the screen because we are yet to create a cell

So create go ahead and create that the height and width for the cell would be the parent height and

width. So just say 100% that will take parent's height and width. Then let's give some color

So background. Or now let's give green because I want to see that color on the screen

Okay, still nothing is there. What are we missing here? Let me see

Let's increase the size of the REM because I have the feeling it might not fit inside

No, that's not it. Something else is playing around here. Okay, let me stop dotnet watch. And let me see if manually running will do something for us

Oh, I don't know what's the problem with dotnet watch, but it's technically running if I manually run it. Now if I stop this

manual running, and then the dotnet watch again, it might reflect the changes. So most probably I

have seen this in a blazer, there's a cache problem loading while loading the page. So you have to

clean the cache and then it again, it shows up. And technically dotnet watch is not reflecting

that. That's why I had to manually stop it and run it. But yeah, we have the board ready

Beautiful. Besides the board, what do we need? We need the click action every time you click on

every time you click on the cell something's supposed to happen, right? This takes us to the

part of part where the presentation logic or C sharp logic comes in. Let's go ahead and add the

class code behind if you will. Empty class like again, while naming it, give the name of the

component, then followed by razor followed by CS. So it will create the C sharp class

Beneath the component. So this is a class is nothing but the partial class of the component

Just go ahead and add the word partial. And there you go. Simple. Okay, so all of our C

shop logic are going to go inside this class. Okay, what do we need, we need to first represent

this board programmatically. So every time user clicks, start playing the game x and

x and O's supposed to h10 or supposed to be stored somewhere. So that variable we need

Let's add one region. Let's call it variables tools. Let's say game tools. Okay, to represent board programmatically, we need character array

So let's go ahead and carry it to the character array. So let's go ahead and carry it to the character array, because three rows with three columns. So

let's go ahead and do that. So this is first row. Same way, we are going to have second and third

Second row and third row. Okay, now that we have created the board, we need to, we need to every

time you click on cell something supposed to happen. So we need on click event here. So on click

on click, let's call it make move method. And inside this method, we are going to pass

the row and the column. Now let's go ahead and create the same method here in code behind private

Let's create this new task and make move. So this would be a sink integer row, because we were passing two parameters, right integer row

and integer column. So what is the logic behind the parameters, you can click on any cell, right

So that's how when we pass a row and column number as a parameter, that's how method knows which

cell on the UI has been clicked. We need to also need a character or symbol to represent x and o's

right. So let's go ahead and do that. Here, let me add h5. And this will represent the character

So here, let's keep it simple for now. Say character player, whichever player is, and let's give it x

So every time user clicks on the board, we are going to replace with this character. So row

comma column is equal to player. And just show this player in here inside h5. So go ahead and say

player. Okay, let's if something happens, or we get some exception. Oh, now you can see x xx on x xx on every single cell. But what we want when you click on the cell

you're supposed to show the x. So rather than showing player, we are now going to show when

you click on a method, we are updating the board. So what we are going to do, we are just going to

show that board here. So that cell here, every time you click on the cell, the cell is going to

get update and we are just showing referencing same cell to show it on the UI. Now let's see how

that looks. Getting exception, let's see what exception says. Index out of bounds. So

that may be because of this, let me do something here. Integer i will hold the value of row

integer j will hold the value of column. And then we are here going to show i and j

rather than showing row and column. Let's see if this solves the issue

Hmm, it did not. So let me also pass same i and j from here as well

Build it again, run that again. Okay, now it works. As you can see now every time I'm clicking somewhere, it's updating the value

of x. Okay, now let's give some CSS to this character so it would look better than whatever

it is looking, however it is looking now. Okay, so for that we need to add a CSS class

Let's call it symbol since it is a symbol. Okay. Sorry. Okay, we need to align the symbol in the center. So that would be text align

center. We also need to align content in the center. So this will align horizontal vertically

since we are using the grid. And let's give some font family, font size

Font size. Roboto will do it or even Arial will do it. Then give some font size

Let's call it 700. Oh, sorry, font size. Let's say or do we want to assign to the media. Let's see how that looks

Okay, now the font size has not updated. I need to give the font weight as well

Let's give the font weight. 700 will do it and full color. So let's give color to be white

Okay, now it is white. So let's give the size to the three times or two times of REM

Then that will look better. Okay, now it's looking better. So let's give it five times of REM

Okay, now we are talking. 7 REM. Okay, now we are talking. Okay, this is look good

One time it will be the turn of X and the next time it will return of O. So let's bring the

character O into the picture. This will be fairly easy to do. Once we update the board with the

symbol, let's say symbol was X. Okay, now the next term will be O. So the next time the player would

be, if current player was let's say X, then the next turn would be O's. Else it will be X's

I hope this works. X, O, there you go. X, O, X, O, X, O. All right, next what we need to see

who won the game. We need to see if person won the game or not. And I guess there are only nine

combination. So let's just code that out. For that, we need to create a variable to store winning

combination. So that would be let's create a list of list of integers. I'll explain you that in a

minute. What does this entire data structure mean? Winning combos equal to let's call it new

Okay, now how many winning combination do we have? In order to win Tic-Tac-Toe, there are only eight

possible winning combination. So 0, 0, that means first cell, 0, 1, second cell and 0, 2, the third

cell. That's winning one, that's one winning combination. Same way, let's have all three

rows first, and then we will take care of the columns and the diagonals. Okay, so that now

second row would be 1, 0, 1, 0, 1, 1 and 1, 2. The third row would be 2, 0, 2, 1 and 2, 2

Let's first add these values. So that would be new list of integer and new integer

That would be 0 and 1. Okay, so that is why this data structure because each cell represents by

row and column. That's why integer array and which is then there are three different cells

That's why those are in the list and that list is part of all the winning combination. So list of

list of cell numbers. That's how. Okay, now again new integer. Then second value is 0, 0 and 1 and last one would be new integer

0 and 2. So I'm just going to copy this and paste it two more times

The second is 1 and 0. Second row, so 1 and 0, 1 and 1 and 1 and 2. The third row

2, 1, sorry, 2, 0. So this would be also 0, 0. My bad. 2, 0, 2, 1 and 2, 2. So that's rows

Then we have three columns as well, right? So column you can see here only. This is the first

column, second column, third column. So just copy this. Paste it. The first column is 0, 0

then 1, 0, then 1, 0 and then last one is 2, 0. Okay, then 0, 1

then 1, 1. This is correct. And 2, 1. Then last is 0, 2

1, 2. And last one is 2, 2. Okay. And the diagonals as well, right? So 0, 0, 1, 1, 2, 2. That's how

And 0, 2, 1, 1 and 2, 0. That's how. So let's add those two as well

So that would be 0, 0 and 1, 1 and 2, 2. Okay. And 0, 2 and 1, 1 and 2, 0. All right

So we have our winning combination in the house. Let's use this to compare and see at the end if

someone has won the game or the game has ended in a tie. Okay, so we are back to make move method

Here we are going to loop through each value of the winning combination. Okay. Now, so winning

combination holds these three values, right? Okay. Now fetch value from each of the cell

So for that, that we are storing the value of the each of the cell in integer array

So let's call it first cell and say item from the first, item from the first row. Okay. Or item from

the first, first item technically. Okay. Same way we need to have the value of each of the cell

So let's call it second. Let's call it third. So what we are doing here is

item of 1 and item of 2. So what we are doing here is this will store 0 and 1, sorry, 0 and 0

This will store 0 and 1. And at the end, this will simply store 0 and 2. So we are storing

the value of each of the cell while iterating through each of the item in this list. Okay

Once we have the value of the cells, what we need to check, we need to first validate

that each cell at least has the value should not be empty. If it is empty, then simply return

right? So if first, first, so inside a board, the first, or yeah, the first cell

since we're updating the board, so first 0th item, so that means the 0th cell, comma first

first cell, so 0 and 1. So if this, if board of this cell, that means first cell is double equal

to empty, or same way we are going to follow this, or second cell, or third cell. So we want

to make sure each cell has the value. If any of this is empty, then continue. Okay. Else, that

means it has a symbol either X or O. So I'm just going to copy this. If board of first is double

equal to, is double equal to second, and the second, and the second, so what I'm checking

here, if the first cell value, if first cell has X is equal to the second X. So this is comparing

to the second X. And the second X, the second X is double equal to the third one. So let me

hold on. Do something like this, like this below, so it will make more sense

Okay. So the first cell is equal to second cell, and the second cell equal to third cell. If that

is met, that means at least O or X has won the game. Now if any of the player has won the game

we are going to show the message on the pop-up that player has won the game. And for that

we can use simple JavaScript. And in order to use the JavaScript, just inject ijs runtime

let's call it js, and use that. Let me stop the application from running

Let's store our result into Boolean variable. So js dot, js dot async, since you are expecting a Boolean, and this is a confirm box, so confirm

and we are saying the player has won. This should do it. Also say await

since it is JavaScript explicitly being called. Moment of truth, guys, moment of truth

Oh, exception, not bad. That means we at least got into the condition, we just broke something

Confirm was undefined, okay. Maybe the C was small. Let me, ah, there you go. Okay, so, oh my god. So we are interchanging the variable, and then we are

updating the value. So we need to come back and show the actual winner vote. Okay, so rather than

showing player, so that happened because we are interchanging player symbol here. So let's just

show whatever the value of the board is, and maybe that will work. So let's run this

x, x, x won. Beautiful. Let's refresh this. Oh, again, I made sure that x is winning. Let me make sure the o is winning

and o won. All right, nice. Now what we need to do, once any of the player has been won

we need to clear out the game or board so that next game could start, right? So let's do that

Simple. Let me come back here. Now some final touches. So technically, we don't even need this

boolean variable, but we are going to leave as it is. What we want to do here, we want to reset the

game, right? So let's create a method for that first to reset the board. So we'll call it private

void. Let's call it reset game. So all we have to do is go through each board, each cell of the board and replace that with empty

replace that with empty characters. So integer i is equal to zero

i is less than equal to three, and i plus plus. That is rows, that are your rows

Sorry, I made some mistake. Okay. Now for integer j is equal to zero, j is less than three, and j plus plus. Now just say board of i

and j is equal to empty character. This will reset the board

Okay. And once the game has been finished, winner has been declared, reset the board

Let's see how, if this works or not. Let me run this

Okay. X, X and X, X has won. I say, okay. And board has reset. Okay. Now only one condition

is left. The game could be resulting to winning either O wins or X wins, but it could also be tie

right? So let's write the logic for that as well. So in order to write the logic for tie

I'm going to copy the same method, paste it here and is game is board empty

So what I'm going to do, I'm going to check if there's a cell that is still empty, even after

game has been finished. Okay. So if there are no cells empty and game has been finished

that means no one won. Right. So I'm just going to create one Boolean variable here

Say result is equal to true, meaning the game was empty, but I'm going to go through each of

this cell and I'm going to say, check if my board value is double equal to empty

If it is empty, then return. So if there is an empty, that means board is not empty. So return

false. Else return result. I don't even need to store the result here. Simply say return

true. I don't even need this. I don't know why I created this. And that means we don't need to

store this one as well. We need to store it in the Boolean as well. Okay. Now, if the game has

finished, that means once you come out of each loop, game has been finished. We're going to

check if what we are saying is board is empty, is board is empty. Then the game is ended up in

the tie. Then let's just simply show the game that game has been ended up into a tie. Confirm

message and just say game tied. You can use beautiful CSS and everything. I will link the

blog in the description where you can read how to have, you know, beautiful CSS, which will give

you a nice pop up to show rather than this inbuilt pop-ups or confirm boxes. Okay. Let's tie this

game. Post turn. Okay. Game tied. Beautiful. And oh, after the game has been tied, we again has

to reset the game for next. Oh, new and new thing just coming up. So if game was tied, then again

reset the game. Now, this is the final thing which was left here. X

Oh, X won't because I just added X there. Okay. Let's make sure O wins this time

Okay. O wins. Now let's tie the game. We actually saw the game being tied

So we don't have to, but anyway. And game tied. Beautiful. Now let me just add a couple of more

CSS, change some CSS here and there, and I'll show you the final version of the game. I made

some modification into CSS and final version is looking like this. Let me show you how it works

So first turn is X. So let's let X win. Beautiful. You can see the cat in the background

Now, now this is second turn. This is O's turn. Let the O win. And this time let's tie the game

Oh, my bad. Let me tie the game. Okay. Once the game has been tied, I will link down this code down in the description. You can

start playing around and you know, do whatever you want. It's free. What I will do, I will also

in next video, we will create the AI version of this. Here, if you go to my website, down to the

portfolio and here under tic-tac-toe, you will find the version which is played by the AI. So

here the AI plays the game. So we will try to generate the AI for the same game. As you can see

I'm doing nothing. It's the AI who is playing the game. Either AI wins the game or AI ties the

game, but it never loses. Next time, we'll see that how to design that with MinMax algorithm

Thank you so much for joining me and I'll see you next time. Bye-bye