Source: GameplayDialog.js

/*
 *  2016 Maciej Wiecierzewski
 */

/**
 * @constructor
 * @extends Dialog
 * @param {type} gameplay
 * @param {type} images
 * @returns {GameplayDialog}
 */
function GameplayDialog(gameplay, images)
{
    Dialog.call(this);
    
    this.gameplay = gameplay;
    
    this.expressionWidget = new ExpressionWidget(images);
    this.container.addChild(this.expressionWidget.container);
    
    this.panelShape = new createjs.Shape();
    this.container.addChild(this.panelShape);
    
    this.checkButton = new Button("check", "20px Arial", "#fff", "#02e");
    this.checkButton.onClick(function() { this.checkSolution(); }.bind(this) );
    this.checkButton.appendTo(this.container);
    
    this.nextExpressionButton = new Button("next expression", "20px Arial", "#fff", "#0c4");
    this.nextExpressionButton.onClick( function() { this.nextTutorialExpression(); }.bind(this));
    this.nextExpressionButton.hide();
    this.nextExpressionButton.appendTo(this.container);
    
    this.skipTutorialButton = new Button("skip tutorial levels", "16px Arial", "#fff", "#000");
    this.skipTutorialButton.onClick( function() { this.skipTutorial(); }.bind(this) );
    this.skipTutorialButton.appendTo(this.container);
    
    this.finishTutorialButton = new Button("start playing", "20px Arial", "#fff", "#000");
    this.finishTutorialButton.onClick( function() { this.skipTutorial(); }.bind(this) );
    this.finishTutorialButton.hide();
    this.finishTutorialButton.appendTo(this.container);
    
    this.operatorDescription = new Text("16px Arial", 30, "#000");
    this.operatorDescription.appendTo(this.container);
    
    this.correctText = new createjs.Text("Correct!", "bold 30px Arial", "#0c4");
    this.correctText.visible = false;
    this.container.addChild(this.correctText);
    
    this.wrongText = new createjs.Text("Wrong!", "bold 30px Arial", "#e20");
    this.wrongText.visible = false;
    this.container.addChild(this.wrongText);
    
    this.results = new createjs.Container();
    this.results.visible = false;
    this.container.addChild(this.results);
    
    this.trialsText = new createjs.Text("trials", "bold 16px Arial", "#000");
    this.results.addChild(this.trialsText);
    
    this.expNoText = new createjs.Text("expression #", "bold 16px Arial", "#000");
    this.results.addChild(this.expNoText);
    
    this.corrExpText = new createjs.Text("correct: ", "bold 16px Arial", "#000");
    this.results.addChild(this.corrExpText);
    
    var getDescription = function(id) {
        var operatorSymbol = gameplay.expression.string.charAt(id);
        for(var i = 0; i < gameplay.operators.length; i++)
        {
            if(gameplay.operators[i].symbol === operatorSymbol)
            {
                var description = gameplay.operators[i].describe();
                GameplayDialog.prototype.showDescription.call(this, description);
            }
        }
    }.bind(this);
    this.getDescription = getDescription;
    
    Dialog.addAction('showDescription', getDescription);
}

GameplayDialog.prototype = Object.create(Dialog.prototype);

