From 6becc05aabbfe06187252ce50ebed17c29d76056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Mon, 10 Dec 2018 22:07:26 +0900 Subject: [PATCH] Add: timer buttons - clear, play, pause --- src/game/lib/button/round_rect_button.js | 12 +- src/game/license_timer/input_score.js | 43 +++--- src/game/license_timer/timer.js | 173 ++++++++++++++++++++--- 3 files changed, 186 insertions(+), 42 deletions(-) diff --git a/src/game/lib/button/round_rect_button.js b/src/game/lib/button/round_rect_button.js index 7b3b6a4..031f635 100644 --- a/src/game/lib/button/round_rect_button.js +++ b/src/game/lib/button/round_rect_button.js @@ -251,12 +251,20 @@ 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; - this.button.x = x - this.setting.width / 2+ this.setting.strokeWidthPx; - this.button.y = y - this.setting.height / 2+ this.setting.strokeWidthPx; + this.button.x = x - this.setting.width / 2 + this.setting.strokeWidthPx; + this.button.y = y - this.setting.height / 2 + this.setting.strokeWidthPx; } RoundRectButton.prototype.getInputEnabled = function() { diff --git a/src/game/license_timer/input_score.js b/src/game/license_timer/input_score.js index 8ec48b5..32a21a0 100644 --- a/src/game/license_timer/input_score.js +++ b/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, "과목 입력"); - 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; diff --git a/src/game/license_timer/timer.js b/src/game/license_timer/timer.js index a9188ee..f16b364 100644 --- a/src/game/license_timer/timer.js +++ b/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; - 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() {