phaser-input - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/phaser-input.d.ts

@@ -15,18 +15,66 @@ declare module Fabrique {
         placeHolderColor?: string;
+        type?: InputType;
     }
+    enum InputType {
+        text = 0,
+        password = 1,
+    }
     class InputField extends Phaser.Sprite {
-        static ALLOWED_CHARACTERS: number[];
         placeHolder: Phaser.Text;
         box: Phaser.Graphics;
+        boxShadow: Phaser.Graphics;
         private focus;
         private cursor;
         text: Phaser.Text;
+        type: InputType;
         private value;
+        private registered;
+        private shift;
+        private padding;
+        private callback;
+        private id;
         constructor(game: Phaser.Game, x: number, y: number, inputOptions: InputOptions);
         private createBox(inputOptions);
+        private createBoxShadow(inputOptions);
+        /**
+         * This is a generic input down handler for the game.
+         * if the input object is clicked, we gain focus on it and create the dom element
+         *
+         * If there was focus on the element previously, but clicked outside of it, the element will loose focus
+         * and no keyboard events will be registered anymore
+         *
+         * @param e Phaser.Pointer
+         */
         private checkDown(e);
+        /**
+         * Creates a hidden input field, makes sure focus is added to it.
+         * This is all to ensure mobile keyboard are also opened
+         *
+         * And last, but not least, we register an event handler
+         */
+        private createDomElement();
+        /**
+         * Removes the hidden input field and the key eventlistener
+         */
+        private removeDomElement();
+        /**
+         * Update function makes the cursor blink, it uses two private properties to make it toggle
+         *
+         * @returns {number}
+         */
         private blink;
         private cnt;
         update(): number;
-        onKeyPress(): void;
+        /**
+         * Focus is lost on the input element, we disable the cursor and remove the hidden input element
+         */
+        private endFocus();
+        /**
+         * Update the text value in the box, and make sure the cursor is positioned correctly
+         */
+        private updateText();
+        /**
+         * Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own
+         */
+        private keyListener();
     }
@@ -33,0 +81,0 @@ }

build/phaser-input.js

