Design with Prompts

Transcript

[00:00:00] Today, I'll show you how to build this game of chess in less than 10 minutes. You can literally move all the pieces and play an actual game with it.

And it follows all the logic of chess. And if you make a wrong move, it also says that you made a wrong move and you can play with your friends.

Or if you want, you can design your own chessboard and put it up on your website.

And we will do all of this with zero coding and just with prompts. So let's get started.

So first we'll go to v0 and we will ask to create a chessboard game and we will style it a bit. So we'll say use color this for the black and use

this for the white.

And let's even try to incorporate a bit of style and we can say that make the pieces in the style of pixel art. And let's see what it does. So it's going and creating all these pieces right now with SVGs.

I think we have a chessboard and you [00:01:00] can even move things around. There is some logic already here. For example, if you move one coin to the other, the previous coin disappears. I think that logic is here, but you can move any coin anywhere or any piece anywhere.

So we can implement the rest of the functionality within Cursor.

But it's already at a pretty decent shape. But if you wanted to design your own chess pieces, you can do that easily because if you go into the code, you see that all these pieces, they're all SVGs. So you could literally design your own piece in Figma or download an SVG from someplace and just paste your SVG here and then literally you can design your own chess board.

And you will have it working in cursor. So that's what I'm going to show you right now.

To add the remaining functionality to this chessboard, I'm going to click here and say add to code base and I will copy this command.

And I will go into my terminal and I will just [00:02:00] create a new Next. js project. Okay, so the command for creating a new Next. js project is npx create. Next app at latest. And after that, you can just specify the name of your project. So in this case, it's chess clone

and I am going to say yes to all the defaults. And once that's done

it goes and installs all the necessary packages

and the installation is done. So we can go into Chess clone project using cd command and we can open it in cursor with, code.

So if you open cursor, you can see the typical file structure for an NextJS application. So within the source directory, you will have a page. tsx where the main project file lives and We can open a terminal within cursor and run this program and we can just say npm run dev and that should start the project in a local server and you can see in [00:03:00] my case it's localhost 3001.

So we have a project up and running.

And we can place this side by side right now, so you can see both the code and the game.

Okay, so first thing we're going to do is we copied that command from our v0 that we can go and paste it inside our

project.

So to do that, we can start a new terminal and you can go and paste this command that we copied. copied from v0 and just hit enter. And you just say yes to all the other options that it asks. I am going to select zinc and I'm going to say yes to CSS variables and these are all default options. You don't have to think too much about it right now.

Okay, so now that's installed, you can see that in the source directory, in components, it created a chessboard over here, which is basically the code that we generated in v0. And if you see inside app, everything else is the same, so nothing has changed. So [00:04:00] to bring this chessboard into your Homepage you need to change the page. tsx So that's where you're going to see what is displayed over here. So we can do that by opening our chat and You do that by hitting on command i and this is where most of our Work is going to happen

And within chat we can say um import The chessboard And display it here. Remove everything else on the homepage. And position the chessboard in the absolute center. Remember to use Claud because claud seems to be much better at programming than chat GPT, as of today, and once you accept it

it does everything you need, save it, go back here, refresh, and then you have your chessboard

and as you can see, the functionality is still intact and you can pretty much play without [00:05:00] any governing logic, with just the shape itself, but we will add all the proper functionality, including checkmates, including

the rules with which each piece needs to move, and so on. Now, again, to add the logic for it, It's very simple. The only thing you need to know is which library that we are going to use to add this logic. And in this case, the library that we will be using is called ChessJS.

It's a very popular library and it's written in TypeScript. It was made in 2022 and it's still pretty up to date. As you can see, two months ago, there were some fixes made. And there are lots of contributors on this library. You can see from the GitHub profile that it is highly maintained and it's free.

So we are going to use this one and integrate into our application, but we don't need to know exactly how this works or how we're going to integrate it. So [00:06:00] we will, we just need to know which library that we need. So in this case, Chess JS. So I'm going to close that. I'm going to go back into my cursor and I will create a folder called prompts in my source directory and within prompts, I will create a new file and say, add logic.

