From abe43b43992eb716f1ab82382b4a521bdc33f0c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Ho=CC=88lscher?= <git@hoelshare.de> Date: Wed, 20 Sep 2017 21:09:54 +0200 Subject: [PATCH] Added login state and state manager --- client/init.js | 3 +++ client/login.js | 41 +++++++++++++++++++++++++++++++++++++++++ client/main.js | 14 ++++++++++++++ index.html | 7 +++++-- 4 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 client/init.js create mode 100644 client/login.js create mode 100644 client/main.js diff --git a/client/init.js b/client/init.js new file mode 100644 index 0000000..7865bea --- /dev/null +++ b/client/init.js @@ -0,0 +1,3 @@ +Phaser.Device.whenReady(function () { + game.plugins.add(PhaserInput.Plugin); +}); \ No newline at end of file diff --git a/client/login.js b/client/login.js new file mode 100644 index 0000000..2c5daf6 --- /dev/null +++ b/client/login.js @@ -0,0 +1,41 @@ +var Login = { + nameBox: null +}; + +Login.init = function() { + if(false === game.device.desktop){ + this.optimizeMobileView(); + } + game.scale.pageAlignHorizontally = true; +} + +Login.optimizeMobileView = function() { + console.log('W : '+window.screen.width+', H : '+window.screen.height); + if(Math.min(window.screen.width, window.screen.height) < game.width) { // If at least one of the two screen dimensions is smaller for the game, enable asking for device reorientation + game.scale.scaleMode = Phaser.ScaleManager.RESIZE; + game.scale.forceOrientation(true,false); + } +} + +Login.preload = function() { + +}; + +Login.create = function() { + this.stage.backgroundColor = 0x00F0F0; + this.nameBox = game.add.inputField(10, 90, { + font: '18px Arial', + fill: '#212121', + width: this.game.width - 36, + padding: 8, + borderWidth: 1, + borderColor: '#000', + borderRadius: 6, + placeHolder: 'Please enter your name' + }); + this.loginButton = game.add.button(10, 130, '', Login.login, this); +}; + +Login.login = function() { + +}; \ No newline at end of file diff --git a/client/main.js b/client/main.js new file mode 100644 index 0000000..3702c14 --- /dev/null +++ b/client/main.js @@ -0,0 +1,14 @@ +var game = new Phaser.Game( + 800, + 600, + Phaser.CANVAS, + document.getElementById('game-div'), + null, + false, + true); + + +game.state.add('Login', Login); +//game.state.add('Game', Game); + +game.state.start('Login'); diff --git a/index.html b/index.html index e86395a..a4c0ef1 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ <body> <div id="game-div"></div> </body> - <script src="client/phaser-input.js"></script> - <script src="client/phaser.js"></script> + <script type="text/javascript" src="client/phaser.js"></script> + <script type="text/javascript" src="client/phaser-input.js"></script> + <script type="text/javascript" src="client/login.js"></script> + <script type="text/javascript" src="client/main.js"></script> + <script type="text/javascript" src="client/init.js"></script> </html> \ No newline at end of file -- GitLab