chocomae/src/game/typing/practice/key_button.js

class KeyButton {

	constructor(x, y, width, height, normalText, shiftText, handSide, fingerType, alignType) {
		this.normalText = normalText;
		this.shiftText = shiftText;
		this.handSide = handSide;
		this.fingerType = fingerType;
		this.alignType = alignType;

		this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX);
		this.setting.strokeWidthPx = 2;

		this.buttonSolid = this.makeButtonSolidSprite(this.setting);
		this.setNormalColor();
		this.buttonStroke = this.makeButtonStrokeSprite(this.setting);

		this.baselineStroke = null;
		if(fingerType == KeyButton.INDEX_FINGER_BASELINE) {
			this.baselineStroke = this.makeBaselineStrokeSprite(this.setting, width, height);
			this.buttonStroke.addChild(this.baselineStroke);
		}

		this.buttonText = this.makeText(this.setting, this.normalText);
		if(this.normalText.length > 0) {
			this.buttonStroke.addChild(this.buttonText);
		}
	}

	makeButtonSolidSprite(setting) {
		let btnTexture = new Phaser.Graphics()
			.beginFill(0xffffff, 0.5)
			// .lineStyle(setting.strokeWidthPx, 0xFFffff, 1)
			.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
			.endFill()
			.generateTexture();

		return game.add.sprite(
			setting.x,	// - setting.width / 2,
			setting.y,	// - setting.height / 2,
			btnTexture
		);
	}

	makeButtonStrokeSprite(setting) {
		let btnTexture = new Phaser.Graphics()
			.lineStyle(setting.strokeWidthPx, 0xFFffff, 1)
			.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
			.generateTexture();

		return game.add.sprite(
			setting.x,	// - setting.width / 2,
			setting.y,	// - setting.height / 2,
			btnTexture
		);
	}

	makeBaselineStrokeSprite(setting, width, height) {
		let strokePx = setting.strokeWidthPx;

		let baselineTexture = new Phaser.Graphics()
			.lineStyle(2, 0x888888)
			.moveTo(1, 1)
			.lineTo(16, 1)
			.lineStyle(2, 0xffffff)
			.moveTo(0, 0)
			.lineTo(15, 0)
			.generateTexture();

		let baselineSprite = game.add.sprite(
				strokePx + setting.width / 2,
				strokePx + setting.height - 6,
				baselineTexture
			);
		baselineSprite.anchor.set(0.5);
		return baselineSprite;
	}

	makeText(setting, textContent) {
		let offsetX_px = 4;
		let offsetY_px = 5;

		let width = setting.width - setting.strokeWidthPx * 2 - offsetX_px;
		let height = setting.height - setting.strokeWidthPx * 2;

		if(this.alignType === KeyButton.NORMAL_KEY)
			setting.fontStyle.font = "20px Courier New";
		else
			setting.fontStyle.font = "11px Courier New";

		let btnText = game.add.text(offsetX_px, offsetY_px, textContent, setting.fontStyle)
			.setTextBounds(setting.strokeWidthPx, setting.strokeWidthPx, width, height);

		if(this.alignType === KeyButton.NORMAL_KEY) {
			btnText.boundsAlignH = "center";
			btnText.boundsAlignV = "middle";
		} else if(this.alignType === KeyButton.LEFT_FUNCTION_KEY) {
			btnText.boundsAlignH = "left";
			btnText.boundsAlignV = "bottom";
		} else if(this.alignType === KeyButton.CENTER_FUNCTION_KEY) {
			btnText.boundsAlignH = "center";
			btnText.boundsAlignV = "bottom";
		} else if(this.alignType === KeyButton.RIGHT_FUNCTION_KEY) {
			btnText.boundsAlignH = "right";
			btnText.boundsAlignV = "bottom";
		}

		// btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;

		btnText.text = textContent;

		return btnText;
	}


	setNormalColor() {
		switch(this.fingerType) {
			case KeyButton.THUMB:
			this.buttonSolid.tint = 0x604d4d;
			break;

			case KeyButton.INDEX_FINGER:
			case KeyButton.INDEX_FINGER_BASELINE:
			this.buttonSolid.tint = 0x4d604d;
			break;

			case KeyButton.MIDDLE_FINGER:
			this.buttonSolid.tint = 0x4d4d60;
			break;

			case KeyButton.RING_FINGER:
			this.buttonSolid.tint = 0x60604d;
			break;

			case KeyButton.LITTLE_FINGER:
			this.buttonSolid.tint = 0x4d6060;
			break;

			default:
			this.buttonSolid.tint = 0x4d4d4d;
			// this.buttonSolid.alpha = 0;
		}
	}

	setTargetColor() {
		switch(this.fingerType) {
			case KeyButton.THUMB:
			this.buttonSolid.tint = 0xff8080;
			break;

			case KeyButton.INDEX_FINGER:
			case KeyButton.INDEX_FINGER_BASELINE:
			this.buttonSolid.tint = 0x80ff80;
			break;

			case KeyButton.MIDDLE_FINGER:
			this.buttonSolid.tint = 0x8080ff;
			break;

			case KeyButton.RING_FINGER:
			this.buttonSolid.tint = 0xffff80;
			break;

			case KeyButton.LITTLE_FINGER:
			this.buttonSolid.tint = 0x80ffff;
			break;

			default:
			this.buttonSolid.tint = 0x202020;
			// this.buttonSolid.alpha = 0;
		}
	}

	setGoodPressColor() {
		this.buttonSolid.tint = 0x0000ff;
	}

	setBadPressColor() {
		this.buttonSolid.tint = 0xff0000;
	}


	onShiftPressed() {
		this.buttonText.text = this.shiftText;
	}

	onShiftUnpressed() {
		this.buttonText.text = this.normalText;
	}