/** Resizes the dialog */
GameplayDialog.prototype.resize = function()
{
    var width = Dialog.stage.canvas.width;
    var height = Dialog.stage.canvas.height;
    
    if(width > 500)
    {
        this.panelShape.x = width-200;
        this.panelShape.y = 0;
        this.panelShape.graphics.clear();
        this.panelShape.graphics.beginFill('#eeeeee').drawRect(0, 0, 200, height).endFill();
    
        this.expressionWidget.resize(0, 0, width, Math.min(Math.max(0.8*height, 250)));
        this.checkButton.resize(width-180, height-70, 160, 50);
        this.nextExpressionButton.resize(width-180, height-70-60, 160, 50);
        this.skipTutorialButton.resize(width-180, 10, 160, 50);
        this.finishTutorialButton.resize(width-180, 10, 160, 50);
        this.operatorDescription.resize(10, 0.85*height, width-210, 400);
        this.correctText.x = 20;
        this.correctText.y = 10;
        this.wrongText.x = 20;
        this.wrongText.y = 10;
        this.results.x = width-180;
        this.results.y = 10;
        this.trialsText.x = 0;
        this.trialsText.y = 60;
        this.corrExpText.x = 0;
        this.corrExpText.y = 30;
        this.expNoText.x = 0;
        this.expNoText.y = 0;
    }
    else
    {
        this.panelShape.x = 0;
        this.panelShape.y = 270;
        this.panelShape.graphics.clear();
        this.panelShape.graphics.beginFill('#eeeeee').drawRect(0, 0, width, 300).endFill();
    
        this.expressionWidget.resize(0, 0, width, 260);
        this.checkButton.resize(width-180, 280, 160, 50);
        this.nextExpressionButton.resize(width-180, 340, 160, 50);
        this.skipTutorialButton.resize(10, 280, 160, 50);
        this.finishTutorialButton.resize(10, 280, 160, 50);
        this.operatorDescription.resize(10, 410, Math.max(width-200, 200), 400);
        this.correctText.x = 20;
        this.correctText.y = 10;
        this.wrongText.x = 20;
        this.wrongText.y = 10;
        this.results.x = 10;
        this.results.y = 280;
        this.trialsText.x = 0;
        this.trialsText.y = 60;
        this.corrExpText.x = 0;
        this.corrExpText.y = 30;
        this.expNoText.x = 0;
        this.expNoText.y = 0;
    }
}

/** Skips the tutorial */
GameplayDialog.prototype.skipTutorial = function()
{
    this.skipTutorialButton.hide();
    this.finishTutorialButton.hide();
    this.nextExpressionButton.onClick( function() { this.nextExpression(); }.bind(this) );
    this.nextExpressionButton.show();
    this.results.visible = true;
    
    this.gameplay.skipTutorial();
    this.nextExpression();
}

/** Shows next tutotrial expression */
GameplayDialog.prototype.nextTutorialExpression = function()
{
    this.correctText.visible = false;
    this.wrongText.visible = false;
    this.nextExpressionButton.hide();
        
    if(this.gameplay.allCorrect)
    {
        if(!this.gameplay.tutorialFinished)
        {
            this.gameplay.nextTutorialExpression();
            this.drawExpression();
        }
        else
        {
            
        }
    }
    else
    {
    }
}

/** Shows next expression */
GameplayDialog.prototype.nextExpression = function()
{
    this.gameplay.nextExpression();
    this.drawExpression();
    this.correctText.visible = false;
    this.wrongText.visible = false;
    this.updateResults();
    this.checkButton.show();
}

/** Updates the expression widget */
GameplayDialog.prototype.drawExpression = function()
{
    if(this.gameplay.expression !== null)
    {
        this.setExpressionSymbols();
        
        this.expressionWidget.draw(this.gameplay.expression);
    }
    
    this.getDescription();
    
    this.resize();
}

/** Prepares operator's images */
GameplayDialog.prototype.setExpressionSymbols = function()
{
    this.expressionWidget.symbolsImg = [];
    
    for(var symbol in this.gameplay.symbolsImages)
    {
        var imageName = this.gameplay.symbolsImages[symbol];
        this.expressionWidget.symbolsImg[symbol] = this.images[imageName];
    }
}

/**
 * Sets the operator's descriptio
 * @param {type} str String to be shown
 */
GameplayDialog.prototype.showDescription = function(str)
{
    this.operatorDescription.setText(str);
}

/** Checks if solution is correct */
GameplayDialog.prototype.checkSolution = function()
{
    console.log("checking solution");
    
    this.gameplay.checkSolution(this.expressionWidget.getSolution());
    this.expressionWidget.setCheckResult(this.gameplay.result);
    
    if(this.gameplay.allCorrect)
    {
        this.correctText.visible = true;
        if(!this.gameplay.tutorialFinished) 
        {
            this.nextExpressionButton.show();
        }
        else
        {
            this.checkButton.hide();
            this.skipTutorialButton.hide();
            this.finishTutorialButton.show();
        }
    }
    else
    {
        this.wrongText.visible = true;
        setTimeout(function() { this.wrongText.visible = false; }.bind(this), "3000");
    }
    
    this.updateResults();
}

/** Updates displayed informations */
GameplayDialog.prototype.updateResults = function()
{
    this.expNoText.text = "expression #" + this.gameplay.expressionNumber;
    this.trialsText.text = "trials: " + this.gameplay.trials;
    this.corrExpText.text = "correct: " + this.gameplay.correctAnswers;
}