Add: Result
This commit is contained in:
@@ -22,15 +22,19 @@ const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
|
|||||||
|
|
||||||
let sessionStorageManager = new SessionStorageManager();
|
let sessionStorageManager = new SessionStorageManager();
|
||||||
{
|
{
|
||||||
// if(isDebugMode()) {
|
if(isDebugMode()) {
|
||||||
// sessionStorageManager.playerName = "박지상";
|
sessionStorageManager.playerName = "박지상";
|
||||||
// sessionStorageManager.playerUserID = 1;
|
sessionStorageManager.playerUserID = 1;
|
||||||
// sessionStorageManager.playingAppName = "space_invaders";
|
sessionStorageManager.playingAppName = "space_invaders";
|
||||||
// }
|
sessionStorageManager.score = 1000;
|
||||||
|
sessionStorageManager.highscore = 2000;
|
||||||
|
}
|
||||||
|
|
||||||
console.log("playerName : " + sessionStorageManager.playerName);
|
console.log("playerName : " + sessionStorageManager.playerName);
|
||||||
console.log("playerUserID : " + sessionStorageManager.playerUserID);
|
console.log("playerUserID : " + sessionStorageManager.playerUserID);
|
||||||
console.log("playingAppName : " + sessionStorageManager.playingAppName);
|
console.log("playingAppName : " + sessionStorageManager.playingAppName);
|
||||||
|
console.log("score : " + sessionStorageManager.score);
|
||||||
|
console.log("highscore : " + sessionStorageManager.highscore);
|
||||||
}
|
}
|
||||||
let appInfoManager = new AppInfoManager();
|
let appInfoManager = new AppInfoManager();
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
/////////////////////////////
|
||||||
|
// Main game
|
||||||
|
|
||||||
|
const CONTENT_ID = "Result";
|
||||||
|
|
||||||
|
let game = new Phaser.Game(
|
||||||
|
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
|
||||||
|
Phaser.CANVAS, CONTENT_ID
|
||||||
|
);
|
||||||
|
|
||||||
|
game.state.add('Result', Result);
|
||||||
|
game.state.start('Result');
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
/////////////////////////////
|
||||||
|
// Start
|
||||||
|
|
||||||
|
class Result {
|
||||||
|
|
||||||
|
preload() {
|
||||||
|
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.historyRecordManager = new HistoryRecordManager();
|
||||||
|
|
||||||
|
this.game.stage.backgroundColor = '#4d4d4d';
|
||||||
|
this.chartGraphics = game.add.graphics(100, game.world.height - 120);
|
||||||
|
|
||||||
|
|
||||||
|
// top
|
||||||
|
let backButton = new BackButton( () => {
|
||||||
|
location.href = '../../web/client/menu_app.html';
|
||||||
|
});
|
||||||
|
|
||||||
|
let fullscreenButton = new FullscreenButton(this.game);
|
||||||
|
|
||||||
|
|
||||||
|
// contents
|
||||||
|
// this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName));
|
||||||
|
this.printScore();
|
||||||
|
this.makeStartButton();
|
||||||
|
|
||||||
|
this.loadHistoryRecords();
|
||||||
|
// this.printHistoryRecords();
|
||||||
|
|
||||||
|
this.loadRanking();
|
||||||
|
this.printRanking();
|
||||||
|
|
||||||
|
|
||||||
|
// bottom
|
||||||
|
let screenBottom = new ScreenBottom(game);
|
||||||
|
screenBottom.makeBottomLine();
|
||||||
|
screenBottom.printBottomLeftText("게임 진행 정보");
|
||||||
|
let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
|
||||||
|
screenBottom.printBottomCenterText(playingAppName);
|
||||||
|
screenBottom.printBottomRightText(sessionStorageManager.playerName);
|
||||||
|
|
||||||
|
// this.loadTypingStageData();
|
||||||
|
}
|
||||||
|
|
||||||
|
printScore() {
|
||||||
|
const style = { font: "52px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
|
||||||
|
game.add.text(0, 0, "결과", style)
|
||||||
|
.setTextBounds(0, 0, game.world.width, 80)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
let posY = 100;
|
||||||
|
let score = NumberUtil.numberWithCommas(sessionStorageManager.score);
|
||||||
|
console.log(score);
|
||||||
|
style.font = "bold 80px Arial";
|
||||||
|
game.add.text(0, 0, score, style)
|
||||||
|
.setTextBounds(0, posY, game.world.width, 60)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
let highscore = NumberUtil.numberWithCommas(sessionStorageManager.highscore);
|
||||||
|
console.log(highscore);
|
||||||
|
style.font = "32px Arial";
|
||||||
|
game.add.text(0, 0, "오늘 최고 기록 : " + highscore, style)
|
||||||
|
.setTextBounds(0, posY + 80, game.world.width, 40);
|
||||||
|
// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
printHowToPlay(text) {
|
||||||
|
const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
|
||||||
|
let howToPlayText = game.add.text(0, 0, appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName), style);
|
||||||
|
howToPlayText.setTextBounds(100, 100, game.world.width - 100, 200);
|
||||||
|
howToPlayText.stroke = "#333";
|
||||||
|
howToPlayText.strokeThickness = 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
makeStartButton() {
|
||||||
|
let setting = new RoundRectButtonSetting(200, 100);
|
||||||
|
setting.fontStyle.fontWeight = "bold";
|
||||||
|
|
||||||
|
let startButton = new RoundRectButton(setting, "다시 시작", this.startStage);
|
||||||
|
startButton.move(game.world.centerX, game.world.height / 2 - 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadHistoryRecords() {
|
||||||
|
this.historyRecordManager.clear();
|
||||||
|
|
||||||
|
this.historyRecordManager.push(new HistoryRecordData("05/10", 15460));
|
||||||
|
this.historyRecordManager.push(new HistoryRecordData("05/11", 13040));
|
||||||
|
this.historyRecordManager.push(new HistoryRecordData("05/12", 16460));
|
||||||
|
this.historyRecordManager.push(new HistoryRecordData("05/13", 15060));
|
||||||
|
this.historyRecordManager.push(new HistoryRecordData("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.record, underValue, upperValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartGraphics.lineStyle(3, 0xffd900, 1);
|
||||||
|
this.chartGraphics.moveTo(0, 0);
|
||||||
|
this.chartGraphics.lineTo(game.world.width - 200, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
printRecord(index, date, record, min, max) {
|
||||||
|
const CHART_GAP_PX = 180;
|
||||||
|
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);
|
||||||
|
dateText.setTextBounds(0, 0, 100, 100);
|
||||||
|
dateText.stroke = "#333";
|
||||||
|
dateText.strokeThickness = 1;
|
||||||
|
|
||||||
|
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.moveTo(50 + index * CHART_GAP_PX, 0);
|
||||||
|
this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * ( (record - min) / (max - min) ));
|
||||||
|
}
|
||||||
|
|
||||||
|
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", 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";
|
||||||
|
game.add.text(posX, 4, "수업시간 순위", style)
|
||||||
|
.setTextBounds(0, posY, 200, 120)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
arrayTabStyle.tabs = [ 40, 100, 100 ];
|
||||||
|
arrayTabStyle.fill = "#fff";
|
||||||
|
this.textHourRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
posX = 560;
|
||||||
|
game.add.text(posX - 10, 4, "오늘의 순위", style)
|
||||||
|
.setTextBounds(0, posY, 200, 120)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
this.textDayRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
posX = 780;
|
||||||
|
game.add.text(posX - 10, 4, "이달의 순위", style)
|
||||||
|
.setTextBounds(0, posY, 200, 120)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
|
||||||
|
this.textMonthRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
|
||||||
|
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>준비</title>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
|
||||||
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script> -->
|
||||||
|
<script src="../../../resources/js/phaser.min.js"></script>
|
||||||
|
|
||||||
|
<!-- global source files -->
|
||||||
|
<script src="../../game/lib/app_info_manager.js"></script>
|
||||||
|
<script src="../../game/lib/session_storage_manager.js"></script>
|
||||||
|
<script src="../../game/global/global_variables.js"></script>
|
||||||
|
|
||||||
|
<!-- library source files -->
|
||||||
|
<script src="../../game/lib/number_util.js"></script>
|
||||||
|
<script src="../../game/lib/history_record_manager.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>
|
||||||
|
<script src="../../game/lib/fullscreen_button.js"></script>
|
||||||
|
<script src="../../game/lib/screen_bottom.js"></script>
|
||||||
|
|
||||||
|
<!-- source files -->
|
||||||
|
<script src="../../game/result/result.js"></script>
|
||||||
|
<script src="../../game/result/main.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="Start" style="text-align:center;" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user