Any recommendations, or does it look good?
It's my first time using SolidJS, I started a Chess game project, first I decided to make the board to see how it went, and that's how it stayed. I wanted to know what you think, is that okay? It can improve? Some recommendations?
I decided to use Div instead of Table because it is more comfortable for me
5 Replies
I would put the createSignal inside App
I don't really like having the state global
I thought about it too but the function is outside, but I just realized that the function can be put inside the component 😅, thanks.
Thanks for mentioning it, I'll correct it.
@brenelz @Tito
I just thought of two ways to add the image of the piece in a certain square, I put it in an onmousedown to test it.
The first way would be for the object.img itself to return the <img>. The "nice" thing about this way is that it doesn't create an <img> in every square that exists, even those where there are no pieces. The "bad" thing is that when you move the piece you have to create the <img> again.
The second way would be for the object.img itself to return the URL of the image. The "bad" thing about this way is that it creates an <img> for all the squares that exist, even those in which there are no pieces. The "good" thing is that moving the piece will not create a new <img>, only the value of the url will be modified.
I know both cases would work and probably wouldn't affect performance much, but it wouldn't hurt to know which would be better.
Do you mean that it stores the <img> or do you mean that the url and that all the squares have an <img> regardless of whether they have a piece or not?
About using PGN instead of array. It's complicated to explain, but my game will follow different rules, so I can't use the normal PGN, but would have to create one myself. But I plan to do it when I have everything done. And when someone imports it, I simply create the array with the data from my custom PGN to easily manage the board and interactions.
So do you think it's better that the square divs don't have the <img> and that an <img> is created every time a piece is placed in a square?
what do you mean 🤔
I think I understand what you mean, correct me if I'm wrong: if every time I move a piece I'm going to completely replace the contents of the array (and therefore the DOM), then the efficiency of storing the <img > or the URL is reduced . becomes irrelevant as both approaches will end up resulting in a complete rebuild of the DOM elements. Did you mean that?
But when I recreate the board to move the piece in setBoard, the DOM does not rebuild due to the use of Index. I am a little confused.
Ah, I think I understand, the idea is not to have to make a copy of the array every time a piece is moved.
And to achieve that, we can create 64 signals
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
something like this