Fix: button classes revised

src/game/lib/button/back_button.js

@@ -0,0 +1,30 @@
+class BackButton extends RoundRectButton {
+
+	constructor(clickEvent) {
+		let setting = new RoundRectButtonSetting(30, 30, 50, 50);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 3;
+		setting.setStrokeColor(
+			0xaa6666,
+			0x884444,
+			0x884444,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xffdddd,
+			0xddaaaa,
+			0xddaaaa,
+			0x666666
+		);
+		setting.setTextColor(
+			"#a66",
+			"#844",
+			"#844",
+			"#333"
+		);
+
+		super(setting, RoundRectButton.NONE_ICON, "<", clickEvent);
+	}
+
+}

src/game/lib/button/fullscreen_button.js

@@ -0,0 +1,47 @@
+class FullscreenButton extends RoundRectButton {
+
+	constructor() {
+		game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
+
+		let setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 3;
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		super(
+			setting,
+			RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
+			() => {
+				if(game.scale.isFullScreen) {
+					game.scale.stopFullScreen();
+				} else {
+					game.scale.startFullScreen();
+				}
+			}
+		);
+
+		let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
+		icon_fullscreen.width = 20;
+		icon_fullscreen.height = 20;
+		this.setIcon(icon_fullscreen);
+	}
+
+}

src/game/lib/button/game_app_button.js

@@ -0,0 +1,73 @@
+class GameAppButton extends RoundRectButton {
+
+	constructor(x, y, type, iconName, buttonText, clickEvent) {
+		console.log(type);
+		let setting = new RoundRectButtonSetting(
+			x, y,
+			GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT
+		);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		switch(type) {
+			case GameAppButton.TYPE_MOUSE_APP:
+			setting.setStrokeColor(
+				0xaa6666,
+				0x884444,
+				0x884444,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffdddd,
+				0xddaaaa,
+				0xddaaaa,
+				0x666666
+			);
+			setting.setTextColor(
+				"#a66",
+				"#844",
+				"#844",
+				"#333"
+			);
+			break;
+			case GameAppButton.TYPE_TYPING_PRACTICE:
+			case GameAppButton.TYPE_TYPING_APP:
+			setting.setStrokeColor(
+				0x444488,
+				0x6666aa,
+				0x6666aa,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xaaaadd,
+				0xddddff,
+				0xddddff,
+				0x666666
+			);
+			setting.setTextColor(
+				"#844",
+				"#a66",
+				"#a66",
+				"#333"
+			);
+			break;
+		}
+
+		super(setting, iconName, buttonText, clickEvent);
+	}
+
+}
+
+GameAppButton.TYPE_MOUSE_APP		= 0;
+GameAppButton.TYPE_TYPING_PRACTICE	= 1;
+GameAppButton.TYPE_TYPING_APP		= 2;
+
+GameAppButton.BUTTON_WIDTH			= 150;
+GameAppButton.BUTTON_HEIGHT			= 150;
+
+GameAppButton.BUTTON_GAP			= 20;
+GameAppButton.MARGIN_VERTICAL		= 100;
+
+GameAppButton.BUTTON_UPPER_POS_Y	= 200;
+GameAppButton.BUTTON_LOWER_POS_Y	= 460;

src/game/lib/button/round_rect_button.js

