How to listen to another object's event emissions?

Question

I am trying to replicate a backyard game of catch using event listeners and emissions. Person A 'throws' and - nine times out of ten - person B 'catches' and then throws back. Neither person can catch their own throws. How can I go about doing this? Example/psuedo code below.

var events = require('events'),
    EventEmitter = require('events').EventEmitter;

var a = new EventEmitter(),
    b = new EventEmitter();

a.on('start', function() {
  this.emit('throw', b);
})

a.on('catch', function() {
  console.log('a caught b\'s throw');
  this.emit('throw', b);
});

b.on('catch', function() {
  console.log('b caught a\'s throw');
  this.emit('throw', a);
});

a.emit('start');

What if I wanted to extend the game to include a third person (in which case the target of the throw can only be one of the two possible recipients)

Answer 1

I don't know exactly how your game works, so I have coded a game with a different game logic. But you can adjust it to your needs easily.

The game works like this:

Each player throws two dices in alternating manner. First player 1 throws the dice than player2 and so on. Each player can catch the dice of the other players randomly. The catched dice is summed to the score and the player with the highest score wins the game.

Now to the code. At first, I didn't see that you're doing a nodeJs app. But my front-end app should be runnable on node with some tweaks.

I have used SignalsJS for the eventing. You can find examples here.

The following quote is from here:

A Signal is similar to an Event Emitter/Dispatcher or a Pub/Sub system, the main difference is that each event type has its own controller and doesn't rely on strings to broadcast/subscribe to events

To think of signalJS as publisher and subscriber system is the best to understand what it is doing.

The subscriber/listener is listening for events from the publisher. Once the publisher dispatches something the callback of the subscriber(s) will be called.

And to manage the events you need some kind of mediator as proposed in the comments, so you can handle everything. In my demo the object DiceGame acts as a mediator because it holds the players and the thrown dices in arrays.

Please find the demo of the game below and here at jsFiddle.

(If there is something to improve, please let me know in the comments.)

  //store local reference for brevity
  var Signal = signals.Signal;

/*
  // simple signals demo code here as an example
  
  //custom object that dispatch signals
  var dice = {
      threw: new Signal(), //past tense is the recommended signal naming convention
      carched: new Signal()
  };


  function onThrew(param1, param2) {
      console.log(param1 + param2);
  }
  dice.threw.add(onThrew); //add listener
  dice.threw.dispatch('user1', ' - dice no. = 6'); //dispatch signal passing custom parameters
  dice.threw.remove(onThrew); //remove a single listener

*/

var DiceGame = function(settings) {
    this.settings = $.extend(DiceGame.defaultSettings, settings);
    var activePlayer = {};
    
    this.addPlayer = function() {
        var index = this.players.push({
            name: 'player' + (this.players.length + 1),
             //custom object that dispatch signals
            dice: {
              threw: new Signal(), //past tense is the recommended signal naming convention
              catched: new Signal()
            },
            score: 0,
            dicesThrown: 0
        });
        activePlayer = this.players[index-1];
        activePlayer.index = index-1;
        this.setActivePlayer(activePlayer);
        
        // add display listener
        activePlayer.dice.threw.add(this.onDiceThrew, this);
        activePlayer.dice.catched.add(this.onDiceCatched, this);
        //console.log(this.players, index, this.$activePlayerInfo, activePlayer);
    };
    
    this.getActivePlayer = function() {
        return activePlayer;
    };
    
    this.setActivePlayer = function(player, index){
        if ( typeof index != 'undefined' ) { 
            console.log(index, this.players[index]);
            activePlayer = this.players[index];
        }
        else {
            activePlayer = player;
        }
        this.updatePlayerInfo(activePlayer.name);
        this.$activePlayerScore.html(activePlayer.score);
    };
    
    this.initGame = function() {
        this.$activePlayerInfo  = $(this.settings.elActivePlayer);
        this.$activePlayerScore = $(this.settings.elActivePlayerScore);
        this.$gameInfo          = $(this.settings.elGameInfo);
        this.$playField         = $(this.settings.elPlayField);
        
        // add click handlers (bind to DiceGame obj. with this)
        $('#newGame').click(this.reset.bind(this));
        $('#addPlayer').click(this.addPlayer.bind(this));
        $('#changePlayer').click(this.nextPlayer.bind(this));
        $('#throw').click(this.throwDice.bind(this));
        $('#catch').click(this.catchDice.bind(this));
        
        // add two players
        _.each(new Array(this.settings.defaultPlayerCount), function(){
            this.addPlayer();
        }, this);
        
        this.setActivePlayer(null, 0); // can change current player by index
    }
    
    this.initGame();    
};

