'Phaser 3 - How to detect if all components are sleeping?

I am new to Phaser Framework and I wanted to try making some prototype of 2D pool game from top down perspective. The problem that I have right now is detecting if all balls have stopped moving before restarting.

I use Physics.Matter and here is the source code when create so far:

this.matter.world.setBounds(0, 0, 720, 1280, 32, false, false, false, true);
this.add.image(400, 300, 'sky');

var ball = this.matter.add.image(360, 1000, 'ball');
ball.setCircle();
ball.setVelocity(-5, -20);
ball.setBounce(0.5);

for (var i = 1; i < 10; i++) {
  var target = this.matter.add.image(Phaser.Math.Between(400,450), Phaser.Math.Between(400,450), 'target');
  target.setCircle();
  target.setVelocity(0, 0);
  target.setBounce(0.7);
  target.setFriction(0, 0.01);
  target.setSleepEvents(true, true);
}

this.matter.world.on('sleepstart', function() {console.log('sleepstart');});
this.matter.world.on('sleepend', function() {console.log('sleepend');});

This would detect if each target has slept but I need to detect if ALL of them stopped moving. I cannot count how many has slept because sometimes when a target has entered sleep state, there is a chance some other body will bounce off it and woke it up again.

Is there any way to globally detect them?

EDIT: As a fallback plan I add a basic JS function to be called whenever update is called and count the sleeping bodies, which looks like it should not be a proper way:

var isActive = false;

// Some commands here that changes isActive = true

function onupdate() {
  if (isActive) {
    var bodyCount = this.matter.world.getAllBodies().filter(o => o.isSleeping === true).length;
    console.log(bodyCount);
    if (bodyCount >= 11) {
      isActive = false;
    }
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source