Add: timer buttons - clear, play, pause
This commit is contained in:
@@ -15,39 +15,42 @@ function InputScore(chart) {
|
||||
bar.drawRect(0, inputScorePosY, GAME_SCREEN_SIZE.x, 70);
|
||||
|
||||
|
||||
var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력");
|
||||
this.subjectText = this.makeInputText(20, inputScorePosY + 10, subjectTextSetting);
|
||||
// contents
|
||||
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.subjectText.setText(this.subject);
|
||||
this.recordText = this.makeInputText(game.world.centerX, inputScorePosY + 10, recordTextSetting);
|
||||
|
||||
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(150, "비밀번호");
|
||||
var passwordTextSetting = this.makeInputTextSetting(110, "비밀번호");
|
||||
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;
|
||||
|
||||
+153
-20
@@ -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;
|
||||
var timerCenterY = 183;
|
||||
this.timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
|
||||
this.timerCenterY = 183;
|
||||
|
||||
this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00");
|
||||
this.timeHourMinuteSeperator = this.makeTimerTextContent(timerCenterX - 185, timerCenterY, 160, ":");
|
||||
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");
|
||||
this.makeTimer();
|
||||
this.makeTimerButtons();
|
||||
|
||||
// buttons
|
||||
var hour10PosX = timerCenterX - 285 - 90;
|
||||
var hour1PosX = timerCenterX - 195 - 90;
|
||||
this.resetButton = this.makeResetButton();
|
||||
this.pauseButton = this.makePauseButton();
|
||||
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;
|
||||
var minusPosY = timerCenterY + 75;
|
||||
this.startTimer();
|
||||
}
|
||||
|
||||
|
||||
|
||||
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() {
|
||||
this.prevTime = null;
|
||||
return new RoundRectButton(
|
||||
setting,
|
||||
null, "∥",
|
||||
(function() { console.log("일시 정지"); }).bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
this.timeLeft = Timer.TIME_DEFAULT_SEC;
|
||||
this.timerEvent = null;
|
||||
Timer.prototype.showButton = function(button, flag) {
|
||||
var backupPosX = button.getPosX();
|
||||
|
||||
if(flag)
|
||||
button.move(backupPosX, this.timerCenterY);
|
||||
else
|
||||
button.move(backupPosX, -200);
|
||||
}
|
||||
|
||||
Timer.prototype.startTimer = function() {
|
||||
|
||||
Reference in New Issue
Block a user