AI Checkmates Coding: ChatGPT Develops an Epic Chess Game in Record Time!

Description

I tasked ChatGPT with building a Chess Game as a web app using the ReactJS framework. The results were shocking. I can't believe AI can code! It finished the entire project in a couple hours.

It still has a ways to go, but I think this will be a game changer in the future! How will Google Bard and Microsoft Copilot compare?

Download the code here:

https://github.com/speige/ChatGPT_Chess

Transcript

I'm a coder and everybody's telling me that chat GPT is going to steal my job well I'm skeptical but I've got to try it for myself let's see if chat GPT can code a chess game in the react web framework chat GPT can you code a chess game for me in react okay it's spitting out a bunch of text but none of it looks like code yet it looks like an outline of the code structure and logic that it wants to use so that's pretty good because as a coder you need a requirements specified to you so right now it's acting like a project manager not like a coder well the instructions look decent it's saying that the board will be an 8x8 grid and it'll have a separate component for a square so it's using object oriented coding and a square can be empty or it can have a piece on it keep track of the player's turn keep track of the positions on the board check for legal moves this is very thorough but it didn't actually write me any code let's see if it can do that chat GPT will you write the code for step one it's doing something oh my heck that looks like real code and it's JavaScript which is what react uses I'm shocked I actually cannot believe I just did this okay let's skim over this code real quick it looks like it's using letters to represent the chess pieces so Rook Knight Bishop Queen and it's using uppercase in one half and lowercase on the other I'm guessing that's to denote black versus white I'm not an expert at react but I think there's a way to code this in typescript with component syntax I might ask it to rewrite that but it's probably fine so it left out this method so I'll have to remember that and tell it to code that afterwards and the square component I don't think has been defined yet but it looks like it's passing the correct data it's kind of doing a nested for Loop for rendering the grids columns and rows so the Outer Loop is going over the rows and the inner loop is going over the columns I think I would have done it slightly differently because I already have an array up here which is my board and it knows the length of each of its arrays so there wasn't a reason to retype the number zero through seven and seven to zero but it will work even though it's not the most optimal code so it explains all the code here but I just kind of skimmed over it myself so I'm not going to read its explanation but it seems fairly competent the way it is coding the pieces is a little bit odd I would have expected to use some kind of graphic image but I guess it's using a Unicode so let me see what these Unicode characters look like I'm just going to copy this number and then in a new tab I'm going to search for a Unicode character code 2654 so it says it's a white chess king and the icon looks correct so that's pretty cool uh Unicode is just special symbols you can type with your keyboard and it was designed for other languages like like Japanese kanji for example but I guess they've got drawings for chess characters I wasn't aware of that now it looks like the code was cut off it didn't tell me the Unicode for Q let me see why it's stuck maybe I'll tell it continue okay it looks like it's able to finish and it did put it in regular text instead of inside of the code box but that's fine that's actually probably not a bug with Chad GPT that's probably just a website that's rendering it wrong when the code gets cut in half oh and it explains the Unicode character thing awesome well let me see if I can actually paste this code into a real project and get it to execute so I'm going to open up visual studio code now I'm going to open up a terminal and I'm going to execute create react app and I'll call it chat GPT underscore chess this is a standard command that you use just to initialize a new project it takes a minute to run okay just finished and on the left side you'll see all the code that was auto-generated this is not related to chat gbt yet this is just a blank react app to execute it I open the terminal and type npm Run start this will open a new window in Chrome with my project running so this is just a blank template now let's paste in our chat GPT code so if I scroll back to the top first it gave me this board component so I'm going to click copy code go back to vs code and in a source folder right click new file and call it board.js for JavaScript I'll paste it in and save and that component should be finished now we'll go back and scroll down to see the rest of the code so it wants a separate file for these pieces new file pieces.js this is the one that was cut off so I'll need to grab the extra piece and paste it in so what's missing is there's no code to tell the board to render that should be in my index.js file can you code the index.js file to render the board word okay it looks like you can do it open index.js paste my code save also it says it wants a square that was a component reference while rendering the board but it didn't give me the code for that so let me ask it chat GPT can you code the square component okay this is so impressive it somehow understands the context so it doesn't have to ask me to re-explain that I'm making a chess game or that square is referenced from my board it just remembers what we've been talking about that's pretty cool if I were to code this I think I would do drag and drop instead of Click maybe we'll have it change that in the future but otherwise it looks fine I'll copy the code make a new file square.js paste it and save looks like it compiled now okay my page is completely blank that's not good something's wrong so one issue here with chat gpp T is I don't think it's going to completely replace the programmer because you still have to guide it you have to know where you're pasting the files you have to know which pieces are missing so that you can ask it for clarification so it's definitely super impressive so far but if I were a novice with no coding skills I would be completely lost as to what is wrong luckily I'm not I am a novice at react I am a web developer but I typically use angular so I pulled up a console to see what's wrong it says that I'm using my piece names as children of a react component that I'm trying to render I actually think the issue is this Legend at the bottom because pieces is a map that takes the letter K and turns it into the Unicode I'm not really sure why chat GPT thinks I even needed a legend so I might just remove this but I think the correct approach would have been to map this to just the value just the Unicode character and then I think it would have worked and I could probably explain the issue to chat GPT and have it fix it but I'm just gonna erase this because I don't see the point in having a legend so let me save the code and recompile okay it looks a little bit better it's definitely rendering things now but I don't think the CSS is set up correctly to style so that the board is in a grid format the icons are also really small maybe I can increase the font size chat GPT can you provide the CSS to render the board not only does it know JavaScript it also knows CSS I'm not a graphics designer so I'm not going to critique this code but overall it seems fine copy it I already have an index CSS maybe I'll just paste it to the bottom here okay my updated app looks much better it's a grid format now I think I would prefer to have some kind of border around the grid so that it's more obvious which squares I can move to let me ask chat GPT to fix that chat GPT can you add a border on the CSS for the the square okay that looks good paste it so for some reason the last column wrapped and also the orientation is a bit odd normally I would expect it to be top to bottom instead of left to right but I didn't give it Specific Instructions so I think I'll just ignore that but probably the Border caused the grid to wrap funny so let me ask it to fix that chat GPT after adding the Border it caused the grid to overflow its wrapping can you fix this okay let's try that refreshing and it looks beautiful I'm actually super impressed I'm a decent coder chat GPT is obviously way faster but I would hope that I would code fewer bugs but I'm terrible at Graphics design so asking it to generate the CSS not only does it save me time but it also does a better job than I would do so let's see what the next step in our code needs to be I wrote down earlier that the handle move needed to be coded so let's ask it to do that chat GPT can you code the handle move method for the board component

