Better way to move pieces in 3D chess-like game

Hello everyone
I’m hoping I can get some help. Using react-babylonjs I have tried to make an online playable version of a 3D chess-like board game I designed many years ago called Strix. I have put the ‘playable’ component in a rudimentary github pages website to give a rough idea of how it looks: React App. The component itself (src/components/StrixGameVersion2.js) is at my github: DavidPriestley122/strix-files1. This is my first proper effort at coding anything so I am pleased it works at all, but the method seems a bit weak. Essentially, clicking a piece throws up a variable that is caught when a square is clicked, generating the same type of piece originally clicked. I would like to have a game with more state, so that moves can be taken back, recorded etc. but unclear how to start. A bitboard type solution is beyond me, owing to the odd shape of the board. I am hoping someone here has some experience of this kind of thing and can give me a pointer. Thanks!

1 Like

Hello and welcome to the Babylon community! Your question is quite a bit broad, but I understand you’re asking about how to record the movements in the board so they can be replayed/undone, etc? If so, you could create a object ( Working with objects - JavaScript | MDN (mozilla.org)) for each movement that records what happened on it. For example, if you were working with chess, the object could have this structure:

{
 piece: "queen",
 square: "D6"
}

recording that the piece “queen” moved to square “D6”. Then, you can store all of those movements in an array, and just “replay” them all on top of a initial state to reach any state in your game.

I hope this can help you :slight_smile:

3 Likes

Thank you for your reply. I have been wandering around alone in Noobia for more than a year, so it’s good to hear a friendly voice! I understand what you say – make an updatable array to describe the game state (though in my case I would need to add “state of rotation” to the name and position for each piece). But I still have a basic problem. Moves like for chess (or my game Strix), as carried out on a gameboard gui created in Babylon or (in my case) react-babylonjs, proceed by an operation requiring two separate clicks, typically one for the piece to be moved and one for the destination square selected. So… how does the second click get hold of the information it needs from the first click? My solution is to use a global variable, but this seems ugly. I have spent many months poring over Brian Zinn’s wonderful “Storybook” of examples of react-babylonjs usage, but none of them addresses this exact issue. So, I was hoping that someone had maybe designed a useMove hook or something or the sort. I feel like I am missing something obvious!

Hi and welcome to the Community,
First thing to mention here is for

There are only friendly voices here. Doesn’t mean nobody will ever challenge you over time and will only scratch your back :grinning: but it means that empathy, constructive comments and overall ‘sharing our passion’ with respect is deeply embeded in the philosophy of BJS and the members of this Community.
Feel free to come here anytime with your questions, showcase your progress and make us wonder about the amazing results you achieved. Also feel free to challenge the framework where you think it could be improved and don’t hesitate to report any bugs (that will be swiftly taken care of :smiley:)

As for your project, you could start by having a look at this tutorial. Sadly, the site is no longer active but there might be some information left in the tutorial that could help you (about recording the state of objects and things).

I’m not a specialist of this but I would say record a before and after state (and as shown in the tutorial an active state). On first click on the piece, activate the before state instructing that after can come next. Then after clicking on a valid square to move the piece, run the animation while setting the active state and on animation end (or move end) run the after. Something like this. Again, there are people in this forum that are much more knowledgeable than me on this. I hope some will spot your question and feed you with their experience and expertise. Meanwhile, again, welcome to BJS and have a great day :sunglasses:

1 Like

Expanding on mawa’s response, since you’re working with React, you can make the structure something like this. Let’s say you have a component that renders your scene, and receives the click events. You can wrap this component in a component that will be responsible for registering and updating the game’s state. So it would look like this:

<GameState>
   <GameBoard gameState={{pieces: [...]}} onPieceSelected={...} onSquareSelected={...} />
</GameState>

The GameBoard itself has no capacity to change the game’s state at all, it leaves that to the GameState component. But how will the GameState detect that the user wants to update the state? That’s where props come in: GameState passes callbacks that GameBoard will call whenever a piece is clicked, a square is clicked, etc. GameBoard doesn’t know what those callbacks do, it just calls them in response to user interactions.

This way, you keep each component responsible for one main thing only (GameState takes care of game logic, GameBoard renders stuff), which makes each component easier to understand by itself :blush: Separating functionality into components is a big part of React, and is definitely a challenge in all but the most simple projects. You can read a bit more here: Thinking in React • React (reactjs.org)

2 Likes

Thanks, mawa. The tutorial you link to looks like it is full of good stuff. Appreciate your comments about the community, too!

That’s very helpful, carolhmj. I think I may have bitten off a bit quite a lot to chew, trying to learn React, Babylon and react-babylonjs at the same time, but I will persevere! I like the clarity of wrapping the GameBoard component inside the GameState component. It requires a fundamental rethink, but that’s what I was asking for! Thanks for the Thinking in React link, too. :smiling_face:

2 Likes