Fix: Timer and Chart UI
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user