okay this looks great it looks like it does not allow you to capture your own pieces it also ensures that it's a legal move then it performs the move it verifies if the king is in check and it re-renders the grid afterwards this looks like a correct implementation it mentioned at the bottom here that there are multiple methods it did not code so I'll have to ask it to code those as well so first let me copy this and paste it into my board JS when it tried to compile it says it's missing a semicolon it seems like it's just right here but it's complaining that it's up here okay it formatted it slightly differently so the previous syntax was using Lambda syntax and I think that's because it's not using a class as a component it's just using a function in this case it's making it a function underneath the class so it seems like it lost its context it didn't remember which format that it gave me the board in the first time so I can reformat this easily and now it should work and I think I already had a handle move yes I did so now it's duplicated so instead of pasting a brand new one I should have pasted it inside of this method so that should be fixed now I'm sure I could have told chat GPT that it coded it in the wrong format or syntax and it could have fixed it maybe chat GPT needs an internal compiler so it can check its code as it's writing it so it's compiling now let's get the other methods it said I need to get legal moves chat GPT can you code the get legal moves method for the board I was hoping by not saying the word component it might give it to me in Lambda syntax but it's still giving it to me in class syntax one hour later okay I've just realized that this entire process is doomed to be a miserable experience because I did not catch a major mistake chat GPT made until the entire program was written so I almost need to start over the issue is the board that chat GPT chose to use is a two-dimensional array and the values inside of it are character symbols that stand for Rook Knight Bishop Etc however if I scroll down to all the logic for actually moving the pieces around which is very complicated logic it's based on a single dimensional array and so instead of thinking of it as an eight by eight Grid it's thinking of it as a 64 length array and so the logic of get legal moves is going to be incorrect because the math for rows and columns will be off in addition instead of expecting a single character value like Q for queen it's expecting an object which has properties underneath of it that object has a color a type whether or not it has moved before because that affects whether you can Castle so it almost seems like chat GPT found two completely different solutions to building a chess game and it merged them together it used one data structure for rendering and a different data structure for the logic and it did not notify me that the two data structures were not compatible and so I've already pasted all this code into my project and tried to run it and it's not working at first I tried to fix The Code by fixing one bug at a time but after an hour of fixing one bug after the other I realized the bugs would never stop and I was ruining the original purpose of this video which was to have the AI do the coding since I was coding everything myself at this point in hindsight I could have fixed the bugs in a different way that might have been easier I could have written a function that transformed from one data type to the other and that was my fault I didn't recognize the root cause and fix it instead I was patching one method at a time not understanding the real issue so because of this I've decided rather than to ask chat GPT to fix the code I want to just do a second attempt and ask it to make a chess game from scratch again but this time as soon as I notice a data structure change or logic that's incompatible I'll immediately tell it it's mistake and have it regenerate the code rather than me fixing it myself two hours later okay I've just finished recreating my whole project a second time with chat GPT and I was much more successful this time something surprising to me was I asked it the exact same question word for word but the structure of the project that it suggested to me was was different than the first time and this time it suggested that I use drag and drop instead of clicking which I think was a better experience in addition although it suggested Unicode characters like before it also suggested sv's G icons and when it generated the CSS it actually gave me PNG that was actually hilarious let me scroll down and show you so here it gave me the CSS and when it got down to the pieces it originally gave me PNG but because I did not have image files already I asked it if it could draw them in SVG for me instead SVG is a Syntax for drawing so here's the white Pawn if I copy this long URL and paste it into the browser this does not look like a white Pawn at all to me I'm not sure how it came up with this and the other ones were equally ridiculous here's a black pawn seems to just be rotated upside down here's a white rook and here's a white knight that one looks pretty cool I think well safe to say chat GPT is not a good artist so I decided just to download some PNG files instead luckily Wikipedia had my back these icons look good enough to me some other interesting things about the code this time it used the react component syntax instead of the function lambdas that it was using before I personally think this code's a little bit easier to read and although it suggests a drag and drop it mixed up on click and drag and drop a few times so I did have to delete the on click code and correct a couple of minor bugs with the drag and drop it also tried to reference an icon array which it had never created and which also was not necessary because it used CSS to specify the PNG files to download so the icon was not necessary I did like the new board syntax that it used it kept it multi-dimensional but it used object checks to store properties of each piece which was much better than just the Single Character of capital r for a white rook and lowercase R for a black Rook that it was using before and I did find an annoyance with chat GPT where anytime it's giving you a large amount of code it seems to skip logic frequently and tell you that you need to implement it on your own but then afterwards if you ask it to code that function it will do it and it's annoying to have to ask 20 times for different functions but luckily you can comma separate them so if you have a large list you can just say give me the code for handle Square click and legal moves and legal pawn moves Etc which came in handy because there were frequent times when I had multiple functions which it refused to define the first time the new code also had slightly worse logic than the original the first time it checked for checkmate and check for me and it also handled castling but this new code seemed to skip those altogether I'm certain if I asked it specifically to code those functions for me it would but I just wanted to get a playable game going so that I could test it as I was starting to get frustrated so I chose not to ask it neither one seemed to cover the aunt passant rule of Pawns either or the ability to upgrade a pawn if you promote it all the way to the end of the board there were also a couple times like this where it would get cut off at the end of a sentence while I was still writing code and I would have to tell it to continue and the next section of code would come out as regular text instead of inside of a code box this was a minor annoyance the code still worked fine and in particular when it was drawing the SVG sometimes it would get stuck at the end of its drawing where it wouldn't give me the rest of the image and when I would ask it to continue instead of finishing its drawing it would start over so some of these pictures I was never able to see how ugly the drawing was that it actually generated so for future reference I've decided just don't let chat GPT draw anything it did also seem to skip between different architectures like the first time but luckily this time it was just for the CSS and just for parts of the CSS that I had already decided to switch to PNG so for example these are all SVG but for other pieces besides the king it was only giving me the SVG without all of these extra settings so I imagine if I mixed this king with the other pieces the formatting would be very wrong and mismatched because the others had much simpler Styles but the exciting news is here I have a working chess game written almost entirely by chat GPT I only had to fix a couple of minor bugs by hand and if I had been more patient I probably could have got chat GPT to fix them for me without further Ado let's run it and see how it looks so you can see my grid structure each cell has the labels that you would expect it is still oriented sideways which is odd but I can move my pieces and it's drag and drop so I want to challenge chat GPT to play me in a chess game chat GPT let's play chess my move number one E4 hey it wants to play it says it's move is E5 okay let me keep this up to date on my grid so I moved to E4 and it moved to E5 where should I move next well I'm terrible at chess if I play very long I'm just gonna get confused and it's gonna beat me so I'm going to try a trick I learned when I was a kid supposedly there's a three move Checkmate I just have to remember it I think it uses the queen and the bishop I think they each move diagonally and then they line up to attack the king let me think maybe Queen goes to F3 and then charges forward to F7 that would attack the king and then the bishop has to protect it so if it's going to be at F7 the bishop would have to be up here at C4 I'm gonna try that see what happens if it doesn't work I'm just going to surrender and say that it beat me okay so I'll say queen to F3 now how do I tell it that's where I'm moving no number two I guess I better say my move is number two queen to F3 well it says I'm stupid and I shouldn't have moved my piece there well it's probably right it says Knight to C6 C6 is right here so it must be this Knight moving okay I don't know if it's ruined my three move Checkmate or not but I'm Gonna Keep moving so I don't want to move my queen yet because my Bishop's not in place so I want to do Bishop to C4 I think it's smart to see if your piece might be attacked or not I don't see anything obvious but Magnus Carlson could probably tell me what I'm doing wrong okay how do I tell it that's where I moved my move is three Bishop to C4 C4 oh nice it said I made a good move okay it says it's gonna move its Bishop to C5 um C5 is right here which Bishop is that this one I guess okay um am I about to win wait I don't think it caught my move if I move Queen right here can it stop me the king could move on to this queen but then the bishop would kill it this bishop not lined up it can't block it the Knight can't hit it the queen can't block it could the king just move out of the way no either way it moves it'll be next to the queen still okay I actually think I just checkmated chat GPT unfortunately the code that it wrote doesn't check for checkmates the first version did but I couldn't get that code to run because the data structures didn't match up the second version was missing it and I was afraid if I asked it to code it it might break something else so maybe that's for the next exercise but I decided to test it out first well let me move my queen there and see what it says because I think that might be a Checkmate so how do I say that it moves to F7 and I think there was a pawn here I might have to tell it to capture the pawn yeah there was a pawn there okay so my move is number four Queen I think X means captured and then F7 I probably don't have to say capture it's probably implied wait a second it says that's an illegal move did I cheat I didn't cheat illegal move in chess in fact it's impossible to capture a piece with your queen on F7 on the fourth move wait is this the fourth move or third one two okay it is the fourth move I lied I thought it was a three move Checkmate I can't on the fourth move because the black pawn is still on E5 and would capture your queen if you moved it there wait there's a black Pawn on E5 yes that's true how is he saying that his black pawn is gonna capture my queen on F7 don't pawns have to capture diagonally and they can it can only move towards the I mean the chessboards rotated funny but it's blocked by the E4 it can only capture onto F4 or D4 and I was on F3 it can't capture me on F7 what okay well it says I can't capture a piece but I did capture a piece I guess I could remove the capture I just say I moved to that spot I don't know if it matters if f is capitalized or not okay it was the exact same move what the heck okay it was the same move I did before but it says it's not legal because it's occupied by his Pawn well obviously because I just killed your Pawn that's why I said capture um I think there's also a way to say that you got Checkmate so if I said Queen captures F7 I think I don't know it's like exclamation or something means it's a check and pound means it's Checkmate or something I practiced chess like a year ago but I don't remember the rules very well but this is like a short notation to say where the units are moving well chat GPT I think you're cheating Queen captures F7 is a legal move and it is check made you are trying to trick me because you don't want to lose okay what's going on here he says well I don't know if it's a he or she but chat GPT says they are not cheating then I miscommunicated but it is a legal move okay well I'm glad it's legal but it says it's not Checkmate it's a discovered check which means that the queen is attacking the king and uncovering an attack by a bishop or a knight however in response to this move I can play King to d8 which would allow my king to escape from the check and the game would continue okay let's see what it's talking about King to D no wait a second how are you gonna go to d8 that's a queen is he capturing his own Queen with his King I'm pretty sure that's an illegal move I think there's some players that can play chess blindfolded and they just memorize in their mind where every piece is I have a feeling that's what chat GPT is doing but it forgot that it has a queen here you're still cheating King to d8 is not a legal move because your queen is on d8 wait okay I think I did Checkmate it and it just doesn't want to admit defeat it says the start again from the beginning and he's going first I don't want to play with a cheater I already mated you well I give up that was really fun so I guess I'll give a summary to be honest chat GPT was way more powerful than I expected I thought there was no way it was going to be able to write any code at all because I feel like programming requires complex logic that an AI is not yet capable of doing however I was completely wrong it wrote some really good code that was very complex and worked for the most part and it was able to do it very quickly which saved me a lot of time I still wonder how much it understood what it was coding and if it actually coded it or if it simply plagiarized it from the internet somewhere because I imagine they built it by scraping the internet and there's tons of example code online so maybe it just found a chess engine someone else had already written and it just copy and pasted the code but it felt like it was doing more than that because if I would ask it to reformat the same code that it had just written into a different architecture it was able to do it correctly and I don't think it would have just found another copy of Chess code in that other architecture to plagiarize because if it did the variable names would have all changed the comments would have all changed but they didn't when I asked it to reformat it only changed what I asked it to change so I think it does understand the code to some extent so maybe in a newer version it will be able to code better it's not even close to perfect at this point so as a professional coder I don't think I would use this on the job because it's too buggy and it would get me fired I'd have to spend a lot of time double checking the code proofreading it testing it and even though it would save me time in the initial coding all the bug fixing would probably waste more time than what has saved me and in addition I didn't have to explain to it the chess rules because it's a well-defined game that it already understood on the job I build applications that are very specific to my customers and their requirements are not well documented I have to have a phone call with the user to ask them what they want I have to try to interpret what they mean and then turn that into code so in order to use chat GPT to code my business applications I would have to thoroughly document what my users needed and explain it to chat GPT in a way that it understands maybe with more experience practicing with it I could get to that point but I feel like that documentation step and trying to tease the solution out of chat GPT might be harder than just coding it myself however somewhere I think this could be extremely useful is in a prototyping stage because if you have a new idea yeah for a program that does not yet exist typically you don't have a well-defined game plan of exactly how you want to code it you're going to experiment a lot and once you get a working prototype and show it to your users you might realize that you're building the wrong product they want something different the features need to change so you don't want to write perfect code the first time you want to write code as quickly as possible so you can get a demo even if it's only half working and then you want to improve the demo until it makes your users happy and then afterwards you want to clean up the code to remove the bugs and make it stable and robust so I think chat GPT could be very good at rapid prototyping another place I think it might be useful is in discovering new technologies so for example I coded this in react but when I make web apps I typically use angular so there's a lot of syntax I'm not familiar with and chat GP T gave me a shortcut in that it coded all the boilerplate code for me without me having to look up a tutorial and copy and paste however I think it's important to still read the documentation and learn it on your own because if a student used this tool too much as a crutch to write the code for them I'm afraid they wouldn't actually learn how the Technologies work under the hood and that's an important skill to have as a programmer to learn to analyze code know how to fix it and to come up with algorithms on your own so if I were a student trying to learn coding for the first time I think I would try to code it myself first and then afterwards use chat GPT only if I got stuck or to critique my code and tell me what I could do to improve it now if I didn't care about learning to code and I just wanted to throw together a quick program I think it would be fine to use chat GPT the whole way the problem is in its current state it's too buggy and so I'm afraid without any coding skills I would just be lost it doesn't tell you for example where to copy and paste the code how to run the code how to troubleshoot the errors and maybe if I asked it more questions like where should I paste this code maybe it would guide me through the steps a little bit more but I'm afraid if you had no Tech skills at all you might just get frustrated and lost but overall I think it's an amazing technology I'm excited to see what else it can do besides coding and what other things it can code and if this improves it could definitely be a game changer in the future thanks for watching