md. So it's a Markdown file. And here we will define the logic that we are going to integrate. So we will say import. and replace the logic from chess. js and we will save it. So that's pretty much all we need to say at this point. But one thing you need to know is we need to do this inside the chessboard component because this is where the main code lives. So we can select this file, press, okay, Composer chat and we can tag chessboard. But in this case because we are on this file chessboard is already tagged so we can just tag this Markdown file that we [00:07:00] just created.

So we just say add logic and Hit on enter And it says that yes, we need to install chess. js. So let's just copy this command Go into our terminal and let's paste this command and then it should install the chess. js library And you can, as you can see the error that initially showed up here now disappeared.

And pretty much I think it has defined everything else.

There are some errors though, let's go and fix that. So when you accept, if you can see the little red dot over here, you'll see where the error is. And you can just go here and hover on this part and you can say that The error is says argument of type string is not assignable to square , you just copy that part and go back into composer and just paste it One thing that I might have done before is to just go say ai fix in chat, but I realized Going back to the composer and pasting it there is actually better than doing ai fix in chat because composer [00:08:00] has some History of how you Worked with it right now.

So that history is missing in chat and sometimes the solution chats give could be very different from what the composer gives. So this is one of the recent learning for me. So yeah, just copy the issue and just paste it inside composer in the same chat that you're doing. And once that piece of logic is complete, then you can create a new composer and.

And continue working. , as you see right now, there are no errors. So, we can just accept everything. And let's save it and refresh. And you can see that it works. So, as you can see right now, I'm not able to move any of the other pieces. And, now I moved white, and now I can only move black.

And once I move the white one, I have to move the black one. And let's see. So once I move this, I can [00:09:00] move here. And now all the functionality already works.

So let's enable the pieces to be draggable right now so we don't have to click on two places each time. So it would be nice to just drag this piece and drop it where we want to. So we can do that by again, going and creating a new prompt and we will call it move piece dot MD.

And within this, we can say enable. drag and drop for the pieces. And when a piece is dragged, it should be highlighted in blue. When a piece is dropped, it should be, no, when a piece is dropped, It should be placed on the board. The square behind the piece should not be draggable. I'm writing the last sentence because the previous time I did it, it made the square behind the piece also draggable. It may not happen every single time. For some of you, it might just figure out that, , only the [00:10:00] piece needs to be dragged, but I'm going to specify it anyway.

So I'm going to go back into chessboard and , once I'm here, I can open a new composer because it's a new functionality altogether. And within composer, what we can do is just go tag number two, which is to move pieces and we can hit enter.

So we'll accept all the changes. Seems like there are no errors. , let's save it and let's go refresh and.

Seems like it's seems like the drag functionality works, but not exactly because. You can see this weird. Interaction because it's not utilizing the actual drag functionality. It is inferring where we want to move and kind of do this, but I want the actual drag to be visible. So for that, again, we are going to use a library and the library for drag functionality that we will use is [00:11:00] called react dnd. So if you go, So to its GitHub page, it's basically a library for dragging and dropping.

So what we can do is go back to where we executed our second prompt, and we just go back to checkout. And once you do that, you hit on save. And if you refresh, it goes back to before we implemented the drag functionality.

So you can still click and move pieces, but you cannot drag them. And we can go back into our logic. Into a prompt and we can just specify it within this File and we can say use react dnd for drag and drop So once you save that i'm going to open a new Composer and again open chessboard and just say Just tag on two

and it goes and implements all the necessary functionality needed

Okay, I can go and install these packages in my terminal, and once I have the react drag and drop in my [00:12:00] library, I can accept all the changes. As you see, there are some issues, and these are mostly just TypeScript issues. Well, because this is going in a loop right now, there's a fix for it. We just say as any, this is the easiest fix for TypeScript errors, this is again, something that I figured after knowing TypeScript, but in general, it's not recommended to say any, but in this case, we are okay to do it because we assume the code is right. But sometimes it goes into these loops.

