Fix: draw history graph with ranking record
This commit is contained in:
@@ -72,31 +72,6 @@ class DBConnectManager {
|
||||
return;
|
||||
|
||||
listener(rankingRecordManager);
|
||||
/*
|
||||
let jsonRankingList = [
|
||||
{ "UserID":"17", "Name":"강경모", 4400" },
|
||||
{ "UserID":"2", "Name":"강성태", 3400" },
|
||||
{ "UserID":"3", "Name":"김기덕", 2400" },
|
||||
{ "UserID":"4", "Name":"김남희", 1400" },
|
||||
{ "UserID":"5", "Name":"고봉순", 900" },
|
||||
{ "UserID":"6", "Name":"파르마", 800" },
|
||||
{ "UserID":"1", "Name":"박지상", 700" },
|
||||
{ "UserID":"8", "Name":"신현주", 600" },
|
||||
{ "UserID":"9", "Name":"꼬봉이", 500" },
|
||||
{ "UserID":"10", "Name":"거북이", 400" },
|
||||
{ "UserID":"11", "Name":"다람쥐", 300" },
|
||||
{ "UserID":"12", "Name":"사시미", 200" },
|
||||
{ "UserID":"13", "Name":"태권도", 100" },
|
||||
{ "UserID":"14", "Name":"합기도", 40" },
|
||||
{ "UserID":"15", "Name":"우습지", 10" },
|
||||
{ "UserID":"16", "Name":"하하하", 4" },
|
||||
];
|
||||
|
||||
if(listener === null)
|
||||
return;
|
||||
|
||||
listener();
|
||||
*/
|
||||
}
|
||||
|
||||
}
|
||||
@@ -104,6 +79,7 @@ class DBConnectManager {
|
||||
DBConnectManager.TYPE_MY_RANKING_HOUR = 0;
|
||||
DBConnectManager.TYPE_MY_RANKING_DAY = 1;
|
||||
DBConnectManager.TYPE_MY_RANKING_MONTH = 2;
|
||||
|
||||
DBConnectManager.TYPE_ALL_RANKING_HOUR = 3;
|
||||
DBConnectManager.TYPE_ALL_RANKING_DAY = 4;
|
||||
DBConnectManager.TYPE_ALL_RANKING_MONTH = 5;
|
||||
@@ -21,9 +21,6 @@ class RankingRecordManager {
|
||||
|
||||
clear() {
|
||||
this.rankingRecords = [];
|
||||
|
||||
this.minValueOfRecord = 0;
|
||||
this.maxValueOfRecord = 0;
|
||||
}
|
||||
|
||||
get count() {
|
||||
|
||||
@@ -36,11 +36,6 @@ class Result {
|
||||
let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
|
||||
screenBottom.printBottomCenterText(playingAppName);
|
||||
screenBottom.printBottomRightText(sessionStorageManager.playerName);
|
||||
|
||||
// this.loadHistoryRecords();
|
||||
|
||||
// this.loadTypingStageData();
|
||||
// this.loadRanking();
|
||||
}
|
||||
|
||||
printScore() {
|
||||
@@ -76,333 +71,6 @@ class Result {
|
||||
startButton.move(game.world.centerX, game.world.height / 2 - 70);
|
||||
}
|
||||
|
||||
loadHistoryRecords() {
|
||||
this.historyRecordManager.clear();
|
||||
|
||||
this.historyRecordManager.push(new HistoryRecordData("05/10", 15460));
|
||||
this.historyRecordManager.push(new HistoryRecordData("05/11", 3040));
|
||||
this.historyRecordManager.push(new HistoryRecordData("05/12", 460));
|
||||
this.historyRecordManager.push(new HistoryRecordData("05/13", 60));
|
||||
this.historyRecordManager.push(new HistoryRecordData("05/14", 8));
|
||||
|
||||
this.printHistoryRecords();
|
||||
}
|
||||
|
||||
printHistoryRecords(historyRecords) {
|
||||
for(let i = 0; i < this.historyRecordManager.count; i++) {
|
||||
let data = this.historyRecordManager.getAt(i);
|
||||
this.printRecord(i, data.date, data.record);
|
||||
}
|
||||
|
||||
// this.chartGraphics.lineStyle(3, 0xffd900, 1);
|
||||
// this.chartGraphics.moveTo(0, 0);
|
||||
// this.chartGraphics.lineTo(game.world.width - 200, 0);
|
||||
}
|
||||
|
||||
printRecord(index, date, record) {
|
||||
if(sessionStorageManager.playingAppName.indexOf("typing") > -1)
|
||||
this.printMouseAppHistory(index, date, record);
|
||||
else
|
||||
this.printMouseAppHistory(index, date, record);
|
||||
}
|
||||
|
||||
printTypingAppHistory(index, date, record) {
|
||||
let posX = 60;
|
||||
let posY = game.world.height / 2 + 90 + 30 * index;
|
||||
|
||||
var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
|
||||
|
||||
style.boundsAlignH = "center";
|
||||
game.add.text(posX, posY, date, style)
|
||||
.setTextBounds(0, 0, 40, 40)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
game.add.text(posX + 60, posY, "(한)단어", style)
|
||||
.setTextBounds(0, 0, 60, 60)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
let numberWithCommas = NumberUtil.numberWithCommas(record);
|
||||
style.boundsAlignH = "right";
|
||||
game.add.text(posX + 120, posY, numberWithCommas, style)
|
||||
.setTextBounds(0, 0, 80, 60)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
}
|
||||
|
||||
printMouseAppHistory(index, date, record) {
|
||||
let posX = 60;
|
||||
let posY = game.world.height / 2 + 90 + 30 * index;
|
||||
|
||||
var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
|
||||
|
||||
style.boundsAlignH = "center";
|
||||
game.add.text(posX, posY, date, style)
|
||||
.setTextBounds(0, 0, 100, 60)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
let numberWithCommas = NumberUtil.numberWithCommas(record);
|
||||
style.boundsAlignH = "right";
|
||||
game.add.text(posX + 80, posY, numberWithCommas, style)
|
||||
.setTextBounds(0, 0, 100, 60)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
}
|
||||
|
||||
loadRanking() {
|
||||
|
||||
}
|
||||
|
||||
printRanking() {
|
||||
let posY = game.world.height / 2 + 20;
|
||||
var bar = game.add.graphics();
|
||||
bar.beginFill(0x000000, 0.1);
|
||||
bar.drawRect(0, posY, 1000, 60);
|
||||
|
||||
const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
|
||||
|
||||
let posX = 40;
|
||||
posY -= 30;
|
||||
style.fill = "#ffc";
|
||||
game.add.text(posX + 20, 4, "최근의 내 기록", style)
|
||||
.setTextBounds(0, posY, 200, 120)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
var arrayTabStyle = { font: "20px Arial", fill: "#ffc", align: "left", tabs: [ 80, 60, 60 ] };
|
||||
this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
posX = 340;
|
||||
style.fill = "#fff";
|
||||
arrayTabStyle.tabs = [ 40, 80, 120 ];
|
||||
arrayTabStyle.fill = "#fff";
|
||||
|
||||
this.printRankingHeader(posX, posY, "수업시간 순위", style);
|
||||
this.textHourRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
|
||||
|
||||
posX = 560;
|
||||
this.printRankingHeader(posX, posY, "오늘의 순위", style);
|
||||
this.textDayRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
|
||||
|
||||
posX = 780;
|
||||
this.printRankingHeader(posX, posY, "이달의 순위", style);
|
||||
this.textMonthRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
|
||||
|
||||
// this.showMyRanking(this.makeTemporaryJsonRankingList());
|
||||
this.showRankingHour(this.makeTemporaryJsonRankingList());
|
||||
this.showRankingDay(this.makeTemporaryJsonRankingList());
|
||||
this.showRankingMonth(this.makeTemporaryJsonRankingList());
|
||||
}
|
||||
|
||||
printRankingHeader(x, y, title, style) {
|
||||
game.add.text(x, 4, title, style)
|
||||
.setTextBounds(0, y, 200, 120)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
}
|
||||
|
||||
printRankingContent(x, y, style) {
|
||||
return game.add.text(x, y, '', style)
|
||||
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
}
|
||||
|
||||
showMyRanking(jsonRankingList) {
|
||||
if(jsonRankingList == null) {
|
||||
var rankEmpty = [ ];
|
||||
this.textMyRanking.parseList(rankEmpty);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var recordArray = this.getMyRankingArrayFromJSON(jsonRankingList);
|
||||
|
||||
var recordCnt = recordArray.length;
|
||||
var startIndex = 0;
|
||||
if(recordCnt > 7)
|
||||
startIndex = recordCnt - 7;
|
||||
|
||||
recordArray = recordArray.slice(startIndex);
|
||||
|
||||
// console.log("Ranking Hour : " + recordArray);
|
||||
this.textMyRanking.parseList(recordArray);
|
||||
}
|
||||
|
||||
makeTemporaryJsonRankingList() {
|
||||
let jsonRankingList = [
|
||||
{ "UserID":"17", "Name":"강경모", "BestRecord":"4400" },
|
||||
{ "UserID":"2", "Name":"강성태", "BestRecord":"3400" },
|
||||
{ "UserID":"3", "Name":"김기덕", "BestRecord":"2400" },
|
||||
{ "UserID":"4", "Name":"김남희", "BestRecord":"1400" },
|
||||
{ "UserID":"5", "Name":"고봉순", "BestRecord":"900" },
|
||||
{ "UserID":"6", "Name":"파르마", "BestRecord":"800" },
|
||||
{ "UserID":"1", "Name":"박지상", "BestRecord":"700" },
|
||||
{ "UserID":"8", "Name":"신현주", "BestRecord":"600" },
|
||||
{ "UserID":"9", "Name":"꼬봉이", "BestRecord":"500" },
|
||||
{ "UserID":"10", "Name":"거북이", "BestRecord":"400" },
|
||||
{ "UserID":"11", "Name":"다람쥐", "BestRecord":"300" },
|
||||
{ "UserID":"12", "Name":"사시미", "BestRecord":"200" },
|
||||
{ "UserID":"13", "Name":"태권도", "BestRecord":"100" },
|
||||
{ "UserID":"14", "Name":"합기도", "BestRecord":"40" },
|
||||
{ "UserID":"15", "Name":"우습지", "BestRecord":"10" },
|
||||
{ "UserID":"16", "Name":"하하하", "BestRecord":"4" },
|
||||
];
|
||||
|
||||
return jsonRankingList;
|
||||
}
|
||||
|
||||
showRankingHour(jsonRankingList) {
|
||||
if(jsonRankingList == null) {
|
||||
var rankEmpty = [ ];
|
||||
this.textHourRanking.parseList(rankEmpty);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/*
|
||||
var recordArray = this.getRankingArrayFromJSON(jsonRankingList2);
|
||||
*/
|
||||
var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
|
||||
// console.log("Ranking Hour : " + recordArray);
|
||||
this.textHourRanking.parseList(recordArray);
|
||||
this.showMedal(this.medalHour, this.getMyRankFromJSON(jsonRankingList));
|
||||
}
|
||||
|
||||
showRankingDay(jsonRankingList) {
|
||||
// console.log("Ranking Day : " + jsonRankingList);
|
||||
if(jsonRankingList == null) {
|
||||
var rankEmpty = [ ];
|
||||
this.textDayRanking.parseList(rankEmpty);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
|
||||
// console.log("Ranking Day : " + recordArray);
|
||||
this.textDayRanking.parseList(recordArray);
|
||||
this.showMedal(this.medalDay, this.getMyRankFromJSON(jsonRankingList));
|
||||
}
|
||||
|
||||
showRankingMonth(jsonRankingList) {
|
||||
if(jsonRankingList == null) {
|
||||
var rankEmpty = [ ];
|
||||
this.textMonthRanking.parseList(rankEmpty);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
|
||||
// console.log("Ranking Month : " + recordArray);
|
||||
this.textMonthRanking.parseList(recordArray);
|
||||
this.showMedal(this.medalMonth, this.getMyRankFromJSON(jsonRankingList));
|
||||
}
|
||||
|
||||
getMyRankingArrayFromJSON(jsonRankingList) {
|
||||
var startIndex = 0;
|
||||
var endIndex = jsonRankingList.length;
|
||||
|
||||
var recordArray = [];
|
||||
for(var i = startIndex; i < endIndex; i++) {
|
||||
var bestRecordRow = [];
|
||||
var strDate = jsonRankingList[i]['Date'];
|
||||
var dateArray = strDate.split("-");
|
||||
var recordDate = new Date(dateArray[0], dateArray[1], dateArray[2]);
|
||||
bestRecordRow[0] = recordDate.getMonth() + "월 " + recordDate.getDate() + "일";
|
||||
bestRecordRow[1] = Math.floor(jsonRankingList[i]['BestRecord']);
|
||||
bestRecordRow[2] = getStageNameForKorean(jsonRankingList[i]['StageName']);
|
||||
// console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]);
|
||||
|
||||
recordArray.push(bestRecordRow);
|
||||
}
|
||||
|
||||
return recordArray;
|
||||
}
|
||||
|
||||
getRankingArrayFromJSON(jsonRankingList) {
|
||||
var rankingListCount = jsonRankingList.length;
|
||||
var myRank = this.getMyRankFromJSON(jsonRankingList);
|
||||
var myRankIndex = myRank - 1;
|
||||
// console.log("myRankIndex : " + myRankIndex);
|
||||
|
||||
var startIndex = 0;
|
||||
var endIndex = rankingListCount;
|
||||
|
||||
if(rankingListCount > 7) {
|
||||
if(myRank < rankingListCount - 3) { // my rank is better than the worst 3
|
||||
if(myRank < 5) {
|
||||
startIndex = 0;
|
||||
endIndex = rankingListCount > 7 ? 7 : rankingListCount;
|
||||
} else {
|
||||
startIndex = myRankIndex - 3;
|
||||
endIndex = myRankIndex + 4;
|
||||
}
|
||||
} else { // my rank is in the worst 3
|
||||
startIndex = rankingListCount > 7 ? rankingListCount - 7 : 0;
|
||||
endIndex = rankingListCount;
|
||||
}
|
||||
}
|
||||
|
||||
var recordArray = [];
|
||||
for(var i = startIndex; i < endIndex; i++) {
|
||||
var bestRecordRow = [];
|
||||
// bestRecordRow[0] = jsonRankingList[i]['UserID'];
|
||||
bestRecordRow[0] = i + 1;
|
||||
bestRecordRow[1] = jsonRankingList[i]['Name'];
|
||||
bestRecordRow[2] = NumberUtil.numberWithCommas(Math.floor(jsonRankingList[i]['BestRecord']));
|
||||
// console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]);
|
||||
|
||||
recordArray.push(bestRecordRow);
|
||||
}
|
||||
|
||||
return recordArray;
|
||||
}
|
||||
|
||||
getMyRankFromJSON(jsonRankingList) {
|
||||
var myRank = -1;
|
||||
for(var i = 0; i < jsonRankingList.length; i++) {
|
||||
if(jsonRankingList[i]['UserID'] == sessionStorageManager.playerUserID) {
|
||||
myRank = i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
return myRank;
|
||||
}
|
||||
|
||||
showMedal(medal, myRank) {
|
||||
/*
|
||||
if(myRank > 3) {
|
||||
medal.alpha = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if(myRank == 1)
|
||||
medal.loadTexture("medal_gold");
|
||||
else if(myRank == 2)
|
||||
medal.loadTexture("medal_silver");
|
||||
else if(myRank == 3)
|
||||
medal.loadTexture("medal_bronze");
|
||||
|
||||
medal.alpha = 1;
|
||||
medal.scale.setTo(0.5);
|
||||
game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true);
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
loadTypingStageData() {
|
||||
var self = this;
|
||||
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
// console.log("onreadystatechange : " + xhr);
|
||||
// console.log("xhr.readyState : " + xhr.readyState);
|
||||
// console.log("xhr.status : " + xhr.status);
|
||||
if(xhr.readyState == 4 && xhr.status == 200) {
|
||||
// console.log(xhr.responseText);
|
||||
var jsonData = JSON.parse(xhr.responseText);
|
||||
self.updateStageButton(jsonData);
|
||||
}
|
||||
}
|
||||
xhr.open('GET', 'activated_stage_list.php', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
startStage() {
|
||||
location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html";
|
||||
}
|
||||
|
||||
+20
-46
@@ -8,7 +8,7 @@ class Start {
|
||||
}
|
||||
|
||||
create() {
|
||||
this.historyRecordManager = new HistoryRecordManager();
|
||||
this.dbConnectManager = new DBConnectManager();
|
||||
|
||||
this.game.stage.backgroundColor = '#4d4d4d';
|
||||
this.chartGraphics = game.add.graphics(100, game.world.height - 120);
|
||||
@@ -26,8 +26,22 @@ class Start {
|
||||
this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName));
|
||||
this.makeStartButton();
|
||||
|
||||
this.loadHistoryRecords();
|
||||
this.printHistoryRecords();
|
||||
this.printChartBaseLine();
|
||||
|
||||
let self = this;
|
||||
this.dbConnectManager.requestTempPlayerHistory( historyRecordManager => {
|
||||
let underValue = historyRecordManager.underValueForGraph();
|
||||
let upperValue = historyRecordManager.upperValueForGraph();
|
||||
|
||||
for(let i = 0; i < historyRecordManager.count; i++) {
|
||||
if(i > 6)
|
||||
break;
|
||||
|
||||
let data = historyRecordManager.getAt(i);
|
||||
this.drawRecordGraph(i, data.date, data.score, underValue, upperValue);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// bottom
|
||||
@@ -37,8 +51,6 @@ class Start {
|
||||
let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
|
||||
screenBottom.printBottomCenterText(playingAppName);
|
||||
screenBottom.printBottomRightText(sessionStorageManager.playerName);
|
||||
|
||||
// this.loadTypingStageData();
|
||||
}
|
||||
|
||||
printHowToPlay(text) {
|
||||
@@ -57,32 +69,14 @@ class Start {
|
||||
startButton.move(game.world.centerX, game.world.centerY);
|
||||
}
|
||||
|
||||
loadHistoryRecords() {
|
||||
this.historyRecordManager.clear();
|
||||
|
||||
this.historyRecordManager.push(new HistoryRecord("05/10", 15460));
|
||||
this.historyRecordManager.push(new HistoryRecord("05/11", 13040));
|
||||
this.historyRecordManager.push(new HistoryRecord("05/12", 16460));
|
||||
this.historyRecordManager.push(new HistoryRecord("05/13", 15060));
|
||||
this.historyRecordManager.push(new HistoryRecord("05/14", 19800));
|
||||
}
|
||||
|
||||
printHistoryRecords(historyRecords) {
|
||||
let underValue = this.historyRecordManager.underValueForGraph();
|
||||
let upperValue = this.historyRecordManager.upperValueForGraph();
|
||||
|
||||
for(let i = 0; i < this.historyRecordManager.count; i++) {
|
||||
let data = this.historyRecordManager.getAt(i);
|
||||
this.printRecord(i, data.date, data.score, underValue, upperValue);
|
||||
}
|
||||
|
||||
printChartBaseLine() {
|
||||
this.chartGraphics.lineStyle(3, 0xffd900, 1);
|
||||
this.chartGraphics.moveTo(0, 0);
|
||||
this.chartGraphics.lineTo(game.world.width - 200, 0);
|
||||
}
|
||||
|
||||
printRecord(index, date, score, min, max) {
|
||||
const CHART_GAP_PX = 180;
|
||||
drawRecordGraph(index, date, score, min, max) {
|
||||
const CHART_GAP_PX = 120;
|
||||
const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
|
||||
|
||||
let dateText = game.add.text(100 + index * CHART_GAP_PX, game.world.height - 140, date, style);
|
||||
@@ -101,26 +95,6 @@ class Start {
|
||||
this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * ( (score - min) / (max - min) ));
|
||||
}
|
||||
|
||||
|
||||
loadTypingStageData() {
|
||||
var self = this;
|
||||
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
// console.log("onreadystatechange : " + xhr);
|
||||
// console.log("xhr.readyState : " + xhr.readyState);
|
||||
// console.log("xhr.status : " + xhr.status);
|
||||
if(xhr.readyState == 4 && xhr.status == 200) {
|
||||
// console.log(xhr.responseText);
|
||||
var jsonData = JSON.parse(xhr.responseText);
|
||||
self.updateStageButton(jsonData);
|
||||
}
|
||||
}
|
||||
xhr.open('GET', 'activated_stage_list.php', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
startStage() {
|
||||
location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user