/*
	mouseOut() {
		this.text.fill = this.setting.textColors.out;
		this.buttonStroke.tint = this.setting.strokeColors.out;
		this.button.tint = this.setting.buttonColors.out;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.out;
		}
	}

	mouseOver() {
		this.text.fill = this.setting.textColors.over;
		this.buttonStroke.tint = this.setting.strokeColors.over;
		this.button.tint = this.setting.buttonColors.over;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.over;
		}
	}

	mouseDown() {
		this.text.fill = this.setting.textColors.down;
		this.buttonStroke.tint = this.setting.strokeColors.down;
		this.button.tint = this.setting.buttonColors.down;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.down;
		}
	}

	buttonDisabled() {
		this.text.fill = this.setting.textColors.disabled;
		this.buttonStroke.tint = this.setting.strokeColors.disabled;
		this.button.tint = this.setting.buttonColors.disabled;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.disabled;
		}
	}
*/

}

KeyButton.NONE_ICON			= "";
KeyButton.NONE_BUTTON_TEXT	= "";

KeyButton.DEFALUT_ROUND_AMOUNT_PX	= 10;

KeyButton.NORMAL_KEY				= "normal_key";
KeyButton.NORMAL_FUNCTION_KEY		= "normal_function_key";
KeyButton.LEFT_FUNCTION_KEY			= "left_function_key";
KeyButton.CENTER_FUNCTION_KEY		= "center_function_key";
KeyButton.RIGHT_FUNCTION_KEY		= "right_function_key";


KeyButton.NONE_HAND			= 0;
KeyButton.LEFT_HAND			= 1;
KeyButton.RIGHT_HAND		= 2;
KeyButton.BOTH_HAND			= 3;

KeyButton.NONE_FINGER			= 0;
KeyButton.THUMB					= 1;
KeyButton.INDEX_FINGER			= 2;
KeyButton.INDEX_FINGER_BASELINE	= 3;
KeyButton.MIDDLE_FINGER			= 4;
KeyButton.RING_FINGER			= 5;
KeyButton.LITTLE_FINGER			= 5;