Prompting and waiting for the response

Question

I've searched all over the internet but couldn't solve the problem.

I am coding a game. Before the game starts, I prompt the user for difficulty, and user have to select a difficulty to start the game by clicking one of the buttons.

function GameManager(){
 this.current = 0;
 this.difficulty = 0;
 this.toolbox = new Toolbox();
 this.promptDifficulty(); // Here it should wait for user input
 this.grid = new Grid(this.difficulty);
 this.start();
}
GameManager.prototype.promptDifficulty = function() {
 $("#difficulty").show();
 this.toolbox.center();
 var selected = false;
 $('.selection').click(function(){
 var $diff = $(this).attr('id');
 if($diff === 'easy')
 this.difficulty = 8;
 else if($diff === 'medium')
 this.difficulty = 9;
 else if($diff === 'hard')
 this.difficulty = 10;
 $('#difficulty').hide();
 });
}; 

However, it creates the Grid before the user selects the difficulty, and this messes up whole design. How can I make it wait until user clicks one of the difficulty settings?

Answer 1

The problem is the difficulty prompt is an async method, when you call the promptDifficulty() method, it shows the difficulty selector, but the rest of the script execution will continue before the user selects an item. So you need to use a callback to continue, which will be called once the user selects an item.

function GameManager() {
 this.current = 0;
 this.difficulty = 0;
 this.toolbox = new Toolbox();
 this.promptDifficulty($.proxy(function (difficulty) {
 this.grid = new Grid(this.difficulty);
 this.start();
 }, this));
}
GameManager.prototype.promptDifficulty = function (callback) {
 $("#difficulty").show();
 this.toolbox.center();
 var selected = false;
 $('.selection').click($.proxy(function (e) {
 var $diff = e.currentTarget.id;
 if ($diff === 'easy') this.difficulty = 8;
 else if ($diff === 'medium') this.difficulty = 9;
 else if ($diff === 'hard') this.difficulty = 10;
 $('#difficulty').hide();
 callback(this.difficulty);
 }, this));
};

Also Note the use of $.proxy(), because in the click handler this by default refers to the clicked element, so when you set this.difficulty it is not setting to the GameManager instance, you can solve by passing a custom execution context for the callback method.

Demo: Fiddle

• Burak Özmen: Can you explain the code so I can fix it? Because I've never got the concept of callbacks, and the code doesn't seem to work properly again. this.difficulty seems to assigned to a div element instead of an integer(8,9 or 10).
• Burak Özmen: $.proxy() doesn't seem to help it. Still assigns the wrong value to the difficulty.
• Arun P Johny: @BurakÖzmen missed to pass a this to $.proxy() - see the update