webxoss-client/Card.js

'use strict';

function Card (game,isWhiteBack) {
	createjs.Container.prototype.initialize.call(this);

	// 基本属性
	this.game = game;
	this.isWhiteBack = isWhiteBack;
	this.width = Card.WIDTH;
	this.height = Card.HEIGHT;
	this.pid = 0;
	this.zone = null;
	this.zIndex = 0;
	this.changed = true;
	this.isSide = false; // 双面共鸣, isSide 为 true 时,不计入区域卡片数量,不显示动画.

	// 渲染层
	// 因为EasleJS没有位置偏移(translate),
	// 所以增加渲染层来提供偏移. 即:
	// Card.x 指定卡片的水平位置, renderLayer.x 指定其水平偏移.
	// 所有显示对象都放到渲染层,这样,它们都会跟着偏移.
	this.renderLayer = new createjs.Container();
	this.addChild(this.renderLayer);

	// 变形原点在中心.
	this.renderLayer.regX = this.width/2;
	this.renderLayer.regY = this.height/2;

	// 位图层
	this.bitmap = new CardBitmap('',game.imageManager.noimage);
	this.renderLayer.addChild(this.bitmap);

	// 状态层 (冻结,枪兵等状态)
	this.stateLayer = new createjs.Container();
	this.renderLayer.addChild(this.stateLayer);

	// 效果层
	this.effectShape = new createjs.Shape();
	this.renderLayer.addChild(this.effectShape);

	// 按钮层
	this.buttonLayer = new ButtonList();
	this.buttonLayer.x = this.width/2;
	this.buttonLayer.y = this.height/2
	this.renderLayer.addChild(this.buttonLayer);

	// 样式
	this.style = new Style({
		x: 0,
		y: 0,
		zIndex: 0,
		top: false,
		covered: false,
		offX: 0, // 位置偏移
		offY: 0,
		rotation: 0,
		scaleX: -1, // 用于翻面,负数表示反面,正数表示正面
		shadowColor: "#f7ff00",
		shadowBlur: 0,
		flash: 0, // 用于闪烁: alpha = 1 - (flash % 1)
		          // flash 从0渐变到n,则闪烁n次.
		shine: 0  // 用于闪耀,范围为0至1,
		          // 表示闪耀动画进行的百分比.
	});
	this.style.checkSkip = function () {
		return this.game.skip;
	}.bind(this);

	this.on('mouseover',this.handleMouseover);
	this.on('mouseout',this.handleMouseout);

	this.game.addCard(this);
}

Card.WIDTH = 63;
Card.HEIGHT = 88;

Card.prototype = new createjs.Container();
Card.prototype.constructor = Card;

Card.prototype.up = function () {
	var rotation = this.zone.opposite? 180 : 0;
	this.style.transit('rotation',rotation,0.2);
};

Card.prototype.down = function () {
	var rotation = this.zone.opposite? 180 : 0;
	rotation += 90;
	this.style.transit('rotation',rotation,0.2);
};

Card.prototype.faceup = function () {
	this.style.transit('scaleX',1,0.2);
};

Card.prototype.facedown = function () {
	this.style.transit('scaleX',-1,0.2);
};

Card.prototype.move = function (pid,zone,up,faceup,bottom,isSide) {
	this.pid = pid;
	this.isSide = isSide;
	this.floatdown();

	if (this.zone) this.zone.removeCard(this);
	this.zone = zone;
	this.zone.addCard(this,bottom);

	up? this.up() : this.down();
	faceup? this.faceup() : this.facedown();
};

Card.prototype.moveTo = function (x,y,coveredMoving,coveredSettaled) {
	var duration = this.isSide? 0 : 0.2;
	this.style.transit('x',x,duration);
	this.style.transit('y',y,duration);
	if (x !== this.x || y !== this.y) {
		this.style.set('top',true);
		this.style.transit('top',false,duration);
	}
	this.style.set('covered',coveredMoving);
	this.style.transit('covered',coveredSettaled,duration);
};

Card.prototype.floatup = function () {
	this.style.set('top',true);
	// this.style.transit('offY',-10,0.1,Style.linear);
};

Card.prototype.floatdown = function () {
	this.style.set('top',false);
	// this.style.transit('offY',0,0.1,Style.linear);
};

Card.prototype.outlineOn = function () {
	this.style.transit('shadowBlur',5,0.2,Style.linear);
};

Card.prototype.outlineOff = function () {
	this.style.transit('shadowBlur',0,0.2,Style.linear);
};

Card.prototype.flash = function () {
	this.style.set('flash',0);
	this.style.transit('flash',3,0.3,Style.linear);
};

Card.prototype.shine = function () {
	this.style.set('shine',0);
	this.style.transit('shine',1,0.3,Style.linear);
};

