webxoss-client/CardDialog.js

'use strict';

function CardDialog (game,id) {
	this.game = game;
	this.stage = new createjs.Stage(id+'Canvas');
	this.stage.enableMouseOver(10);

	this.scrollDiv = document.getElementById(id+'ScrollDiv');
	this.windowDiv = document.getElementById(id+'WindowDiv');
	this.warpDiv   = document.getElementById(id+'WarpDiv');
	this.titleDiv  = document.getElementById(id+'TitleDiv');
	this.closeIcon = document.getElementById(id+'CloseIcon');
	this.okButton  = document.getElementById(id+'OkButton');

	this.cardButtons = [];

	this.hidden = true;
	this.canClose = false;

	this.warpDiv.style.visibility = 'hidden';

	var dialog = this;
}

CardDialog.prototype.showCards = function (title,cards,callback) {
	var dialog = this;
	cards.forEach(function (card) {
		var btn = new CardButton(card,function () {});
		dialog.cardButtons.push(btn);
		dialog.stage.addChild(btn);
	},this);

	dialog.okButton.disabled = false;
	dialog.okButton.textContent = '确定';
	dialog.okButton.onclick = function (event) {
		dialog.close();
		callback();
	}
	dialog.okButton.hidden = false;
	dialog.canClose = false;
	dialog.pop(title);
};

CardDialog.prototype.selectOne = function (title,cards,callback) {
	var dialog = this;
	cards.forEach(function (card) {
		var btn = new CardButton(card,function (event) {
			dialog.close();
			callback(card);
		});
		dialog.cardButtons.push(btn);
		dialog.stage.addChild(btn);
	},this);
	dialog.okButton.hidden = true;
	dialog.pop(title);
};

CardDialog.prototype.selectSomeAdvanced = function (title,cards,careOrder,onSelectChange,callback) {
	var dialog = this;
	var selectedIndexes = [];
	cards.forEach(function (card,idx) {
		var btn = new CardButton(card,function (event) {
			if (!this.selected && this.disabled) return;
			this.changed = true;
			dialog.cardButtons.forEach(function (btn) {
				btn.enable();
			},this);
			if (this.selected) {
				this.selected = false;
				removeFromArr(idx,selectedIndexes);
			} else {
				this.selected = true;
				selectedIndexes.push(idx);
			}
			handleSelectChange();
		});
		dialog.cardButtons.push(btn);
		dialog.stage.addChild(btn);
	},this);
	handleSelectChange();
	this.okButton.textContent = '确定';
	this.okButton.hidden = false;
	dialog.pop(title);

	function handleSelectChange () {
		var done = onSelectChange(selectedIndexes,disable);
		if (careOrder) {
			dialog.cardButtons.forEach(function (btn,idx) {
				var order = selectedIndexes.indexOf(idx) + 1;
				btn.setOrder(order);
			});
		}
		if (done) {
			dialog.okButton.disabled = false;
			dialog.okButton.onclick = function (event) {
				dialog.close();
				callback(selectedIndexes);
			};
		} else {
			dialog.okButton.disabled = true;
			dialog.okButton.onclick = null;
		}
	}
	function disable (idx) {
		dialog.cardButtons[idx].disable();
	}
};

CardDialog.prototype.selectSome = function (title,cards,min,max,careOrder,callback) {
	this.selectSomeAdvanced(title,cards,careOrder,function (selectedIndexes,disable) {
		var len = selectedIndexes.length;
		if (len >= max) {
			cards.forEach(function (card,idx) {
				disable(idx);
			},this);
			return true;
		}
		return len >= min;
	},function (selectedIndexes) {
		callback(selectedIndexes.map(function (idx) {
			return cards[idx];
		}));
	});
};

