Add: print sample - graph, ranking

src/game/lib/announce_box.js

@@ -0,0 +1,54 @@
+/////////////////////////////
+// Chart
+
+class AnnounceBox {
+
+	constructor(x, y) {
+		console.log("x : " + x + ", y : " + y);
+		this.posX = x;
+		this.posY = y;
+
+	}
+
+	drawText(posX, posY, text) {
+		const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+
+		let textObject = game.add.text(
+			posX, posY,
+			text, style
+		);
+		textObject.anchor.set(0.5);
+		textObject.stroke = "#333";
+		textObject.strokeThickness = 3;
+
+		return textObject;
+	}
+
+	getFontStyle() {
+		return { font: "32px Arial", fill: "#fff" };
+	}
+
+	drawBox(text) {
+		this.graphics = game.add.graphics(this.posX, this.posY);
+		this.graphics.alpha = 0.8;
+
+		this.graphics.beginFill(0x303030);
+		this.graphics.lineStyle(4, 0x880000, 1);
+		this.graphics.moveTo(0, -190);
+		this.graphics.lineTo(game.world.width / 2, -170);
+		this.graphics.lineTo(game.world.width - this.posX * 2, -190);
+		this.graphics.lineTo(game.world.width - this.posX * 2, 50);
+		this.graphics.lineTo(game.world.width / 2, 30);
+		this.graphics.lineTo(0, 50);
+		this.graphics.endFill();
+
+		let announceText = this.drawText(
+			game.world.width / 2, this.posY - 75,
+			text
+		);
+		announceText.addColor("#ff0000", 0);
+		announceText.stroke = "#fff";
+
+	}
+
+}

src/game/lib/chart.js