DiceGame.defaultSettings = {
    elActivePlayer: '#activePlayer',
    elActivePlayerScore: '#activePlayerScore',
    elGameInfo: '#gameInfo',
    elPlayField: '#playField',
    defaultPlayerCount: 2,
    maxThrownCount: 2
};
DiceGame.prototype = {
    players: [],
    diceList: [],
    
    updatePlayerInfo: function(text) {
        this.$activePlayerInfo.html(text);
    },
    reset: function() {
        this.diceList = [];
        $.each(this.players, function(index, item) {
            console.log(item);
            item.score = 0;
            item.dicesThrown = 0;
        });
        this.setActivePlayer(null, 0); // can change current player by index
        this.refreshPlayField();
        //this.showGameInfo('');
        this.hideGameInfo();
    },
    nextPlayer: function() {
        var index = this.getActivePlayer().index;
        index++; 
        
        if (index >= this.players.length ) {
            //'roll over' required!
            index = 0;
        }
        //var playerCopy = this.players.slice(0);
        this.setActivePlayer(this.players[index]); // next player
    },
    onDiceThrew: function(diceNo) {
        console.log('threw dice', diceNo);
        var newDice = {player: this.getActivePlayer(),
                       diceValue: diceNo};
        
        if ( newDice.player.dicesThrown < this.settings.maxThrownCount ) {
            this.diceList.push(newDice);
            this.$playField.append($('<p/>').text(newDice.player.name + ' - threw dice: ' +newDice.diceValue));
            //console.log('threw', this.diceList);
            newDice.player.dicesThrown++;
        }
        else {
            //alert(newDice.player.dicesThrown+ ' dices thrown. None left.');
            //show message that all dices are thrown
            this.showGameInfo(newDice.player.dicesThrown+ ' dices thrown. None left.');
            return;
        }
        console.log(newDice);
        this.nextPlayer(); // change to next player
    },
    checkGameOver: function() {
        // all thrown and nothing to catch --> game is over
        var winner = _.max(this.players, function(player) {
            console.log(player);
            return player.score;
        });
        console.log("winner", winner, this.players);
        var otherPlayers = _.omit(this.players, function(value) {
            console.log('value', value, value===winner);
            return value === winner;});
        
        var scoresStr = '';
        _.each(otherPlayers, function(player) {
            scoresStr += player.name + ': ' + player.score + '<br/>'; 
        });
        
        // check if we have a draw.
        //this.players[0].score = 5; // needed for testing
        //this.players[1].score = 5;
        
        var draw = _.every(this.players, function(player) {
            return player.score === winner.score;
        });
        
        console.log(draw);
        
        if (draw) {
             this.showGameInfo('Game over!<br/>Draw with score ' + 
                               winner.score, true);
        }
        else
        {
            // call showGameInfo with true --> keeps message displayed
            this.showGameInfo('Game over!<br/>' + winner.name + 
                  ' wins the game with score ' + winner.score 
                  + '!<br/>Other scores:<br/>' + scoresStr, true);
        }
    },
    onDiceCatched: function() {
        // catch one dice of other player 
        
        var player = this.getActivePlayer();
        var diceList = this.diceList.slice(0); // copy dice list
        
        var allowedDice = _.filter(diceList, function(dice) {
             return dice.player.name !== player.name;
        });
        
        var catched = allowedDice[Math.floor(Math.random()*allowedDice.length)];
        // console.log('catched dice = ', catched);
        
        // add score to active player
        if ( catched ) {
            player.score += catched.diceValue;
            this.$activePlayerScore.html(player.score);
            
            // update play field
            var newDiceList = this.removeItem(diceList, catched);
            this.diceList = newDiceList.slice(0); // copy new list to the dice list
            this.refreshPlayField();
            
            var allDone = _.every(this.players.dicesThrown, function(element) {
                return element == this.settings.maxThrownCount;
            });
            
            if ( this.diceList.length == 0 && allDone ){
                this.checkGameOver();
            }
        }
        else {
            // nothing catched
            // check if game is over? if yes, who is the winner?
            if ( player.dicesThrown >= this.settings.maxThrownCount )             
            {
                this.checkGameOver();
                return;
            }
        }
        this.nextPlayer(); // change to next player
    },
    removeItem: function(array, id) {
        // remove dice from list
        return _.reject(array, function(item) {
            //console.log(item, id, item===id);
            return item === id; // or some complex logic
        });
    },
    refreshPlayField: function() {
        var $field = this.$playField, 
            $row = $('<p/>');
        
        $field.empty();
        $.each(this.diceList, function(index, item) {
            console.log(index, item);
            $row.text(item.player.name + ' - threw dice: ' +item.diceValue)
            $field.append($row.clone());
        });
    },
    showGameInfo: function(message, keep) {
        var $info = this.$gameInfo;
        $info.html(message);
        // show info with jQuery animation
        $info
            .stop()
            .animate({opacity:1}, 'fast');
        
        if ( !keep ) { // don't auto hidde --> required for game over
            $info
                .delay(2000) // display time of message
                .animate({opacity:0},'fast');
        }
    },
    hideGameInfo: function() {
        // required to hide gameover message
        this.$gameInfo.stop()
            .animate({opacity:0}, 'fast'); // also stop every animation if any is active
    },
    throwDice: function() {
        var player = this.getActivePlayer();
        player.dice.threw.dispatch(Math.floor(Math.random()*6+1));
    },
    catchDice: function() {
        console.log('catch dice method');
        var player = this.getActivePlayer();
        player.dice.catched.dispatch();
    }
}


$(function() {
    // start game after DOM ready
    var game = new DiceGame();
});

.playerInfo {
    position: absolute;
    top: 0px;
    right: 10px;
    border: 1px solid black;
    width: 200px;
}

#gameInfo {
    opacity: 0;
    margin: 0 auto;
    color: red;
    text-align: center;
    width: 300px;
    height: 100px;
    /* center div horizontally and vertically */
    position:absolute;
    left:50%;
    top:50%;
    margin:-50px 0 0 -150px;
    border: 0px solid black;
    background-color: #FAFFBF;
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="https://cdn.rawgit.com/millermedeiros/js-signals/master/dist/signals.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="newGame">New Game</button>
<button id="addPlayer">New Player</button>
<!-- <button id="changePlayer">Change player</button> -->

<button id="throw">Throw dice</button>
<button id="catch">Catch dice</button>

<div class="playerInfo">
    Active player: <span id="activePlayer"></span><br/>
    Score: <span id="activePlayerScore"></span>
</div>
<div id="gameInfo"></div>
<div id="playField"></div>