jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: setup.html basic

Browse Source
This commit is contained in:
Jisang Park
2019-03-15 09:02:14 +09:00
parent 27fa44a01d
commit 65fd75eb95
4 changed files with 280 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/menu/menu_app.js
+4 -1
View File
@@ -44,7 +44,10 @@ var MenuApp = {
// top ui
var screenTopUI = new ScreenTopUI();
screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
screenTopUI.makeSetupButton( (function() { console.log("setup"); }).bind(this) );
screenTopUI.makeSetupButton( (function() {
console.log("setup");
location.href = '../../web/client/setup.html';
}).bind(this) );
screenTopUI.makeFullScreenButton();
src/game/setup/main.js
+13
View File
@@ -0,0 +1,13 @@
/////////////////////////////
// Main game
var CONTENT_ID = "Setup";
var game = new Phaser.Game(
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
Phaser.CANVAS, CONTENT_ID
);
game.state.add('Setup', Setup);
game.state.start('Setup');
src/game/setup/setup.js
+184
View File
@@ -0,0 +1,184 @@
var Setup = {
preload: function() {
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
game.load.image('icon_home', '../../../resources/image/icon/home.png');
},
create: function() {
this.game.stage.backgroundColor = '#4d4d4d';
this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
// keyboard shortcut
this.keyboardShortcut = new KeyboardShortcut();
this.keyboardShortcut.addCallback(
Phaser.KeyCode.ESC, // keyCode
null, // keyDownHandler
(function() { this.back(); }).bind(this), // keyUpHandler
"setup" // callerClassName
);
this.keyboardShortcut.addCallback(
Phaser.KeyCode.ENTER, // keyCode
null, // keyDownHandler
(function() { this.startMenu(); }).bind(this), // keyUpHandler
"start" // callerClassName
);
// top ui
var screenTopUI = new ScreenTopUI();
screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
screenTopUI.makeFullScreenButton();
/*
var textX = this.game.world.centerX - 320;
this.makeMaestroNameText(textX, 200);
this.makeNameText(textX, 300);
this.makeEnterCodeText(textX, 360);
if(sessionStorageManager.getMaestroName() != null) {
this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
} else {
if(isDebugMode()) {
this.inputTextMaestroName.canvasInput.value("삼화초");
this.inputTextName.canvasInput.value("박지상");
this.inputTextEnterCode.canvasInput.value("760621");
}
}
if(sessionStorageManager.getMaestroID() === null || sessionStorageManager.getMaestroID() == -1)
this.inputTextMaestroName.canvasInput.focus();
else
this.inputTextName.canvasInput.focus();
this.makeStartButton(game.world.centerX, game.world.centerY + 100);
*/
this.makeInfoText();
},
back: function() {
sessionStorageManager.clear();
location.href = '../../web/main/index.html';
},
makeMaestroNameText: function(x, y) {
this.makeTextField(x, y, "마에스트로 계정 :");
this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
this.inputTextMaestroName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
},
makeNameText: function(x, y) {
this.makeTextField(x, y, "이름 :");
this.inputTextName = this.makeInputTypeText(x, y, "");
this.inputTextName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
},
makeEnterCodeText: function(x, y) {
this.makeTextField(x, y, "입장번호 :");
this.inputTextEnterCode = this.makeInputTypeText(x, y, "");
this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
},
makeTextField: function(x, y, text) {
return game.add.text(x, y, text, this.textStyle)
.setTextBounds(0, 0, 200, 0)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.boundsAlignH = 'right';
},
makeInputTypeText: function(x, y, text) {
var inputText = new InputTypeText(x + 420, y);
inputText.anchor.set(0.5);
inputText.canvasInput.value('');
if(isDebugMode()) {
inputText.canvasInput.value(text);
}
inputText.canvasInput._onkeyup = (function() {
if(event.keyCode == Phaser.Keyboard.ENTER) {
this.startMenu();
}
}).bind(this);
return inputText;
},
makeStartButton: function(x, y) {
var setting = new RoundRectButtonSetting(x, y, 200, 100);
setting.fontStyle.fontWeight = "bold";
var startButton = new RoundRectButton(
setting,
RoundRectButton.NONE_ICON, "시작",
(function() { this.startMenu(); }).bind(this)
);
startButton.addShortcutText("Enter");
},
makeInfoText: function(x, y) {
var textStyle = { font: "30px Arial", fill: "#faa" };
this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
this.infoText.anchor.set(0.5);
this.infoText.stroke = "#333";
this.infoText.strokeThickness = 3;
},
startMenu: function() {
var maestroName = this.inputTextMaestroName.canvasInput._value;
sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
var enterCode = this.inputTextEnterCode.canvasInput._value;
if(maestroName == "") {
this.infoText.text = "마에스트로 계정 이름을 입력해주세요";
this.inputTextMaestroName.canvasInput.focus();
return;
} else if(sessionStorageManager.getPlayerName() == "") {
this.infoText.text = "학생의 이름을 입력해주세요";
this.inputTextName.canvasInput.focus();
return;
} else if(enterCode == "") {
this.infoText.text = "학생의 입장번호를 입력해주세요";
this.inputTextEnterCode.canvasInput.focus();
return;
}
var dbConnectManager = new DBConnectManager();
dbConnectManager.requestCheckPlayerLogin(
maestroName,
sessionStorageManager.getPlayerName(),
enterCode,
(function(jsonData) {
this.loginSucceeded(jsonData);
}).bind(this),
(function(jsonData) {
this.loginFailed(jsonData);
}).bind(this)
);
},
loginSucceeded: function(jsonData) {
sessionStorageManager.setMaestroID(jsonData['MaestroID']);
sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
sessionStorageManager.setPlayerID(jsonData['PlayerID']);
sessionStorageManager.setPlayerName(jsonData['PlayerName']);
sessionStorageManager.setPlayerAccountType(jsonData['PlayerAccountType']);
sessionStorageManager.setPlayingAppName("menu");
location.href = '../../web/client/menu_app.html';
// console.log("===== after login =====");
// console.log(sessionStorageManager.playerID);
},
loginFailed: function(jsonData) {
sessionStorageManager.clear();
// show retry message
// console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
if(jsonData["error"] !== null) {
this.infoText.text = jsonData["error"];
}
}
}
src/web/client/setup.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85912788-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-85912788-2');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N8PB4F3');</script>
<!-- End Google Tag Manager -->
<title>설정 | 초코마에</title>
<meta name="description" CONTENT="마우스, 한글/영문 타자 연습 앱 | 초코마에 ‧ Mouse and Korean/English tyiping practice app | ChocoMae">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- <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/session_storage_manager.js"></script>
<script src="../../game/lib/global/global_variables.js?update_date=191224"></script>
<!-- library source files -->
<script src="../../game/lib/util/number_util.js"></script>
<script src="../../game/lib/text/input_type_text.js?update_date=191224"></script>
<script src="../../game/lib/text/screen_top_ui.js?update_date=191224"></script>
<script src="../../game/lib/keyboard_shortcut.js"></script>
<script src="../../game/lib/button/round_rect_button.js"></script>
<script src="../../game/lib/button/home_button.js"></script>
<script src="../../game/lib/button/back_button.js"></script>
<script src="../../game/lib/button/fullscreen_button.js"></script>
<script src="../../game/lib/db_connect_manager.js"></script>
<!-- source files -->
<script src="../../game/setup/setup.js"></script>
<script src="../../game/setup/main.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
canvas{
margin: 0 auto;
}
</style>
</head>
<body>
<div id="Setup" style="text-align:center;"></div>
<div style="margin-top: 20px; text-align:center;">
앱이 실행되지 않으면, 브라우저의 새로 고침 버튼( <span class="oi oi-reload" title="icon reload" aria-hidden="true"></span> , 단축키 : Ctrl + R)을 눌러주세요.<br/>
(그래도 실행되지 않을때에는, Ctrl + Shift + R 을 눌러서 브라우저 캐시 삭제를 실행해 주세요)
</div>
</body>
</html>