From ca4847a3979e077f83d52af3b875d33c28463b8c 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: Thu, 10 May 2018 07:29:54 +0900 Subject: [PATCH] Fix: graph for record/date --- src/game/lib/app_info_manager.js | 2 +- src/game/start/start.js | 47 +++++++++++++++++++------------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/game/lib/app_info_manager.js b/src/game/lib/app_info_manager.js index 85cbf9e..408e177 100644 --- a/src/game/lib/app_info_manager.js +++ b/src/game/lib/app_info_manager.js @@ -24,7 +24,7 @@ class AppInfoManager { this.registerAppInfo(new AppInfo("login", "로그인", "")); this.registerAppInfo(new AppInfo("menu", "메뉴", "")); this.registerAppInfo(new AppInfo("space_invaders", "외계인 침공", - "외계인이 나타났다 사라집니다.\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n물리쳐 주세요." + "외계인이 나타났다!\n마우스 왼쪽 버튼으로\n외계인을 클릭해서 물리쳐 주세요." )); this.registerAppInfo(new AppInfo("card_matching", "카드 짝 맞추기", "외계인이 나타났다 사라집니다.\n\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n\n물리쳐 주세요." diff --git a/src/game/start/start.js b/src/game/start/start.js index d591c33..80e5559 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -9,6 +9,8 @@ let Start = { create: function() { this.game.stage.backgroundColor = '#4d4d4d'; + this.chartGraphics = game.add.graphics(100, game.world.height - 120); + // top let backButton = new BackButton( () => { @@ -52,30 +54,37 @@ let Start = { }, printRecordHistory: function() { - let graphics = game.add.graphics(100, game.world.height - 120); + 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); + this.chartGraphics.lineStyle(3, 0xffd900, 1); + this.chartGraphics.moveTo(0, 0); + this.chartGraphics.lineTo(game.world.width - 200, 0); + }, + + printRecord: function(index, date, record) { + const CHART_GAP_PX = 180; const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; - date = game.add.text(100, game.world.height - 140, "05/10", style); - date.setTextBounds(0, 0, 100, 100); - date.stroke = "#333"; - date.strokeThickness = 1; - record = game.add.text(100, game.world.height - 300, "15,460", style); - record.setTextBounds(0, 0, 100, 100); - record.stroke = "#333"; - record.strokeThickness = 1; + 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 = game.add.graphics(100, game.world.height - 120); - graphics.lineStyle(50, 0xffffff, 1); - graphics.beginFill(0xdddddd, 1); - // graphics.drawRect(50, 250, 100, 100); - graphics.moveTo(50, 0); - graphics.lineTo(50, -100); - graphics.endFill(); + let recordText = game.add.text(100 + index * CHART_GAP_PX, game.world.height - 300, record, style); + recordText.setTextBounds(0, 0, 100, 100); + recordText.stroke = "#333"; + recordText.strokeThickness = 1; - graphics.lineStyle(3, 0xffd900, 1); - graphics.moveTo(0, 0); - graphics.lineTo(game.world.width - 200, 0); + 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(); },