@@ -8,2 +8,7 @@ var __extends = (this && this.__extends) || function (d, b) {
 (function (Fabrique) {
+    (function (InputType) {
+        InputType[InputType["text"] = 0] = "text";
+        InputType[InputType["password"] = 1] = "password";
+    })(Fabrique.InputType || (Fabrique.InputType = {}));
+    var InputType = Fabrique.InputType;
     var InputField = (function (_super) {
@@ -15,10 +20,19 @@ __extends(InputField, _super);
             this.box = null;
+            this.boxShadow = null;
             this.focus = false;
+            this.type = InputType.text;
             this.value = '';
+            this.id = 'phaser-input-' + (Math.random() * 10000 | 0).toString();
+            /**
+             * Update function makes the cursor blink, it uses two private properties to make it toggle
+             *
+             * @returns {number}
+             */
             this.blink = true;
             this.cnt = 0;
+            this.padding = inputOptions.padding || 0;
+            //this.createBoxShadow(inputOptions);
             this.createBox(inputOptions);
             if (inputOptions.placeHolder && inputOptions.placeHolder.length > 0) {
-                console.log(inputOptions);
-                this.placeHolder = new Phaser.Text(game, inputOptions.padding || 0, inputOptions.padding || 0, inputOptions.placeHolder, {
+                this.placeHolder = new Phaser.Text(game, this.padding, this.padding, inputOptions.placeHolder, {
                     font: inputOptions.font || '14px Arial',
@@ -30,3 +44,3 @@ fontWeight: inputOptions.fontWeight || 'normal',
             }
-            this.cursor = new Phaser.Text(game, inputOptions.padding || 0, (inputOptions.padding || 0) - 2, '|', {
+            this.cursor = new Phaser.Text(game, this.padding, this.padding - 2, '|', {
                 font: inputOptions.font || '14px Arial',
@@ -38,3 +52,3 @@ fontWeight: inputOptions.fontWeight || 'normal',
             this.addChild(this.cursor);
-            this.text = new Phaser.Text(game, inputOptions.padding || 0, (inputOptions.padding || 0), '', {
+            this.text = new Phaser.Text(game, this.padding, this.padding, '', {
                 font: inputOptions.font || '14px Arial',
@@ -45,2 +59,5 @@ fontWeight: inputOptions.fontWeight || 'normal',
             this.addChild(this.text);
+            if (inputOptions.type) {
+                this.type = inputOptions.type;
+            }
             this.inputEnabled = true;
@@ -58,5 +75,5 @@ this.input.useHandCursor = true;
             }
-            height = (inputOptions.padding) ? inputOptions.padding * 2 + height : height;
+            height = this.padding * 2 + height;
             var width = inputOptions.width || 150;
-            width = (inputOptions.padding) ? inputOptions.padding * 2 + width : width;
+            width = this.padding * 2 + width;
             this.box = new Phaser.Graphics(this.game, 0, 0);
@@ -68,19 +85,83 @@ this.box.beginFill(bgColor, 1)
         };
+        InputField.prototype.createBoxShadow = function (inputOptions) {
+            var bgColor = (inputOptions.backgroundColor) ? parseInt(inputOptions.backgroundColor.slice(1), 16) : 0xffffff;
+            var borderColor = (inputOptions.borderColor) ? parseInt(inputOptions.borderColor.slice(1), 16) : 0x959595;
+            var height = inputOptions.height || 14;
+            if (inputOptions.font) {
+                //fetch height from font;
+                height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
+            }
+            height = this.padding * 2 + height;
+            var width = inputOptions.width || 150;
+            width = this.padding * 2 + width;
+            this.boxShadow = new Phaser.Graphics(this.game, 0, 0);
+            this.boxShadow.beginFill(bgColor, 1)
+                .drawRoundedRect(0, 0, width, height, inputOptions.borderRadius || 3);
+            this.addChild(this.boxShadow);
+        };
+        /**
+         * This is a generic input down handler for the game.
+         * if the input object is clicked, we gain focus on it and create the dom element
+         *
+         * If there was focus on the element previously, but clicked outside of it, the element will loose focus
+         * and no keyboard events will be registered anymore
+         *
+         * @param e Phaser.Pointer
+         */
         InputField.prototype.checkDown = function (e) {
-            var _this = this;
             if (this.input.checkPointerOver(e)) {
                 this.focus = true;
-                this.game.input.keyboard.onDownCallback = function () {
-                    _this.onKeyPress();
-                };
                 this.placeHolder.visible = false;
+                this.createDomElement();
             }
             else {
-                this.focus = false;
-                if (this.value.length === 0) {
-                    this.placeHolder.visible = true;
-                    this.cursor.visible = false;
+                if (this.focus === true) {
+                    this.endFocus();
                 }
             }
         };
+        /**
+         * Creates a hidden input field, makes sure focus is added to it.
+         * This is all to ensure mobile keyboard are also opened
+         *
+         * And last, but not least, we register an event handler
+         */
+        InputField.prototype.createDomElement = function () {
+            var _this = this;
+            var input = document.getElementById(this.id);
+            var created = false;
+            if (null === input) {
+                input = document.createElement('input');
+                created = true;
+            }
+            input.id = this.id;
+            //input.id = 'hack';
+            input.style.position = 'absolute';
+            input.style.top = (-100).toString() + 'px';
+            input.style.left = (-100).toString() + 'px';
+            input.value = this.value;
+            if (this.type === InputType.password) {
+                input.type = 'password';
+            }
+            else {
+                input.type = 'text';
+            }
+            if (created) {
+                document.body.appendChild(input);
+            }
+            //chrome/safari hack/bugfix
+            setTimeout(function () {
+                input.focus();
+            }, 10);
+            this.callback = function () { return _this.keyListener(); };
+            document.addEventListener('keyup', this.callback);
+        };
+        /**
+         * Removes the hidden input field and the key eventlistener
+         */
+        InputField.prototype.removeDomElement = function () {
+            var input = document.getElementById(this.id);
+            document.body.removeChild(input);
+            document.removeEventListener('keyup', this.callback);
+        };
         InputField.prototype.update = function () {
@@ -97,48 +178,36 @@ if (!this.focus) {
         };
-        InputField.prototype.onKeyPress = function () {
-            if (!this.focus) {
-                return;
+        /**
+         * Focus is lost on the input element, we disable the cursor and remove the hidden input element
+         */
+        InputField.prototype.endFocus = function () {
+            this.focus = false;
+            if (this.value.length === 0) {
+                this.placeHolder.visible = true;
             }
-            this.value += String.fromCharCode(this.game.input.keyboard.event.keyCode);
-            this.text.setText(this.value);
-            this.cursor.x = this.text.width;
+            this.cursor.visible = false;
+            this.removeDomElement();
         };
-        InputField.ALLOWED_CHARACTERS = [
-            Phaser.Keyboard.A,
-            Phaser.Keyboard.B,
-            Phaser.Keyboard.C,
-            Phaser.Keyboard.D,
-            Phaser.Keyboard.E,
-            Phaser.Keyboard.F,
-            Phaser.Keyboard.G,
-            Phaser.Keyboard.H,
-            Phaser.Keyboard.I,
-            Phaser.Keyboard.J,
-            Phaser.Keyboard.K,
-            Phaser.Keyboard.L,
-            Phaser.Keyboard.M,
-            Phaser.Keyboard.N,
-            Phaser.Keyboard.O,
-            Phaser.Keyboard.P,
-            Phaser.Keyboard.Q,
-            Phaser.Keyboard.R,
-            Phaser.Keyboard.S,
-            Phaser.Keyboard.T,
-            Phaser.Keyboard.U,
-            Phaser.Keyboard.V,
-            Phaser.Keyboard.W,
-            Phaser.Keyboard.X,
-            Phaser.Keyboard.Y,
-            Phaser.Keyboard.Z,
-            Phaser.Keyboard.ZERO,
-            Phaser.Keyboard.ONE,
-            Phaser.Keyboard.TWO,
-            Phaser.Keyboard.THREE,
-            Phaser.Keyboard.FOUR,
-            Phaser.Keyboard.FIVE,
-            Phaser.Keyboard.SIX,
-            Phaser.Keyboard.SEVEN,
-            Phaser.Keyboard.EIGHT,
-            Phaser.Keyboard.NINE,
-        ];
+        /**
+         * Update the text value in the box, and make sure the cursor is positioned correctly
+         */
+        InputField.prototype.updateText = function () {
+            var text = '';
+            if (this.type === InputType.password) {
+                for (var i = 0; i < this.value.length; i++) {
+                    text += '*';
+                }
+            }
+            else {
+                text = this.value;
+            }
+            this.text.setText(text);
+            this.cursor.x = this.text.width + this.padding;
+        };
+        /**
+         * Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own
+         */
+        InputField.prototype.keyListener = function () {
+            this.value = document.getElementById(this.id).value;
+            this.updateText();
+        };
         return InputField;
@@ -145,0 +214,0 @@ })(Phaser.Sprite);

package.json

 {
   "name": "phaser-input",
   "author": "OrangeGames",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL.",
@@ -6,0 +6,0 @@ "contributors": [

README.md

 Phaser Input
-============
+============
+
+This needs some more text ;)
+
+Describing how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile..
+
+
+Getting Started
+---------------
+First you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.
+```
+npm install phaser-input --save-dev
+```
+
+Next up you'd want to add it to your list of js sources you load into your game
+```html
+<script src="node_modules/phaser-input/build/phaser-input.js"></script>
+```
+
+
+Changelog
+---------
+### 0.0.2
+* Changed from PhaserInput handling to regular HTML input, this way mobile also works
+### 0.0.1
+* Initial release
+
+Disclaimer
+----------
+We at OrangeGames just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome input boxes in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27877

increased by42.61%

Lines of code

349

increased by50.43%

Number of lines in readme file

31

increased by1450%

No dependency changes