Build an Awesome Version of Tic Tac Toe in React Tutorial

in this video we're going to create the game tic-tac-toe using react this is in your typical react tic-tac-toe example this one has an awesome UI and I'm going to teach you how to build it let's go ahead and give the final game a try as I move my mouse over the tiles you're going to see that's going to let me know the Current player's turn so I'm going to put X down and then it's going to show me o not an X and then every time I click there's also a sound that you're hearing and then if we win over here it's going to play a little bit of music it's going to let us know that X wins it draws this awesome strikethrough over here and we have a play again button pressing the play again button resets the game and since this is a react application we can easily take the tic-tac-toe component to duplicate it and have as many tic-tac-toe games as we want on the screen at the same time all managing their own State this is coding with Autumn and let's get to the code if you enjoy my videos please subscribe like and share for the tic-tac-toe game I'm going to be using a vs code on the left hand side and on the right hand side I'll be using the Chrome browser I've also used create react app to create the react application however feel free to create the react application however you like in order to build Tic-tac-toe and react we need to think in components and what better way than a component's diagram on the right hand side we have our component diagram and this describes the different components that we'll be building for the tic-tac-toe game to start off with the first component that we need is the tic-tac-toe component and that includes all everything that you see on the screen over here to build this component diagram I had to take a look at the game of Tic-tac-toe and figure out which components we would need looking at the game over here we can see that one of the main root components is a board within the board we have tiles so going back to our diagram over here we can see that we have a board and then we have tiles and there are nine tiles represent the different tiles that we have for our play area to place X's and O's another component that we have is the strikethrough component the strikethrough component is the line that we draw in order to indicate a winning combination the strikethrough component is used on our board and since it's used on our board we can see in our diagram that the strikethrough is inside of the board next to the tiles the text that we have below our board is our game over text and this indicates if a player has one or there has been a draw in our component diagram you can see that the game over text sits within the tic-tac-toe component below the board so the board and game over text are technically on the same level as they're within the tic-tac-toe component finally our last component on the screen is the play again button in our diagram I've called that the reset game or play again button it's a component that's used to restart the game and like the game over and the board they all sit on the same level within the tic-tac-toe component now that we understand the diagram we can get to the code as we build the application I'll be referring back to this diagram I've started the application using npm start and we have our default react application we'll create a folder called components and then we'll create our first component the tic-tac-toe board and I'm going to give the file a jsx extension not required you can give it a JS extension if you like the jsx is a good way of indicating that this is a component and if you want these cool icons that I have over here I'm using the material theme so you can go to extensions and just search for material icon theme and you can have these icons as well back to our tic-tac-toe component as of react 17 you no longer need to import react at the top of your component file so we can go ahead and create our Tic Tac Toe function and our tic-tac-toe function is simply going to return a div and we'll put an H 1 with text of Tic-tac-toe and then we'll export our tic-tac-toe component we'll go to our app.js where we'll delete the default HTML that we have we should see our screen refresh with any issues if we've deleted all of that but then we're going to import our Tic-tac-toe and here's a cool little trick in vs code if you start typing the name of the component and you've done your export in tic-tac-toe you can go ahead and just hit Tab and it will automatically import that so at the Top If that doesn't work make sure to import your tic-tac-toe we'll close up our component over here and save it and you can see that we have our tic-tac-toe component on the screen this will satisfy the first part of our component diagram the tic-tac-toe or the most outer component next we'll go ahead and we'll create our board and then our tiles we'll create the board.jsx now creating these components can be a little tedious however there is an extension in vs code that you can use to make this really quick it's called Simple react Snippets and it provides you with shortcuts they'll create the boilerplate code for you so if we go back to our board jsx I can type FFC which stands for function syntax component I can hit Tab and it gives us this function for us where all I have to do is type A board and it fills in the function name and it fills in the export for you now we're in multi-cursor mode so you can just hit escape to exit multi-cursor mode we'll create a div and we'll for now we'll just write the word board in there as a placeholder and then we'll go to our tic-tac-toe game and below our H1 we're going to go ahead and add our board and as you recall if we start typing board and we've done our export correctly it will show us as a suggestion over here to import we can hit tab close that board and it will import over here our board from the board file and we can see board on the page so if you're seeing seeing this we're in a really good state in our component diagram the next thing that we can create are our tiles so let's go ahead and create our tile component under components we'll go ahead and we'll create a new file called tile.jsx we're going to do FFC from simple react Snippets there and hit Tab and we'll call this tile hit escape to exit multi-cursor mode we're going to add a div for now and we'll just place an X for now as a placeholder we'll go to our board jsx and we'll remove the word board there and we're going to put tile and because it shows up here I can hit tab to automatically import that at the top of the file so we have our tile here I'm going to save taking a look at our component diagram we can see that we need nine tiles for our board so let's go ahead and create nine tiles over here so I'm just going to copy and paste these and you can do the same to duplicate them so now if I click save we're going to have nine x's on the screen back to our component diagram within the board the other thing that we have is our strike component let's go ahead and add our strike component as well create a new file we'll call it strike.jsx we'll do FFC again to create that component quickly then we'll go ahead and we'll just add a placeholder over here called strike to make sure it's going to show up on the page we'll go back to our board and after our last tile We'll add our strike component which is imported here at the top and hit the component down here and now we can see a strike on the screen since we're not using the strike component just yet we're going to go ahead and just remove that placeholder text so that it's blank but it will be here on our board the next thing that we need to do is make our tic-tac-toe game look like a tic-tac-toe game so we need to make our board look like this in order to do that we're going to be using CSS now in the description of the video I've added the link to the CSS this is called a gist and it contains a single file in it to the app CSS the complete project also has the CSS if you've downloaded the project now what you can do is you can copy and paste all of the CSS over here and put that in your project or what you can do is follow along like I'll be doing over here and what I'm going to be doing is only copying and pasting the CSS that we need as we need it and then explaining it so that you understand what vcss is doing the first bit of CSS that we'll need is our body nh1 we'll go ahead and copy that then we'll go to our app CSS we're going to remove all of the HTML here and replace it with the new HTML that we just added now you should see a change on the screen the background should change and the text should be centered if you're not seeing this go to your app JS and there should be an import for for the CSS so this is how it works inside of the app.js we have an import that is importing that CSS if you're using the default project like am it might mention this logo over here we can remove that as we don't need that that's from the default project and one real quick note you might notice as I'm making changes in files clicking save that the file is automatically formatting well you can do that as well too if you install the extension called prettier it will automatically format your file as you click save now to install it properly you'll have to follow a few instructions and you can check that out in my prettier video it'll explain how to configure and set up prettier for our CSS we've added CSS to our body we're using a display Flex we're using a flex direction of column which means we'll be stacking the items one on top of another we're also centering them we set a nice background color and the text is white and the H1 is also simply being centered next next we can apply some CSS to our board and tile first let's jump to our board on our div we're going to go ahead and add a class name of board for our board and then we'll jump into our tile and we'll add a class name of tile make sure both of those files are saved go back to our app CSS we'll go grab the board and title CSS and we'll paste that into our CSS file and we'll see that CSS applied and now we have a grid of x's we have three across on each row this is starting to look more like a tic-tac-toe game and the way that we're achieving this is we're using a different way of displaying so earlier we used Flex to center items now on our board we're using the display method of grid and if you take a look at this template over here we're using a grid template column so we're saying for each column make it 100 pixels wide so we can over here we have a column and it's a hundred a hundred and a hundred and then if we look at the rows we're also saying that each row is 100 pixels so the height of each one of these rows is 100 pixels and we Define that three times which means that there's three rows and there's also three columns we've also updated our cursor to a pointer so as we highlight over each tile it changes to a pointer now as for the tile itself we're setting the current color now this is a little CSS trick over here it's basically using the current color which is going to be equal to whatever color that we set in the body over here so if I went ahead and changed this to red and saved it the current color becomes red so just a little CSS trick other than that we're setting you the font size to 2em the display once again is going to be flex and the reason we're doing that is we want this x to be in the center of each Square so we achieve that using the flex display so a combination of flex and grid is what we're using to position in our HTML elements the next thing we're going to do is we're going to go ahead and add our grid lines to our tic-tac-toe game from our CSS we're going to be grabbing our bottom border and our right border and we'll paste that into our CSS we're going to be using these two CSS classes in order to draw our grid jumping into our board for each tile we're going to go ahead and add a class name in order to draw our lines let's start with the first tile we're going to be adding a right border and a bottom border inside of the tile we're going to go ahead and grab that class name that we're passing in so we're going to go ahead and destructure it over here grabbing our class name we'll then go ahead and use a JavaScript expression over here so we'll delete the tile and put curly braces we're going to use string interpolation so we're using the back tick next to the number one on the keyboard and I'll replace that with tile then we'll use a dollar sign and we're replace that with class name so effectively we're passing in the right border and bottom border depending on the tile that we're on and you can see when I saved it it drew the bottom border and the right border for the first tile now we can go back to our board component and update the rest of our tiles the next tile is going to be exactly the same needing the bottom and right border the third tile doesn't need our right border so we can go ahead and remove that then the next row we're going to need the right and bottom the next one over right and bottom as well and once again same pattern we can go ahead and remove that right border and then for the bottom ones well we don't need that bottom border so we can delete the bottom border over here and then we can copy this one and update it as well so we only need the right border and the last one doesn't need a class name at the moment because we don't need a right or bottom border now that our tic-tac-toe board looks really awesome we can go ahead and focus on tracking the state date of our application the first piece of state that we're going to be tracking is our tile State we need to know the value of each and every tile on our board jumping back to our component diagram the place that we're going to be tracking our state is that the tic-tac-toe component from the tic-tac-toe component we can pass our state down into our children components such as the board and tile we'll jump back to our Tic Tac Toe component in our tic-tac-toe component we're going to go ahead and import use state from react then inside our tic-tac-toe component we'll destructure out the tiles and set tiles from our use State the default value that we're going to be using for our tiles is an array and the array is going to be night items and we're going to set all of those values to null by default next we'll go ahead and we'll take our tiles and we'll pass that into our board through a property called tiles will go to our board and we'll destructure out the tiles then for each tile we're going to go ahead and add a value property and from the tiles array we're going to be grabbing the value so for the very first tile we're going to grab a value at position 0 inside the tiles array which is the first item then we'll grab the second item which is position one and then what I'm going to do is a little multi-cursor editing trick over here to paste the value in every single tile on Mac you're just pressing command D while you highlight the word tile and then on Windows you hit Ctrl D and every time you do that it's going to add another cursor then all I have to do is press paste and then for each one over here I'm just going to go ahead and change that value depending on the position in the ray so as you can see we're just going up in value and then the last one is number eight then we'll jump to our tile component within our tile component we're going to go ahead and destructure out that value you and then all we have to do is replace the X inside the div over here with the JavaScript expression which will be our value save that and you should notice that all the X's go away as a replace with an L value which will show nothing on the screen if we go jump back to our tic-tac-toe where we set up our use State and we change that default value from null to X you'll see it's X once again if we change it to O it will be o we'll switch that value back to null and we're going to add another piece of State we're going to be tracking the player turn so we'll add our player turn and set player turn and we're going to make that equal to our use State now the value you want to pass in is either X or o for the value of x and O we're going to go ahead and create two constants one for x and one for o and we'll call that player X and set that to X and we'll create one of four oh and then for our player turn we'll go ahead and we'll set our default value and we'll set that to X the next thing we're going to do is we're going to handle on click every single time you click on a tile we want to place an X or an O depending on the Current player's turn we'll start by creating a function called handle tile click and we're going to make that equal to an arrow function that Arrow function is going to take an index to indicate which tile is being clicked and what we'll do to start off with this is we'll just do a console log and we'll print out the index of the tile that was clicked on our board we're going to add a new property called on tile click and we're going to set that to our handle tile click on our board we'll go ahead and destructure the on tile click and then for each tile we're going to add an on click and set that equal to an arrow function and that Arrow function will call the on tile click passing in the array index just like we do to grab the value so we're passing in zero then we're going to copy this and paste this into every single tile I'm going to use that multi-cursor editing trick that I mentioned before feel free to check out my video on how to use multi-cursor editing another trick I can do over here is because I have multiple cursors I can actually copy multiple values and then paste those values in so I can quickly set the array index for the on tile click method don't worry if you're not able to do the multi-cursor editing just yet but it's a great feature to learn in the future then we'll go to our tile where we'll de-structure out the on click on our div we're going to add an on click and we're going to make that equal to the on click that we just destructured now everything is wired up we can go ahead and get our inspect and get our console up and then when we click click on these tiles we're going to see that it's printing out the index so if you're printing out all the numbers sequentially like this you know that everything is working now we can go back to our Tic Tac Toe component into our handle click method we'll remove the console.log and what we're going to do is we want to place the Current player's turn inside of the board when we click on the tile and the way we're going to achieve this is we're going to start by making a copy of the tiles array and we'll just call this new tiles is equal to a copy of the tiles array then within the new tiles array using the index that we passed in which will represent the tile we're going to find the value that's here change that value to The Current player's turn then lastly we just need to update the tiles so we call set tiles and we give it the new list of tiles save that then we can go back to our board and we should be able to click in each time file and because the Current player's turn is always X it's only going to be placing x's in the board so you get it to alternate between X and O we're going to go ahead and check the Current player's turn and if the current player turn is equal to X we're going to go ahead and set the player turn to player o and otherwise we'll go ahead and just do the opposite and set the player turn to player X so now if we go back to our board and I'm going to refresh the screen to clear it I'm going to go ahead and click on each different tile over here and you can see it's switching between X and o one issue that we have is if I click in one tile it's going to alternate between X and O So to fix that what we can simply do at the beginning of our handle click we're just going to add an if statement that goes ahead and checks the value in the tiles index to see if it's not equal to null if it's not equal to null we're going to go ahead and just return so if there's already a value there don't allow any value to be added again if I go ahead and click on this tile here and I click again you can see the value is not changing and I can still click on the other tiles the next fun thing that we're going to handle is that when you hover your mouse over the board it shows you the next player's turn we'll start by grabbing the CSS that we need we'll copy the X hover and O hover and we'll paste that into our app CSS the way that the X hover and however work is that they both have a colon hover selector what that does is it activates the selector when your mouse is over the element such as our tile and then the colon colon after is going to be adding some content after our content and then content that we're going to add is an X and there isn't any content in these squares the only thing is going to be an X or an O and then X or o we're going to be setting the opacity 2.4 which is going to make it look a little bit bit transparent let's go ahead and give this a try let's go to our tile.jsx and for the time being we're going to add an extra class over here so we're going to add our x dash cover and then when we go over our empty squares we're going to see an X but if we also go over these squares that already have a value now you can better understand how the colon colon after works so the current content in there is an O and it's adding the X afterwards and then it's applying the opacity to 0.4 which as I said makes it look a little bit transparent then we can go ahead and just remove our X hover as we want this to be dynamic either showing the o or the X and if there is an item already in the Square we'd prefer not to show that hover so we'll jump back to our Tic-tac-toe and in our board over here we're going to pass down the current player turn we'll go ahead and we'll add a new property called player turn passing in the player turn then we'll go to our board we'll destructure out the play layer turn and then for each and every single tile we're going to go ahead and add player turn is equal to player turn then we can do that for the rest of the tiles just copying and pasting it or using that multi-cursor editor trick that I showed you earlier for this one I do have to do one extra thing because this is on a single line so I just gotta hit enter paste put that in and then just double check that every single tile has the player turn before we continue I just wanted to mention that there is quite a bit of duplication between our tiles as you can see the only real difference is the index or the class name and if you've already noticed this congratulations and of course yes you can improve upon this and if you do let me know in the comments I'll give you one hint the class name does change between the different tiles so you'll need a second array to track that and then we're going to go to our tile where we'll destructure out the player turn we'll create a variable called hover class and we're just going to assign the to null then we'll do an if statement to double check that our value is equal to null which means that the cell is empty and we also want to check that our player turn is being set just in case we made a mistake on our board and we forgot to pass that in so we'll check that it's not equal to null and we'll go ahead and we'll assign a value to the hover class we'll use string interpolation so use the back tick and we're going to pass in the player turn on the board the player turn is uppercase so we'll need to make that lower case so we'll call to lower case and then we're going to add Dash hover now we can go ahead and use our hover class below where we assign our class name we'll pass it in so if there is a value it's going to have a value otherwise it's going to be null and then once we save we can go ahead and try it out so it's showing X if I click in a Cell then the next player is O so the hover is now perfectly working next we're going to get the strike through working we'll go to our our CSS and copy and paste all of the strike CSS and then we'll paste it inside of our app CSS so we'll just go add it there now let's go ahead and try the strike CSS out now there are two classes that we'll need to apply we'll jump to our strike component and we're going to add a class name and we're going to make that equal to strike so going back to our CSS there is a strike class which is the base one that we always need to apply it positions the line that we're going to be drawing at an absolute position so somewhere within this board and then we have our background color which is set to dark orange now we select one of these strike class names so let's try Row one we'll jump back to our strike and we'll paste that in over here so we have strike and strike Dash Row one and you can see that it strikes through the first row if we change this to a 2 it's going to move that line 9 to the second row and a 3 will move it to the last row we also have other ones for the column and we also have two for the diagonal so if we set this to diagonal you'll see a diagonal line let me explain how this works let's start by changing our strike to a row and as you can see over here we're striking out the first row right across now the way this works as I said there are two properties one that's always going to stay the same called strike which tells our element to be positioned absolute which means it's going to be positioned relative to its nearest ancestor which is the board and then within the board we can move that element on top of all the other elements within the board so as you can see we've moved this strike over here which would be at the bottom on top of this row over here and the way that we did that is with a second CSS selector we used strike Row one and strike Row one in combination with the position absolute we're using this property called top where we can say position 15 from the top of the ancestor element which is the board so we're saying 15 from the top from here which brings us down to over here if we go ahead and look at row number two we're going 48 down from the top which creates the line over here and then for all the rows you can also see that we're setting the width to 100 so that our line is drawn from one end of the board to the other end of the board The Columns are then very similar so if we take a column as an example over here column one and we take a look at our CSS we're going to see that the column's height is 100 percent in combination with our position absolute on the strike we're going ahead and setting the left position to 15 from the left which will draw the line over here and then as the columns get further away we continue to use that left position so once again 48 percent and then 83 to draw that last one over here the most complicated strikethrough is the diagonal so let's go ahead and add an example over here so we have our diagonal that goes across this way and then we have a second diagonal that goes across the other direction and the way that this works in our app CSS once again in combination with the absolute we are using the top and left over here so 50 from the top which was just about the middle and then five percent from the left the real magic is the transform where we skew the Y position you can see for this one we're using 45 degrees and then for number two which is this one over here we're using the opposite which is negative 45 degrees so if I were to change this to 45 that's exactly what we have for the first one and this is what we have for the second one so this is where the magic is for making that line appear diagonal now let's go back to our strike over here and we're going to remove this value as it's going to be dynamically passed in we can jump up to our tic-tac-toe JS we'll add some state for our Strike last and we're just going to make that equal to use State and the default value will be empty then we'll go ahead and pass that into our board as a property and on our board we'll go ahead and destructure that value out and then we'll pass that property down into our strike class component and finally we'll jump to our strike class where we're going to go ahead and once again destructure that value out then we can go ahead and update our class name where we're going to use string interpolation so we'll use that backtick we'll add strike back we'll put a dollar sign and we're going to pass in that strike class we can go ahead and test this out by jumping back to our tic-tac-toe going to that use State and we're just going to add strike row dash one and if you have a strikethrough that means it's working we'll go ahead and remove that test and the next thing we're going to do is we're going to go ahead and check for a winner the way we're going to do that is we're going to be using a use effect so if we go to our Imports over here we're going to add use effect within our tic-tac-toe component we're going to go ahead and call use effect we'll pass in an error Arrow function and our dependency list is going to include the tiles every time the tiles change we're going to go ahead and call check winner check winner is going to be a function that we're going to Define outside of our tic-tac-toe component and we'll just do a little test to make sure this works by putting a console.log of check winner and we'll save that and then we'll go ahead and open up the developer tools and open up the console Tab and every single time that we click on one of the tiles we should see the text over here check winner and we know that this is working to determine the winner in tic-tac-toe you need to get three in a row and the way we're going to be determining the winner is by creating an array which is going to have all the winning combinations we'll call that array winning combinations inside of this array we're going to go ahead and Define an object that contains the winning com combo and the strike class that we should show let's start by defining our rows the first object is going to have a combo and that's going to be an array now this array is going to be the index of the three tiles that we should check for a winning combination for the first row the very first tile is at position zero the second tile is at position one and the third tile is at position two so all we have to do is fill in our array with 0 1 and 2. and then if that is the winning combination we're going to have a strike class of value and that's going to be equal to strike row dash one for the next row we can duplicate that line and this tile over here as in position three so we can put a 3 over here and this one is at position four and this one position five we can see that if it goes zero one two and then three four five so three four five is what we have here and then we'll go ahead and update the strike class so it's strike row two and then we'll duplicate this line again and as you can imagine the next number here is going to be six seven and eight and then we'll update the class to strike Row three next we can go ahead and figure out our columns we'll go ahead and we'll just copy the first line there now to figure out the columns and the numbers we have over here what's really cool is by doing the rows we actually have all the indexes in front of us so 0 1 2 represents this top row three four five this row and six seven eight so if we want to know the numbers for this column over here take a look over here and we see that it is zero then three then six so we just update our numbers over here to 0 3 6 and we change our strike class from row to column let me go ahead and duplicate that so I've just duplicated that twice now to figure out the next column that's the middle column over here we can look at these numbers once again so it's going to be one then four and then seven for the last one it's going to be 2 5 and 8. so we'll update those numbers over here two five and eight and we'll update our strike class to column three lastly the diagonals we'll just go ahead and copy one of the columns now for the diagonal we'll start with the first one which should be zero then the second one will be four and the last one will be eight and we'll change the strike class so it's diagonal dash one and then we'll add our second diagonal our second diagonal is going to go across this way so we'll start the lowest number two and then four is the same and then six is its ending point and we'll just update the strike diagonal 2 2. now we can go ahead and Implement our check winner function as you may have noticed the check winner function is outside of the tic-tac-toe component you could leave the check winner function inside of here however I moved it out as it could be tested separately if we wanted to back inside our tic-tac-toe component we're going to pass along the tiles and set strike class to the check winner function inside our check winner function we'll go ahead and accept those parameters we'll delete the console log and to check for the winner we're going to be looping over our array of winning combinations we'll use a for Loop we'll do a const winning combination of winning combinations and then from our winning combinations we're going to go ahead and destructure the combo and the strike class and we'll make that equal to Our Winning combination we could also destructure right over here if we wanted to instead of doing it on the next line let's go ahead and do that little refactoring now so instead of destructuring right over here let's just destructure that value out right away our combo represents the position of the tiles that we want to check for winning combination and the way we're going to do this is we're going to extract those three values so we'll get tile value 1 and we're going to make that equal to tiles then we're going to pass an index in and we're going to get that from our combo array so we're going to get the first value and let's take this this one over here combo with three four and five so we go zero one two three three is going to be over here we'll pass three into tiles and that's going to give us O then let's do the next two we'll get the second value and then the third value we'll pass one over here and two over here now for this one over here when we look for the second position in the array we're going to get four which will be the X over here when we check the tiles array at a position of four and then we're checking for position five over here and we check for position five we pass that into the tiles and we get an O then we can go ahead and check if all three values are the same we'll do an if statement and we're going to check if tile value 1 does not equal to null and the tile value 1 is equal to tile value U and that tile value 1 is equal to tile value three if they are equal we can go ahead and set our strike class by calling set strike class and passing in the strike class that we got from our winning combination and when we say if you see the strikethrough for the winning combination that we have on the screen let's try this out again to make sure our rows and columns are working so let's go ahead and get a winning combination at the first row over here then I'm going to refresh and get a winning combination for one of our columns so our Center column now has a winning combination and the proper strikethrough back to our component diagram the next thing we're going to implement is our game over component the game over component is displayed when a player wins the game or there is a draw we'll go ahead and create a new component called game over dot jsx inside of here we're going to use that FFC command to create our game over component quickly and then we'll just add a div over here where we'll just put game over then we'll go to our Tic-tac-toe jsx and below our board we're going to go ahead and add our game over component we'll save that and just make sure that it displays the correct text on the screen the game over component is a little bit complicated as there are times when we don't want to show it times when we do show it and it's either going to display text that says it's a draw X wins or Owens and to help us better manage this we're going to create a brand new object called game State we'll create a Javascript file called gamestate.js this game State object will be similar to that of an enum in other languages and will contain four different states player X wins which we'll go ahead and assign a value to and we're just going to set it to zero player o wins and assign that to another value and then draw and assign that to 2 and in progress and assign that to a value three the reason that we assign these two values 0 1 2 3 is that we wanted them to be unique we could have also just taken the name and then assigned that to a string however I found this is a little bit simpler and kind of copies what an enum would do in other languages finally we just need to go ahead and Export our game State we'll go back to our tic-tac-toe component and we're going to import our game state inside of our tic-tac-toe component we're going to go ahead and add some new state to track our game States we'll add the game State and set game State and we'll make that equal to use State the default value will be our game state DOT in progress we'll then pass our game State into our game over function inside of game over we're going to go ahead and destructure that value out and we're also going to go ahead and import our game State instead of our game over function instead of having this return statement we're going to switch this to a switch and for the switch we're going to pass in the game state that we destructured then we'll set up cases for each one of the game states that we can be in so if the game state is equal to in progress then we're going to go ahead and just return empty as we don't want to show anything on the screen and we can see that our screen is already updated and nothing is showing for our game over the warning that I have over here is letting me know that I should have a default case that warning is coming from es lens we'll just go ahead and do the same thing that we do for in progress and return nothing the next case that we're going to go ahead and handle is our player o wins and for that we're going to be returning a div we'll apply a class called game over and for the text we'll put o wins the next case is going to be very similar and we're going to handle X wins we'll change the value over here to X and the value here to X as well the very last case that we're going to handle is a draw and for that text we'll just simply put draw before we test this out let's add our game over CSS I'm going to go ahead and copy this and then I'm going to go to my app CSS paste it in save it then we're going to go to our Tic-tac-toe and within our tic-tac-toe component we're going to go ahead and update our default state to test this out we're going to switch from in progress to player o wins and you should see this nicely laid out game over text where player o wins we'll switch this to player X wins to see if that works and yes it does and then we're going to go ahead and try the draw out and that works as well and if we switch back to in progress we should not see anything and there we we go now we can go ahead and use our set game State we're going to be passing that into our check winner inside check winner we're going to go ahead and accept that parameter then when someone wins the game we can go ahead and set the appropriate state so we'll check the tile value and we're going to determine that tile value is equal to X or o if it's equal to X that means the X player one if the X player one will set the game state to reflect that so we'll say x wins and that will set it to X then inside the else the only other thing that could have happened is that layer 01 so go ahead and just copy that paste it and change this to oh let's go ahead and test this out so I'm just going to make X win and that works then let's test the game over text for oh so I'm going to make Owen and that works as well the next state we're going to deal with is draw as you can see I have a draw over here and there is no game over state so inside of our check winner outside of the for Loops I'm going to collapse the for Loop and right after for loop we're going to do our check over here we'll do this check by adding a constant called are all tiles filled in and that's going to be looping over every single tile using the every method which takes in an arrow function the parameter is going to be a tile and we simply need to check that the tile is not equal to null if this value is true that means we have a draw and we can set our game state to draw and once I save that we'll see that we get our draw game over text on the screen there is however an issue and I'll go ahead and show you what this is I'm going to fill the entire board except we're going to have a winner so right now you can see that it says draw when X has one in order to fix this we just go to our for Loop over here where we check for or the winner inside of the for Loop if we found a winner inside this if statement we're going to go ahead and return and by returning that's going to say the correct text of X wins because we stop executing over here and don't execute the check for a draw using our game State we can also solve another issue that our tic-tac-toe game has if we get into a Winning State you can see that I can still click on tiles so once we get into a Winning State we want to prevent that and the way we can prevent that is inside of our handle click the very first thing we can check if our game stage value is not equal to game state DOT in progress if it is we can go ahead and return which exits this method otherwise we continue executing the method as usual let's go ahead and test this up by refreshing the game let's get into a Winning State then I'll go ahead and try clicking the other tiles and as you can see I can't click them next let's go ahead and implement moment our reset component which is going to be the button that allows us to play again when it's game over we'll start by creating a component called reset.jsx we'll use FFC to step out the component we'll call it reset we're going to create a div and inside that div we'll just put reset we'll go back to our tic-tac-toe below our game over we'll add our reset component I'm going to hit tab to automatically import that we can scroll to the top over here to double check it's been imported and then I'm going to save and we should see reset on the screen let's jump back to our reset component now that we know it's working we're going to change the div to a button we're going to add a class name equal to reset dash button then we'll go and grab our CSS over here for the reset button and we're going to paste that into our app CSS and now our reset button is styled our reset button should only be displayed when it's game over we'll go to our Tic Tac Toe JS and we're going to pass the game state to our reset component we'll go to our reset component and we're going to destructure the game State and the first thing that we're going to do inside our reset component is we're going to check if the game state is equal to our game state DOT in progress as you saw over there I did an Auto Import so make sure to import this if your Auto Import didn't work and then we'll just return if it is in progress and now when I refresh the game over here you can see there's no reset button however if we get into a game over State then the button will display let's jump back to our tic-tac-toe component we're going to add a method over here called handle reset we're going to make that equal to an arrow function for now we're just going to put a console.log reset so that we can check that it's working we're going to scroll down to our reset component over here we'll add an on reset make that equal to the handle reset then inside of reset we'll go ahead and destructure out our on reset on our button we'll finally add a click event and we'll make that equal to on reset we can open up our developer tools and go to the console and we'll just double check that reset button is printing to the screen if it is we're in a good State and we can go ahead and implement it let's jump back to our tic-tac-toe component and find the handle reset method we'll start by setting the game State back to in progress then we'll go ahead and we'll set the tiles and reset all the values by creating a new array with nine items inside it and then filling all of them with the value of null then we'll go ahead and reset the player turn back to the X player and lastly we'll remove the strike class by setting it to null and we'll save that now let's go ahead and click the reset button and when that happens it reset the board remove the strike remove the game over text and also removed the reset button itself let's go ahead and just try that out one more time x wins it shows the game over text and the reset button and then we go ahead and click reset and the game is reset once again the very last thing we're going to do is add sound to our game in order to do that we're going to right click on the SRC folder and create a new folder where we're going to add our sound so we'll call it sounds now you can find the Sounds in the complete project or you can find them over here inside of the gist I've added a little comment where I uploaded the files as the dot movie files now there's the click sound and the game over sound when you download these files it's going to have this strange name over here you'll have to rename it to match what's in the project I'm going to go ahead and drag those files into the sounds folder so we have a click sound and a game over sound these files can be renamed to dot wave instead of dot move and when you do that you're actually able to play them within the vs code project over here by clicking the play button will jump back to our Tic-tac-toe jsx and the first thing we need to do is import our sounds we'll write an import statement like we usually do and we're going to assign the first one to game over sound asset and we're going to take that from since we're in the components directory we need to go up one directory and then down into the sounds directory so to do that we're going to dot then we're going to go ahead and go into the sounds directory and then from The Sounds directory we're going to get the game over dot wave and we'll do something similar for our click sounds we'll do an import for click sound asset and we're going to get that from the same location and the file name is click.wave then I'm going to go ahead and use our Imports we'll do that by defining a game over sound object and we'll make that equal to a new audio object passing in the game over sound asset the first thing we're going to do with our game over sound is we want to tweak the volume a little bit and lower it so I'm going to set that to 0.2 and then we'll go ahead and we'll grab our click sound and we'll make that equal to a new audio object taking in the click sound asset then I'll take our click sound and I'll set the volume equal to 0.5 in order to play our click sound and game over sound we're going to be using a use effect and we're going to use one use effect for the click and one use effect for the game over sound the use effect for the click sound is going to work as follows we'll Define our use effect we'll pass in our Arrow function now we're going to do an if statement over here and we're going to do tiles.sum passing in an arrow function and we're going to make sure that at least some of the tiles are not equal to null which basically means that there's a value on the screen if there's a value on the screen like an X or an O then let's go ahead and play that click sound otherwise it's going to end up playing the click sound as soon as the board loads and then for this use effect we're going to need a dependency and the dependency that we're going to have is on our tiles so technically you could possibly move this code over here but it just looks a little bit cleaner in its own use effect let's go ahead and try that out every time I click on a tile you're going to hear a click sound foreign lastly let's go ahead and add our game over music we'll create another use effect that use effect will take in an arrow function and then we're only going to play our game over music if it is a game over and there's only one state that we need to really check over here so if it's not equal to in progress that means we're in a game over State and we can check whether or not we can play the sound so right over here that means we're in game over so we go game over dot sound dot play and this game State over here is going to have a dependency on the game State object let's go ahead and test that out thank you and there you go we have our click sounds our game over music we're able to reset the game and if we want this to match the demo at the beginning we can rename our reset button over here to play again if you enjoyed this video smash that like button click subscribe and hit that notification Bell

Channel: Coding With Adam

Views: 7,394

Keywords: react, tictactoe, react tictactoe, tic tac toe tutorial, react tik tak toe tutorial, easy react tutorial, fun react tutorial, 2023 react tic tac toe, 2023 react, useeffect, usestate, tutorial with usestate, how to think in components, react components, react code tutorial, best react tutorial, webdev, simplified, simply web development, make react development easy, tic tac toe css, beautiful looking tic tac toe

Id: 4Gt_YyGf6B0

Length: 53min 2sec (3182 seconds)

Published: Mon Aug 14 2023