How to detect click on element in Array without looping?

[KungFuFlames]

I will try to explain my idea with the simple code:

 this.board.playerInTurn.activePieces.forEach( (entryPiece) => {
                this.boardUI.pieces.forEach( (entryPieceUI) => {
                    entryPieceUI.setInteractive();
                    entryPieceUI.on('clicked', () => {
                       console.log("Piece is Clicked");
                    })
                })
            })

So at this point I have 16 objects in the array. I want to get a specific object from the list without looping the all of them. Is there more optimized way to do it?

[theNeedle]

You can `setName` or `setData` to Game Objects. Now, listen for `gameobjectdown`  event and using `getData` or `object.name` you can figure out which object was clicked.

check out this example.

[KungFuFlames]

DAMN!

Thanks, thats really cleaned my code. Although I still struggling to fix something up.

pieceInputHandler(): void {
    this.boardUI.pieces.forEach((entryPieceUI) => {
        entryPieceUI.setData('piece', entryPieceUI.piece);
        entryPieceUI.setInteractive();
        })
}

InputListener(): void {
            this.game.input.on('gameobjectdown', function (pointer, gameObject) {
            //Ignore the code below
console.log(this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0]);
   }, this);
}

So right now based on 'piece' key/id I get the exact object thats been clicked. Which is awesome. But not I want to create a custom event that will be triggered after piece is clicked. At the console.log(...) I have all the possible cells that can piece can take.(in form of Array). My idea is to make those cell highlight with the use of "tint" property.

I modified InputListener()

InputListener(): void {
      this.game.input.on('gameobjectdown', function (pointer, gameObject) {
           if (gameObject.getData('piece')) {
                this.boardUI.destroyActiveCells(); //resets cell's colors

               let possibleCells = this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0];

                this.game.events.on('addCellHighlights', this.cellHighlightListener, this)

                this.game.events.emit('addCellHighlights', possibleCells);
                }
      }, this);
}

Now this is the function for highlighting. Still looping...ouu I forgot to mention that I'm using the MVC architecture. I does work fine now, but if you got any suggestions I will be super thankful if you share

cellHighlightListener(possibleCells: any): void {
   this.boardUI.cells.forEach((entryCellUI) => {
          possibleCells.forEach((cell) => {
               if (cell.address === entryCellUI.cell.address) {
                   entryCellUI.tint = POSSIBLE_CELL_MOVE_COLOUR;
                    }
          })
   })
}

 

[theNeedle]

You might consider using `group` for cells. Check out these examples.

For looping through cells you could use array methods like `filter` or something or use one of these methods. I'm not sure what you're trying to achieve but this might be useful.

Looks like you are doing online multiplayer board game. I also want to make online multiplayer. Can you tell me what you're using (socket.io or something like that) for sending moves between players?

[KungFuFlames]

I'm working on Chess game. I want the game to be extendable, so I can add diffrent type of modes:

• 2Players on same screen
• Verses AI
• Multiplayer
• Chess puzzles and other...

That's why I'm trying to use MVC architecture(Model-View-Controller). Where the model is the game login, movements and core rules of the chess. The view is what can be represented in form of Sprites, Images, Colours, Animations, Tweens and so on. And the controller which is going connect the model with the view.

Also I'm trying to optimize the game as much as possible so it could be mobile friendly. For example:

 this.board.movementGenerator.getMoveBehaviours(this.board.players[0].activePieces);

This is a function part of the model, which is going to generate all the possible moves that the current player can take. This function is called only once at the start of the player's turn. By doing that I will run the algorithms for calculations only once and not every time when a figure is clicked.

Thanks for your suggestions I will try to improve the code. Thanks

[theNeedle]

Great. Using Node(Express) as MVC? It looks like a lot of work. keep it up. ?