Add: Keyboard, KeyButton

2018-06-11 09:46:49 +09:00
parent 37129bbe23
commit 8a820ff07f
4 changed files with 411 additions and 78 deletions
@@ -1,83 +1,90 @@
 class KeyButton {

+	constructor(x, y, width, height, normalText, shiftText, align_type) {
+		this.normalText = normalText;
+		this.shiftText = shiftText;

-	// constructor(x, y, )
-	constructor(x, y, setting, iconName, buttonText, clickEvent) {
-		/*
-		let setting = new RoundRectButtonSetting(150, 150);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
+		this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX);
+		this.setting.strokeWidthPx = 2;

-		if(type === KeyButton.TYPE_MOUSE) {
-			setting.setStrokeColor(
-				0xaa6666,
-				0x884444,
-				0x884444,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xffdddd,
-				0xddaaaa,
-				0xddaaaa,
-				0x666666
-			);
-			setting.setTextColor(
-				"#a66",
-				"#844",
-				"#844",
-				"#333"
-			);
-		} else {	// TYPE_TYPING
-			setting.setStrokeColor(
-				0x444488,
-				0x6666aa,
-				0x6666aa,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xaaaadd,
-				0xddddff,
-				0xddddff,
-				0x666666
-			);
-			setting.setTextColor(
-				"#844",
-				"#a66",
-				"#a66",
-				"#333"
-			);
+		this.button = this.makeButtonSprite(this.setting);
+		this.button.inputEnabled = true;
+
+		this.text = this.makeText(this.setting, this.normalText);
+		if(this.normalText.length > 0) {
+			this.button.addChild(this.text);
 		}
-		*/
-
-		this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
-		this.move(x, y);
-
-		// if(iconName.length > 0) {
-		// 	let icon_fullscreen = game.add.sprite(0, 0, iconName);
-		// 	icon_fullscreen.width = 80;
-		// 	icon_fullscreen.height = 80;
-		// 	this.button.setIcon(icon_fullscreen);
-		// }
-
-		// if(buttonText.length > 0) {
-		// 	const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
-		// 	let icon_text = game.add.text(0, 0, buttonText, style);
-		// 	icon_text.setTextBounds(x - 50, y - 50, 100, 100);
-		// 	icon_text.stroke = "#333";
-		// 	icon_text.strokeThickness = 5;
-		// }
 	}

-	move(x, y) {
-		this.button.move(x, y);
+	makeButtonSprite(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
+		);
+	}
+
+	makeText(setting, textContent) {
+		let width = setting.width - setting.strokeWidthPx * 2;
+		let height = setting.height - setting.strokeWidthPx * 2;
+
+		setting.fontStyle.font = "20px Arial";
+		let btnText = game.add.text(0, 0, textContent, setting.fontStyle)
+			.setTextBounds(setting.strokeWidthPx, setting.strokeWidthPx, width, height);
+
+		// btnText.boundsAlignH = "right";
+		// btnText.boundsAlignV = "bottom";
+
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+
+		return btnText;
+	}
+
+
+	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.TYPE_MOUSE_APP		= 0;
-KeyButton.TYPE_TYPING_PRACTICE	= 1;
-KeyButton.TYPE_TYPING_APP		= 2;
-
 KeyButton.NONE_ICON			= "";
-KeyButton.NONE_BUTTON_TEXT	= "";
+KeyButton.NONE_BUTTON_TEXT	= "";
+
+KeyButton.DEFALUT_ROUND_AMOUNT_PX	= 10;