Chess Web Programming: Part Four: Chessboard Customisation

Hi, it's me NHL_128, I created a new account (bullet frustration).

Thanks for the fourth part of your tutorial, @HollowLeaf !
I like your chess pieces, did you create them with AI?
The arrows showing the engine suggestions are a big usability improvement.

Again, some notes and hints for other readers:

While I follow this tutorial, I copy and paste code into a Copypaste.js, which I then compare with my current App.js to see exactly what changed, and to apply the changes. I then compare the files by right-clicking the Copypaste.js -> "select for compare" and then the App.js -> "compare with selected". Voilà, I get a side by side diff view and there are even buttons to move new code from the Copypaste.js into the App.js.

Probably a gotcha: In the first "full code": the URL to Stockfish does not contain the ${process.env.PUBLIC_URL} anymore, like after part 3. This is needed in order to work on GitHub pages, as HollowLeaf explains in part 3. The same is true for the paths to the piece images, see below code.

A simple (in-code-)way to make the path to the pieces easily updatable is this:
https://github.com/nilslindemann/react-chess-app/blob/1aa4892078492e6b2c6c040085333d516f1cbaaf/src/App.js#L27-L117
Instead of having a string as a value for the src attributes, I call a helper function which constructs the path. I use an IIFE to encapsulate the config variables used for constructing customPieces.
https://en.wikipedia.org/wiki/Immediately_invoked_function_expression
(Instead of the IIFE one can also do let customPieces; {...; customPieces = {...};} which has fewer brackets and also encapsulates, but it is necessary to use let instead of const for customPieces. It is not a commonly seen syntax, but I like it)

Hi, it's me NHL_128, I created a new account (bullet frustration). Thanks for the fourth part of your tutorial, @HollowLeaf ! I like your chess pieces, did you create them with AI? The arrows showing the engine suggestions are a big usability improvement. Again, some notes and hints for other readers: While I follow this tutorial, I copy and paste code into a `Copypaste.js`, which I then compare with my current `App.js` to see exactly what changed, and to apply the changes. I then compare the files by right-clicking the `Copypaste.js` -> "select for compare" and then the `App.js` -> "compare with selected". Voilà, I get a side by side diff view and there are even buttons to move new code from the `Copypaste.js` into the `App.js`. Probably a gotcha: In the first "full code": the URL to Stockfish does not contain the `${process.env.PUBLIC_URL}` anymore, like after part 3. This is needed in order to work on GitHub pages, as HollowLeaf explains in part 3. The same is true for the paths to the piece images, see below code. A simple (in-code-)way to make the path to the pieces easily updatable is this: https://github.com/nilslindemann/react-chess-app/blob/1aa4892078492e6b2c6c040085333d516f1cbaaf/src/App.js#L27-L117 Instead of having a string as a value for the `src` attributes, I call a helper function which constructs the path. I use an IIFE to encapsulate the config variables used for constructing `customPieces`. https://en.wikipedia.org/wiki/Immediately_invoked_function_expression (Instead of the IIFE one can also do `let customPieces; {...; customPieces = {...};}` which has fewer brackets and also encapsulates, but it is necessary to use `let` instead of `const` for `customPieces`. It is not a commonly seen syntax, but I like it)

HollowLeaf

@NHL_1024 said in #2:

Hi, it's me NHL_128, I created a new account (bullet frustration).

Thanks for the fourth part of your tutorial, @HollowLeaf !
I like your chess pieces, did you create them with AI?
The arrows showing the engine suggestions are a big usability improvement.

Again, some notes and hints for other readers:

While I follow this tutorial, I copy and paste code into a Copypaste.js, which I then compare with my current App.js to see exactly what changed, and to apply the changes. I then compare the files by right-clicking the Copypaste.js -> "select for compare" and then the App.js -> "compare with selected". Voilà, I get a side by side diff view and there are even buttons to move new code from the Copypaste.js into the App.js.

Probably a gotcha: In the first "full code": the URL to Stockfish does not contain the ${process.env.PUBLIC_URL} anymore, like after part 3. This is needed in order to work on GitHub pages, as HollowLeaf explains in part 3. The same is true for the paths to the piece images, see below code.

A simple (in-code-)way to make the path to the pieces easily updatable is this:
github.com/nilslindemann/react-chess-app/blob/1aa4892078492e6b2c6c040085333d516f1cbaaf/src/App.js#L27-L117
Instead of having a path string as a value for the src attributes, I call a helper function which constructs the path. I use an IIFE to encapsulate the config variables used for constructing customPieces.
en.wikipedia.org/wiki/Immediately_invoked_function_expression

Your welcome, I have made the update to the Stockfile path. Thanks for pointing that out. Yes, the pieces was designed with AI but a log of editing to get it to look how I want.

@NHL_1024 said in #2: > Hi, it's me NHL_128, I created a new account (bullet frustration). > > Thanks for the fourth part of your tutorial, @HollowLeaf ! > I like your chess pieces, did you create them with AI? > The arrows showing the engine suggestions are a big usability improvement. > > Again, some notes and hints for other readers: > > While I follow this tutorial, I copy and paste code into a `Copypaste.js`, which I then compare with my current `App.js` to see exactly what changed, and to apply the changes. I then compare the files by right-clicking the `Copypaste.js` -> "select for compare" and then the `App.js` -> "compare with selected". Voilà, I get a side by side diff view and there are even buttons to move new code from the `Copypaste.js` into the `App.js`. > > Probably a gotcha: In the first "full code": the URL to Stockfish does not contain the `${process.env.PUBLIC_URL}` anymore, like after part 3. This is needed in order to work on GitHub pages, as HollowLeaf explains in part 3. The same is true for the paths to the piece images, see below code. > > A simple (in-code-)way to make the path to the pieces easily updatable is this: > github.com/nilslindemann/react-chess-app/blob/1aa4892078492e6b2c6c040085333d516f1cbaaf/src/App.js#L27-L117 > Instead of having a path string as a value for the `src` attributes, I call a helper function which constructs the path. I use an IIFE to encapsulate the config variables used for constructing `customPieces`. > en.wikipedia.org/wiki/Immediately_invoked_function_expression Your welcome, I have made the update to the Stockfile path. Thanks for pointing that out. Yes, the pieces was designed with AI but a log of editing to get it to look how I want.

sexyama edited

Not been able to load the customPieces on my side, maybe a problem with the paths ?
The code is here,
https://github.com/Commutator-IO/chess-webapp/blob/main/src/App.js#L232

Also how do we need to use process.env.PUBLIC_URL for the png static files as well ?

Not been able to load the customPieces on my side, maybe a problem with the paths ? The code is here, https://github.com/Commutator-IO/chess-webapp/blob/main/src/App.js#L232 Also how do we need to use process.env.PUBLIC_URL for the png static files as well ?

HollowLeaf

@sexyama said in #4:

Not been able to load the customPieces on my side, maybe a problem with the paths ?
The code is here,
github.com/Commutator-IO/chess-webapp/blob/main/src/App.js#L232

Also how do we need to use process.env.PUBLIC_URL for the png static files as well ?

I will have a look at this over the weekend, I don't think you would need to use the process.env, but give it a try, and see if that solves the issue.

@sexyama said in #4: > Not been able to load the customPieces on my side, maybe a problem with the paths ? > The code is here, > github.com/Commutator-IO/chess-webapp/blob/main/src/App.js#L232 > > Also how do we need to use process.env.PUBLIC_URL for the png static files as well ? I will have a look at this over the weekend, I don't think you would need to use the process.env, but give it a try, and see if that solves the issue.