API Docs for:
Show:

File: student/demo/gameplay/js/development_cards/CardOverlay.js

// STUDENT-CORE-BEGIN
// DO NOT EDIT THIS FILE
/**
    This is the namespace for development cards
    @module catan.devCards
    @namespace devCards
*/

var catan = catan || {};
catan.devCards = catan.devCards || {};

catan.devCards.View = (function (){
	
	var BasicOverlay = catan.misc.BasicOverlay;
	var Definitions = catan.definitions;
	var ResourceTypes = catan.definitions.ResourceTypes;
	var DisplayElement = catan.definitions.DisplayElement;
	var SHOW_MOUSEOVER = true;
	var NULL_TEXT = "";
	var NULL_VALUE = "none";
	var MESSAGE_DISPLAY_ID = "dev-card-description";
	var GROUP_NAME = catan.definitions.GroupNames.card;
	var CardTypes = catan.definitions.CardTypes;
	
	var DevCardView = (function(){
		
		/**
		 * A view for viewing and using development cards.  Inherits from misc.BaseOverlay.
		 * @class DevCardView
		 * @extends misc.BaseOverlay
		 * @constructor
		 */
		var DevCardView = function(){
			this.setActions(initActions.call(this));
			this.setDisplayElems({});
			BasicOverlay.call(this, "Development Cards", "dev-cards");
		}
		
		DevCardView.prototype = core.inherit(BasicOverlay.prototype);
        
		core.defineProperty(DevCardView.prototype, "DisplayElems");
		core.defineProperty(DevCardView.prototype, "opt1");
		core.defineProperty(DevCardView.prototype, "opt2");
		core.defineProperty(DevCardView.prototype, "btn");
		core.defineProperty(DevCardView.prototype, "actions");
		core.defineProperty(DevCardView.prototype, "display");
		
		/**
		 Attaches the controller to the view and builds the view on the page.
		 @method setController
		 @param {devCards.Controller} controller 
		 @return void
		 */		
		DevCardView.prototype.setController = function(controller){
			this.Controller = controller;
			makeCardsArea.call(this);
			makeExtraFeatureArea.call(this);
			this.setView(this.generateBody());
		}
        
		/**
		 Enables a single card
		 @method setCardEnabled
		 @param {String} card the card to update (from catan.definitions.CardTypes) 
		 @param {Boolean} enabled whether the player can use the card
		 @return void
		 */		
		DevCardView.prototype.setCardEnabled = function(card, enabled){	
			if(enabled)
				this.getDisplayElems()[card].enable(SHOW_MOUSEOVER);
			else
				this.getDisplayElems()[card].disable(SHOW_MOUSEOVER);
		}
        
		/**
		 Sets the amount for a single card
		 @method updateAmount
		 @param {String} value the value to update (from catan.definitions.CardTypes) 
		 @param {int} amount the total number of cards of that type the player has (both old and new cards)
		 @return void
		 */		
		DevCardView.prototype.updateAmount = function(value, amount){	
			this.getDisplayElems()[value].updateLabel(amount);
		}
        
		/**
		 * Resets the overlay view
		 @method clearView
		 @return void
		 */		
		DevCardView.prototype.clearView = function(){	
			this.getOpt1().reset();
			this.getOpt1().hide();
			
			this.getOpt2().reset();
			this.getOpt2().hide();
			
			this.getBtn().hide();
		}
		
		// private methods
        
		DevCardView.prototype.generateBody = function(){		
			
			makeExtraFeatureArea.call(this);
				
			var div = document.createElement("div");
            div.setAttribute("class", "center-content");
			
			var displayDiv = document.createElement("div");
            displayDiv.setAttribute('class',"card-display-area");
            
            if(this.getController() != undefined){
                for(index in CardTypes){
                    displayDiv.appendChild(this.getDisplayElems()[CardTypes[index]].getView());
                }	
            }
            div.appendChild(displayDiv);
			
			var chooserArea = document.createElement("div");
            chooserArea.appendChild(this.getBtn().getView());
            chooserArea.appendChild(this.getOpt1().getView());
            chooserArea.appendChild(this.getOpt2().getView());
            chooserArea.appendChild(this.getBtn().getView());
            div.appendChild(chooserArea);
			
			var messageElem = document.createElement("label");
            messageElem.setAttribute("id",MESSAGE_DISPLAY_ID);
            messageElem.textContent = NULL_TEXT;
            div.appendChild(messageElem);
				
			return div;
		}
        
		DevCardView.prototype.generateFooter = function(){		
			
			var div = document.createElement("div");
            div.setAttribute("class", "center-content");
			
			var cancelAction = core.makeAnonymousAction(this, this.closeModal);
			var cancelButton = new DisplayElement.ButtonArea(cancelAction);
            cancelButton.setMessage("Cancel");
            div.appendChild(cancelButton.getView());
			
			return div;
		}
		
		var makeCardsArea = function(){
			for(index in CardTypes){
				var cardType = CardTypes[index];
				var action = this.getActions()[cardType];
						
				var displayElem = new DisplayElement.ComboElement(GROUP_NAME, cardType, action);
                displayElem.setMouseIn(getMouseInAction.call(this,cardType));
                displayElem.setMouseOut(getMouseOutAction.call(this));
                
                this.getDisplayElems()[cardType] = displayElem;
                displayElem.enable(SHOW_MOUSEOVER);
			}	
		}
		
		var makeExtraFeatureArea = function(){
			var btn = new DisplayElement.ButtonArea();
            this.setBtn(btn);
            btn.hide();
				
			var o1 = new DisplayElement.ChooserElement("option1", makeChooserOptions.call(this))
            this.setOpt1(o1);
            o1.hide()
			
			var o2 = new DisplayElement.ChooserElement("option2", makeChooserOptions.call(this))
            this.setOpt2(o2);
            o2.hide();
		}
		
		// displays the options for the card
        
		DevCardView.prototype.showYop = function(){
            this.getOpt1().reset();
            this.getOpt1().show();
            
            this.getOpt2().reset();
            this.getOpt2().show();
            
            this.getBtn().updateAction(core.makeAnonymousAction(this, this.doYop));
            this.getBtn().setMessage("use year of plenty");
            this.getBtn().show();
		}
		
		DevCardView.prototype.showMon = function(){
			this.getOpt1().reset();
			this.getOpt1().show();
			
			this.getOpt2().reset();
			this.getOpt2().hide();
			
			this.getBtn().updateAction(core.makeAnonymousAction(this, this.doMon));
			this.getBtn().show();
			this.getBtn().setMessage("use monopoly");
		}
		
		// called on pressing the "use" button
        
		DevCardView.prototype.doYop = function(){
			
			var o1 = this.getOpt1().getSelected();
			var o2 = this.getOpt2().getSelected();
	
			if(o1 != NULL_VALUE && o2 != NULL_VALUE)
				this.getController().useYearOfPlenty(o1, o2);
		}
        
		DevCardView.prototype.doMon = function(){
			
			var o1 = this.getOpt1().getSelected();
			if(o1 != NULL_VALUE)
				this.getController().useMonopoly(o1);
		}
	
		// for building the views
        
		var makeChooserOptions = function(){
			var options = new Array();
			
			options.push({	label:NULL_VALUE});
			
			for(index in ResourceTypes){
				options.push({	label:ResourceTypes[index]	});
			}
			return options;
		}
		
		var initActions = function(){
			var actions = {};
				
            actions[Definitions.SOLDIER] = core.makeAnonymousAction(this, this.useSoldier);
            actions[Definitions.YEAR_OF_PLENTY] = core.makeAnonymousAction(this, this.showYop);
            actions[Definitions.MONOPOLY] = core.makeAnonymousAction(this, this.showMon);
            actions[Definitions.ROAD_BUILD] = core.makeAnonymousAction(this, this.useRoadBuild);
            actions[Definitions.MONUMENT] = core.makeAnonymousAction(this, this.useMonument);
            
			return actions;
		}
		
		DevCardView.prototype.useRoadBuild = function(){
			this.getController().useRoadBuild();
		}
        
		DevCardView.prototype.useMonument = function(){
			console.log("using road!");
			this.getController().useMonument()
		}
        
		DevCardView.prototype.useSoldier = function(){
			this.getController().useSoldier();
		}
		
		var getMessage = function(card){
			return Definitions.CardInfo[card];
		};
        
		var getMouseInAction = function(value) {
			var msg = getMessage.call(this, value);
			return function(){
				var display = document.getElementById(MESSAGE_DISPLAY_ID);
				if(display!=null)
					display.textContent = msg;
			}
		};
        
		var getMouseOutAction = function() {
			return function(){
				var display = document.getElementById(MESSAGE_DISPLAY_ID);
				if(display!=null)
					display.textContent = NULL_TEXT;
			}
		};
		
		return DevCardView;
	}());
	
	return DevCardView;
}());