Add: timer buttons - clear, play, pause

src/game/lib/button/round_rect_button.js

@@ -251,6 +251,14 @@ RoundRectButton.prototype.buttonDisabled = function() {
 
 
 
+RoundRectButton.prototype.getPosX = function() {
+	return this.buttonStroke.x + this.setting.width / 2;
+}
+
+RoundRectButton.prototype.getPosY = function() {
+	return this.buttonStroke.y + y - this.setting.height / 2;
+}
+
 RoundRectButton.prototype.move = function(x, y) {
 	this.buttonStroke.x = x - this.setting.width / 2;
 	this.buttonStroke.y = y - this.setting.height / 2;

src/game/license_timer/input_score.js

@@ -15,39 +15,42 @@ function InputScore(chart) {
 	bar.drawRect(0, inputScorePosY, GAME_SCREEN_SIZE.x, 70);
 
 
-	var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력");
+	// contents
-	this.subjectText = this.makeInputText(20, inputScorePosY + 10, subjectTextSetting);
+	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+	setting.strokeWidthPx = 5;
+	setting.x = 60;
+	setting.y = inputScorePosY + 35;
+	setting.width = 100;
+	setting.height = 50;
+	setting.fontStyle.fontSize = 24;
+	this.subjectButton = new RoundRectButton(
+		setting,
+		null, "과목",
+		(function() { console.log("과목 선택"); }).bind(this)
+	);
+
+
+	var subjectTextSetting = this.makeInputTextSetting(280, "과목 입력");
+	this.subjectText = this.makeInputText(120, inputScorePosY + 10, subjectTextSetting);
 	this.subjectText.setText(this.subject);
 
-
-	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
-	setting.fontStyle.boundsAlignH = "left";	// left, center. right
-	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-	setting.strokeWidthPx = 5;
-
-
 	var titleTextStyle = { font: "36px Arial", fill: "#fff", align: "center"};
-	this.titleText = game.add.text(350, inputScorePosY + 40, "과목", titleTextStyle);
+	this.titleText = game.add.text(440, inputScorePosY + 40, "점수", titleTextStyle);
 	this.titleText.anchor.set(0, 0.5);
 
-
-	// subject input text
-	// var inputTextSetting = this.makeInputTextSetting(200, "점수 입력");
 	var recordTextSetting = this.makeInputTextSetting(150, "점수 입력");
-	this.recordText = this.makeInputText(game.world.centerX - 50, inputScorePosY + 10, recordTextSetting);
+	this.recordText = this.makeInputText(game.world.centerX, inputScorePosY + 10, recordTextSetting);
-	// this.subjectText.setText(this.subject);
 
-	this.titleText = game.add.text(640, inputScorePosY + 40, "점", titleTextStyle);
+	this.titleText = game.add.text(game.world.centerX + 190, inputScorePosY + 40, "마에", titleTextStyle);
 	this.titleText.anchor.set(0, 0.5);
 
-
+	var passwordTextSetting = this.makeInputTextSetting(110, "비밀번호");
-	var passwordTextSetting = this.makeInputTextSetting(150, "비밀번호");
 	passwordTextSetting.type = PhaserInput.InputType.password;
-	this.passwordText = this.makeInputText(GAME_SCREEN_SIZE.x - 330, inputScorePosY + 10, passwordTextSetting);
+	this.passwordText = this.makeInputText(game.world.centerX + 260, inputScorePosY + 10, passwordTextSetting);
 
 
 	// set timer buttons
-	setting.x = GAME_SCREEN_SIZE.x - 80;
+	setting.x = GAME_SCREEN_SIZE.x - 60;
 	setting.y = inputScorePosY + 35;
 	setting.width = 100;
 	setting.height = 50;

src/game/license_timer/timer.js

@@ -7,24 +7,48 @@ function Timer() {
 	bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240);
 
 	// Timer
-	var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
+	this.timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
-	var timerCenterY = 183;
+	this.timerCenterY = 183;
 
-	this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00");
+	this.makeTimer();
-	this.timeHourMinuteSeperator = this.makeTimerTextContent(timerCenterX - 185, timerCenterY, 160, ":");
+	this.makeTimerButtons();
-	this.timeMinuteText = this.makeTimerTextContent(timerCenterX, timerCenterY, 160, "00");
-	this.timeMinuteSecondSeperator = this.makeTimerTextContent(timerCenterX + 40, timerCenterY + 20, 100, ":");
-	this.timeSecondText = this.makeTimerTextContent(timerCenterX + 160, timerCenterY + 20, 100, "00");
 
-	// buttons
+	this.resetButton = this.makeResetButton();
-	var hour10PosX = timerCenterX - 285 - 90;
+	this.pauseButton = this.makePauseButton();
-	var hour1PosX = timerCenterX - 195 - 90;
+	this.showButton(this.pauseButton, false);
+	// this.showButton(this.pauseButton, true);
+	this.playButton = this.makePlayButton();
 
-	var minute10PosX = timerCenterX - 45 - 90;
-	var minute1PosX = timerCenterX + 45 - 90;
 
-	var plusPosY = timerCenterY - 82;
+	this.startTimer();
-	var minusPosY = timerCenterY + 75;
+}
+
+
+
+Timer.prototype.initVariables = function() {
+	this.prevTime = null;
+
+	this.timeLeft = Timer.TIME_DEFAULT_SEC;
+	this.timerEvent = null;
+}
+
+Timer.prototype.makeTimer = function() {
+	this.timeHourText = this.makeTimerTextContent(this.timerCenterX - 240, this.timerCenterY, 160, "00");
+	this.timeHourMinuteSeperator = this.makeTimerTextContent(this.timerCenterX - 185, this.timerCenterY, 160, ":");
+	this.timeMinuteText = this.makeTimerTextContent(this.timerCenterX, this.timerCenterY, 160, "00");
+	this.timeMinuteSecondSeperator = this.makeTimerTextContent(this.timerCenterX + 40, this.timerCenterY + 20, 100, ":");
+	this.timeSecondText = this.makeTimerTextContent(this.timerCenterX + 160, this.timerCenterY + 20, 100, "00");
+}
+
+Timer.prototype.makeTimerButtons = function() {
+	var hour10PosX = this.timerCenterX - 285 - 90;
+	var hour1PosX = this.timerCenterX - 195 - 90;
+
+	var minute10PosX = this.timerCenterX - 45 - 90;
+	var minute1PosX = this.timerCenterX + 45 - 90;
+
+	var plusPosY = this.timerCenterY - 82;
+	var minusPosY = this.timerCenterY + 75;
 
 	// hour button
 	this.hourPlus10Button = this.makeTimePlusButton(hour10PosX, plusPosY, "▲",
@@ -56,17 +80,126 @@ function Timer() {
 	this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼",
 		(function() { this.timeMinus(1, Timer.TYPE_MINUTE); }).bind(this)
 	);
-
-	this.startTimer();
 }
 
+Timer.prototype.makeResetButton = function() {
+	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+	setting.x = 100;
+	setting.y = this.timerCenterY;
+	setting.width = 80;
+	setting.height = 80;
+	setting.strokeWidthPx = 5;
+	setting.roundAmount = 60;
+	setting.fontStyle.fontSize = 40;
+
+	setting.setStrokeColor(
+		0x903030,
+		0x802020,
+		0x502020,
+		0x666666
+	);
+	setting.setButtonColor(
+		0xc04040,
+		0xa03030,
+		0x802020,
+		0x666666
+	);
+	setting.setTextColor(
+		"#fff",
+		"#edd",
+		"#dbb",
+		"#333"
+	);
+
+	return new RoundRectButton(
+		setting,
+		null, "C",
+		(function() { console.log("리셋"); }).bind(this)
+	);
+}
+
+Timer.prototype.makePlayButton = function() {
+	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+	setting.x = game.world.width - 100;
+	setting.y = this.timerCenterY;
+	setting.width = 120;
+	setting.height = 120;
+	setting.strokeWidthPx = 5;
+	setting.roundAmount = 90;
+	setting.fontStyle.fontSize = 80;
+
+	// blue tone
+	setting.setStrokeColor(
+		0x208080,
+		0x106060,
+		0x004040,
+		0x333333
+	);
+	setting.setButtonColor(
+		0x40c0c0,
+		0x30a0a0,
+		0x209090,
+		0x666666
+	);
+	setting.setTextColor(
+		"#fff",
+		"#fff",
+		"#fff",
+		"#333"
+	);
+
+	return new RoundRectButton(
+		setting,
+		null, "▶",
+		(function() { console.log("플레이"); }).bind(this)
+	);
+}
+
+Timer.prototype.makePauseButton = function() {
+	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+	setting.x = game.world.width - 200;
+	setting.y = this.timerCenterY;
+	setting.width = 120;
+	setting.height = 120;
+	setting.strokeWidthPx = 5;
+	setting.roundAmount = 90;
+	setting.fontStyle.fontSize = 50;
+
+	// gray tone
+	setting.setStrokeColor(
+		0xa0a0a0,
+		0x808080,
+		0x606060,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xf0f0f0,
+		0xd0d0d0,
+		0xb0b0b0,
+		0x666666
+	);
+	setting.setTextColor(
+		"#333",
+		"#222",
+		"#111",
+		"#333"
+	);
 
 
-Timer.prototype.initVariables = function() {
+	return new RoundRectButton(
-	this.prevTime = null;
+		setting,
+		null, "∥",
+		(function() { console.log("일시 정지"); }).bind(this)
+	);
+}
 
-	this.timeLeft = Timer.TIME_DEFAULT_SEC;
+Timer.prototype.showButton = function(button, flag) {
-	this.timerEvent = null;
+	var backupPosX = button.getPosX();
+
+	if(flag)
+		button.move(backupPosX, this.timerCenterY);
+	else
+		button.move(backupPosX, -200);
 }
 
 Timer.prototype.startTimer = function() {