Fix: setInputTextWidth for InputTypeText

src/game/lib/button/round_rect_button.js

@@ -69,7 +69,8 @@ RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
 	font: "30px Arial",
 	boundsAlignH: "center",		// left, center. right
 	boundsAlignV: "middle", 	// top, middle, bottom
-	fill: "#fff"
+	fill: "#fff",
+	align: "center"
 };
 
 RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
@@ -164,14 +165,15 @@ RoundRectButton.prototype.makeIcon = function(iconName) {
 }
 
 RoundRectButton.prototype.makeText = function(textContent) {
-	var width = this.setting.width - this.setting.strokeWidthPx * 2;
+	var width = this.setting.width / 2 - this.setting.strokeWidthPx;
-	var height = this.setting.height - this.setting.strokeWidthPx * 2;
+	var height = this.setting.height / 2;
 
-	var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+	// var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
-		.setTextBounds(0, 0, width, this.setting.height);
+	// 	.setTextBounds(0, 0, width, this.setting.height);
 
+	var btnText = game.add.text(width, height, textContent, this.setting.fontStyle);
+	btnText.anchor.set(0.5);
 	btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
-	// btnText.anchor.setTo(0.5);
 
 	return btnText;
 }

src/game/lib/input_type_text.js

@@ -29,6 +29,20 @@ function InputTypeText(x, y) {
 	return myInput;
 }
 
