diff --git a/src/game/lib/button/round_rect_button.js b/src/game/lib/button/round_rect_button.js index a50f887..7b3b6a4 100644 --- a/src/game/lib/button/round_rect_button.js +++ b/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 height = this.setting.height - this.setting.strokeWidthPx * 2; + var width = this.setting.width / 2 - this.setting.strokeWidthPx; + var height = this.setting.height / 2; - var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) - .setTextBounds(0, 0, width, this.setting.height); + // var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) + // .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; } diff --git a/src/game/lib/input_type_text.js b/src/game/lib/input_type_text.js index 5dfcadf..0616d4b 100644 --- a/src/game/lib/input_type_text.js +++ b/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(); +} /*! diff --git a/src/game/license_timer/game.js b/src/game/license_timer/game.js index 0d52064..a0d059d 100644 --- a/src/game/license_timer/game.js +++ b/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.screenBottomUI.printLeftText(); - // this.printSubject(); - // this.printRecentScore(this.recentRecord); - // this.screenBottomUI.printCenterText("점수 등록은 선생님에게 부탁하세요."); - // this.screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); + + this.makeInputScoreGroup(); }, @@ -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.timerText = game.add.text(timerCenterX, 160, "00:00:00", timerTextStyle); - this.timerText.anchor.set(0.5); - // .setTextBounds(-200, 0, 400, 200) - this.timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00"); + this.makeTimerTextContent(timerCenterX - 120, timerCenterY, 160, ":"); + this.timeMinuteText = this.makeTimerTextContent(timerCenterX, timerCenterY, 160, "00"); + this.makeTimerTextContent(timerCenterX + 110, timerCenterY + 20, 100, ":"); + 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); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 3; - setting.roundAmount = 5; + var minute10PosX = timerCenterX - 45; + var minute1PosX = timerCenterX + 45; + var plusPosY = timerCenterY - 82; + var minusPosY = timerCenterY + 75; - // set timer buttons - setting.x = 100; - setting.y = 150; - setting.width = 140; - setting.height = 140; - var set60SecButton = new RoundRectButton( - setting, - null, "1시간", - (function() { console.log("1 hour"); }).bind(this) + // hour button + this.hourPlus10Button = this.makeTimePlusButton(hour10PosX, plusPosY, "▲", + (function() { this.timePlus(10, "hour"); }).bind(this) + ); + // this.hourPlus10Button.setInputEnabled(false); + this.hourMinus10Button = this.makeTimeMinusButton(hour10PosX, minusPosY, "▼", + (function() { this.timeMinus(-10, "hour"); }).bind(this) ); - // modify timer buttons - setting.x = timerCenterX - 30; - setting.y = 90; - setting.width = 50; - setting.height = 30; - var plus10minButton = new RoundRectButton( - setting, - null, "+", - (function() { console.log("+10 min"); }).bind(this) + this.hourPlus1Button = this.makeTimePlusButton(hour1PosX, plusPosY, "▲", + (function() { this.timePlus(1, "hour"); }).bind(this) + ); + this.hourMinus1Button = this.makeTimeMinusButton(hour1PosX, minusPosY, "▼", + (function() { this.timeMinus(-1, "hour"); }).bind(this) ); - setting.x = timerCenterX +30; - var plus1minButton = new RoundRectButton( - setting, - null, "+", - (function() { console.log("+1 min"); }).bind(this) + // minute button + this.minutePlus10Button = this.makeTimePlusButton(minute10PosX, plusPosY, "▲", + (function() { this.timePlus(10, "minute"); }).bind(this) + ); + this.minuteMinus10Button = this.makeTimeMinusButton(minute10PosX, minusPosY, "▼", + (function() { this.timeMinus(-10, "minute"); }).bind(this) ); - setting.x = timerCenterX - 30; - setting.y = 220; - var minus10minButton = new RoundRectButton( - setting, - null, "-", - (function() { console.log("-10 min"); }).bind(this) + this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲", + (function() { this.timePlus(1, "minute"); }).bind(this) ); - - setting.x = timerCenterX + 30; - var minus1minButton = new RoundRectButton( - setting, - null, "-", - (function() { console.log("-1 min"); }).bind(this) + this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼", + (function() { this.timeMinus(-1, "minute"); }).bind(this) ); - - }, - makeStartButtonGroup: function() { - + timePlus(amount, type) { + console.log(amount + type); }, - makePlayingButtonGroup: function() { - - }, - - makePausedButtonGroup: function() { - - }, - - makeStopedButtonGroup: function() { - + timeMinus(amount, type) { + console.log(amount + type); }, 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); - }, - */ - }