Create a Chess Game with ReactJS - Part 1: The board!

hello and welcome to the first episode of the series on how to create a chess game with react jazz in this series we are going to try to make a chess game that works and if it is working at the end of the series we might even try to create a desktop application from it with the help of electron let's get started right away so to get started i've opened up the command line in the folder where i want to create the project so we start off by writing mpx create react app we are going to write the name the project which will be as game or chess app actually and then let's see we are going to pause any template which will be typescript since we will use typescript for our project i'll be back when this is finished so now that the installation has finished we are going to cd into our directory and i'm going to open it up in my visual studio code editor and you can do the same if you'd like to but you can use your own code editor so i've opened up the code editor and now i'm going to open up the terminal and run npm run start we start the development server okay nice so we've started it up on localhost 3000 as you can see it's running right here in the browser and i'm going to open it up right here so for the project we are going to use s pieces you're right here i've found this wiki media page where we can find audi js assets which we'll be using in this project so i have already downloaded those and if you'd like to follow along you can download the assets from the github repository where this project is or just from this website right here i'll put the link in the description so let's get started with adding the assets to our project so in our short folder we are going to create a new assets folder and in our assets we are going to create a new images folder and i have already put the chess images in this folder we're just going to copy them over into the images right here as you can see every file is now loaded in we have the bishops kings the knights bonds the queens and the rooks and we can get started with creating the board actually so to start off we see the board in front of us it is a big square with one two three four five six seven eight by one two three four five six seven eight eight by eight is sixty four tiles and um at the bottom right we always have a white square and at the top left also a white square and then it's just a checkered pattern um so let's see how we are going to create this so okay i i've thought it through a little bit and first thing that we are going to do is we are going to remove the default page so let's go to our apple tsx we are also going to remove the testing page by the way we don't do tests everything works immediately um and here we have our yes board or checkers not just and we remove the class name from here we don't need the logo anymore and i think this is it and if we save this up it will uh bow and we have a blank page okay nice so um let's see what i think that we want to do is we want to create a component for the chessboard since we might want to reuse that so we're going to create components and inside here we are going to create a chessboard a dsx component and also a chessboard css file um import react from object export default function s board and then return a div which says hello [Music] and i actually don't know if chessboard is one word or two words one word okay um so let's see we also need to import our styling so just board this then we want to import it from our current location like so um and then we want to render our components so we are going to name this hello imd s board and we are going to import it in our app.css or sorry our app.t6 and we're going to say you want to enter a chessboard and then as you can see we see the hello i am the chessboard that is what we wrote right here if we type a couple more exclamation marks we will see that it is updating yes nice okay so now that we have a separate component for the chessboard we are going to look into how we are going to create the board so i've looked a bit at the board and i've also looked at it online and i see that the chessboard has two axes a horizontal axis and a vertical axis and horizontal axis uses the letters a so h and the vertical one to eight um so i think the most practical thing to do is we create two for loops and then we just render the tiles in those for loops so um let's see what we are first going to do is we are going to create a constant right here so we are going to say const and then axis and then we want to pass in the values of the axis so let's see okay it was just the numbers for the letters um a b c d e f g and h like so then we have our vertical axis we don't really need an array for this but um maybe we want to change it later or maybe just gets updated and a new array appears who knows other names so it's always good to have it in a separate array um so now we have our two axises and we want to render them on the screen so let's see we have our div we are going to give this an id of this board we are also going to lay this one to every chessboard right here and let's see the chessboard let's give the background color of black well actually i like this green color let's get this color um like so but obviously we don't see it because it is it is not defined as a width and height so we're going to give it a width of 500 pixels and a height of 500 pixels okay nice and now we want to center it in the page so this is what we do in the add to t6 and we are actually going to give it the uh there's an idea of app um and then right here oh we still have a lot we are going to say that we want a display for it um display of grid and then we want to use put items or content something with content i think place content yes place content and then center and then if we refresh okay nothing will happen that is because the app is not covering the whole page let's see the yes it only has a width of the pitch the height still needs to be a 100 view height like so um okay so we need to add a height of only few height but um i don't really see it um getting inside the center and the different oh we need to make uh okay so i see them this is a id so it needs to be a hashtag yes okay so now it is being placed in the center okay all good nice um and actually let's just take this background color as well while we're at it um background color like so yeah okay nice i don't know how white this is though can we see that 801 pixels okay um let's see 801 pixels 801 pixels and now we almost have an exact copy of the page but what we want to do now is we want to create the tiles so right now it is just one big background color and we want to render our access on the new background we are going to create a for each loop so let's see how we do that in react so one way to do this is we create a constant right there or a led actually let board equals an array and then in this array we write well in this array we define the board then by saying for let's i equals zero and i smaller than horizontal axis that length i plus plus and then for let j equal zero j smaller than vertical axis that length a plus plus like so so now we have our two for loops and then we just simply say board.push and then we add a new spam to it which will um render let's see um can we write a string right here so how do we write a number except okay um so then we say uh [Music] uh yes horizontal and then let's see we write horizontal axis i oh and then vertical [Music] vertical axis okay like so and i'm actually going to remove the vertical and horizontal like so um and then we want to render our board so i think we can just say um board oh excel i'm curious what's going to happen okay we have a a1 a2 a3 a4 um but we have an a0 i think or is that not correct [Music] 0 horizontal axis ij [Music] so why do we have an a right here and we have an 8 also an 8 without anything let's see okay so i found out what the problem was turns out there wasn't a problem so as you can see the first item i've put a console of right here the first item is a1 and as you can see it is actually a1 so it's not one a two a three a four a five a six a seven a eight 8b it is a1 a2 a3 um so it i i just read it wrong so it's just working so um let's go okay um now that we have our numbers we want to actually put them in the right order so top left should be eight wait let me correct this um a eight this b8 c8 v8 e8 yes so in the top is the 8 and in the bottom is the one let's see top 8 bottom one we start we're going to run from top left to bottom right so we start with the eight so we go the opposite direction in the vertical axis i'm going to create numbers from this again i think well maybe we want to actually use rings for this since it are labels um so let's see we want to start from top to bottom we start from the end of the array with eight so in a vertical axis we are going to start not with j equals one but j equals vertical axis that length minus one well it's bigger or equal than zero then we aj minus minus let's try this out and we have at the top left eight seven six five four okay so it's really good um the only thing we need to fix i think is um now we're rendering from top left to bottom left and you want to render from top left to top right and the second row well actually it doesn't really matter we can just render from or does it actually now we yes because the array is pushing down from left to right and then the next row in the next row so we first need to go through the eighth row and as you can see we are not going to the eighth row to the eighth row but truly a row um and that is actually the row we are well not going to end with but um yeah we are going to start with the number eight so we need to swap those two axes so let's start with doing that um and i hope by swapping them yes now we yes now we get all the eight uh things so a8 b8 c8 d8 yes and then seven uh okay so i think this is correct we have a8 b8 c8 a8 b8 okay nice um so first thing i'm going to do is um make this a lot clearer by just adding brackets to this so now we can see which group yes okay so this is a lot more clear so now that we have everything in the right order we want to instead return a span we want to return a a div i think um and before we're going to do it i think we are going to create a board of 800 by 800 so it's it's a little bit better i think but then we can give our span a width of 50 pixels i'm just going to do this in line with 50 pixels and it doesn't seem to like this and so let's see we have our style install is not assignable type css properties are undefined okay so it doesn't like inline style oh we can't add style to a span is that it i think that's a problem let's make a div out of it and then hit style no type strings not okay um but we're just going to make a class name for it we're going to do it the proper way anyways so we are going to name it um tile and a tile is going to live inside the chessboard so right here we have our chessboard and then we have our dial class then we want to give it a width of let's see we have 800 no width and then we have eight tiles so 800 divided by eight is 100 pixels a in any height of hundred pixels um as you can see they are not um i'm displaying correctly they are actually um displaying underneath each other so we're going to fix that with a little bit of flex but actually a grid might be even better well we're going to go with flex um so we have our chess boards we're going to say display blacks and right now they are all stacking up so we are going to say flex rep rep yes and now we have our flex width ready to go we have also we could have also done this with a grid instead of a display flex but um yeah i think flex is fine we might redo it with grid actually it looks a lot cleaner because it is a grid um so we are going to replace the flex with a grid um i think it just is more a lot more fitting because we are actually working with a grid so we are going to change this to display grid and then we are going to define a grid we are going to say grid template columns and then we want to define the size of our columns so we are going to get eight columns so one two three four till eight so we want to repeat this eight times and each column gets to have a 100 pixels like so and then we want to do the same for the height the grid template rows repeat 800 pixels and if we now open up our html editor we see that it is exactly the same but now it is a grid item which is a lot more fitting in this situation i think so um congratulations we have created a grid so let's finish this off by um creating a grid which has two colors so as you can see right here it's a checkerboard or a chessboard sorry but it has a checkered pattern um we don't have that yet so let's implement that at the moment everything is green we want to also create a white tile i already copied the color and the best way to do this is i think to create a separate glass width so we have tile we have the black dial and we have the white tile like so um oh dot white file the white towel gets to have the this background color and the black tile is going to get this background color like so and then we are going to add a different background color for our chessboard we are going to give this a background color of blue or go with blue um and if we refresh the page we will see our blue background color nice so as you can see it is not green anymore because we removed the green background color from the chessboards and we don't have any style with the class black tile or white towel but those are not being activated so um we need to programmatically add them right here just like we do with the normal tile if we add tile black or black tile nothing will happen is it black tail is black tile right should i save it oh okay so it was just loading so now everything is black but we want to um yeah depend depending on the position of the uh or the tile we want to change the color so i'm just going to open up the white board so we can draw out our ideas a little bit better we have one two three four and we have one two three four um okay so this is a lot smaller board but let's try uh try this out and the one one tile is dark so let's see we pick a different color for that this one and then we have a light square and then we have a dark graph and then again a light square um on the second row it starts with a light square then we get a dark square then a light square and then like so i think and then for the light squares we pick oh this is going to be confusing pick a green color um okay so let's see um i've changed the abcde with one two three four so maybe we can like if you add those two one and one equals two it's even it's light two and one is three it's uneven it's dark um sorry one and one even equals two even is white it is dark sorry two and one is three it's light and three and one it's even even is dark four and one is uneven and uneven is light uh one and two is uneven uneven is light yeah okay nice so um based on the position all even numbers of the boards are going to be light so um sorry all even numbers on the board are going to be dark so at the bottom left we have 1 comma 1 1 plus 1 is 2 2 is even is dark this one is two comma one two plus one is three three is uneven so it's light so um that way we're going to calculate whether um we are going to add the light or the dark class to it so we can simply do this by adding up our two indexes which will be the j and i and we're going to add the number which is j plus i and we're going to add plus two since they start at zero so the indexes start at zero but we want to start at one so we need to add one number for this variable and one number for this and one and one equals 2 so that's where this 2 is going from so now we have our number um and then we want to check if the number is dividable by 2 or if it is even so if it is dividable or number modulus 2 equals zero so if that's no reminder and we want to render let's see the dark tile and else we want to render the light tile so right here we are going to push the dark tile and otherwise we are going to render the light tile like so and i hope this works we almost got it okay so um if it is even we want to push the light style no we want to proceed ah okay so i still messed it up but i don't know how it's probably um my my thinking is not that good but we we got our check awards so i mean that that's really good we still have our um text right here we can actually just um get get rid of that like so um this one and if we save this up it will load again and we will see our checkboard appearing okay nice damn so this looks really good um i'm going to finish off the first episode right here i hope you enjoyed it i hope you could follow along leave a like down below comment subscribe and see you in the next episode bye

Channel: Frontend Coding

Views: 11,319

Keywords:

Id: Iri__zwxwHg

Length: 23min 24sec (1404 seconds)

Published: Wed Jan 20 2021