CardDialog.prototype.seekSome = function (title,cards,targets,min,max,callback) {
	this.selectSomeAdvanced(title,cards,false,function (selectedIndexes,disable) {
		// 先 disable 掉 targets 以外的卡.
		cards.forEach(function (card,idx) {
			if (!inArr(card,targets)) disable(idx);
		},this);

		var len = selectedIndexes.length;
		if (len >= max) {
			cards.forEach(function (card,idx) {
				disable(idx);
			},this);
			return true;
		}
		return len >= min;
	},function (selectedIndexes) {
		callback(selectedIndexes.map(function (idx) {
			return cards[idx];
		}));
	});
};

CardDialog.prototype.selectEner = function (title,cards,colors,cost,callback) {
	this.selectSomeAdvanced(title,cards,false,onSelectChange,function (selectedIndexes) {
		callback(selectedIndexes.map(function (idx) {
			return cards[idx];
		}));
	});

	function onSelectChange (selectedIndexes,disable) {
		var need = {};
		var total = 0;
		['colorless','white','black','red','blue','green','multi'].forEach(function (color) {
			need[color] = cost[color] || 0;
			total += need[color];
		},this);

		if (selectedIndexes.length >= total) {
			cards.forEach(function (card,idx) {
				disable(idx);
			},this);
			return true;
		}

		selectedIndexes.forEach(function (idx) {
			var color = colors[idx];
			if (color === 'multi') return;
			if (need[color] > 0) {
				need[color] -= 1;
			} else {
				need.colorless -= 1;
			}
		},this);

		if (need.colorless > 0) return false;

		cards.forEach(function (card,idx) {
			var color = colors[idx];
			if (color === 'multi') return;
			if (!need[color]) disable(idx);
		},this);
	}
};

CardDialog.prototype.draw = function () {
	var width = Card.WIDTH*2;
	var height = Card.HEIGHT*2;
	var space = 10;
	var len = this.cardButtons.length;
	var singleRow = len <= 3;
	var totalWidth = (width + 2*space) * 3;
	var totalHeight = (height + 2*space) * Math.ceil(this.cardButtons.length/3);
	this.cardButtons.forEach(function (btn,i) {
		var row = i%3;             // 第row行 (下标从0开始);
		var col = Math.floor(i/3); // 第col列 (下标从0开始);
		if (singleRow) {
			btn.x = (totalWidth - len*(width+2*space)) / 2;
		} else {
			btn.x = 0;
		}
		btn.x += row*(width+2*space) + space;
		btn.y = col*(height+2*space) + space;
	},this);
	this.stage.canvas.width = totalWidth;
	this.stage.canvas.height = totalHeight;
};

CardDialog.prototype.pop = function (title) {
	this.draw();
	this.titleDiv.textContent = title;
	if (this.canClose) {
		this.closeIcon.style.display = '';
		this.closeIcon.onclick = this.close.bind(this);
	} else {
		this.closeIcon.style.display = 'none';
		this.closeIcon.onclick = null;
	}
	this.hidden = false;

	var warp = this.warpDiv;
	var win = this.windowDiv;
	var scroll = this.scrollDiv;
	warp.style.opacity = '0';
	warp.style.visibility = 'visible';
	// 消灭水平滚动条
	scroll.style.width = this.stage.canvas.width + scroll.offsetWidth - scroll.clientWidth + 'px';
	// 居中
	win.style.top = (this.game.stage.canvas.height - win.offsetHeight)/2 + 'px';
	win.style.left = (this.game.stage.canvas.width - win.offsetWidth)/2 + 'px';
	warp.style.opacity = '1';

	this.update();
};

CardDialog.prototype.close = function () {
	this.hidden = true;
	this.cardButtons.length = 0;
	this.stage.removeAllChildren();
	this.warpDiv.style.visibility = 'hidden';
};

CardDialog.prototype.update = function () {
	if (this.hidden) return;
	var changed = false;
	this.stage.children.forEach(function (bitmap) {
		if (bitmap.update()) changed = true;
	},this);
	if (changed) {
		this.stage.update();
	}
};