Of course, AI is not perfect, but we can work with these issues for now. And now if I go and refresh on the page, as you can see, the drag and drop functionality works.

But it, there seems to be an interference with the chess game logic. So let's go and fix that. And also the square behind the piece are also moving. So let's fix that. So we will keep the chat history intact and we can go back [00:13:00] to Claude and we can say the chess game logic seems to not work anymore. Retain the logic from ChessJS.

And then we will fix the square behind the piece. , now the chess logic is working and you can drag and drop as well see, this is one of those interesting things because Claude is apparently much better at coding than chat GPT is

okay, so now what we can do is take care of this minor detail where the square behind the. piece also moves. So

as I mentioned earlier, this thing happened. So that's why I even mentioned it behind. So sometimes it doesn't get it because the way it's defined here, it understands that the square is actually a part of the piece, so we can go back into a chess component but if you see, even though the square moves, there is a square behind it as well.

So we can go back into chessboard and say, let's open a [00:14:00] new cursor chart, and let's make sure we have chessboard selected. And we can say when I move a piece, the square behind it also moves. Make sure only the piece is draggable. We are not going to use chat gpt for now, we are going to use 4. 0 or, so we are going to use SONET.

And I also realized the way SONET responds is a lot more polite than the way OpenAI responds. It's kind of funny. And okay, so let's see, there are some issues and it's, weird that this, it repeats the same issues over and over again, so I'm just going to say as any and, Like get rid of this, you might be using this, as any to address the TypeScript issues quite often. So often that, you'll know this is how you do it. Okay. Now the drag functionality works properly, so you can move all the chess pieces and you can pretty much play the game.

And now for the final part, we'll make it look a little better. So we [00:15:00] will add a background to this so we can create a new folder and we can call it public. Remember that it needs to, you need to create this folder in the root of the application, not inside the source directory. And within this folder, we can bring our, Gradient, and I will just put it inside the public folder.

So we created this gradient and we can go into our page. tsx. , and we know that the chess board component is displayed over here and there's pretty much, there's nothing else going here. Um, so we don't need to ask chat anything. So we can go and create a new composer and we can say, add a background. Image to the page. And then I will use the 24 gradient image.

And I can see that now there's an image on the background, but again, the image is not getting loaded.

And I think I know the issue. The issue is because the file name is being tagged as with @ but the file name it doesn't have [00:16:00] an @ symbol here So if you just remove this ad symbol, I think the issue should be resolved Yeah, so it's probably the way I wrote it incorrectly So when it read this it took the @ symbol as well, so that's the issue yeah, it's good to also like know a little bit on what's happening For you to debug these kind of issues.

So what you could always do is just go check out, go back and try it again. And this time it might work. Or if you don't do that, you can also select a different model and try again, and then it might work. But again, it's just helpful to know a little ways to debug. That is definitely a superpower when it comes to building with AI.

Okay. Last thing I'm going to remove this white background behind the chessboard. So I can go and say that remove. Let me open this in a new composer chat.

And I will have this selected because I know this is where the white background is coming from. And I can [00:17:00] go just say, remove the white background behind the chessboard. So I can see the gradient clearly. , I shouldn't have to say the last thing, but I will say it anyway. And then I will also tag page. tsx so it understands that I have a gradient behind and that's what I'm trying to do. , I think it understands that I want the gradient to be visible. And that's what I'm trying to say, because I don't want it to misinterpret what I'm saying by just like removing , the white pieces behind the chessboard, for example.

So let's see what changes it did. If I go here, , you can see that. I think this is the kind of change that we are expecting. , let's accept it. Yeah. There you go. I think this is pretty much the end of our video. So this is an actually fully working chess. , We could do a lot more by actually integrating with a back end so that this game you can actually share a link with your friends and when you play a move, your friends can [00:18:00] actually play the next one and you can turn it into a real game of chess that you can have on your website.

But that's for another video.

So I hope you learned something new today and I will see you in the next one