Fix: Timer and Chart UI

2018-12-10 07:39:02 +09:00
parent 3fd64a35e1
commit 496ddbcde0
3 changed files with 172 additions and 7 deletions
@@ -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);
+}
+