@@ -0,0 +1,256 @@
+class RoundRectButtonSetting {
+
+	constructor(x, y, width, height, roundAmount) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		this.roundAmount = 0;
+		if(typeof roundAmount === "undefined") {
+			let shorterSide = width > height ? height : width;
+			this.roundAmount = shorterSide * 0.1;
+		} else {
+			this.roundAmount = roundAmount;
+		}
+		this.strokeWidthPx = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;
+
+
+		this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
+		this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
+		this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
+		this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
+	};
+
+	setStrokeColor(out, over, down, disabled) {
+		this.strokeColors = { };
+		this.strokeColors.out = out;
+		this.strokeColors.over = over;
+		this.strokeColors.odownut = down;
+		this.strokeColors.disabled = disabled;
+	}
+
+	setButtonColor(out, over, down, disabled) {
+		this.buttonColors = { };
+		this.buttonColors.out = out;
+		this.buttonColors.over = over;
+		this.buttonColors.odownut = down;
+		this.buttonColors.disabled = disabled;
+	}
+
+	setTextColor(out, over, down, disabled) {
+		this.textColors = { };
+		this.textColors.out = out;
+		this.textColors.over = over;
+		this.textColors.odownut = down;
+		this.textColors.disabled = disabled;
+	}
+
+}
+
+RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
+	out: 0x666666,
+	over: 0x333333,
+	down: 0x333333,
+	disabled: 0x666666
+};
+
+RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
+};
+
+RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
+	out: "#000",
+	over: "#333",
+	down: "#666",
+	disabled: "#999"
+};
+
+RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
+	font: "30px Arial",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};
+
+RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
+RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
+
+
+
+class RoundRectButton {
+	constructor(roundRectSetting, iconName, buttonText, clickEvent) {
+		this.setting = roundRectSetting;
+		this.clickEvent = clickEvent;
+
+		this.buttonStroke = this.makeButtonStroke();
+		// this.buttonStroke.anchor.setTo(0.5, 0.5);
+		this.buttonStroke.inputEnabled = true;
+		this.setEventMethod(this.buttonStroke);
+
+		this.button = this.makeButtonSprite();
+
+		this.text = this.makeText(buttonText);
+		if(buttonText.length > 0) {
+			this.button.addChild(this.text);
+		}
+
+		if(iconName.length > 0) {
+			this.icon = this.makeIcon(iconName);
+			this.setIcon(this.icon);
+		}
+
+		// this.button.anchor.setTo(0.5, 0.5);
+		this.button.inputEnabled = true;
+		this.setEventMethod(this.button);
+
+		this.mouseOut();
+	}
+
+	setEventMethod(target) {
+		target.events.onInputOver.add(function() { this.mouseOver(); }, this);
+		target.events.onInputOut.add(function() { this.mouseOut(); }, this);
+		target.events.onInputDown.add(function() {
+			this.mouseDown();
+
+			if(this.clickEvent) {
+				this.clickEvent();
+			}
+		}, this);
+		target.events.onInputUp.add(function() { this.mouseOver(); }, this);
+	}
+
+	makeButtonStroke() {	// outter(bigger) round rect sprite
+		let btnTexture = new Phaser.Graphics()
+			.beginFill(0xffffff)
+			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
+			.endFill()
+			.generateTexture();
+
+		return game.add.sprite(
+			this.setting.x - this.setting.width / 2,
+			this.setting.y - this.setting.height / 2,
+			btnTexture
+		);
+	}
+
+	makeButtonSprite() {	// inner(smaller) round rect sprite
+		let width = this.setting.width - this.setting.strokeWidthPx * 2;
+		let height = this.setting.height - this.setting.strokeWidthPx * 2;
+		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
+
+		let btnTexture = new Phaser.Graphics()
+			.beginFill(0xffffff)
+			.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
+			.endFill()
+			.generateTexture();
+
+		// return game.add.sprite(0, 0, btnTexture);
+		return game.add.sprite(
+			this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
+			this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
+			btnTexture
+		);
+	}
+
+	makeIcon(iconName) {
+		let icon = game.add.sprite(0, 0, iconName);
+		icon.width = 80;
+		icon.height = 80;
+
+		return icon;
+	}
+
+	makeText(textContent) {
+		let width = this.setting.width - this.setting.strokeWidthPx * 2;
+		let height = this.setting.height - this.setting.strokeWidthPx * 2;
+
+		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+			.setTextBounds(0, 0, width, this.setting.height);
+
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+		// btnText.anchor.setTo(0.5);
+
+		return btnText;
+	}
+
+	setIcon(icon) {
+		this.buttonIcon = this.button.addChild(icon);
+		this.buttonIcon.x = this.button.width / 2;
+		this.buttonIcon.y = this.button.height / 2;
+		this.buttonIcon.anchor.setTo(0.5, 0.5);
+
+		this.mouseOut();
+	}
+
+
+	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;
+		}
+	}
+
+
+
+	move(x, y) {
+		this.buttonStroke.x = x - this.setting.width / 2;
+		this.buttonStroke.y = y - this.setting.height / 2;
+
+		this.button.x = x  - this.setting.width / 2+ this.setting.strokeWidthPx;
+		this.button.y = y  - this.setting.height / 2+ this.setting.strokeWidthPx;
+	}
+
+	get inputEnabled() {
+		return this.button.inputEnabled;
+	}
+
+	set inputEnabled(isEnabled) {
+		this.buttonStroke.inputEnabled = isEnabled;
+		this.button.inputEnabled = isEnabled;
+
+		if(isEnabled === true) {
+			this.mouseOut();
+		} else {
+			this.buttonDisabled();
+		}
+	}
+
+	set lineSpacing(spacingInPixels) {
+		this.text.lineSpacing = spacingInPixels;
+	}
+}
+
+RoundRectButton.NONE_ICON			= "";
+RoundRectButton.NONE_BUTTON_TEXT	= "";

src/game/lib/button/typing_practice_button.js

@@ -0,0 +1,48 @@
+class TypingPracticeButton extends RoundRectButton {
+
+	constructor(x, y, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+
+		super(setting, iconName, buttonText, clickEvent);
+
+		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);
+		}
+	}
+
+}
+
+TypingPracticeButton.BUTTON_WIDTH		= 200;
+TypingPracticeButton.BUTTON_HEIGHT		= 100;
+
+TypingPracticeButton.BUTTON_GAP			= 10;
+TypingPracticeButton.MARGIN_VERTICAL	= 100;
+
+TypingPracticeButton.BUTTON_UPPER_POS_Y	= 200;
+TypingPracticeButton.BUTTON_LOWER_POS_Y	= 480;

src/game/lib/button/typing_tab_button.js

@@ -0,0 +1,53 @@
+class TypingTabButton extends RoundRectButton {
+
+	constructor(x, y, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(
+			x, y,
+			TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT
+		);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		super(setting, iconName, buttonText, clickEvent);
+
+
+		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);
+		}
+	}
+
+}
+
+TypingTabButton.BUTTON_WIDTH		= 500;
+TypingTabButton.BUTTON_HEIGHT		= 80;
+
+TypingTabButton.BUTTON_GAP			= 20;
+TypingTabButton.MARGIN_VERTICAL		= 100;
+
+TypingTabButton.PRACTICE_BUTTON_POS_X	= GAME_SCREEN_SIZE.x / 4;
+TypingTabButton.TEST_BUTTON_POS_X		= GAME_SCREEN_SIZE.x / 4 * 3;
+
+TypingTabButton.BUTTON_POS_Y		=  GAME_SCREEN_SIZE.y - (TypingTabButton.BUTTON_HEIGHT / 3 * 4);