Card.prototype.addStates = function (states) {
	this.changed = true;
	this.stateLayer.visible = true;
	states.forEach(function (state) {
		var stateImage = this.game.imageManager.getStateImage(state);
		var bitmap = new createjs.Bitmap(stateImage);
		this.stateLayer.addChild(bitmap);
	},this);
};

Card.prototype.removeStates = function () {
	this.changed = true;
	this.stateLayer.visible = false;
	this.stateLayer.removeAllChildren();
};

Card.prototype.addButton = function (txt,onclick) {
	// var useDialog = this.shouldUseDialog();

	// if (useDialog) {
	// 	this.zone.addButton(txt,onclick.bind(this,this),this);
	// 	return;
	// }

	// 兼容参数为 button
	if (txt.constructor === Button) {
		var btn = txt;
		this.buttonLayer.addButton(btn);
		return;
	}
	var btn = new Button(txt,onclick.bind(this,this));
	this.buttonLayer.addButton(btn);
	// this.outlineOn();
};


// 在给卡片添加按钮时,有时候卡片被遮挡,
// 须要用卡片选择框.
// 问:具体什么情况下要用选择框呢?
// 答:满足以下条件之一:
//     1.卡片在TileZone(除了己方手牌),牌组,LRIG牌组,废弃区,LRIG废弃区;
//     2.卡片在检查区,且检查区不止1张卡.
//     3.卡片在SIGNI区或LRIG区,并且,不在最上面.
Card.prototype.shouldUseDialog = function () {
	var zoneName = this.zone.name;
	if (this.zone.constructor === TileZone) {
		if (this.zone !== this.game.player.handZone) {
			return true;
		}
	}
	if (inArr(zoneName,['MainDeck','LrigDeck','TrashZone','LrigTrashZone'])) {
		return true;
	}
	if (zoneName === 'CheckZone') {
		if (this.zone.cards.length > 1) {
			return true;
		}
	}
	if (inArr(zoneName,['SigniZone','LrigZone'])) {
		if (this.zone.getCardIndex(this) !== 0) {
			return true;
		}
	}
	return false;
};

Card.prototype.removeButtons = function () {
	this.buttonLayer.removeAllButtons();
	// this.outlineOff();
};

Card.prototype.update = function () {
	var changed = this.style.isChanged() || this.changed;
	concat(this.buttonLayer,this.bitmap).forEach(function (obj) {
		if (obj.update()) changed = true;
	},this);
	if (!changed) return false;
	this.changed = false;
	// shortcuts
	var layer = this.renderLayer;
	var effectShape = this.effectShape;
	var bitmap = this.bitmap;
	// 计算样式
	var style = this.style.getComputedStyle();
	// 位置
	this.x = style.x;
	this.y = style.y;
	// 旋转
	this.rotation = style.rotation;
	this.buttonLayer.rotation = -style.rotation;
	// 闪烁 (flash)
	this.alpha = 1 - (style.flash % 1);
	// 偏移
	layer.x = style.offX;
	layer.y = style.offY;
	// 翻面
	var cardName = this.pid? Localize.cardName(CardInfo[this.pid]) : '???';
	if (style.scaleX > 0) {
		// 正面
		this.bitmap.setAltImage(cardName,this.game.imageManager.getImageByPid(this.pid));
	} else {
		// 背面
		this.bitmap.setAltImage(cardName,this.game.imageManager.getBackImage(this.isWhiteBack));
	}
	layer.scaleX = Math.abs(style.scaleX);
	// outline (其实是shadow)
	bitmap.shadow = new createjs.Shadow(style.shadowColor,0,0,style.shadowBlur);
	// 闪耀 (shine)
	// 闪耀就是在效果层上画一道移动的白光
	if (style.shine > 0) {
		var w = 40; // 白光的"宽度" (等于白光实际宽度除以根号2,因为白光是45度倾斜的)
		var x0 = style.shine*(this.width+w) - w;
		var y0 = style.shine*(this.height+w) - w;
		var x1 = x0 + w;
		var y1 = y0 + w;
		this.effectShape.graphics
			.clear()
			.beginLinearGradientFill(['rgba(255,255,255,0)','white','rgba(255,255,255,0)'],[0,0.5,1],x0,y0,x1,y1)
			.drawRect(0,0,this.width,this.height);
	}
	// zIndex
	this.zIndex = style.top? 512 : style.zIndex;
	this.visible = style.top || !style.covered;
	return true;
};

Card.prototype.handleMouseover = function (event) {
	this.game.cardDetail.show(this.pid);
	if (this.zone.opposite || this.zone.name !== 'HandZone') return;
	this.floatup();
};

Card.prototype.handleMouseout = function (event) {
	if (this.zone.opposite || this.zone.name !== 'HandZone') return;
	this.floatdown();
};