diff --git a/src/game/license_timer/game.js b/src/game/license_timer/game.js index 129c02e..a6aa63f 100644 --- a/src/game/license_timer/game.js +++ b/src/game/license_timer/game.js @@ -29,7 +29,7 @@ var LicenseTimer = { // this.fullscreenButton = new FullscreenButton(); - this.makeTimer(); + this.timer = new Timer(); this.chart = new Chart(); @@ -53,167 +53,7 @@ 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(0x202020); - bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240); - - // Timer - var timerCenterX = game.world.centerX + LicenseTimer.Timer_CENTER_OFFSET_X; - var timerCenterY = 183; - - 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 minute10PosX = timerCenterX - 45; - var minute1PosX = timerCenterX + 45; - - var plusPosY = timerCenterY - 82; - var minusPosY = timerCenterY + 75; - - // 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) - ); - - 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) - ); - - // 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) - ); - - this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲", - (function() { this.timePlus(1, "minute"); }).bind(this) - ); - this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼", - (function() { this.timeMinus(-1, "minute"); }).bind(this) - ); - }, - - timePlus(amount, type) { - console.log(amount + type); - - // if(type == "hour") - this.timeLeft += amount * 60; - this.updateTimeText(); - this.sendTimeLeftToServer(); - }, - - timeMinus(amount, type) { - console.log(amount + type); - - // if(type == "hour") { - // var totalMinusMinute = amount * LicenseTimer.TIME_MINUTES_FOR_HOUR; - // if(totalMinusMinute - ) - // } - this.timeLeft -= amount * 60; - if(this.timeLeft < 0) - this.timeLeft = 0; - this.updateTimeText(); - this.sendTimeLeftToServer(); }, makeInputScoreGroup: function() { @@ -303,64 +143,6 @@ var LicenseTimer = { }, - setTime: function(sec) { - // console.log("time up : " + min); - - this.timeLeft += sec; - this.updateTimeText(); - }, - - timeUp: function(sec) { - // console.log("time up : " + sec); - - this.timeLeft += sec; - this.updateTimeText(); - // this.sendTimeLeftToServer(); - }, - - timeDown: function(sec) { - // console.log("time down : " + sec); - - this.timeLeft -= sec; - if(this.timeLeft < 0) - this.timeLeft = 0; - this.updateTimeText(); - // this.sendTimeLeftToServer(); - }, - - updateTimeVariables: function() { - this.timeLeftHour = parseInt(this.timeLeft / (60 * 60)); - this.timeLeftMinute = parseInt((this.timeLeft % (60 * 60)) / 60); - this.timeLeftSecond = this.timeLeft % 60; - }, - - updateTimeText: function() { - this.updateTimeVariables(); - this.timerText.text = this.getTimeWithTimeFormat(); - }, - - getTwoDigitNumber: function(value) { - var absValue = value; - if(absValue < 0) - absValue *= -1; - - if(absValue < 10) - return "0" + absValue; - else - return absValue; - }, - - getTimeWithTimeFormat: function() { - if(this.timeLeft > 0) - return this.getTwoDigitNumber(this.timeLeftHour) - + ":" + this.getTwoDigitNumber(this.timeLeftMinute) - + ":" + this.getTwoDigitNumber(this.timeLeftSecond); - else - return "-" + this.getTwoDigitNumber(this.timeLeftHour) - + ":" + this.getTwoDigitNumber(this.timeLeftMinute) - + ":" + this.getTwoDigitNumber(this.timeLeftSecond); - }, - makeInputTextSetting(width, placeHolder) { return { font: "32px Arial", @@ -391,13 +173,4 @@ var LicenseTimer = { } -LicenseTimer.Timer_CENTER_OFFSET_X = 40; -LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y = 70; - -LicenseTimer.TIME_MILLISECONDS = 1000; - -LicenseTimer.TIME_MINUTES_FOR_HOUR = 60; -LicenseTimer.TIME_SECONDS_FOR_MINUTE = 60; - -LicenseTimer.TIME_DEFAULT_SEC - = LicenseTimer.TIME_MINUTES_FOR_HOUR * LicenseTimer.TIME_SECONDS_FOR_MINUTE; // 60 min * 60 sec \ No newline at end of file +LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y = 70; \ No newline at end of file diff --git a/src/game/license_timer/timer.js b/src/game/license_timer/timer.js new file mode 100644 index 0000000..41d654b --- /dev/null +++ b/src/game/license_timer/timer.js @@ -0,0 +1,248 @@ +function Timer() { + // bar + var bar = game.add.graphics(); + bar.beginFill(0x202020); + bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240); + + // Timer + var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X; + var timerCenterY = 183; + + 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 minute10PosX = timerCenterX - 45; + var minute1PosX = timerCenterX + 45; + + var plusPosY = timerCenterY - 82; + var minusPosY = timerCenterY + 75; + + // 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) + ); + + 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) + ); + + // 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) + ); + + this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲", + (function() { this.timePlus(1, "minute"); }).bind(this) + ); + this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼", + (function() { this.timeMinus(-1, "minute"); }).bind(this) + ); +} + + + +Timer.prototype.makeTimerTextContent = function(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; +} + +Timer.prototype.makeTimePlusButton = function(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); +} + +Timer.prototype.makeTimeMinusButton = function(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); +} + +Timer.prototype.makeTimerButtonSetting = function(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; +} + +Timer.prototype.makeTimeButton = function(setting, buttonText, eventHandler) { + var button = new RoundRectButton(setting, null, buttonText, eventHandler); + button.text.fontSize = 18; + + return button; +} + +Timer.prototype.timePlus = function(amount, type) { + console.log(amount + type); + + // if(type == "hour") + this.timeLeft += amount * 60; + this.updateTimeText(); + this.sendTimeLeftToServer(); +} + +Timer.prototype.timeMinus = function(amount, type) { + console.log(amount + type); + + // if(type == "hour") { + // var totalMinusMinute = amount * Timer.TIME_MINUTES_FOR_HOUR; + // if(totalMinusMinute - ) + // } + this.timeLeft -= amount * 60; + if(this.timeLeft < 0) + this.timeLeft = 0; + this.updateTimeText(); + this.sendTimeLeftToServer(); +} + + +Timer.prototype.setTime =function(sec) { + // console.log("time up : " + min); + + this.timeLeft += sec; + this.updateTimeText(); +} + +Timer.prototype.timeUp = function(sec) { + // console.log("time up : " + sec); + + this.timeLeft += sec; + this.updateTimeText(); + // this.sendTimeLeftToServer(); +} + +Timer.prototype.timeDown = function(sec) { + // console.log("time down : " + sec); + + this.timeLeft -= sec; + if(this.timeLeft < 0) + this.timeLeft = 0; + this.updateTimeText(); + // this.sendTimeLeftToServer(); +} + +Timer.prototype.updateTimeVariables = function() { + this.timeLeftHour = parseInt(this.timeLeft / (60 * 60)); + this.timeLeftMinute = parseInt((this.timeLeft % (60 * 60)) / 60); + this.timeLeftSecond = this.timeLeft % 60; +} + +Timer.prototype.updateTimeText = function() { + // this.updateTimeVariables(); + // this.timerText.text = this.getTimeWithTimeFormat(); +} + +Timer.prototype.getTwoDigitNumber = function(value) { + var absValue = value; + if(absValue < 0) + absValue *= -1; + + if(absValue < 10) + return "0" + absValue; + else + return absValue; +} + +Timer.prototype.getTimeWithTimeFormat = function() { + if(this.timeLeft > 0) + return this.getTwoDigitNumber(this.timeLeftHour) + + ":" + this.getTwoDigitNumber(this.timeLeftMinute) + + ":" + this.getTwoDigitNumber(this.timeLeftSecond); + else + return "-" + this.getTwoDigitNumber(this.timeLeftHour) + + ":" + this.getTwoDigitNumber(this.timeLeftMinute) + + ":" + this.getTwoDigitNumber(this.timeLeftSecond); +} + +Timer.prototype.sendTimeLeftToServer = function() { + return; + + // console.log(this.timeLeft); + // console.log(playerUserID); + + xhr = new XMLHttpRequest(); + xhr.open('POST', 'make_last_timestamp.php', true); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + var param = 'UserID=' + playerUserID + '&Time=' + this.timeLeft; + xhr.send(param); +}, + + + +Timer.Timer_CENTER_OFFSET_X = 40; + +Timer.TIME_MILLISECONDS = 1000; + +Timer.TIME_MINUTES_FOR_HOUR = 60; +Timer.TIME_SECONDS_FOR_MINUTE = 60; + +Timer.TIME_DEFAULT_SEC + = Timer.TIME_MINUTES_FOR_HOUR * Timer.TIME_SECONDS_FOR_MINUTE; // 60 min * 60 sec \ No newline at end of file diff --git a/src/web/client/license_timer.html b/src/web/client/license_timer.html index 1168564..6db35d0 100644 --- a/src/web/client/license_timer.html +++ b/src/web/client/license_timer.html @@ -56,6 +56,7 @@ +