+function setInputTextWidth(inputText, width) {
+
+	// var inputText = this.makeInputTypeText(game.world.centerX, game.world.centerY, "text");
+	// setInputTextWidth(inputText, 100);
+
+	inputText.canvasInput.width = width;
+	inputText.canvasInput._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+	inputText.canvasInput._hiddenInput.style.width = self._width + 'px';
+
+	inputText.canvasInput._width = width;
+	inputText.canvasInput._calcWH();
+	inputText.canvasInput._updateCanvasWH();
+	inputText.canvasInput.render();
+}
 
 
 /*!

src/game/license_timer/game.js

@@ -27,24 +27,13 @@ var LicenseTimer = {
 		this.titleText = game.add.text(game.world.centerX, 35, "자격증 타이머", titleTextStyle);
 		this.titleText.anchor.set(0.5);
 
-
+		// this.fullscreenButton = new FullscreenButton();
-
-		this.fullscreenButton = new FullscreenButton();
-
-
-
 
 		this.makeTimer();
 
-		this.makeInputScoreGroup();
 
-		// bottom ui
+
-		// this.screenBottomUI = new ScreenBottomUI();
+		this.makeInputScoreGroup();
-		// this.screenBottomUI.printLeftText();
-		// this.printSubject();
-		// this.printRecentScore(this.recentRecord);
-		// this.screenBottomUI.printCenterText("점수 등록은 선생님에게 부탁하세요.");
-		// this.screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 	},
 
 
@@ -62,90 +51,152 @@ var LicenseTimer = {
 		this.timerEvent = null;
 	},
 
+	makeTimerTextContent(x, y, sizePx, content) {
+		// style setting
+		var timerTextStyle = { font: "bold 160px Arial", fill: "#fff", align: "right"};
+		timerTextStyle.fontSize = sizePx;
+
+		// text
+		var timerText = game.add.text(x, y, content, timerTextStyle);
+		timerText.anchor.set(0.5);
+		timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		return timerText;
+	},
+
+	makeTimePlusButton(x, y, buttonText, eventHandler) {
+		var setting = this.makeTimerButtonSetting(x, y);
+		setting.setStrokeColor(
+			0xffffff,
+			0xeeeeff,
+			0xccccdd,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xeeeeff,
+			0xddddee,
+			0xccccdd,
+			0x666666
+		);
+		setting.setTextColor(
+			"#66c",
+			"#66c",
+			"#66c",
+			"#333"
+		);
+
+		return this.makeTimeButton(setting, buttonText, eventHandler);
+	},
+
+	makeTimeMinusButton(x, y, buttonText, eventHandler) {
+		var setting = this.makeTimerButtonSetting(x, y);
+		setting.setStrokeColor(
+			0xffffff,
+			0xffeeee,
+			0xddcccc,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xffeeee,
+			0xeedddd,
+			0xddcccc,
+			0x666666
+		);
+		setting.setTextColor(
+			"#a66",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		return this.makeTimeButton(setting, buttonText, eventHandler);
+	},
+
+	makeTimerButtonSetting(x, y) {
+		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+		// setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		// setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 3;
+		setting.roundAmount = 1;
+		setting.x = x;
+		setting.y = y;
+		setting.width = 70;
+		setting.height = 25;
+
+		return setting;
+	},
+
+	makeTimeButton(setting, buttonText, eventHandler) {
+		var button = new RoundRectButton(setting, null, buttonText, eventHandler);
+		button.text.fontSize = 18;
+
+		return button;
+	},
+
 	makeTimer: function() {
 		// bar
 		var bar = game.add.graphics();
 		bar.beginFill(0x000000, 0.2);
-		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 180);
+		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 200);
 
 		// Timer
-		var timerCenterX = game.world.centerX - 30;
+		var timerCenterX = game.world.centerX + 60;
+		var timerCenterY = 163;
 
-		var timerTextStyle = { font: "bold 120px Arial", fill: "#fff", align: "center"};
+		this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00");
-		this.timerText = game.add.text(timerCenterX, 160, "00:00:00", timerTextStyle);
+		this.makeTimerTextContent(timerCenterX - 120, timerCenterY, 160, ":");
-		this.timerText.anchor.set(0.5);
+		this.timeMinuteText = this.makeTimerTextContent(timerCenterX, timerCenterY, 160, "00");
-		// .setTextBounds(-200, 0, 400, 200)
+		this.makeTimerTextContent(timerCenterX + 110, timerCenterY + 20, 100, ":");
-		this.timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.timeSecondText = this.makeTimerTextContent(timerCenterX + 190, timerCenterY + 20, 100, "00");
 
+		// buttons
+		var hour10PosX = timerCenterX - 285;
+		var hour1PosX = timerCenterX - 195;
 
-		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+		var minute10PosX = timerCenterX - 45;
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		var minute1PosX = timerCenterX + 45;
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 3;
-		setting.roundAmount = 5;
 
+		var plusPosY = timerCenterY - 82;
+		var minusPosY = timerCenterY + 75;
 
-		// set timer buttons
+		// hour button
-		setting.x = 100;
+		this.hourPlus10Button = this.makeTimePlusButton(hour10PosX, plusPosY, "▲",
-		setting.y = 150;
+			(function() { this.timePlus(10, "hour"); }).bind(this)
-		setting.width = 140;
+		);
-		setting.height = 140;
+		// this.hourPlus10Button.setInputEnabled(false);
-		var set60SecButton = new RoundRectButton(
+		this.hourMinus10Button = this.makeTimeMinusButton(hour10PosX, minusPosY, "▼",
-			setting,
+			(function() { this.timeMinus(-10, "hour"); }).bind(this)
-			null, "1시간",
-			(function() { console.log("1 hour"); }).bind(this)
 		);
 
-		// modify timer buttons
+		this.hourPlus1Button = this.makeTimePlusButton(hour1PosX, plusPosY, "▲",
-		setting.x = timerCenterX - 30;
+			(function() { this.timePlus(1, "hour"); }).bind(this)
-		setting.y = 90;
+		);
-		setting.width = 50;
+		this.hourMinus1Button = this.makeTimeMinusButton(hour1PosX, minusPosY, "▼",
-		setting.height = 30;
+			(function() { this.timeMinus(-1, "hour"); }).bind(this)
-		var plus10minButton = new RoundRectButton(
-			setting,
-			null, "+",
-			(function() { console.log("+10 min"); }).bind(this)
 		);
 
-		setting.x = timerCenterX +30;
+		// minute button
-		var plus1minButton = new RoundRectButton(
+		this.minutePlus10Button = this.makeTimePlusButton(minute10PosX, plusPosY, "▲",
-			setting,
+			(function() { this.timePlus(10, "minute"); }).bind(this)
-			null, "+",
+		);
-			(function() { console.log("+1 min"); }).bind(this)
+		this.minuteMinus10Button = this.makeTimeMinusButton(minute10PosX, minusPosY, "▼",
+			(function() { this.timeMinus(-10, "minute"); }).bind(this)
 		);
 
-		setting.x = timerCenterX - 30;
+		this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲",
-		setting.y = 220;
+			(function() { this.timePlus(1, "minute"); }).bind(this)
-		var minus10minButton = new RoundRectButton(
-			setting,
-			null, "-",
-			(function() { console.log("-10 min"); }).bind(this)
 		);
-
+		this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼",
-		setting.x = timerCenterX + 30;
+			(function() { this.timeMinus(-1, "minute"); }).bind(this)
-		var minus1minButton = new RoundRectButton(
-			setting,
-			null, "-",
-			(function() { console.log("-1 min"); }).bind(this)
 		);
-
-
 	},
 
-	makeStartButtonGroup: function() {
+	timePlus(amount, type) {
-
+		console.log(amount + type);
 	},
 
-	makePlayingButtonGroup: function() {
+	timeMinus(amount, type) {
-
+		console.log(amount + type);
-	},
-
-	makePausedButtonGroup: function() {
-
-	},
-
-	makeStopedButtonGroup: function() {
-
 	},
 
 	makeInputScoreGroup: function() {
@@ -320,17 +371,6 @@ var LicenseTimer = {
 		return inputText;
 	},
 
-	/*
-	printSubject: function() {
-		this.screenBottomUI.printLeftText("과목 : " + this.subject);
-	},
-
-	printRecentScore: function(record) {
-		var recentRecord = RecordUtil.getRecordValueWithUnit(record, sessionStorageManager.getPlayingAppID());
-		this.screenBottomUI.printCenterText("최근 점수 : " + recentRecord);
-	},
-	*/
-
 }