@@ -47,6 +47,8 @@ class Chart {
 		textObject.anchor.set(0.5);
 		textObject.stroke = "#333";
 		textObject.strokeThickness = 3;
+
+		return textObject;
 	}
 
 	getFontStyle() {

src/game/result/history_board.js

@@ -3,7 +3,12 @@
 
 class HistoryBoard {
 
-	constructor() {
+	constructor(type) {
+		if(type === RecordBoard.TYPE_SAMPLE) {
+			this.printSample();
+			return;
+		}
+
 		this.dbConnectManager = new DBConnectManager();
 
 		let arrayTabStyle = { font: "20px Arial", fill: "#fff", align: "left", tabs: [ 40, 80, 120 ] };
@@ -32,6 +37,12 @@ class HistoryBoard {
 		);
 	}
 
+	calcDate(daysBefore) {
+		let date = new Date();
+		date.setDate(date.getDate() - daysBefore);
+		return date;
+	}
+
 
 	printRecord(index, date, bestRecord) {
 		if(sessionStorageManager.playingAppName.indexOf("typing") < 0)
@@ -77,4 +88,14 @@ class HistoryBoard {
 			.setTextBounds(0, 0, 80, 60)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 	}
+
+	printSample() {
+		this.printRecord(0, DateUtil.getYYYYMMDD(this.calcDate(2)), 1270);
+		this.printRecord(1, DateUtil.getYYYYMMDD(this.calcDate(3)), 1150);
+		this.printRecord(2, DateUtil.getYYYYMMDD(this.calcDate(5)), 1080);
+		this.printRecord(3, DateUtil.getYYYYMMDD(this.calcDate(7)), 960);
+		this.printRecord(4, DateUtil.getYYYYMMDD(this.calcDate(10)), 1020);
+		this.printRecord(5, DateUtil.getYYYYMMDD(this.calcDate(15)), 840);
+		this.printRecord(6, DateUtil.getYYYYMMDD(this.calcDate(20)), 760);
+	}
 }

src/game/result/ranking_board.js

@@ -3,7 +3,12 @@
 
 class RankingBoard {
 
-	constructor() {
+	constructor(type) {
+		if(type === RecordBoard.TYPE_SAMPLE) {
+			this.printSample();
+			return;
+		}
+
 		this.dbConnectManager = new DBConnectManager();
 
 		this.requestRanking(DBConnectManager.TYPE_MY_RANKING_HOUR);
@@ -148,4 +153,56 @@ class RankingBoard {
 		return game.world.height / 2 + 90 + 30 * index;
 	}
 
+	printSample() {
+		// TYPE_MY_RANKING_HOUR
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_HOUR, 0,
+			new RankingRecord(1, 0, "홍길동", 1080)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_HOUR, 1,
+			new RankingRecord(2, 0, "3-1김영희", 860)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_HOUR, 2,
+			new RankingRecord(3, 0, "6-3이철수", 480)
+		);
+
+
+		// TYPE_MY_RANKING_DAY
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_DAY, 0,
+			new RankingRecord(1, 0, "050215", 1580)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_DAY, 1,
+			new RankingRecord(2, 0, "홍길동", 1080)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_DAY, 2,
+			new RankingRecord(3, 0, "3-1김영희", 860)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_DAY, 3,
+			new RankingRecord(4, 0, "6-3이철수", 480)
+		);
+
+		// TYPE_MY_RANKING_MONTH
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_MONTH, 0,
+			new RankingRecord(1, 0, "050215", 1580)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_MONTH, 1,
+			new RankingRecord(2, 0, "홍길동", 1080)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_MONTH, 2,
+			new RankingRecord(3, 0, "3-1김영희", 860)
+		);
+		this.printRecord(
+			DBConnectManager.TYPE_MY_RANKING_MONTH, 3,
+			new RankingRecord(4, 0, "6-3이철수", 480)
+		);
+	}
 }

src/game/result/record_board.js

@@ -3,14 +3,14 @@
 
 class RecordBoard {
 
-	constructor() {
+	constructor(type) {
 		this.chartGraphics = game.add.graphics(0, 0);
 
 		this.printRecordBoardHeader();
 		this.printSeperator();
 
-		let historyBoard = new HistoryBoard();
+		let historyBoard = new HistoryBoard(type);
-		let rankingBoard = new RankingBoard();
+		let rankingBoard = new RankingBoard(type);
 	}
 
 
@@ -54,3 +54,6 @@ class RecordBoard {
 }
 
 RecordBoard.HEADER_BAR_HEIGHT_PX		= 60;
+
+RecordBoard.TYPE_SAMPLE			= "sample";
+RecordBoard.TYPE_DB				= "db";

src/game/result/result.js

@@ -35,8 +35,13 @@ class Result {
 
 		this.makeRestartButton();
 
-		let recordBoard = new RecordBoard();
+		if(sessionStorageManager.maestroAccountType == 0) {	// experience account
-
+			let recordBoard = new RecordBoard(RecordBoard.TYPE_SAMPLE);
+			this.announceBox = new AnnounceBox(50, 648);
+			this.announceBox.drawBox("체험 계정에서는 기록이 저장되지 않습니다.");
+		} else {
+			let recordBoard = new RecordBoard(RecordBoard.TYPE_DB);
+		}
 
 		// bottom
 		let screenBottom = new ScreenBottom();
@@ -84,6 +89,10 @@ class Result {
 	}
 
 	uploadRecord() {
+		if(sessionStorageManager.maestroAccountType == 0) {	// experience account
+			return;
+		}
+
 		this.dbConnectManager.updateTodayBestRecord(
 			sessionStorageManager.maestroID,
 			sessionStorageManager.playerID,

src/game/start/start.js

@@ -11,8 +11,8 @@ class Start {
 		this.dbConnectManager = new DBConnectManager();
 
 		this.game.stage.backgroundColor = '#4d4d4d';
-		this.chart = new Chart();
 		this.howToPlay = new HowToPlay();
+		this.chart = new Chart();
 
 
 		// top
@@ -33,7 +33,13 @@ class Start {
 		// contents
 		this.loadHowToPlay(sessionStorageManager.playingAppID);
 		this.makeStartButton();
+		if(sessionStorageManager.maestroAccountType == 0) {	// experience account
+			this.printSampleChart();
+			this.announceBox = new AnnounceBox(50, 648);
+			this.announceBox.drawBox("체험 계정에서는 기록이 저장되지 않습니다.");
+		} else {
 			this.loadChart();
+		}
 
 
 		// bottom
@@ -79,8 +85,6 @@ class Start {
 			sessionStorageManager.maestroID,
 			date,
 			historyRecordManager => {
-				this.chart.printChartBaseLine();
-
 				if(historyRecordManager.count == 0) {
 					console.log("start - history record : no data");
 					return;
@@ -105,10 +109,32 @@ class Start {
 						minValue, maxValue
 					);
 				}
+
+				this.chart.printChartBaseLine();
 			}
 		);
 	}
 
+	calcDate(daysBefore) {
+		let date = new Date();
+		date.setDate(date.getDate() - daysBefore);
+		return date;
+	}
+
+	printSampleChart() {
+		let minValue = 0;
+		let maxValue = 1000;
+		this.chart.drawRecordGraph(0, this.calcDate(1), 980, minValue, maxValue);
+		this.chart.drawRecordGraph(1, this.calcDate(2), 760, minValue, maxValue);
+		this.chart.drawRecordGraph(2, this.calcDate(5), 740, minValue, maxValue);
+		this.chart.drawRecordGraph(3, this.calcDate(7), 690, minValue, maxValue);
+		this.chart.drawRecordGraph(4, this.calcDate(8), 710, minValue, maxValue);
+		this.chart.drawRecordGraph(5, this.calcDate(10), 560, minValue, maxValue);
+		this.chart.drawRecordGraph(6, this.calcDate(20), 480, minValue, maxValue);
+
+		this.chart.printChartBaseLine();
+	}
+
 	makeStartButton() {
 		let setting = new RoundRectButtonSetting(game.world.centerX, game.world.centerY, 200, 100);
 		setting.fontStyle.fontWeight = "bold";

src/web/client/menu_app_test_player.html

@@ -28,7 +28,7 @@
 					sessionStorage.setItem("playerName", jsonData["playerName"]);
 					sessionStorage.setItem("playerAccountType", jsonData["playerAccountType"]);
 
-					// location.href='./../client/menu_app.html';
+					location.href='./../client/menu_app.html';
 				},
 
 				(errorMessage, errorCode) => {

src/web/client/result.html

@@ -25,6 +25,7 @@
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
+		<script src="../../game/lib/announce_box.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/result/history_board.js"></script>

src/web/client/start.html

@@ -24,8 +24,9 @@
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
-		<script src="../../game/lib/chart.js"></script>
 		<script src="../../game/lib/how_to_play.js"></script>
+		<script src="../../game/lib/chart.js"></script>
+		<script src="../../game/lib/announce_box.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/start/start.js"></script>