Add: HistoryRecord

src/game/start/start.js

@@ -1,6 +1,14 @@
 /////////////////////////////
 // Start
 
+class HistoryRecordData {
+
+	constructor(date, record) {
+		this.date = date;
+		this.record = record;
+	}
+}
+
 let Start = {
 
 	preload: function() {
@@ -23,7 +31,8 @@ let Start = {
 		// contents
 		this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName));
 		this.makeStartButton();
-		this.printRecordHistory();
+		let historyRecords = this.makeHistoryRecords();
+		this.printRecordHistory(historyRecords);
 
 
 		// bottom
@@ -53,19 +62,55 @@ let Start = {
 		startButton.move(game.world.centerX, game.world.centerY);
 	},
 
-	printRecordHistory: function() {
-		this.printRecord(0, "05/10", 15460);
-		this.printRecord(1, "05/11", 13040);
-		this.printRecord(2, "05/12", 16460);
-		this.printRecord(3, "05/13", 15060);
-		this.printRecord(4, "05/14", 19800);
+	makeHistoryRecords: function() {
+		let array = [];
+		array.push(new HistoryRecordData("05/10", 15460));
+		array.push(new HistoryRecordData("05/11", 13040));
+		array.push(new HistoryRecordData("05/12", 16460));
+		array.push(new HistoryRecordData("05/13", 15060));
+		array.push(new HistoryRecordData("05/14", 19800));
+
+		return array;
+	},
+
+	printRecordHistory: function(historyRecords) {
+		let min = this.minValueOfData(historyRecords);
+		let max = this.maxValueOfData(historyRecords);
+
+		for(let i = 0; i < historyRecords.length; i++) {
+			this.printRecord(i, historyRecords[i].date, historyRecords[i].record, min, max);
+		}
 
 		this.chartGraphics.lineStyle(3, 0xffd900, 1);
 		this.chartGraphics.moveTo(0, 0);
 		this.chartGraphics.lineTo(game.world.width - 200, 0);
 	},
 
-	printRecord: function(index, date, record) {
+	minValueOfData: function(historyRecords) {
+		let numberArray = this.getRecordArray(historyRecords);
+		let minValue = Math.min.apply(Math, numberArray);
+		let minNumberOfDigits = Math.floor(Math.log(minValue) / Math.LN10 + 1)
+		let underMinValue = Math.floor( (minValue / Math.pow(10, minNumberOfDigits - 2) ) ) * Math.pow(10, minNumberOfDigits - 2);
+		return underMinValue;
+	},
+
+	maxValueOfData: function(historyRecords) {
+		let numberArray = this.getRecordArray(historyRecords);
+		let maxValue = Math.max.apply(Math, numberArray);
+		let maxNumberOfDigits = Math.floor(Math.log(maxValue) / Math.LN10 + 1)
+		let underMaxValue = Math.ceil( (maxValue / Math.pow(10, maxNumberOfDigits - 2) ) ) * Math.pow(10, maxNumberOfDigits - 2);
+		return underMaxValue;
+	},
+
+	getRecordArray: function(historyRecords) {
+		let numberArray = [];
+		for(let i = 0; i < historyRecords.length; i++) {
+			numberArray.push(historyRecords[i].record);
+		}
+		return numberArray;
+	},
+
+	printRecord: function(index, date, record, min, max) {
 		const CHART_GAP_PX	= 180;
 		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
 
@@ -74,17 +119,15 @@ let Start = {
 		dateText.stroke = "#333";
 		dateText.strokeThickness = 1;
 
-		let recordText = game.add.text(100 + index * CHART_GAP_PX, game.world.height - 300, record, style);
+		let numberWithCommas = NumberUtil.numberWithCommas(record);
+		let recordText = game.add.text(100 + index * CHART_GAP_PX, game.world.height - 300, numberWithCommas, style);
 		recordText.setTextBounds(0, 0, 100, 100);
 		recordText.stroke = "#333";
 		recordText.strokeThickness = 1;
 
 		this.chartGraphics.lineStyle(50, 0xdddddd, 1);
-		// this.chartGraphics.beginFill(0xffffff, 1);
-		// this.chartGraphics.drawRect(50, 250, 100, 100);
 		this.chartGraphics.moveTo(50 + index * CHART_GAP_PX, 0);
-		this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * (record / 20000));
-		// this.chartGraphics.endFill();
+		this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * ( (record - min) / (max - min) ));
 	},
 
 

src/web/client/start.html

@@ -15,6 +15,7 @@
 		<script src="../../game/global/global_variables.js"></script>
 
 		<!-- library source files -->
+		<script src="../../game/lib/number_util.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
 		<script src="../../game/lib/round_rect_button.js"></script>
 		<script src="../../game/lib/back_button.js"></script>