Add: Google webfonts

This commit is contained in:
2019-07-21 00:08:24 +09:00
parent 841afa6c1c
commit 72a8a39770
4 changed files with 420 additions and 241 deletions
+22 -1
View File
@@ -3,10 +3,31 @@
var CONTENT_ID = "MainMenu";
var game = new Phaser.Game(
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
Phaser.CANVAS, CONTENT_ID
);
game.state.add('MainMenu', MainMenu);
WebFontConfig = {
// 'active' means all requested fonts have finished loading
// We set a 1 second delay before calling 'createText'.
// For some reason if we don't the browser cannot render the text the first time it's created.
active: function() { game.time.events.add(Phaser.Timer.SECOND * 0, fontLoaded, this); },
// The Google Fonts we want to load (specify as many as you like in the array)
google: {
families: ['Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Brush Script']
// families: ['Nanum Brush Script']
}
};
var mainMenu = new MainMenu();
game.state.add('MainMenu', mainMenu);
game.state.start('MainMenu');
function fontLoaded() {
console.log("fontLoaded #1");
mainMenu.fontLoaded();
}
+279 -240
View File
@@ -1,246 +1,285 @@
var MainMenu = {
MainMenu.prototype = Object.create(Phaser.State.prototype);
MainMenu.constructor = MainMenu;
preload: function() {
game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png');
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
},
function MainMenu() {
}
create: function() {
game.stage.backgroundColor = '#4d4d4d';
MainMenu.prototype.preload = function() {
// game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png');
game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
}
// keyboard shortcut
this.keyboardShortcut = new KeyboardShortcut();
this.keyboardShortcut.addCallback(
Phaser.KeyCode.ESC, // keyCode
null, // keyDownHandler
(function() { this.back(); }).bind(this), // keyUpHandler
"menu_app" // callerClassName
// fontLoaded, create method for Google WebFonts test
/*
MainMenu.prototype.fontLoaded = function() {
console.log("fontLoaded");
// this.loadingImage.alpha = 0;
// this.text.font = 'Nanum Gothic';
// text2.font = 'Nanum Brush Script';
// this.text3.font = 'Nanum Brush Script';
}
MainMenu.prototype.create = function() {
console.log("create");
game.stage.backgroundColor = '#4d4d4d';
this.loadingImage = game.add.sprite(GAME_SCREEN_SIZE.x / 2, GAME_SCREEN_SIZE.y / 2, "tile_choco");
this.text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
this.text.anchor.setTo(0.5);
this.text.fontSize = 60;
this.text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴");
this.text2.anchor.setTo(0.5);
this.text2.fontSize = 60;
this.text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 브러시 스크립트 웹 폰트\ngoogle web fonts");
this.text3.anchor.setTo(0.5);
this.text3.fontSize = 60;
}
*/
MainMenu.prototype.create = function() {
game.stage.backgroundColor = '#4d4d4d';
}
MainMenu.prototype.fontLoaded = function() {
// keyboard shortcut
this.keyboardShortcut = new KeyboardShortcut();
this.keyboardShortcut.addCallback(
Phaser.KeyCode.ESC, // keyCode
null, // keyDownHandler
(function() { this.back(); }).bind(this), // keyUpHandler
"menu_app" // callerClassName
);
// bg
game.add.graphics()
.beginFill(MainColor.LIGHT_CHOCO_HEX, 1)
.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
// top ui
// var screenTopUI = new ScreenTopUI();
// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
// screenTopUI.makeFullScreenButton();
// this.loadAllowEditEnterCode(screenTopUI);
// bottom ui
var screenBottomUI = new ScreenBottomUI();
// ScreenBottomUI.printLeftText("게임 진행 정보");
// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
// ScreenBottomUI.printCenterText(playingAppName);
screenBottomUI.printCenterText("메뉴");
screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
new WelcomePlayerText(sessionStorageManager.getPlayerName());
if(isExperiencePlayerAccount()) {
game.time.events.add(Phaser.Timer.SECOND * 2.5,
(function() { new NoticeExperiencePlayerText(); } ),
this
);
// bg
game.add.graphics()
.beginFill(MainColor.LIGHT_CHOCO_HEX, 1)
.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
// top ui
// var screenTopUI = new ScreenTopUI();
// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
// screenTopUI.makeFullScreenButton();
// this.loadAllowEditEnterCode(screenTopUI);
// bottom ui
var screenBottomUI = new ScreenBottomUI();
// ScreenBottomUI.printLeftText("게임 진행 정보");
// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
// ScreenBottomUI.printCenterText(playingAppName);
screenBottomUI.printCenterText("메뉴");
screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
new WelcomePlayerText(sessionStorageManager.getPlayerName());
if(isExperiencePlayerAccount()) {
game.time.events.add(Phaser.Timer.SECOND * 2.5,
(function() { new NoticeExperiencePlayerText(); } ),
this
);
}
this.loadAppData();
},
back: function() {
sessionStorageManager.clear();
location.href = '../../web/client/login.html';
},
loadAllowEditEnterCode: function(screenTopUI) {
var dbConnectManager = new DBConnectManager();
dbConnectManager.requestAllowEditEnterCode(
sessionStorageManager.getMaestroID(),
(function(replyJSON) {
if(replyJSON["AllowEditEnterCode"] == "1") {
screenTopUI.makeSetupButton( (function() {
console.log("setup");
location.href = '../../web/client/setup.html';
}).bind(this) );
}
}).bind(this),
(function(replyJSON) {
this.loadFailed(replyJSON);
}).bind(this)
);
},
loadAppData: function() {
var dbConnectManager = new DBConnectManager();
dbConnectManager.requestMenuAppList(
sessionStorageManager.getMaestroID(),
(function(replyJSON) {
this.loadSucceeded(replyJSON);
}).bind(this),
(function(replyJSON) {
this.loadFailed(replyJSON);
}).bind(this)
);
},
loadSucceeded: function(replyJSON) {
// console.log(replyJSON);
this.makeMouseAppButtons(
replyJSON.MouseAppList,
replyJSON.MouseActiveAppList
);
this.makeTypingButtons(
replyJSON.TypingPracticeAppCount,
replyJSON.TypingTestAppCount,
replyJSON.TypingAppList,
replyJSON.TypingActiveAppList
);
},
hasApp: function(appID, appList) {
for(var i = 0; i < appList.length; i++) {
if(appList[i].AppID === appID)
return true;
}
return false;
},
makeMouseAppButtons: function(appList, activeAppList) {
// console.log(appList);
var mouseAppCount = Object.keys(appList).length;
for(var i = 0; i < mouseAppCount; i++) {
var posX = this.getButtonPosX(i, mouseAppCount);
var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
var app = appList[i];
var gameAppButton = new GameAppButton(
posX, posY,
GameAppButton.TYPE_MOUSE_APP,
RoundRectButton.NONE_ICON, app.KoreanName,
{
AppID: app.AppID,
AppName: app.AppName,
KoreanName: app.KoreanName
}
);
if(!this.hasApp(app.AppID, activeAppList))
gameAppButton.setInputEnabled(false);
}
},
makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
// console.log(typingPracticeAppCount);
// console.log(typingTestAppCount);
// console.log(appList);
var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
var isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
var typingAppTotalCount = Object.keys(appList).length;
var typingAppIndex = 0;
// typing tab buttons
var typingPracticeTabButton = new TypingTabButton(
TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
"", "타자 연습",
(function() {
location.href = '../../web/client/menu_typing_practice.html';
})
);
if(typingPracticeAppCount === 0)
typingPracticeTabButton.setInputEnabled(false);
var typingTestTabButton = new TypingTabButton(
TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
"", "타자 시험",
(function() {
location.href = '../../web/client/menu_typing_test.html';
})
);
if(typingTestAppCount === 0)
typingTestTabButton.setInputEnabled(false);
// typing app buttons
for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
var posX = this.getButtonPosX(
typingButtonIndex, typingAppTotalCount
);
var posY = this.getButtonPosY(
typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
);
var app = appList[typingAppIndex];
var isKoreanTypingApp = app.AppID < 32 ? true : false;
var gameAppButton = new GameAppButton(
posX, posY, GameAppButton.TYPE_TYPING_APP,
RoundRectButton.NONE_ICON, // "icon_fullscreen",
// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
app.KoreanName,
{
AppID: app.AppID,
AppName: app.AppName,
KoreanName: app.KoreanName
}
);
if(!this.hasApp(app.AppID, activeAppList))
gameAppButton.setInputEnabled(false);
typingAppIndex++;
}
},
getButtonPosX: function(index, buttonCount) {
var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
var rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
var columnIndex = index % maxColumnNum;
// console.log("columnIndex : " + columnIndex);
var rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
var columnCountForThisRow = 0;
if(rowIndex < rowCount - 1)
columnCountForThisRow = maxColumnNum;
else
columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
// console.log("columnCountForThisRow : " + columnCountForThisRow);
var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
return startX + gap * columnIndex;
},
getButtonPosY: function(index, buttonCount, startPosY) {
var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
var rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
var rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
return startY + gap * rowIndex;
},
loadFailed: function(replyJSON) {
// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
}
this.loadAppData();
}
MainMenu.prototype.back = function() {
sessionStorageManager.clear();
location.href = '../../web/client/login.html';
}
MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
var dbConnectManager = new DBConnectManager();
dbConnectManager.requestAllowEditEnterCode(
sessionStorageManager.getMaestroID(),
(function(replyJSON) {
if(replyJSON["AllowEditEnterCode"] == "1") {
screenTopUI.makeSetupButton( (function() {
console.log("setup");
location.href = '../../web/client/setup.html';
}).bind(this) );
}
}).bind(this),
(function(replyJSON) {
this.loadFailed(replyJSON);
}).bind(this)
);
}
MainMenu.prototype.loadAppData = function() {
var dbConnectManager = new DBConnectManager();
dbConnectManager.requestMenuAppList(
sessionStorageManager.getMaestroID(),
(function(replyJSON) {
this.loadSucceeded(replyJSON);
}).bind(this),
(function(replyJSON) {
this.loadFailed(replyJSON);
}).bind(this)
);
}
MainMenu.prototype.loadSucceeded = function(replyJSON) {
// console.log(replyJSON);
this.makeMouseAppButtons(
replyJSON.MouseAppList,
replyJSON.MouseActiveAppList
);
this.makeTypingButtons(
replyJSON.TypingPracticeAppCount,
replyJSON.TypingTestAppCount,
replyJSON.TypingAppList,
replyJSON.TypingActiveAppList
);
}
MainMenu.prototype.hasApp = function(appID, appList) {
for(var i = 0; i < appList.length; i++) {
if(appList[i].AppID === appID)
return true;
}
return false;
}
MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
// console.log(appList);
var mouseAppCount = Object.keys(appList).length;
for(var i = 0; i < mouseAppCount; i++) {
var posX = this.getButtonPosX(i, mouseAppCount);
var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
var app = appList[i];
var gameAppButton = new GameAppButton(
posX, posY,
GameAppButton.TYPE_MOUSE_APP,
RoundRectButton.NONE_ICON, app.KoreanName,
{
AppID: app.AppID,
AppName: app.AppName,
KoreanName: app.KoreanName
}
);
gameAppButton.text.font = "Nanum Brush Script";
if(!this.hasApp(app.AppID, activeAppList))
gameAppButton.setInputEnabled(false);
}
}
MainMenu.prototype.makeTypingButtons = function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) {
// console.log(typingPracticeAppCount);
// console.log(typingTestAppCount);
// console.log(appList);
var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
var isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
var typingAppTotalCount = Object.keys(appList).length;
var typingAppIndex = 0;
// typing tab buttons
var typingPracticeTabButton = new TypingTabButton(
TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
"", "타자 연습",
(function() {
location.href = '../../web/client/menu_typing_practice.html';
})
);
if(typingPracticeAppCount === 0)
typingPracticeTabButton.setInputEnabled(false);
var typingTestTabButton = new TypingTabButton(
TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
"", "타자 시험",
(function() {
location.href = '../../web/client/menu_typing_test.html';
})
);
if(typingTestAppCount === 0)
typingTestTabButton.setInputEnabled(false);
// typing app buttons
for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
var posX = this.getButtonPosX(
typingButtonIndex, typingAppTotalCount
);
var posY = this.getButtonPosY(
typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
);
var app = appList[typingAppIndex];
var isKoreanTypingApp = app.AppID < 32 ? true : false;
var gameAppButton = new GameAppButton(
posX, posY, GameAppButton.TYPE_TYPING_APP,
RoundRectButton.NONE_ICON, // "icon_fullscreen",
// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
app.KoreanName,
{
AppID: app.AppID,
AppName: app.AppName,
KoreanName: app.KoreanName
}
);
if(!this.hasApp(app.AppID, activeAppList))
gameAppButton.setInputEnabled(false);
typingAppIndex++;
}
}
MainMenu.prototype.getButtonPosX = function(index, buttonCount) {
var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
var rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
var columnIndex = index % maxColumnNum;
// console.log("columnIndex : " + columnIndex);
var rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
var columnCountForThisRow = 0;
if(rowIndex < rowCount - 1)
columnCountForThisRow = maxColumnNum;
else
columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
// console.log("columnCountForThisRow : " + columnCountForThisRow);
var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
return startX + gap * columnIndex;
}
MainMenu.prototype.getButtonPosY = function(index, buttonCount, startPosY) {
var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
var rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
var rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
var startY = startPosY - ( (gap / 2) * (rowCount - 1) );
return startY + gap * rowIndex;
}
MainMenu.prototype.loadFailed = function(replyJSON) {
// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
}