From 4ed60df97bae5e7487d084e29dd2923cd65ce5d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Tue, 15 May 2018 17:22:01 +0900 Subject: [PATCH] Add: Result --- src/game/global/global_variables.js | 14 +- src/game/result/main.js | 12 ++ src/game/result/result.js | 204 ++++++++++++++++++++++++++++ src/web/client/result.html | 46 +++++++ 4 files changed, 271 insertions(+), 5 deletions(-) create mode 100644 src/game/result/main.js create mode 100644 src/game/result/result.js create mode 100644 src/web/client/result.html diff --git a/src/game/global/global_variables.js b/src/game/global/global_variables.js index 5f1ce7c..0aa88f7 100644 --- a/src/game/global/global_variables.js +++ b/src/game/global/global_variables.js @@ -22,15 +22,19 @@ const GAME_SCREEN_SIZE = { x: 1024, y: 768 } let sessionStorageManager = new SessionStorageManager(); { - // if(isDebugMode()) { - // sessionStorageManager.playerName = "박지상"; - // sessionStorageManager.playerUserID = 1; - // sessionStorageManager.playingAppName = "space_invaders"; - // } + if(isDebugMode()) { + sessionStorageManager.playerName = "박지상"; + sessionStorageManager.playerUserID = 1; + sessionStorageManager.playingAppName = "space_invaders"; + sessionStorageManager.score = 1000; + sessionStorageManager.highscore = 2000; + } console.log("playerName : " + sessionStorageManager.playerName); console.log("playerUserID : " + sessionStorageManager.playerUserID); console.log("playingAppName : " + sessionStorageManager.playingAppName); + console.log("score : " + sessionStorageManager.score); + console.log("highscore : " + sessionStorageManager.highscore); } let appInfoManager = new AppInfoManager(); diff --git a/src/game/result/main.js b/src/game/result/main.js new file mode 100644 index 0000000..e4eedc5 --- /dev/null +++ b/src/game/result/main.js @@ -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'); diff --git a/src/game/result/result.js b/src/game/result/result.js new file mode 100644 index 0000000..3802d37 --- /dev/null +++ b/src/game/result/result.js @@ -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"; + } + +} \ No newline at end of file diff --git a/src/web/client/result.html b/src/web/client/result.html new file mode 100644 index 0000000..a1acfea --- /dev/null +++ b/src/web/client/result.html @@ -0,0 +1,46 @@ + + + + + 준비 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file