Chess - “Can it be done in React Native?”

that one moves up and down or back and forth all the way if there's space to move in but that one can only go up that tall one can go any way it wants and this one on the diagonals one square diagonal plus one square straight let's play a game i play white okay let's play [Music] hello react native developers i hope you are well william here recording from beautiful switzerland in this episode we are building this fun chess game based on inspire from chess.com thank you to expo for sponsoring this video the team at expo is also a fan of the queen's gambit series and they wanted to collaborate with me on this project if you are a subscriber of the channel you know that i've always been using expo with react native i saw an opportunity to use web development skills to build truly native apps and in turn inexpose an opportunity to bring web development like agility to my react native projects and now the team at expo is building interesting things with expo application services to deploy seamlessly any react native projects even if you are not using expo you can easily build tests and deploy to the google play store and the app store your react native projects so i definitely recommend that you check them out link in the video description below i am pretty excited about this example because first of all we've never tackled any games on can it be react native and so new types of example and yet we are going to use the same old recipes that we always use with reanimated2 so i am pretty excited that we get to apply these recipes into a fun uh little game very satisfying which begs the question how would we do this in react native well we're going to build the board in a flexbox pretty straightforward and we're going to use a game engine to give us the possible allowed positions there are many that exist in javascript i looked at two one that i really liked is uh chess.gs that's the one we're going to be using it's very good and it's very lightweight in fact so lightweight that we could potentially run it on the ui thread so i'm really satisfied with this library so each piece has a pungest handler wrapped into it so we move it around and when we release we check is the position valid or not if it's not valid we go back to the original position if it's valid like here for instance um we animate to the correct position and then we go back to the javascript thread to get the new state of the game so you see now it's uh white to play so i cannot move the black pieces so on the punches handler we have enabled equals is player black or white and so now black can play somehow and here we have the underlay the yellow underlay which it's a fun animated style you you're gonna love it and so we can play the game nicely so just really a fun game to implement with reanimate 2. before we jump into it if you are interested to learn the fundamentals of gestures and animations i hope that you will check out my online course at start reacnative.dev my goal with this course is to provide you all the tools and knowledge necessary in order to build incredible user experiences that will run as ccfps even on low-end devices so if you're interested to learn the fundamentals i hope that you will check it out at startree native.dev we are into vs cody here and the first thing we're going to build is the background with the squares so it's going to be pretty easy using flexbox so i'm going to do a container of flex one and we need eight rows and then in each row eight squares so i'm going to do an array of size 8 do a fill and then we can map over it value we don't care we want index and so we can return a raw component so the key is index and we pass a row as property the index let me do the raw component so i'm going to do raw props we have the row row props and we are so we return again we're gonna use a container of flex one sorry up some syntax errors flex one and flex direction raw so we want the squares to be aligned in a row and again we have we create an array of size 8 we fill it with some values and we map over it and we get the index and we return the square component now the square component we pass row and the column i just can call this one call as a key which is a column maybe i can do it here as well now let's create the square component so we have interface square props extends raw props and it does call as a number so we can do square so we have row column square props and we return the view let me just do return again reflex one and so we need we can display as text row and column text from react native now we need the background color [Music] so you see already the labels so background color this should be fun let's do if column is so even so modulo 2 equals zero it's let's say white or black looking good and now we need to offset by one so we have we do column [Music] plus offset [Music] and so offset if raw is even so modulo 2 equals zero it's one or we have set by one basically or zero and that looks good and i know so here i put random values i didn't know if it's black or white but i know that so it's a lucky shot but i know that here the board is correct because we have the white square at the bottom right so this is good and let's do the labels so the row it's not zero to seven but it's from the bottom one to eight so i'm gonna do um eight minus raw so yeah now it goes from one to eight that's good and um now here i need to go abcd so we want um we want to create this as a str the letter we want the letter so we do from car code of column but we need to add so if column is zero we want a so we need the car code of a and the car code of a is 97 but we can even do it a bit more flexible by doing car code at a so here it's clearer what the 97 value is that looks good but now let's add some styling let's do um background color no padding so add a bit of padding small one four and we want to do justify content space between looking good we want all of these to disappear so here is the background color is white the color is going to be black and vice versa so we just invert so here we have style color i want to make it a bit bold i'm going to do maybe 500. but more importantly we want to add some opacity [Music] but [Music] it disappeared is it because of the color no [Music] what's going on so it's not font size it's a font weight okay looking good and here i want to do so you i want the a to be at the right bottom so i'm gonna do a line self flex end but now let's do the important stuff opacity here we want the opacity to be one only if um row equals seven perfect and same here if column equals zero no that's not it we want the letters only the row equals seven yes and the column if column equals zero all right so that's a good looking board now let's add the pieces and i think the first thing i'm going to do here is to instantiate the game engine so we're going to use chess.gs chess equals use const so use const is a lazy ref hook you can use user f if you are confused by use const a new chess to instantiate the game engine and so chess from chess gs that's not now the wrong import that's the one and we can use it now to have the state of the game into a react native state and that's exactly what we're going to do so const state set state use state and the state default state is so i want player to black or white so here default is going to be white and then i want the status of the board and here there is a method called dot board that gives us the current state of the game now we can use it to display the pieces so the board are also rows and columns so i can do state dot board and map over it and that gives us the row and i'm gonna use the index so here it's going to let's use i and then i can map over the rows to get the pieces so it can be square and now the square can be a piece or null no leaves there is no pieces so if it's null so if square equals null we return nothing and if not we return the piece now if we go to the piece let me import peace if we go into the piece component it's just an image which has an id and the id is the first letter is the color of the piece and then the type of piece r is hook p is pawn n is knight so it's all usually the first letter but k is king so we take the second one for knight bishop queen so here we pass id and we get from square so it's a string concatenation and the first one is the color the square dot color and the second one is the type of piece so square dot type this one is typed as so you see it displays nicely here this one is type as a string and to get it as a key of pieces we can do const and here he knows that colors are black or white it knows all the types of pieces so typescript knows that here the id is correct so it's kind of cool that we can use these string template literals in react native and there is a small act if you want to enable this into express decay version 40s to use the latest bubble core and then use the local expo cli because if you use the global one it's not going to resolve against bubble core so now we need to make the pcs in absolute positioning it's it's just so fun it's already like pretty fun uh so let's put an an absolute position up so we we know already it's going to be wrapped into a punjabi chandler but let me end the punches chandler takes an animated view as a child so animated view oops and we can add some style we know that we need some position absolute and we have the weave and the height which is of size and size is a it's a square so it's height it's the width divided by eight so now they're all overlaid on top of each other so we can pass a default position which is going to be a vector should i call it position okay let's call it position so it's just an x and y value which we can infer so let me say this one which we can infer here so position x is i times size so i is 0 to 7 and so we multiply by size and same on the y axis g i g j j times size and so let me import it let me close this one let me use it here so we get position so transform translate x is position.x translate y is position.y nope that's not good so that would be g times psi you see it's not correct right i guess i got it yeah now that looks good all the pieces are the board is valid and the pieces are valid this is great so now let's add the pan gesture handler around it so let's move this into an animated style first so we're going to create translate x translate y so here we go through the same process we always go through translate excellence y animation values punches handler we start the gesture we keep the offset value we move the gesture is active it's offset plus translation but we're assigned to translate x translates y we end the gesture we snap somewhere here the only difference is that the offset that we usually keep in the punches under context so that keeps the context we use to keep a state across different states of the gesture here we're going to use into an animation values you have set because we're going to need it in some other places that's the only difference actually let me create also the offset values directly so i'll set x use shared value of set y and translate x translate y and here we use the default position position x and position y so now this one becomes an animated style so we are preparing everything before adding the gesture this is use animated style here it becomes translate x value translate why don't worry okay that looks good and now we can add the punches chandler and the chandler and so on gesture event and so here we know we know the drill oops use animated gesture and layer connect here we store your scene value on start sorry so offset x equals translate x value offset y equals square translate why that value when the gesture is active we get translation x translation y and we know that translate x equals translation x plus offset x that value and same for y and here's that value so perfect let me import and here it would be that value so i can move the pieces perfect now obviously on end we need something to happen and so on end we are going to call back to the javascript thread so on end we [Music] so i'm going to create a function here called move piece and we want to invoke it on end and so you see here i have my little um plugin that warns me esme plugin that wants me that i should use run on gs which i'm gonna do and i'm gonna pass the position where we want to go so what what i have here in the notation file so i have the size of the board of the square and then i have two translation and to position so the game engine knows a1 h2 and so on so these are like all the positions but we only know about translations right we translate by 50 pixels and so on so to communicate with the game engine we need to be able to go back and forth so here two translation from a point value we get a position on the board and here from a translation no it's the other way around from a position we get a translation and here from a translation we get a position so here we have the translation we want the position to position x is translate x dot value y is translate y that value and so we have the argument here which is the position we want also so this is where we want to go offset x of set y contains where we were so actually i could also do here so from offset x so here we can do from two and so we have these two positions and we call back to the javascript friend to ask the game engine if these positions are valid so position so we actually need to use the game engine so i need to pass it here as a prop chess add it as a type here okay and so now we can ask him if the two position is valid so we get all possible moves so we do chess so i get it here so i think it's called moves and i need to do verbos equals true and we want of all possible moves we want the one where the from equals to from and 2 equals to 2. so if the move doesn't exist it's undefined so we snap back so here we want x y translation which are the translation to which we snap which we get so we go from here positions back to translation so to translation and if the move exists we go to uh two if not we go to from if the move is valid or not now let's animate so we do translate x dot value equals with timing to x and same for y so let's have a look something is not working to translate okay offset you might have caught this one so here it's offset why okay so let's have a look again now it looks nice here up or it goes back this one is not valid this one should be so now we need to actually play the move if it's valid so if move chess move and should i just pass so let's see if now black can play yes so you see now and so for instance if i do this so it's white white has to play so many things we we need to do here let's start with disabling the gesture so here we can still move black even if it's not black to play and also um implement the capture of the pieces so when we play the move we're going to call back to the board components we're going to do oops on turn here it is and so here we have on turn use call back and so here we're gonna set the state with the new position of the board and the player so we're gonna do set state player is if state dot player is white it's becoming black and the board is newborn and here we have the new state of the board so that implements a piece capture if the piece disappears from the board it will disappear from the state here okay and here we have in a bird and we it's in the pieces in a bird if state dot player equals equals equals squared up color here it's confusing because it's a piece not the square and we are in a bird is bouillon and let me update here and we can use it here in a bird so here i move white so the white pieces cannot move anymore here i can move black and i can implement the capture of the pieces isn't that cool and one thing we need to do you see is that the piece needs to be always the active piece needs to always be on top of all the other pieces and we're going to implement the underlay squares and in order to do that we need to know if the gesture is active or not so we're going to create is gesture active default value is false if we start the gesture it's true and on end it's false yes so here we can use it into the style so that index is the gesture active 100 or zero and here it's important that all so z index only works if all the child are siblings all the components are sibling and so it's also important that the underlay squares stay sibling so here i'm going to use a fragment so the irish hierarchy stays flat and so we can implement so first of all here we can check so let me play one piece here we can check that the piece is always on top and you see actually we can even do better i don't know if you saw it was very fast but actually when we release the gesture it animates and goes under so i'm gonna move this one to the callback yeah uh perfect and let's implement so we have two underlay squares to to do so animated view and it's from and too so let's do from first it's an animated style background color yellow with some opacity something like this and position absolute size and so here actually the piece even if it's at rest it's not going to be 0 it's going to be 10 because it needs to be above these squares so i have a double import and we need of course what the translation so you see the square here and here i'm gonna simply use offset and we need to add some opacity the gesture is active so opacity is gesture active true opacity is one if not zero [Music] something is off translate of set x it's always you see because of this but these things happen looks good like to play and now let's do the two position so we're gonna copy this style and up and now this one it's not offset x it's the position so let me um so here we're gonna do something funky so we need translation translate x translate y convert it into a position so round it and then go back to the translation so i think i'm gonna do something like uh translation equals so we go to position with translate x so from translate6 translate why we want a1 h2 and so on and then go back to the translation i mean let me just to show you what i'm doing here let me just use the translation directly up translate translate why okay translate sorry i'm getting up okay so you see now it moves like this but if we do we go to position and then back to translation it's gonna do what we want it to do and so this one becomes tr.x t r dot y let's have a look and so no translate white so here again always the same mistake so you see now it works nicely isn't that cool it gives me almost goosebumps because i've played so much on chess.com so now black has to play and we have the peace capture white up guys i hope you enjoyed this example thank you expo for sponsoring this video the team at expo is working on really interesting things so we can build test and deploy any react native apps seamlessly so i recommend that you check out expo application services link in the video description below that was the first time we do a fun little game in react native hopefully that's not going to be the last time so i am looking forward to talk to you soon and until next time happy hacking [Music] you

Channel: William Candillon

Views: 22,617

Rating: 4.9684329 out of 5

Keywords: React, React Native, Can it be done in React Native?, JavaScript, TypeScript, gestures, animations, reanimated, Native Apps, Apps, Mobile development

Id: JulJJxbP_T0

Length: 36min 27sec (2187 seconds)

Published: Tue Jan 26 2021

Reddit Comments

[u/FoxBearBear]

No, it’s impossible.

[u/[deleted]]

Many people don't know this, but chess was originally played on react native.

[u/stefanmajiros]

Guys, who watched video: you can find even job postings for this below:

https://apply.workable.com/chessable/j/16A2F8436F/