diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 252a71c..ea498fd 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -11,6 +11,8 @@ MainMenu.prototype.preload = function() { game.load.image('keyboard', '../../../resources/image/icon/keyboard.png'); game.load.image('mouse', '../../../resources/image/icon/mouse.png'); + Animal.loadResources(); + game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); } @@ -60,6 +62,11 @@ MainMenu.prototype.create = function() { graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT); this.appGroupTabLayout = null; + + + this.animalRecordList = new AnimalRecordList(AnimalRecordList.TYPE_MENU); + this.animalRecordList.printScore(AnimalList.TYPE_TEST); + // this.animalRecordList.printScore(AnimalList.TYPE_PRACTICE); } MainMenu.prototype.fontLoaded = function() { @@ -191,7 +198,7 @@ MainMenu.prototype.makeAppGroupButtons = function() { ); - this.appGroupTabLayout = new TabLayout(80, 0, 864, 70); + this.appGroupTabLayout = new TabLayout(100, 0, 844, 70); var typingFingerGroupTab = new AppGroupTab( (function() { console.log("typing finger position"); }).bind(this) ); typingFingerGroupTab.reserveIcon("keyboard"); @@ -218,82 +225,25 @@ MainMenu.prototype.makeAppGroupButtons = function() { mousePlayGroupTab.reserveSubText("놀이"); this.appGroupTabLayout.add(mousePlayGroupTab); - - /* - // typing practice - var typingPracticeKoreanAppGroupTab = new AppGroupTab( - (function() { console.log("typing practice"); }).bind(this) - ); - typingPracticeKoreanAppGroupTab.reserveIcon("home"); - typingPracticeKoreanAppGroupTab.reserveSubText("한글 타자연습"); - this.appGroupTabLayout.add(typingPracticeKoreanAppGroupTab); - - var typingPracticeEnglishAppGroupTab = new AppGroupTab( - (function() { console.log("typing practice"); }).bind(this) - ); - typingPracticeEnglishAppGroupTab.reserveIcon("home"); - typingPracticeEnglishAppGroupTab.reserveSubText("영문 타자연습"); - this.appGroupTabLayout.add(typingPracticeEnglishAppGroupTab); - - - // typing test - var typingTestAppKoreaGroupTab = new AppGroupTab( - (function() { console.log("typing test"); }).bind(this) - ); - typingTestAppKoreaGroupTab.reserveMainText("Typing test"); - typingTestAppKoreaGroupTab.reserveSubText("한글 타자시험"); - this.appGroupTabLayout.add(typingTestAppKoreaGroupTab); - - var typingTestAppEnglishGroupTab = new AppGroupTab( - (function() { console.log("typing test"); }).bind(this) - ); - typingTestAppEnglishGroupTab.reserveMainText("Typing test"); - typingTestAppEnglishGroupTab.reserveSubText("영문 타자시험"); - this.appGroupTabLayout.add(typingTestAppEnglishGroupTab); - - - // typing exam - var typingExamAppKoreaGroupTab = new AppGroupTab( - (function() { console.log("typing exam"); }).bind(this) - ); - typingExamAppKoreaGroupTab.reserveMainText("Typing exam"); - typingExamAppKoreaGroupTab.reserveSubText("한글 타자검정"); - this.appGroupTabLayout.add(typingExamAppKoreaGroupTab); - - var typingExamAppEnglishGroupTab = new AppGroupTab( - (function() { console.log("typing exam"); }).bind(this) - ); - typingExamAppEnglishGroupTab.reserveMainText("Typing exam"); - typingExamAppEnglishGroupTab.reserveSubText("영문 타자검정"); - this.appGroupTabLayout.add(typingExamAppEnglishGroupTab); - - - // typing play - var typingPlayAppKoreaGroupTab = new AppGroupTab( - (function() { console.log("typing game"); }).bind(this) - ); - typingPlayAppKoreaGroupTab.reserveMainText("Typing game"); - typingPlayAppKoreaGroupTab.reserveSubText("한글 타자놀이"); - this.appGroupTabLayout.add(typingPlayAppKoreaGroupTab); - - var typingPlayAppEnglishGroupTab = new AppGroupTab( - (function() { console.log("typing game"); }).bind(this) - ); - typingPlayAppEnglishGroupTab.reserveMainText("Typing game"); - typingPlayAppEnglishGroupTab.reserveSubText("영문 타자놀이"); - this.appGroupTabLayout.add(typingPlayAppEnglishGroupTab); - - - // typing practice - var mousePlayAppGroupTab = new AppGroupTab( - (function() { console.log("mouse game"); }).bind(this) - ); - mousePlayAppGroupTab.reserveMainText("Mouse game"); - mousePlayAppGroupTab.reserveSubText("마우스놀이"); - this.appGroupTabLayout.add(mousePlayAppGroupTab); - */ - this.appGroupTabLayout.createTabs(); + + + var languageTabHeight = 48; + this.languageTabLayout = new TabLayout(0, GAME_SCREEN_SIZE.y - languageTabHeight, GAME_SCREEN_SIZE.x, languageTabHeight); + + var koreanTab = new AppGroupTab( (function() { console.log("Language : Korean"); }).bind(this) ); + koreanTab.reserveMainText("한국어"); + // koreanTab.reserveIcon("keyboard"); + // koreanTab.reserveSubText("손가락 위치"); + this.languageTabLayout.add(koreanTab); + + var englishTab = new AppGroupTab( (function() { console.log("Language : English"); }).bind(this) ); + englishTab.reserveMainText("영어"); + // englishTab.reserveIcon("keyboard"); + // englishTab.reserveSubText("연습"); + this.languageTabLayout.add(englishTab); + + this.languageTabLayout.createTabs(); } diff --git a/src/game/typing/lib/animal_record_list.js b/src/game/typing/lib/animal_record_list.js new file mode 100644 index 0000000..fa83c6d --- /dev/null +++ b/src/game/typing/lib/animal_record_list.js @@ -0,0 +1,129 @@ +function AnimalRecordList(type) { + this.type = type; + + this.animals = []; + this.activeAnimalIndex = -1; + + var animalCount = Animal.SPECIES_DATA.length; + var lineWidth = GAME_SCREEN_SIZE.x - AnimalRecordList.MARGIN_X * 2; + // console.log("lineWidth : " + lineWidth); + var offsetAnimal = lineWidth / (animalCount - 1); + // console.log("animalCount : " + animalCount); + // console.log("offsetAnimal : " + offsetAnimal); + + this.activeAnimalIndex = 0; + + var bgColor = AnimalRecordList.COLOR_BG; + var posY = AnimalRecordList.ANIMAL_LIST_POS_Y; + if(this.type === AnimalRecordList.TYPE_MENU) { + bgColor = MainColor.LIGHT_CHOCO_HEX; + posY = AnimalRecordList.ANIMAL_LIST_MENU_POS_Y; + } + + game.add.graphics() + .beginFill(bgColor, 1) + .drawRect( + 0, posY, + game.world.width, 80 + ); + + for(var i = 0; i < animalCount; i++) { + this.animals[i] = new Animal( + Animal.TYPE_ICON, + i, + AnimalRecordList.MARGIN_X + offsetAnimal * i, + posY + AnimalRecordList.ANIMAL_OFFSET_Y + ); + // this.inactivate(i); + } + + // this.activate(this.activeAnimalIndex); + // this.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE); +} + +AnimalRecordList.prototype.printScore = function(type) { + var animalCount = Animal.SPECIES_DATA.length; + var lineWidth = GAME_SCREEN_SIZE.x - AnimalRecordList.MARGIN_X * 2; + // console.log("lineWidth : " + lineWidth); + var offsetAnimal = lineWidth / (animalCount - 1); + + var titleTextStyle = { font: "16px Arial", fill: "#fff", align: "center"}; + var typingCount = 0; + var animalData = null; + + var posY = AnimalRecordList.ANIMAL_LIST_POS_Y + AnimalRecordList.RECORD_TEXT_OFFSET_Y; + if(this.type === AnimalRecordList.TYPE_MENU) + posY = AnimalRecordList.ANIMAL_LIST_MENU_POS_Y + AnimalRecordList.RECORD_TEXT_MENU_OFFSET_Y; + + for(var i = 0; i < animalCount; i++) { + animalData = Animal.SPECIES_DATA[i]; + if(type == AnimalRecordList.TYPE_PRACTICE) + typingCount = RecordUtil.getRecordValueWithUnit(animalData.practiceTypingCount, 1); + else + typingCount = RecordUtil.getRecordValueWithUnit(animalData.testTypingCount, 1); + + var recordText = game.add.text( + AnimalRecordList.MARGIN_X + offsetAnimal * i, + posY, + typingCount, titleTextStyle + ); + recordText.anchor.set(0.5); + if(this.type === AnimalRecordList.TYPE_MENU) + recordText.addColor(MainColor.LIGHTER_CHOCO_STRING, 0); + else + recordText.addColor(AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT, 0); + recordText.stroke = "#333"; + recordText.strokeThickness = 3; + recordText.setShadow(1, 1, 'rgba(0, 0, 0, 0.5)', 2); + } +} + +AnimalRecordList.prototype.activate = function(index) { + this.inactivate(this.activeAnimalIndex); + + this.activeAnimalIndex = index; + + this.animals[this.activeAnimalIndex].setScale(2); + this.animals[index].setAlpha(1); + this.animate(this.activeAnimalIndex); +} + +AnimalRecordList.prototype.inactivate = function(index) { + this.animals[index].stopAnimation(); + this.animals[index].setScale(1); + this.animals[index].setAlpha(AnimalRecordList.ALPHA_INACTIVE); +} + +AnimalRecordList.prototype.animate = function(index) { + var animalData = Animal.SPECIES_DATA[index]; + this.animals[index].startAnimation(animalData); +} + +AnimalRecordList.prototype.stopAnimation = function() { + this.animals[this.activeAnimalIndex].stopAnimation(); +} + +AnimalRecordList.prototype.tweenAnimation = function(animationType) { + this.animals[this.activeAnimalIndex].tweenAnimation(animationType); +} + + +AnimalRecordList.POS_Y = 800; + +AnimalRecordList.MARGIN_X = 100; +AnimalRecordList.ANIMAL_LIST_POS_Y = 90; +AnimalRecordList.RECORD_TEXT_OFFSET_Y = 36; + +AnimalRecordList.ALPHA_INACTIVE = 0.3; + +AnimalRecordList.TYPE_MENU = 0; +AnimalRecordList.TYPE_PRACTICE = 1; +AnimalRecordList.TYPE_TEST = 2; + +AnimalRecordList.ANIMAL_LIST_MENU_POS_Y = 640; +AnimalRecordList.ANIMAL_OFFSET_Y = 30; +AnimalRecordList.RECORD_TEXT_MENU_OFFSET_Y = 70; + +AnimalRecordList.COLOR_BG = MainColor.CHOCO_HEX; // 0x77aadd; //0x99ccff; +AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT = MainColor.LIGHTER_CHOCO_STRING; // "#bbddff"; +AnimalRecordList.COLOR_SCORE_CLEARED_TEXT = "#ffffff"; \ No newline at end of file diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index 986947f..dc9b801 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -40,6 +40,7 @@ + @@ -64,6 +65,10 @@ + + + +