diff --git a/src/game/license_timer/chart.js b/src/game/license_timer/chart.js index 04b7601..d4afc99 100644 --- a/src/game/license_timer/chart.js +++ b/src/game/license_timer/chart.js @@ -3,8 +3,9 @@ function Chart() { this.printChartTitle(); this.printChartBaseLine(); + this.records = []; for(var i = 0; i < 7; i++) - new ChartRecord(i); + this.records.push(new ChartRecord(i)); } Chart.prototype.printChartTitle = function() { @@ -12,7 +13,7 @@ Chart.prototype.printChartTitle = function() { 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.SCORE_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); } @@ -60,6 +61,18 @@ Chart.drawText = function(posX, posY, text, fontStyle) { return textObject; } +Chart.prototype.printContents = function() { + if(isDebugMode()) { + console.log("printContents : " + this.records.length); + for(var i = 0; i < this.records.length; i++) { + this.records[i].printDate("12/10"); + this.records[i].printScore(360); + this.records[i].printGrade("B"); + this.records[i].printSubject("ITQ 파워포인트"); + } + } +} + Chart.CHART_COUNT = 7; Chart.CHART_LINE_START_X = 230; @@ -70,22 +83,40 @@ Chart.CHART_HEIGHT = 120; Chart.CHART_GRAPH_OFFSET_X = 50; Chart.CHART_DATE_OFFSET_Y = 20; -Chart.CHART_RECORD_OFFSET_Y = 30; +Chart.CHART_SCORE_OFFSET_Y = 30; Chart.DATE_POS_X = Chart.CHART_LINE_START_X + 50; -Chart.RECORD_POS_X = Chart.DATE_POS_X + 100; +Chart.SCORE_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); +function ChartRecord(indexRow) { + this.date = new DateData(indexRow); + this.score = new ScoreData(indexRow); + this.grade = new GradeData(indexRow); + this.subject = new SubjectData(indexRow); + + return this; } +ChartRecord.prototype.printDate = function(date) { + this.date.text = date; +} + +ChartRecord.prototype.printScore = function(score) { + this.score.text = score; +} + +ChartRecord.prototype.printGrade = function(grade) { + this.grade.text = grade; +} + +ChartRecord.prototype.printSubject = function(subject) { + this.subject.text = subject; +} + ChartRecord.getPosX = function(columnName) { var posX = Chart.CHART_LINE_START_X; switch(columnName) { @@ -93,8 +124,8 @@ ChartRecord.getPosX = function(columnName) { posX = Chart.DATE_POS_X; break; - case "record": - posX = Chart.RECORD_POS_X; + case "score": + posX = Chart.SCORE_POS_X; break; case "grade": @@ -114,27 +145,46 @@ ChartRecord.getPosY = function(rowIndex) { return Chart.CHART_LINE_Y + offsetY + ChartRecord.GAP_RECORD_Y * rowIndex; } +ChartRecord.getDefaultFontStyle = function() { + return { font: "28px Arial", fill: "#fff", align: "center" }; +} + 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); + this.dateText = Chart.drawText( + ChartRecord.getPosX("date"), ChartRecord.getPosY(index), + "-", ChartRecord.getDefaultFontStyle() + ); + + return this.dateText; } -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 ScoreData(index) { + this.scoreText = Chart.drawText( + ChartRecord.getPosX("score"), ChartRecord.getPosY(index), + "-", ChartRecord.getDefaultFontStyle() + ); + + return this.scoreText; } function GradeData(index) { - var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; - this.dateText = Chart.drawText(ChartRecord.getPosX("grade"), ChartRecord.getPosY(index), "B", fontStyle); + this.gradeText = Chart.drawText( + ChartRecord.getPosX("grade"), ChartRecord.getPosY(index), + "-", ChartRecord.getDefaultFontStyle() + ); + + return this.gradeText; } function SubjectData(index) { - var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" }; - this.dateText = Chart.drawText(ChartRecord.getPosX("subject"), ChartRecord.getPosY(index), "ITQ 파워포인트", fontStyle); -} + this.subjectText = Chart.drawText( + ChartRecord.getPosX("subject"), ChartRecord.getPosY(index), + "-", ChartRecord.getDefaultFontStyle() + ); + return this.subjectText; +} \ No newline at end of file diff --git a/src/game/license_timer/game.js b/src/game/license_timer/game.js index a6aa63f..5322b3e 100644 --- a/src/game/license_timer/game.js +++ b/src/game/license_timer/game.js @@ -1,10 +1,6 @@ var LicenseTimer = { create: function() { - Phaser.Device.whenReady(function () { - game.plugins.add(PhaserInput.Plugin); -  }); - game.stage.backgroundColor = "#4d4d4d"; this.initVariables(); @@ -30,109 +26,14 @@ var LicenseTimer = { // this.fullscreenButton = new FullscreenButton(); this.timer = new Timer(); - this.chart = new Chart(); + this.chart.printContents(); - - - this.makeInputScoreGroup(); + this.inputScore = new InputScore(this.chart); }, initVariables: function() { - this.subject = "ITQ 파워포인트"; - this.recentRecord = 500; - - this.prevTime = null; - - this.timeLeft = 0; - this.timeLeftHour = 0; - this.timeLeftMinute = 0; - this.timeLeftSecond = 0; - - this.timerEvent = null; - }, - - makeTimer: function() { - }, - - makeInputScoreGroup: function() { - var InputScoreGruopPosY = GAME_SCREEN_SIZE.y - LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y; - // bar - var bar = game.add.graphics(); - bar.beginFill(0x303030); //, 0.2); - bar.drawRect(0, InputScoreGruopPosY, GAME_SCREEN_SIZE.x, 70); - - - var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력"); - this.subjectText = this.makeInputText(20, InputScoreGruopPosY + 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, InputScoreGruopPosY + 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, InputScoreGruopPosY + 10, recordTextSetting); - // this.subjectText.setText(this.subject); - - this.titleText = game.add.text(640, InputScoreGruopPosY + 40, "점", titleTextStyle); - this.titleText.anchor.set(0, 0.5); - - - var passwordTextSetting = this.makeInputTextSetting(150, "비밀번호"); - passwordTextSetting.type = PhaserInput.InputType.password; - this.passwordText = this.makeInputText(GAME_SCREEN_SIZE.x - 330, InputScoreGruopPosY + 10, passwordTextSetting); - - - // set timer buttons - setting.x = GAME_SCREEN_SIZE.x - 80; - setting.y = InputScoreGruopPosY + 35; - setting.width = 100; - setting.height = 50; - var set60SecButton = new RoundRectButton( - setting, - null, "저장", - (function() { console.log(this.subjectText.value); console.log("save score"); }).bind(this) - ); - - }, - - setInputTextWidth(inputText, width) { - 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(); - }, - - makeInputTypeText: function(x, y, text) { - var inputText = new InputTypeText(x, y); - inputText.anchor.set(0.5); - inputText.canvasInput.value(''); - if(isDebugMode()) { - inputText.canvasInput.value(text); - } - inputText.canvasInput._onkeyup = (function() { - if(event.keyCode == Phaser.Keyboard.ENTER) { - this.startMenu(); - } - }).bind(this); - - return inputText; }, @@ -142,35 +43,4 @@ var LicenseTimer = { game.state.start('Login'); }, - - makeInputTextSetting(width, placeHolder) { - return { - font: "32px Arial", - fill: "#000000", - fillAlpha: 1, - fontWeight: "bold", - forceCase: "", // PhaserInput.ForceCase.upper, - width: width, - max: 100, - padding: 8, - borderWidth: 1, - borderColor: "#aaa", - borderRadius: 6, - placeHolder: placeHolder, - textAlign: "center", - zoom: true - } - }, - - makeInputText(x, y, setting) { - var inputText = game.add.inputField(x, y, setting); - inputText.setText(''); - inputText.blockInput = false; - - return inputText; - }, - -} - - -LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y = 70; \ No newline at end of file +} \ No newline at end of file diff --git a/src/game/license_timer/input_score.js b/src/game/license_timer/input_score.js new file mode 100644 index 0000000..8ec48b5 --- /dev/null +++ b/src/game/license_timer/input_score.js @@ -0,0 +1,94 @@ +function InputScore(chart) { + this.chart = chart; + + this.initVariables(); + + Phaser.Device.whenReady(function () { + game.plugins.add(PhaserInput.Plugin); + }); + + var inputScorePosY = GAME_SCREEN_SIZE.y - InputScore.INPUT_SCORE_GROUP_OFFSET_Y; + + // bar + var bar = game.add.graphics(); + bar.beginFill(0x303030); //, 0.2); + bar.drawRect(0, inputScorePosY, GAME_SCREEN_SIZE.x, 70); + + + var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력"); + this.subjectText = this.makeInputText(20, 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.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.titleText = game.add.text(640, inputScorePosY + 40, "점", titleTextStyle); + this.titleText.anchor.set(0, 0.5); + + + var passwordTextSetting = this.makeInputTextSetting(150, "비밀번호"); + passwordTextSetting.type = PhaserInput.InputType.password; + this.passwordText = this.makeInputText(GAME_SCREEN_SIZE.x - 330, inputScorePosY + 10, passwordTextSetting); + + + // set timer buttons + setting.x = GAME_SCREEN_SIZE.x - 80; + setting.y = inputScorePosY + 35; + setting.width = 100; + setting.height = 50; + var set60SecButton = new RoundRectButton( + setting, + null, "저장", + (function() { console.log(this.subjectText.value); console.log("save score"); }).bind(this) + ); +} + +InputScore.prototype.initVariables = function() { + this.subject = "ITQ 파워포인트"; + this.recentSubject = this.subject; +} + +InputScore.prototype.makeInputTextSetting = function(width, placeHolder) { + return { + font: "32px Arial", + fill: "#000000", + fillAlpha: 1, + fontWeight: "bold", + forceCase: "", // PhaserInput.ForceCase.upper, + width: width, + max: 100, + padding: 8, + borderWidth: 1, + borderColor: "#aaa", + borderRadius: 6, + placeHolder: placeHolder, + textAlign: "center", + zoom: true + } +} + +InputScore.prototype.makeInputText = function(x, y, setting) { + var inputText = game.add.inputField(x, y, setting); + inputText.setText(''); + inputText.blockInput = false; + + return inputText; +} + + +InputScore.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 index 41d654b..5b2a0f3 100644 --- a/src/game/license_timer/timer.js +++ b/src/game/license_timer/timer.js @@ -1,63 +1,76 @@ function Timer() { - // bar - var bar = game.add.graphics(); - bar.beginFill(0x202020); - bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240); + this.initVariables(); - // Timer - var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X; - var timerCenterY = 183; + // bar + var bar = game.add.graphics(); + bar.beginFill(0x202020); + bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240); - 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"); + // Timer + var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X; + var timerCenterY = 183; - // buttons - var hour10PosX = timerCenterX - 285; - var hour1PosX = timerCenterX - 195; + 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"); - var minute10PosX = timerCenterX - 45; - var minute1PosX = timerCenterX + 45; + // buttons + var hour10PosX = timerCenterX - 285; + var hour1PosX = timerCenterX - 195; - var plusPosY = timerCenterY - 82; - var minusPosY = timerCenterY + 75; + var minute10PosX = timerCenterX - 45; + var minute1PosX = timerCenterX + 45; - // 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) - ); + var plusPosY = timerCenterY - 82; + var minusPosY = timerCenterY + 75; - 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) - ); + // 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) + ); - // 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.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) + ); - 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) - ); + // 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.initVariables = function() { + this.prevTime = null; + + this.timeLeft = 0; + this.timeLeftHour = 0; + this.timeLeftMinute = 0; + this.timeLeftSecond = 0; + + this.timerEvent = null; +} + Timer.prototype.makeTimerTextContent = function(x, y, sizePx, content) { // style setting var timerTextStyle = { font: "bold 160px Arial", fill: "#fff", align: "right"}; diff --git a/src/web/client/license_timer.html b/src/web/client/license_timer.html index 6db35d0..d79ad0f 100644 --- a/src/web/client/license_timer.html +++ b/src/web/client/license_timer.html @@ -58,6 +58,7 @@ +