Interactions question, based on Checkers

[4kbar]

I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv).

I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean)

I'm creating a Checkers game. Something like this:

Here is the basic setup:

var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2];

// Create some textures
var boardTexture = PIXI.Texture.fromImage(/*...*/);
var pieceSprites = new PIXI.Texture.fromImage(/*...*/);
/*...*/

// Create and append our renderer
/*...*/

// Create the scene graph
var stage = new PIXI.Container();

var board = new PIXI.Sprite(boardTexture);
stage.addChild(board);

// Add some pieces
var pieces = new PIXI.Container();
gameState.forEach(square => {
  /*...*/
  var piece = new PIXI.Sprite(/*...*/);
  piece.interactive = true;
  board.pieces(piece);
});
stage.addChild(pieces);

// Render with requestAnimationFrame
/*...*/

So far, so good!

Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events.

But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting event.target would point to a piece.

In short: Is there any way to emulate "event delegation" here?

EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.

[xerver]

Event delegation should work fine, the interaction manager bubbles events to parent objects.

[4kbar]

My question may not have been very precise.

What I'd really like to do is avoid adding event listeners to specific Sprites (beyond, perhaps, flagging them as interactive), and instead add the event listener to a parent Container.

By analogy:

<div id="board">
  <div class="piece" id="1">0</div>
  <div class="piece" id="2">0</div>
</div>

var boardElement = document.getElementById('board');
boardElement.addEventListener('click', function (e) {
  // e.target points to the pieces when they are clicked
});

I'd like to listen to the pieces Container in a similar way.

[4kbar]

After spending some time with InteractionManager and reviewing some older discussions, I'm still scratching my head. 

If someone could offer an example of event delegation / bubbling in Pixi.js, I'd be grateful!

[xerver]

This used to be built into the interaction manager, it just bubbled events to parents until we ran out of them or stopPropagation was called. But it seems like that code is gone...

[4kbar]

Github archaeology time:

• Event delegation issue was raised in #625; @xerver introduced a solution in #914, which was implemented in EventTarget.js.
• EventTarget.js was later ousted in favor of EventEmitter3 (#1532).

In #1532, you commented that

Quote

We decided that since InteractionEvents are the only events where it makes sense to bubble, the interaction manager does that work instead of making the event system handle it.

Sounds right to me!

But so far, I can't seem to find any version of InteractionManager that handled bubbling.

I'll poke around a little more. If I can't find anything, maybe I can contribute.

Despite the fact no one seems to have missed this, I think it's an important feature! 

[xerver]

Weird, I must have forgotten to actually implement it. I'm terrible. lol

[4kbar]

Turns out it was very easy to fix from within InteractionManager.prototype.dispatchEvent. 

I'll move this over into a github issue. Cheers!

[acbabis]

Was there any resolution on this?