diff --git a/src/game/license_timer/chart.js b/src/game/license_timer/chart.js new file mode 100644 index 0000000..04b7601 --- /dev/null +++ b/src/game/license_timer/chart.js @@ -0,0 +1,140 @@ +function Chart() { + this.chartGraphics = game.add.graphics(0, 0); + this.printChartTitle(); + this.printChartBaseLine(); + + for(var i = 0; i < 7; i++) + new ChartRecord(i); +} + +Chart.prototype.printChartTitle = function() { + var offsetY = -25; + var fontStyle = { font: "30px Arial", fill: "#fff", align: "center" }; + + Chart.drawText(Chart.DATE_POS_X, Chart.CHART_LINE_Y + offsetY, "날짜", fontStyle); + Chart.drawText(Chart.RECORD_POS_X, Chart.CHART_LINE_Y + offsetY, "점수", fontStyle); + Chart.drawText(Chart.GRADE_POS_X, Chart.CHART_LINE_Y + offsetY, "등급", fontStyle); + Chart.drawText(Chart.SUBJECT_POS_X, Chart.CHART_LINE_Y + offsetY, "과목", fontStyle); +} + +Chart.prototype.printChartBaseLine = function() { + this.chartGraphics.lineStyle(3, 0xffd900, 1); + this.chartGraphics.moveTo(Chart.CHART_LINE_START_X, Chart.CHART_LINE_Y); + this.chartGraphics.lineTo(game.world.width - Chart.CHART_LINE_START_X, Chart.CHART_LINE_Y); +} + +Chart.prototype.drawRecordGraph = function(index, date, bestRecord, min, max) { + var reverseIndex = (Chart.CHART_COUNT - 1) - index; + var posX = Chart.CHART_LINE_START_X + Chart.CHART_GRAPH_OFFSET_X + reverseIndex * Chart.CHART_GAP_PX; + var posY = Chart.CHART_LINE_Y; + + this.drawText( + posX, posY + Chart.CHART_DATE_OFFSET_Y, + date === "-" ? "-" : StringUtil.printMonthDay(date) + ); + + if(bestRecord === "") + return; + + this.drawText( + posX, posY - Chart.CHART_HEIGHT - Chart.CHART_RECORD_OFFSET_Y, + // StringUtil.getRecordTextWithoutUnit(bestRecord) + StringUtil.getScoreUnit(sessionStorageManager.playingAppID) + RecordUtil.getRecordValueWithUnit(bestRecord, sessionStorageManager.getPlayingAppID()) + ); + + // chart + this.chartGraphics.lineStyle(50, 0xdddddd, 1); + this.chartGraphics.moveTo(posX, posY); + this.chartGraphics.lineTo(posX, posY - Chart.CHART_HEIGHT * ( (bestRecord - min) / (max - min) )); +} + +Chart.drawText = function(posX, posY, text, fontStyle) { + var textObject = game.add.text( + posX, posY, + text, fontStyle + ); + textObject.anchor.set(0.5); + textObject.stroke = "#333"; + textObject.strokeThickness = 3; + + return textObject; +} + +Chart.CHART_COUNT = 7; + +Chart.CHART_LINE_START_X = 230; +Chart.CHART_LINE_Y = 370; + +Chart.CHART_GAP_PX = 120; +Chart.CHART_HEIGHT = 120; + +Chart.CHART_GRAPH_OFFSET_X = 50; +Chart.CHART_DATE_OFFSET_Y = 20; +Chart.CHART_RECORD_OFFSET_Y = 30; + +Chart.DATE_POS_X = Chart.CHART_LINE_START_X + 50; +Chart.RECORD_POS_X = Chart.DATE_POS_X + 100; +Chart.GRADE_POS_X = Chart.DATE_POS_X + 200; +Chart.SUBJECT_POS_X = Chart.DATE_POS_X + 400; + + +function ChartRecord(index) { + this.date = new DateData(index); + this.record = new RecordData(index); + this.grade = new GradeData(index); + this.subject = new SubjectData(index); +} + + +ChartRecord.getPosX = function(columnName) { + var posX = Chart.CHART_LINE_START_X; + switch(columnName) { + case "date": + posX = Chart.DATE_POS_X; + break; + + case "record": + posX = Chart.RECORD_POS_X; + break; + + case "grade": + posX = Chart.GRADE_POS_X; + break; + + case "subject": + posX = Chart.SUBJECT_POS_X; + break; + } + + return posX; +} + +ChartRecord.getPosY = function(rowIndex) { + var offsetY = 30; + return Chart.CHART_LINE_Y + offsetY + ChartRecord.GAP_RECORD_Y * rowIndex; +} + +ChartRecord.GAP_RECORD_Y = 40; + + + +function DateData(index) { + var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; + this.dateText = Chart.drawText(ChartRecord.getPosX("date"), ChartRecord.getPosY(index), "월/일", fontStyle); +} + +function RecordData(index) { + var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; + this.dateText = Chart.drawText(ChartRecord.getPosX("record"), ChartRecord.getPosY(index), "350 점", fontStyle); +} + +function GradeData(index) { + var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; + this.dateText = Chart.drawText(ChartRecord.getPosX("grade"), ChartRecord.getPosY(index), "B", fontStyle); +} + +function SubjectData(index) { + var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; + this.dateText = Chart.drawText(ChartRecord.getPosX("subject"), ChartRecord.getPosY(index), "ITQ 파워포인트", fontStyle); +} + diff --git a/src/game/license_timer/game.js b/src/game/license_timer/game.js index a0d059d..129c02e 100644 --- a/src/game/license_timer/game.js +++ b/src/game/license_timer/game.js @@ -31,6 +31,8 @@ var LicenseTimer = { this.makeTimer(); + this.chart = new Chart(); + this.makeInputScoreGroup(); @@ -136,12 +138,12 @@ var LicenseTimer = { makeTimer: function() { // bar var bar = game.add.graphics(); - bar.beginFill(0x000000, 0.2); - bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 200); + bar.beginFill(0x202020); + bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240); // Timer - var timerCenterX = game.world.centerX + 60; - var timerCenterY = 163; + 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, ":"); @@ -193,14 +195,29 @@ var LicenseTimer = { 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() { - var InputScoreGruopPosY = GAME_SCREEN_SIZE.y - 70; + var InputScoreGruopPosY = GAME_SCREEN_SIZE.y - LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y; // bar var bar = game.add.graphics(); bar.beginFill(0x303030); //, 0.2); @@ -374,6 +391,13 @@ var LicenseTimer = { } -LicenseTimer.TIME_DEFAULT_SEC = 60 * 60; // 60 min * 60 sec -LicenseTimer.TIME_MILLISECONDS = 1000; +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 diff --git a/src/web/client/license_timer.html b/src/web/client/license_timer.html index ce1d756..1168564 100644 --- a/src/web/client/license_timer.html +++ b/src/web/client/license_timer.html @@ -56,6 +56,7 @@ +