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

Add: PhaserInputMaster plugin

Browse Source
This commit is contained in:
Jisang Park
2018-12-08 17:38:46 +09:00
parent 58aeea2a20
commit 7cce32996a
23 changed files with 4549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/util/phaser-input-master/Gruntfile.js
Executable
+104
View File
@@ -0,0 +1,104 @@
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
//Get some details from the package.json
pkg: grunt.file.readJSON('package.json'),
banner: '/*!\n' +
' * <%= pkg.config.name %> - version <%= pkg.version %> \n' +
' * <%= pkg.description %>\n' +
' *\n' +
' * <%= pkg.author %>\n' +
' * Build at <%= grunt.template.today("dd-mm-yyyy") %>\n' +
' * Released under MIT License \n' +
' */\n',
usebanner: {
dist: {
options: {
position: 'top',
banner: '<%= banner %>'
},
files: {
src: [ 'build/*.js' ]
}
}
},
//Typescript settings per build
ts: {
options: {
module: 'amd',
target: 'es5',
sourceMap: true,
declaration: true,
noImplicitAny: true
},
dist: {
src: ['ts/**/*.ts'],
dest: 'build/<%= pkg.config.name %>.js'
}
},
watch: {
files: ['ts/**/*.ts'],
tasks: ['ts'],
options: {
livereload: true
}
},
connect: {
server: {
options: {
base: ['./build', './example'],
port: 8080
}
}
},
uglify: {
options: {
compress: {
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true
},
mangle: true,
beautify: false
},
dist: {
files: {
'build/<%= pkg.config.name %>.min.js': [
'build/<%= pkg.config.name %>.js'
]
}
}
},
clean: {
dist: ['build']
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-banner');
grunt.loadNpmTasks('grunt-ts');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//dist Build
grunt.registerTask('dist', [
'clean:dist', //Clean the dist folder
'ts:dist',//Run typescript on the preprocessed files, for dist (client)
'uglify:dist', //Minify everything
'usebanner:dist' //Minify everything
]);
grunt.registerTask('dev', [
'ts:dist',
'connect',
'watch'
]);
};
src/util/phaser-input-master/LICENSE
Executable
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2015 Orange Games
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
src/util/phaser-input-master/README.md
Executable
+192
View File
@@ -0,0 +1,192 @@
Phaser Input
============
Phaser Input is a plugin for Phaser that allows you to use html input fields as Phaser object inside your Phaser game. It fills the blanks of CanvasInput (that only works on a canvas renderer) and appends it with full Phaser support!
The best part is that it will also work on mobile devices!
Key features:
* Works on mobile and Desktop
* Included TypeScript support
* Also runs under WebGL renderer
* Pure Phaser implementation
* Easy configurable
* Production hardened
*Imporant*
From here on this library will be published and updated under [@orange-games/phaser-input](https://www.npmjs.com/package/@orange-games/phaser-input) at NPM, the old [phaser-input](https://www.npmjs.com/package/phaser-input) will no longer be maintained.
If you are comming from v1 you can read the migration guide at the bottom
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 @orange-games/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/@orange-games/phaser-input/build/phaser-input.js"></script>
```
After adding the script to the page you can activate it by enabling the plugin:
```javascript
game.add.plugin(PhaserInput.Plugin);
```
Usage
-----
### Adding a InputField
The simplest way of adding a input field is:
```javascript
var input = game.add.inputField(10, 90);
```
Ofcourse there are options available that can be used to style the input. They can be passes as an object as the third parameter.
```javascript
var password = game.add.inputField(10, 90, {
font: '18px Arial',
fill: '#212121',
fontWeight: 'bold',
width: 150,
padding: 8,
borderWidth: 1,
borderColor: '#000',
borderRadius: 6,
placeHolder: 'Password',
type: PhaserInput.InputType.password
});
```
### Using zoom
Zooming is easy to enable on an input field, it can be passed to the InputField as a setting. But there are some caveats:
First of all, it's only meant for mobile. Second; it modifies the scale and pivot of the world, and that might interfere with your resize.
Also, when the keyboard is shown, sometimes a resize event will be triggered.
Ideally you use a custom resize event, check for the static property `PhaserInput.KeyboardOpen` and don't resize when it's set to true.
### Using keyboard open/close signals
Current version includes two event dispatchers that notify when a device keyboard is opened or closed.
You can add listeners which trigger events based on this feedback.
```javascript
PhaserInput.onKeyboardClose.addOnce(function() {
this.resizeBackgroundImage();
});
```
### Capture input events
By default, input event will not bubble up to other elements
This is controlled by an InputField property called `blockInput`.
When set to false, the input event will trigger on the input element and move up to other elements listening for the event.
e.g. An in-game sprite might be listening for keyboard events (W, A, S, D).
If set to false, typing in input field will not trigger keyboard events for the sprite.
So the sprite will not move when typing into input field.
### Toggle Enter key
InputField has a property (`focusOutOnEnter`) that controls whether the input field will lose focus on pressing Enter.
If set to true, pressing enter will end focus on the field (default is true).
### Current Limitations
- Updates are slow when typing fast (type slower you!!)
- Zoom modifies the pivot and scale of the world, so it might interfere with some stuff
## Properties
- **x**: number (0 by default) The X-coordinate in the game
- **y**: number (0 by default) The Y-coordinate in the game
- **fill**: string (#fff by default) The color of the inputted text
- **fillAlpha**: number (1 by default) Alpha of the textbox, 0 will hide the textbox and only show the text/placeholder/cursor
- **width**: number (150 by default) The width of the text box (just like in the DOM, padding, borders add onto this width)
- **height**: number (14 by default) The height of the text box (just like in the DOM, padding, borders add onto this height)
- **padding**: number (0 by default) The padding in pixels around all 4 sides of the text input area.
- **borderWidth**: number (1 by default) Size of the border
- **borderColor**: string (#000 by default) Color of the border
- **forceCase**: ForceCase (none by default) If we should force a certain case (either upper or lower)
- **borderRadius**: number (0 by default) Create rounded corners by setting a border radius
- **placeHolder**: string ('' by default) Text that will be shown before the user input's anything
- **placeHolderColor**: string (#bfbebd by default) The color of the placeholder text
- **type**: InputType (text by default) Either text, password or numeric
- **backgroundColor**: string (#fff by default) The background color of the input box
- **cursorColor**: string (#000 by default) The color of the blinking cursor
- **font**: string (14px Arial by default) The font that is used for the input box, covers the input text, placeholder and cursor
- **min**: string (none by default) The minimum number for the input field, only for number input fields
- **max**: string (none by default) The maximum number for the number input field, or the maxLength for other input fields
- **selectionColor**: string (rgba(179, 212, 253, 0.8) by default) The default color for the text selection highlight.
- **zoom**: boolean (false by default) if we need to zoom onto the input field (mobile only).
### Browser Support
Tested on:
- Desktop
* Chrome 48+
* FireFox 44+
* Safari 9+
- Mobile
* Chrome 48+
* iOS 9+
Migrating from v1
-----------------
the API of the objects is the same as before but the namespace changed. We decided to remove the Fabrique namespace, and house the plugin in it's own (PhaserInput).
so:
Fabrique.Plugins.Input
becomes:
PhaserInput.Plugin
and all other references of Fabrique.Plugins can be replaced with PhaserInput.
If you are still unsure how or what, both the example and this readme have been adjusted to work with the new namespace.
FAQ
---
### I Don't see the cursor blinking!
This is most likely due to you adding the input field to a custom Phaser object. According to the [Phaser docs](http://phaser.io/docs/2.6.2/Phaser.Sprite.html#update) the update function needs to be called manually in these cases.
So add the following to your object and the cursor should work :)
```javascript
update: function () {
this._inputField.update();
},
```
### How do I focus on the element?!
Normally the element is only focused trough user interaction (due to mobile limitations) you can get around this by manually calling the focus method yourself:
```javascript
var input = game.add.inputField(10, 90);
//start with focus on the element
input.startFocus();
//and then end the focus
input.endFocus();
```
Please note that this will not work on mobile wihtout a user interaction
### Can I change the width later on in the code?
Well thanks for asking, yes you can!
```javascript
var input = game.add.inputField(10, 90);
input.width = 200;
```
### Well then, is it also possible to set the value in code?
Yes you can! The Inputfield has a setText function you can call to set any value you want!
```javascript
var input = game.add.inputField(10, 90);
input.setText("My custom text");
```
Credits
-------
phaser-input is inspired by [CanvasInput](https://github.com/goldfire/CanvasInput)
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!
Phaser Input is distributed under the MIT license. All 3rd party libraries and components are distributed under their
respective license terms.
src/util/phaser-input-master/build/phaser-input.d.ts
Vendored Executable
+162
View File
@@ -0,0 +1,162 @@
declare module PhaserInput {
enum InputType {
text = 0,
password = 1,
number = 2,
}
class InputElement {
private element;
private keyUpCallback;
private inputChangeCallback;
private type;
private id;
private game;
private focusIn;
private focusOut;
constructor(game: Phaser.Game, id: string, type?: InputType, value?: string, focusIn?: Phaser.Signal, focusOut?: Phaser.Signal);
addKeyUpListener(callback: () => void): void;
blockKeyDownEvents(): void;
private preventKeyPropagation(evt);
unblockKeyDownEvents(): void;
removeEventListener(): void;
destroy(): void;
setMax(max: string, min?: string): void;
value: string;
focus(): void;
blur(): void;
readonly hasSelection: boolean;
readonly caretStart: number;
readonly caretEnd: number;
getCaretPosition(): number;
setCaretPosition(pos: number): void;
}
}
declare module PhaserInput {
enum ForceCase {
none = 0,
lower = 1,
upper = 2,
}
interface InputOptions extends Phaser.PhaserTextStyle {
x?: number;
y?: number;
placeHolder?: string;
fillAlpha?: number;
width?: number;
height?: number;
padding?: number;
borderWidth?: number;
borderColor?: string;
borderRadius?: number;
cursorColor?: string;
placeHolderColor?: string;
type?: InputType;
forceCase?: ForceCase;
min?: string;
max?: string;
textAlign?: string;
selectionColor?: string;
zoom?: boolean;
}
class InputField extends Phaser.Sprite {
focusOutOnEnter: boolean;
private placeHolder;
private box;
private textMask;
private focus;
private cursor;
private text;
private offscreenText;
value: string;
private inputOptions;
private domElement;
private selection;
private windowScale;
blockInput: boolean;
focusIn: Phaser.Signal;
focusOut: Phaser.Signal;
width: number;
constructor(game: Phaser.Game, x: number, y: number, inputOptions?: InputOptions);
private updateTextAlignment();
private checkDown(e);
private blink;
private cnt;
update(): number;
endFocus(): void;
startFocus(): void;
private keyUpProcessor();
private updateText();
private updateCursor();
private getCaretPosition();
private setCaretOnclick(e);
private updateSelection();
private zoomIn();
private zoomOut();
private keyListener(evt);
destroy(destroyChildren?: boolean): void;
resetText(): void;
setText(text?: string): void;
private getFormattedText(text);
}
}
declare module PhaserInput {
class InputBox extends Phaser.Graphics {
private bgColor;
private borderRadius;
private borderColor;
private borderWidth;
private boxAlpha;
private boxHeight;
private padding;
private boxWidth;
constructor(game: Phaser.Game, inputOptions: InputOptions);
resize(newWidth: number): void;
private drawBox();
}
}
declare module PhaserInput {
class SelectionHighlight extends Phaser.Graphics {
private inputOptions;
constructor(game: Phaser.Game, inputOptions: InputOptions);
updateSelection(rect: PIXI.Rectangle): void;
static rgb2hex(color: {
r: number;
g: number;
b: number;
a: number;
}): number;
}
}
declare module PhaserInput {
class TextMask extends Phaser.Graphics {
private maskWidth;
private maskHeight;
constructor(game: Phaser.Game, inputOptions: InputOptions);
resize(newWidth: number): void;
private drawMask();
}
}
declare module PhaserInput {
var Zoomed: boolean;
var KeyboardOpen: boolean;
const onKeyboardOpen: Phaser.Signal;
const onKeyboardClose: Phaser.Signal;
interface InputFieldObjectFactory extends Phaser.GameObjectFactory {
inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions, group?: Phaser.Group) => PhaserInput.InputField;
}
interface InputFieldObjectCreator extends Phaser.GameObjectCreator {
inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions) => PhaserInput.InputField;
}
interface InputFieldGame extends Phaser.Game {
add: InputFieldObjectFactory;
make: InputFieldObjectCreator;
}
class Plugin extends Phaser.Plugin {
static Zoomed: boolean;
static KeyboardOpen: boolean;
static onKeyboardOpen: Phaser.Signal;
static onKeyboardClose: Phaser.Signal;
constructor(game: Phaser.Game, parent: Phaser.PluginManager);
private addInputFieldFactory();
}
}
src/util/phaser-input-master/build/phaser-input.js
Executable
+720
View File
@@ -0,0 +1,720 @@
/*!
* phaser-input - version 2.0.5
* Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
*
* OrangeGames
* Build at 02-06-2017
* Released under MIT License
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var PhaserInput;
(function (PhaserInput) {
var InputType;
(function (InputType) {
InputType[InputType["text"] = 0] = "text";
InputType[InputType["password"] = 1] = "password";
InputType[InputType["number"] = 2] = "number";
})(InputType = PhaserInput.InputType || (PhaserInput.InputType = {}));
var InputElement = (function () {
function InputElement(game, id, type, value, focusIn, focusOut) {
if (type === void 0) { type = InputType.text; }
if (value === void 0) { value = ''; }
var _this = this;
this.id = id;
this.type = type;
this.game = game;
this.focusIn = focusIn;
this.focusOut = focusOut;
var canvasTopX = this.game.canvas.getBoundingClientRect().top + document.body.scrollTop;
this.element = document.createElement('input');
this.element.id = id;
this.element.style.position = 'absolute';
this.element.style.top = canvasTopX + 'px';
this.element.style.left = (-40).toString() + 'px';
this.element.style.width = (10).toString() + 'px';
this.element.style.height = (10).toString() + 'px';
this.element.style.border = '0px';
this.element.value = this.value;
this.element.type = InputType[type];
this.element.addEventListener('focusin', function () {
if (_this.focusIn instanceof Phaser.Signal) {
_this.focusIn.dispatch();
}
});
this.element.addEventListener('focusout', function () {
if (_this.focusOut instanceof Phaser.Signal) {
_this.focusOut.dispatch();
}
});
document.body.appendChild(this.element);
}
InputElement.prototype.addKeyUpListener = function (callback) {
this.keyUpCallback = callback;
document.addEventListener('keyup', this.keyUpCallback);
this.element.addEventListener('input', this.keyUpCallback);
};
InputElement.prototype.blockKeyDownEvents = function () {
document.addEventListener('keydown', this.preventKeyPropagation);
};
InputElement.prototype.preventKeyPropagation = function (evt) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
event.cancelBubble = true;
}
};
InputElement.prototype.unblockKeyDownEvents = function () {
document.removeEventListener('keydown', this.preventKeyPropagation);
};
InputElement.prototype.removeEventListener = function () {
document.removeEventListener('keyup', this.keyUpCallback);
this.element.removeEventListener('input', this.keyUpCallback);
};
InputElement.prototype.destroy = function () {
document.body.removeChild(this.element);
};
InputElement.prototype.setMax = function (max, min) {
if (max === undefined) {
return;
}
if (this.type === InputType.text || this.type === InputType.password) {
this.element.maxLength = parseInt(max, 10);
}
else if (this.type === InputType.number) {
this.element.max = max;
if (min === undefined) {
return;
}
this.element.min = min;
}
};
Object.defineProperty(InputElement.prototype, "value", {
get: function () {
return this.element.value;
},
set: function (value) {
this.element.value = value;
},
enumerable: true,
configurable: true
});
InputElement.prototype.focus = function () {
var _this = this;
this.element.focus();
if (!this.game.device.desktop && this.game.device.chrome) {
var originalWidth_1 = window.innerWidth, originalHeight_1 = window.innerHeight;
var kbAppeared_1 = false;
var interval_1 = setInterval(function () {
if (originalWidth_1 > window.innerWidth || originalHeight_1 > window.innerHeight) {
kbAppeared_1 = true;
}
if (kbAppeared_1 && originalWidth_1 === window.innerWidth && originalHeight_1 === window.innerHeight) {
if (_this.focusOut instanceof Phaser.Signal) {
_this.focusOut.dispatch();
}
clearInterval(interval_1);
}
}, 50);
}
};
InputElement.prototype.blur = function () {
this.element.blur();
};
Object.defineProperty(InputElement.prototype, "hasSelection", {
get: function () {
if (this.type === InputType.number) {
return false;
}
return this.element.selectionStart !== this.element.selectionEnd;
},
enumerable: true,
configurable: true
});
Object.defineProperty(InputElement.prototype, "caretStart", {
get: function () {
return this.element.selectionEnd;
},
enumerable: true,
configurable: true
});
Object.defineProperty(InputElement.prototype, "caretEnd", {
get: function () {
return this.element.selectionStart;
},
enumerable: true,
configurable: true
});
InputElement.prototype.getCaretPosition = function () {
if (this.type === InputType.number) {
return -1;
}
return this.element.selectionStart;
};
InputElement.prototype.setCaretPosition = function (pos) {
if (this.type === InputType.number) {
return;
}
this.element.setSelectionRange(pos, pos);
};
return InputElement;
}());
PhaserInput.InputElement = InputElement;
})(PhaserInput || (PhaserInput = {}));
var PhaserInput;
(function (PhaserInput) {
var ForceCase;
(function (ForceCase) {
ForceCase[ForceCase["none"] = 0] = "none";
ForceCase[ForceCase["lower"] = 1] = "lower";
ForceCase[ForceCase["upper"] = 2] = "upper";
})(ForceCase = PhaserInput.ForceCase || (PhaserInput.ForceCase = {}));
var InputField = (function (_super) {
__extends(InputField, _super);
function InputField(game, x, y, inputOptions) {
if (inputOptions === void 0) { inputOptions = {}; }
var _this = _super.call(this, game, x, y) || this;
_this.focusOutOnEnter = true;
_this.placeHolder = null;
_this.box = null;
_this.focus = false;
_this.value = '';
_this.windowScale = 1;
_this.blockInput = true;
_this.focusIn = new Phaser.Signal();
_this.focusOut = new Phaser.Signal();
_this.blink = true;
_this.cnt = 0;
_this.inputOptions = inputOptions;
_this.inputOptions.width = (typeof inputOptions.width === 'number') ? inputOptions.width : 150;
_this.inputOptions.padding = (typeof inputOptions.padding === 'number') ? inputOptions.padding : 0;
_this.inputOptions.textAlign = inputOptions.textAlign || 'left';
_this.inputOptions.type = inputOptions.type || PhaserInput.InputType.text;
_this.inputOptions.forceCase = (inputOptions.forceCase) ? inputOptions.forceCase : ForceCase.none;
_this.inputOptions.borderRadius = (typeof inputOptions.borderRadius === 'number') ? inputOptions.borderRadius : 0;
_this.inputOptions.height = (typeof inputOptions.height === 'number') ? inputOptions.height : 14;
_this.inputOptions.fillAlpha = (inputOptions.fillAlpha === undefined) ? 1 : inputOptions.fillAlpha;
_this.inputOptions.selectionColor = inputOptions.selectionColor || 'rgba(179, 212, 253, 0.8)';
_this.inputOptions.zoom = (!game.device.desktop) ? inputOptions.zoom || false : false;
_this.box = new PhaserInput.InputBox(_this.game, inputOptions);
_this.setTexture(_this.box.generateTexture());
_this.textMask = new PhaserInput.TextMask(_this.game, inputOptions);
_this.addChild(_this.textMask);
_this.domElement = new PhaserInput.InputElement(_this.game, 'phaser-input-' + (Math.random() * 10000 | 0).toString(), _this.inputOptions.type, _this.value, _this.focusIn, _this.focusOut);
_this.domElement.setMax(_this.inputOptions.max, _this.inputOptions.min);
_this.selection = new PhaserInput.SelectionHighlight(_this.game, _this.inputOptions);
_this.selection.mask = _this.textMask;
_this.addChild(_this.selection);
if (inputOptions.placeHolder && inputOptions.placeHolder.length > 0) {
_this.placeHolder = new Phaser.Text(game, _this.inputOptions.padding, _this.inputOptions.padding, inputOptions.placeHolder, {
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.placeHolderColor || '#bfbebd'
});
_this.placeHolder.mask = _this.textMask;
_this.addChild(_this.placeHolder);
}
_this.cursor = new Phaser.Text(game, _this.inputOptions.padding, _this.inputOptions.padding - 2, '|', {
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.cursorColor || '#000000'
});
_this.cursor.visible = false;
_this.addChild(_this.cursor);
_this.text = new Phaser.Text(game, _this.inputOptions.padding, _this.inputOptions.padding, '', {
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.fill || '#000000'
});
_this.text.mask = _this.textMask;
_this.addChild(_this.text);
_this.offscreenText = new Phaser.Text(game, _this.inputOptions.padding, _this.inputOptions.padding, '', {
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.fill || '#000000'
});
_this.updateTextAlignment();
_this.inputEnabled = true;
_this.input.useHandCursor = true;
_this.game.input.onDown.add(_this.checkDown, _this);
_this.focusOut.add(function () {
if (PhaserInput.KeyboardOpen) {
_this.endFocus();
if (_this.inputOptions.zoom) {
_this.zoomOut();
}
}
});
return _this;
}
Object.defineProperty(InputField.prototype, "width", {
get: function () {
return this.inputOptions.width;
},
set: function (width) {
this.inputOptions.width = width;
this.box.resize(width);
this.textMask.resize(width);
this.updateTextAlignment();
},
enumerable: true,
configurable: true
});
InputField.prototype.updateTextAlignment = function () {
switch (this.inputOptions.textAlign) {
case 'left':
this.text.anchor.set(0, 0);
this.text.x = this.inputOptions.padding;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(0, 0);
}
this.cursor.x = this.inputOptions.padding + this.getCaretPosition();
break;
case 'center':
this.text.anchor.set(0.5, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width / 2;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(0.5, 0);
this.placeHolder.x = this.inputOptions.padding + this.inputOptions.width / 2;
}
this.cursor.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2 + this.getCaretPosition();
break;
case 'right':
this.text.anchor.set(1, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(1, 0);
this.placeHolder.x = this.inputOptions.padding + this.inputOptions.width;
}
this.cursor.x = this.inputOptions.padding + this.inputOptions.width;
break;
}
};
InputField.prototype.checkDown = function (e) {
if (!this.value) {
this.resetText();
}
if (this.input.checkPointerOver(e)) {
if (this.focus) {
this.setCaretOnclick(e);
return;
}
if (this.inputOptions.zoom && !PhaserInput.Zoomed) {
this.zoomIn();
}
this.startFocus();
}
else {
if (this.focus === true) {
this.endFocus();
if (this.inputOptions.zoom) {
this.zoomOut();
}
}
}
};
InputField.prototype.update = function () {
this.text.update();
if (this.placeHolder) {
this.placeHolder.update();
}
if (!this.focus) {
return;
}
if (this.cnt !== 30) {
return this.cnt++;
}
this.cursor.visible = this.blink;
this.blink = !this.blink;
this.cnt = 0;
};
InputField.prototype.endFocus = function () {
var _this = this;
if (!this.focus) {
return;
}
this.domElement.removeEventListener();
if (this.blockInput === true) {
this.domElement.unblockKeyDownEvents();
}
this.focus = false;
if (this.value.length === 0 && null !== this.placeHolder) {
this.placeHolder.visible = true;
}
this.cursor.visible = false;
if (this.game.device.desktop) {
setTimeout(function () {
_this.domElement.blur();
}, 0);
}
else {
this.domElement.blur();
}
if (!this.game.device.desktop) {
PhaserInput.KeyboardOpen = false;
PhaserInput.onKeyboardClose.dispatch();
}
};
InputField.prototype.startFocus = function () {
var _this = this;
this.focus = true;
if (null !== this.placeHolder) {
this.placeHolder.visible = false;
}
if (this.game.device.desktop) {
setTimeout(function () {
_this.keyUpProcessor();
}, 0);
}
else {
this.keyUpProcessor();
}
if (!this.game.device.desktop) {
PhaserInput.KeyboardOpen = true;
PhaserInput.onKeyboardOpen.dispatch();
}
};
InputField.prototype.keyUpProcessor = function () {
this.domElement.addKeyUpListener(this.keyListener.bind(this));
this.domElement.focus();
if (this.blockInput === true) {
this.domElement.blockKeyDownEvents();
}
};
InputField.prototype.updateText = function () {
var text = '';
if (this.inputOptions.type === PhaserInput.InputType.password) {
for (var i = 0; i < this.value.length; i++) {
text += '*';
}
}
else if (this.inputOptions.type === PhaserInput.InputType.number) {
var val = parseInt(this.value);
if (val < parseInt(this.inputOptions.min)) {
text = this.value = this.domElement.value = this.inputOptions.min;
}
else if (val > parseInt(this.inputOptions.max)) {
text = this.value = this.domElement.value = this.inputOptions.max;
}
else {
text = this.value;
}
}
else {
text = this.value;
}
this.text.setText(text);
if (this.text.width > this.inputOptions.width) {
this.text.anchor.x = 1;
this.text.x = this.inputOptions.padding + this.inputOptions.width;
}
else {
switch (this.inputOptions.textAlign) {
case 'left':
this.text.anchor.set(0, 0);
this.text.x = this.inputOptions.padding;
break;
case 'center':
this.text.anchor.set(0.5, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width / 2;
break;
case 'right':
this.text.anchor.set(1, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width;
break;
}
}
};
InputField.prototype.updateCursor = function () {
if (this.text.width > this.inputOptions.width || this.inputOptions.textAlign === 'right') {
this.cursor.x = this.inputOptions.padding + this.inputOptions.width;
}
else {
switch (this.inputOptions.textAlign) {
case 'left':
this.cursor.x = this.inputOptions.padding + this.getCaretPosition();
break;
case 'center':
this.cursor.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2 + this.getCaretPosition();
break;
}
}
};
InputField.prototype.getCaretPosition = function () {
var caretPosition = this.domElement.getCaretPosition();
if (-1 === caretPosition) {
return this.text.width;
}
var text = this.value;
if (this.inputOptions.type === PhaserInput.InputType.password) {
text = '';
for (var i = 0; i < this.value.length; i++) {
text += '*';
}
}
this.offscreenText.setText(text.slice(0, caretPosition));
return this.offscreenText.width;
};
InputField.prototype.setCaretOnclick = function (e) {
var localX = (this.text.toLocal(new PIXI.Point(e.x, e.y), this.game.world)).x;
if (this.inputOptions.textAlign && this.inputOptions.textAlign === 'center') {
localX += this.text.width / 2;
}
var characterWidth = this.text.width / this.value.length;
var index = 0;
for (var i = 0; i < this.value.length; i++) {
if (localX >= i * characterWidth && localX <= (i + 1) * characterWidth) {
index = i;
break;
}
}
if (localX > (this.value.length - 1) * characterWidth) {
index = this.value.length;
}
this.startFocus();
this.domElement.setCaretPosition(index);
this.updateCursor();
};
InputField.prototype.updateSelection = function () {
if (this.domElement.hasSelection) {
var text = this.value;
if (this.inputOptions.type === PhaserInput.InputType.password) {
text = '';
for (var i = 0; i < this.value.length; i++) {
text += '*';
}
}
text = text.substring(this.domElement.caretStart, this.domElement.caretEnd);
this.offscreenText.setText(text);
this.selection.updateSelection(this.offscreenText.getBounds());
switch (this.inputOptions.textAlign) {
case 'left':
this.selection.x = this.inputOptions.padding;
break;
case 'center':
this.selection.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2;
break;
}
}
else {
this.selection.clear();
}
};
InputField.prototype.zoomIn = function () {
if (PhaserInput.Zoomed) {
return;
}
var bounds = this.getBounds();
if (window.innerHeight > window.innerWidth) {
this.windowScale = this.game.width / (bounds.width * 1.5);
}
else {
this.windowScale = (this.game.width / 2) / (bounds.width * 1.5);
}
var offsetX = ((this.game.width - bounds.width * 1.5) / 2) / this.windowScale;
this.game.world.scale.set(this.game.world.scale.x * this.windowScale, this.game.world.scale.y * this.windowScale);
this.game.world.pivot.set(bounds.x - offsetX, bounds.y - this.inputOptions.padding * 2);
PhaserInput.Zoomed = true;
};
InputField.prototype.zoomOut = function () {
if (!PhaserInput.Zoomed) {
return;
}
this.game.world.scale.set(this.game.world.scale.x / this.windowScale, this.game.world.scale.y / this.windowScale);
this.game.world.pivot.set(0, 0);
PhaserInput.Zoomed = false;
};
InputField.prototype.keyListener = function (evt) {
this.value = this.getFormattedText(this.domElement.value);
if (evt.keyCode === 13) {
if (this.focusOutOnEnter) {
this.endFocus();
}
return;
}
this.updateText();
this.updateCursor();
this.updateSelection();
evt.preventDefault();
};
InputField.prototype.destroy = function (destroyChildren) {
this.game.input.onDown.remove(this.checkDown, this);
this.focusIn.removeAll();
this.focusOut.removeAll();
this.domElement.destroy();
_super.prototype.destroy.call(this, destroyChildren);
};
InputField.prototype.resetText = function () {
this.setText();
};
InputField.prototype.setText = function (text) {
if (text === void 0) { text = ''; }
if (null !== this.placeHolder) {
if (text.length > 0) {
this.placeHolder.visible = false;
}
else {
this.placeHolder.visible = true;
}
}
this.value = this.getFormattedText(text);
this.domElement.value = this.value;
this.updateText();
this.updateCursor();
this.endFocus();
};
InputField.prototype.getFormattedText = function (text) {
switch (this.inputOptions.forceCase) {
default:
case ForceCase.none:
return text;
case ForceCase.lower:
return text.toLowerCase();
case ForceCase.upper:
return text.toUpperCase();
}
};
return InputField;
}(Phaser.Sprite));
PhaserInput.InputField = InputField;
})(PhaserInput || (PhaserInput = {}));
var PhaserInput;
(function (PhaserInput) {
var InputBox = (function (_super) {
__extends(InputBox, _super);
function InputBox(game, inputOptions) {
var _this = _super.call(this, game, 0, 0) || this;
_this.bgColor = (inputOptions.backgroundColor) ? parseInt(inputOptions.backgroundColor.slice(1), 16) : 0xffffff;
_this.borderRadius = inputOptions.borderRadius || 0;
_this.borderWidth = inputOptions.borderWidth || 1;
_this.borderColor = (inputOptions.borderColor) ? parseInt(inputOptions.borderColor.slice(1), 16) : 0x959595;
_this.boxAlpha = inputOptions.fillAlpha;
_this.padding = inputOptions.padding;
var height = inputOptions.height;
var width = inputOptions.width;
var height;
if (inputOptions.font) {
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
_this.boxHeight = _this.padding * 2 + height;
var width = inputOptions.width;
_this.boxWidth = _this.padding * 2 + width;
_this.drawBox();
return _this;
}
InputBox.prototype.resize = function (newWidth) {
this.boxWidth = this.padding * 2 + newWidth;
this.drawBox();
};
InputBox.prototype.drawBox = function () {
this.clear()
.beginFill(this.bgColor, this.boxAlpha)
.lineStyle(this.borderWidth, this.borderColor, this.boxAlpha);
if (this.borderRadius > 0) {
this.drawRoundedRect(0, 0, this.boxWidth, this.boxHeight, this.borderRadius);
}
else {
this.drawRect(0, 0, this.boxWidth, this.boxHeight);
}
};
return InputBox;
}(Phaser.Graphics));
PhaserInput.InputBox = InputBox;
})(PhaserInput || (PhaserInput = {}));
var PhaserInput;
(function (PhaserInput) {
var SelectionHighlight = (function (_super) {
__extends(SelectionHighlight, _super);
function SelectionHighlight(game, inputOptions) {
var _this = _super.call(this, game, inputOptions.padding, inputOptions.padding) || this;
_this.inputOptions = inputOptions;
return _this;
}
SelectionHighlight.prototype.updateSelection = function (rect) {
var color = Phaser.Color.webToColor(this.inputOptions.selectionColor);
this.clear();
this.beginFill(SelectionHighlight.rgb2hex(color), color.a);
this.drawRect(rect.x, rect.y, rect.width, rect.height - this.inputOptions.padding);
};
SelectionHighlight.rgb2hex = function (color) {
return parseInt(("0" + color.r.toString(16)).slice(-2) +
("0" + color.g.toString(16)).slice(-2) +
("0" + color.b.toString(16)).slice(-2), 16);
};
return SelectionHighlight;
}(Phaser.Graphics));
PhaserInput.SelectionHighlight = SelectionHighlight;
})(PhaserInput || (PhaserInput = {}));
var PhaserInput;
(function (PhaserInput) {
var TextMask = (function (_super) {
__extends(TextMask, _super);
function TextMask(game, inputOptions) {
var _this = _super.call(this, game, inputOptions.padding, inputOptions.padding) || this;
var height = inputOptions.height;
if (inputOptions.font) {
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
_this.maskWidth = inputOptions.width;
_this.maskHeight = height * 1.3;
_this.drawMask();
return _this;
}
TextMask.prototype.resize = function (newWidth) {
this.maskWidth = newWidth;
this.drawMask();
};
TextMask.prototype.drawMask = function () {
this.clear()
.beginFill(0x000000)
.drawRect(0, 0, this.maskWidth, this.maskHeight)
.endFill();
};
return TextMask;
}(Phaser.Graphics));
PhaserInput.TextMask = TextMask;
})(PhaserInput || (PhaserInput = {}));
var PhaserInput;
(function (PhaserInput) {
PhaserInput.Zoomed = false;
PhaserInput.KeyboardOpen = false;
PhaserInput.onKeyboardOpen = new Phaser.Signal();
PhaserInput.onKeyboardClose = new Phaser.Signal();
var Plugin = (function (_super) {
__extends(Plugin, _super);
function Plugin(game, parent) {
var _this = _super.call(this, game, parent) || this;
_this.addInputFieldFactory();
return _this;
}
Plugin.prototype.addInputFieldFactory = function () {
Phaser.GameObjectFactory.prototype.inputField = function (x, y, inputOptions, group) {
if (group === undefined) {
group = this.world;
}
var nineSliceObject = new PhaserInput.InputField(this.game, x, y, inputOptions);
return group.add(nineSliceObject);
};
Phaser.GameObjectCreator.prototype.inputField = function (x, y, inputOptions) {
return new PhaserInput.InputField(this.game, x, y, inputOptions);
};
};
return Plugin;
}(Phaser.Plugin));
Plugin.Zoomed = false;
Plugin.KeyboardOpen = false;
Plugin.onKeyboardOpen = new Phaser.Signal();
Plugin.onKeyboardClose = new Phaser.Signal();
PhaserInput.Plugin = Plugin;
})(PhaserInput || (PhaserInput = {}));
//# sourceMappingURL=phaser-input.js.map
src/util/phaser-input-master/build/phaser-input.js.map
Executable
+1
View File
File diff suppressed because one or more lines are too long
src/util/phaser-input-master/build/phaser-input.min.js
Vendored Executable
+10
View File
File diff suppressed because one or more lines are too long
src/util/phaser-input-master/config/tsconfig.json
Executable
+11
View File
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"sourceMap": true,
"noImplicitAny": true,
"removeComments": false,
"declaration": true,
"preserveConstEnums": true
}
}
src/util/phaser-input-master/config/tslint.json
Executable
+131
View File
@@ -0,0 +1,131 @@
{
"rules": {
"align": [
true,
"parameters",
"statements"
],
"ban": false,
"class-name": true,
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"interface-name": true,
"jsdoc-format": true,
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
200
],
"member-access": true,
"no-any": false,
"no-arg": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-constructor-vars": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-inferrable-types": false,
"no-internal-module": false,
"no-null-keyword": false,
"no-require-imports": false,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": false,
"no-trailing-whitespace": true,
"no-unreachable": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-finally",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"radix": true,
"semicolon": [
true,
"always"
],
"switch-default": false,
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef": [
true,
"call-signature",
"parameter",
"arrow-parameter",
"property-declaration",
"variable-declaration",
"member-variable-declaration"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"use-strict": false,
"variable-name": [
true,
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
src/util/phaser-input-master/example/images/bg.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

src/util/phaser-input-master/example/images/btn_clean.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

src/util/phaser-input-master/example/images/inputfield.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/util/phaser-input-master/example/index.html
Executable
+170
View File
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<title>Login example for Phaser Input</title>
<!-- Include Phaser Responsiveness JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<script type="text/javascript" src="//cnd.fbrq.io/phaser-nineslice/v2.0.0/phaser-nineslice.min.js"></script>
<script type="text/javascript" src="//cnd.fbrq.io/phaser-input/phaser-input.min.js"></script>
<!--<script type="text/javascript" src="./phaser-input.js"></script>-->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
canvas {
box-shadow: 0px 0px 5px black;
margin: 20px auto;
}
</style>
<!-- Game we want to track -->
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { create: create, preload: preload}, true);
var figure;
var user;
var testHolder;
var password;
Phaser.Device.whenReady(function () {
game.plugins.add(PhaserInput.Plugin);
game.plugins.add(PhaserNineSlice.Plugin);
});
function preload() {
game.load.image('bg', 'images/bg.png');
game.load.nineSlice('input', 'images/inputfield.png', 15);
game.load.nineSlice('btn', 'images/btn_clean.png', 20, 23, 27, 28);
}
function create(){
if (!game.device.desktop) {
game.scale.setGameSize(window.innerWidth, window.innerHeight);
}
//let's add a nice background
game.add.image(0, 0, 'bg');
//Oooe, there's a title here!
var login = game.add.text(game.width / 2, 100, 'Log in to this awesome game!', {
font: '30px Arial',
fill: '#ffffff'
});
login.anchor.set(0.5);
//Here's the input field for the user's name
var userBg = game.add.nineSlice(game.width / 2+ 5, 180, 'input', null, 200, 50);
userBg.anchor.set(0.5);
user = game.add.inputField(game.width / 2 - 85, 180 - 17, {
font: '18px Arial',
fill: '#212121',
fillAlpha: 0,
fontWeight: 'bold',
forceCase: PhaserInput.ForceCase.upper,
width: 150,
max: 20,
padding: 8,
borderWidth: 1,
borderColor: '#000',
borderRadius: 6,
placeHolder: 'Username',
textAlign: 'center',
zoom: true
});
user.setText('prefilled');
user.blockInput = false;
//We'd need a password too
var passBg = game.add.nineSlice(game.width / 2+ 5, 250, 'input', null, 200, 50);
passBg.anchor.set(0.5);
password = game.add.inputField(game.width / 2 - 85, 250 - 17, {
font: '18px Arial',
fill: '#212121',
fillAlpha: 0,
fontWeight: 'bold',
width: 150,
padding: 8,
borderWidth: 1,
borderColor: '#000',
borderRadius: 6,
placeHolder: 'Password',
type: PhaserInput.InputType.password,
zoom: true
});
password.focusOutOnEnter = false;
testHolder = password;
//Let's not forget about age?!
var ageBg = game.add.nineSlice(game.width / 2 + 5, 320, 'input', null, 200, 50);
ageBg.anchor.set(0.5);
var age = game.add.inputField(game.width / 2 - 85, 320 - 17, {
font: '18px Arial',
fill: '#212121',
fillAlpha: 0,
fontWeight: 'bold',
width: 150,
padding: 8,
borderWidth: 1,
borderColor: '#000',
borderRadius: 6,
min: '18',
max: '99',
type: PhaserInput.InputType.number,
zoom: true
});
var submitBtn = game.add.nineSlice(game.width / 2 - 100, 360, 'btn', null, 100, 70);
var submit = game.add.text(game.width / 2 - 80, 380, 'Submit', {
font: '18px Arial'
});
submitBtn.inputEnabled = true;
submitBtn.input.useHandCursor = true;
submitBtn.events.onInputDown.add(function() {
game.add.text(30, 10, 'Welcome ' + user.value + '!', {
font: '18px Arial'
});
game.add.text(10, 50, 'Your password is: ' + password.value, {
font: '18px Arial'
});
login.destroy();
user.destroy();
password.destroy();
age.destroy();
submit.destroy();
});
var resetBtn = game.add.nineSlice(game.width / 2 + 10, 360, 'btn', null, 100, 70);
var reset = game.add.text(game.width / 2 + 35, 380, 'Reset', {
font: '18px Arial'
});
resetBtn.inputEnabled = true;
resetBtn.input.useHandCursor = true;
resetBtn.events.onInputDown.add(function() {
user.resetText();
password.resetText();
age.resetText();
});
PhaserInput.onKeyboardOpen.add(function () {
console.error("keyboard open", PhaserInput.KeyboardOpen)
});
PhaserInput.onKeyboardClose.add(function () {
console.error("keyboard close", PhaserInput.KeyboardOpen)
});
}
</script>
</head>
<body>
</body>
</html>
src/util/phaser-input-master/package-lock.json
Generated Executable
+1942
View File
File diff suppressed because it is too large Load Diff
src/util/phaser-input-master/package.json
Executable
+37
View File
@@ -0,0 +1,37 @@
{
"name": "@orange-games/phaser-input",
"author": "OrangeGames",
"version": "2.0.5",
"description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.",
"contributors": [
{
"name": "Ale Bles",
"email": "a.bles@orangegames.com"
}
],
"repository": {
"type": "git",
"url": "git@github.com:orange-games/phaser-input.git"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/orange-games/phaser-input/raw/master/LICENSE"
}
],
"config": {
"name": "phaser-input"
},
"devDependencies": {
"@orange-games/phaser-nineslice": "^2.0.0",
"grunt": "1.0.x",
"grunt-banner": "^0.6.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-connect": "^0.11.2",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-ts": "^6.0.0-beta.11",
"phaser": "2.6.2",
"typescript": "2.3.x"
}
}
src/util/phaser-input-master/ts/InputElement.ts
Executable
+184
View File
@@ -0,0 +1,184 @@
module PhaserInput {
export enum InputType {
text,
password,
number
}
export class InputElement {
private element: HTMLInputElement;
private keyUpCallback: () => void;
private inputChangeCallback: () => void;
private type: InputType;
private id: string;
private game: Phaser.Game;
private focusIn: Phaser.Signal;
private focusOut: Phaser.Signal;
constructor(game: Phaser.Game, id: string, type: InputType = InputType.text, value: string = '', focusIn?: Phaser.Signal, focusOut?: Phaser.Signal) {
this.id = id;
this.type = type;
this.game = game;
this.focusIn = focusIn;
this.focusOut = focusOut;
let canvasTopX: number = this.game.canvas.getBoundingClientRect().top + document.body.scrollTop;
this.element = document.createElement('input');
this.element.id = id;
this.element.style.position = 'absolute';
this.element.style.top = canvasTopX + 'px';
this.element.style.left = (-40).toString() + 'px';
this.element.style.width = (10).toString() + 'px';
this.element.style.height = (10).toString() + 'px';
this.element.style.border = '0px';
this.element.value = this.value;
this.element.type = InputType[type];
this.element.addEventListener('focusin', (): void => {
if (this.focusIn instanceof Phaser.Signal) {
this.focusIn.dispatch();
}
});
this.element.addEventListener('focusout', (): void => {
if (this.focusOut instanceof Phaser.Signal) {
this.focusOut.dispatch();
}
});
document.body.appendChild(this.element);
}
public addKeyUpListener(callback: () => void): void {
this.keyUpCallback = callback;
document.addEventListener('keyup', this.keyUpCallback);
this.element.addEventListener('input', this.keyUpCallback);
}
/**
* Captures the keyboard event on keydown, used to prevent it going from input field to sprite
**/
public blockKeyDownEvents(): void {
document.addEventListener('keydown', this.preventKeyPropagation);
}
/**
* To prevent bubbling of keyboard event from input field to sprite
**/
private preventKeyPropagation(evt: KeyboardEvent): void{
if(evt.stopPropagation){
evt.stopPropagation();
} else {
//for IE < 9
event.cancelBubble = true;
}
}
/**
* Remove listener that captures keydown keyboard events
**/
public unblockKeyDownEvents(): void {
document.removeEventListener('keydown', this.preventKeyPropagation);
}
public removeEventListener(): void {
document.removeEventListener('keyup', this.keyUpCallback);
this.element.removeEventListener('input', this.keyUpCallback);
}
public destroy() {
document.body.removeChild(this.element);
}
public setMax(max: string, min?: string) {
if (max === undefined) {
return;
}
if (this.type === InputType.text || this.type === InputType.password) {
this.element.maxLength = parseInt(max, 10);
} else if (this.type === InputType.number) {
this.element.max = max;
if (min === undefined) {
return;
}
this.element.min = min;
}
}
get value(): string {
return this.element.value;
}
set value(value: string) {
this.element.value = value;
}
public focus(): void {
this.element.focus();
if (!this.game.device.desktop && this.game.device.chrome) {
let originalWidth = window.innerWidth,
originalHeight = window.innerHeight;
let kbAppeared: boolean = false;
let interval: number = setInterval((): void => {
if (originalWidth > window.innerWidth || originalHeight > window.innerHeight) {
kbAppeared = true;
}
if (kbAppeared && originalWidth === window.innerWidth && originalHeight === window.innerHeight) {
if (this.focusOut instanceof Phaser.Signal) {
this.focusOut.dispatch();
}
clearInterval(interval);
}
}, 50);
}
}
public blur(): void {
this.element.blur();
}
get hasSelection () {
if (this.type === InputType.number) {
return false;
}
return this.element.selectionStart !== this.element.selectionEnd;
}
get caretStart() {
return this.element.selectionEnd;
}
get caretEnd() {
return this.element.selectionStart;
}
public getCaretPosition() {
if (this.type === InputType.number) {
return -1;
}
return this.element.selectionStart;
}
public setCaretPosition(pos: number) {
if (this.type === InputType.number) {
return ;
}
this.element.setSelectionRange(pos, pos);
}
}
}
src/util/phaser-input-master/ts/InputField.ts
Executable
+565
View File
@@ -0,0 +1,565 @@
module PhaserInput {
import Text = Phaser.Text;
export enum ForceCase {
none,
lower,
upper
}
export interface InputOptions extends Phaser.PhaserTextStyle {
x?: number;
y?: number;
placeHolder?: string;
fillAlpha?: number;
width?: number;
height?: number;
padding?: number;
borderWidth?: number;
borderColor?: string;
borderRadius?: number;
cursorColor?: string;
placeHolderColor?: string;
type?: InputType;
forceCase?: ForceCase;
min?: string;
max?: string;
textAlign?: string;
selectionColor?: string;
zoom?: boolean;
}
export class InputField extends Phaser.Sprite {
public focusOutOnEnter: boolean = true;
private placeHolder:Phaser.Text = null;
private box: InputBox = null;
private textMask: TextMask;
private focus:boolean = false;
private cursor:Phaser.Text;
private text:Phaser.Text;
private offscreenText: Phaser.Text;
public value:string = '';
private inputOptions: InputOptions;
private domElement: InputElement;
private selection: SelectionHighlight;
private windowScale: number = 1;
public blockInput: boolean = true;
public focusIn: Phaser.Signal = new Phaser.Signal();
public focusOut: Phaser.Signal = new Phaser.Signal();
get width(): number {
return this.inputOptions.width;
}
set width(width: number) {
this.inputOptions.width = width;
this.box.resize(width);
this.textMask.resize(width);
this.updateTextAlignment();
}
constructor(game:Phaser.Game, x:number, y:number, inputOptions:InputOptions = {}) {
super(game, x, y);
//Parse the options
this.inputOptions = inputOptions;
this.inputOptions.width = (typeof inputOptions.width === 'number') ? inputOptions.width : 150;
this.inputOptions.padding = (typeof inputOptions.padding === 'number') ? inputOptions.padding : 0;
this.inputOptions.textAlign = inputOptions.textAlign || 'left';
this.inputOptions.type = inputOptions.type || InputType.text;
this.inputOptions.forceCase = (inputOptions.forceCase) ? inputOptions.forceCase : ForceCase.none;
this.inputOptions.borderRadius = (typeof inputOptions.borderRadius === 'number') ? inputOptions.borderRadius : 0;
this.inputOptions.height = (typeof inputOptions.height === 'number') ? inputOptions.height : 14;
this.inputOptions.fillAlpha = (inputOptions.fillAlpha === undefined) ? 1 : inputOptions.fillAlpha;
this.inputOptions.selectionColor = inputOptions.selectionColor || 'rgba(179, 212, 253, 0.8)';
this.inputOptions.zoom = (!game.device.desktop) ? inputOptions.zoom || false : false;
//create the input box
this.box = new InputBox(this.game, inputOptions);
this.setTexture(this.box.generateTexture());
//create the mask that will be used for the texts
this.textMask = new TextMask(this.game, inputOptions);
this.addChild(this.textMask);
//Create the hidden dom elements
this.domElement = new InputElement(this.game, 'phaser-input-' + (Math.random() * 10000 | 0).toString(),
this.inputOptions.type, this.value, this.focusIn, this.focusOut);
this.domElement.setMax(this.inputOptions.max, this.inputOptions.min);
this.selection = new SelectionHighlight(this.game, this.inputOptions);
this.selection.mask = this.textMask;
this.addChild(this.selection);
if (inputOptions.placeHolder && inputOptions.placeHolder.length > 0) {
this.placeHolder = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding,
inputOptions.placeHolder, <Phaser.PhaserTextStyle>{
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.placeHolderColor || '#bfbebd'
});
this.placeHolder.mask = this.textMask;
this.addChild(this.placeHolder);
}
this.cursor = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding - 2, '|', <Phaser.PhaserTextStyle>{
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.cursorColor || '#000000'
});
this.cursor.visible = false;
this.addChild(this.cursor);
this.text = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding, '', <Phaser.PhaserTextStyle>{
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.fill || '#000000'
});
this.text.mask = this.textMask;
this.addChild(this.text);
this.offscreenText = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding, '', <Phaser.PhaserTextStyle>{
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.fill || '#000000'
});
this.updateTextAlignment();
this.inputEnabled = true;
this.input.useHandCursor = true;
this.game.input.onDown.add(this.checkDown, this);
this.focusOut.add((): void => {
if (PhaserInput.KeyboardOpen) {
this.endFocus();
if (this.inputOptions.zoom) {
this.zoomOut();
}
}
});
}
private updateTextAlignment(): void {
switch (this.inputOptions.textAlign) {
case 'left':
this.text.anchor.set(0, 0);
this.text.x = this.inputOptions.padding;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(0, 0);
}
this.cursor.x = this.inputOptions.padding + this.getCaretPosition();
break;
case 'center':
this.text.anchor.set(0.5, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width / 2;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(0.5, 0);
this.placeHolder.x = this.inputOptions.padding + this.inputOptions.width / 2;
}
this.cursor.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2 + this.getCaretPosition();
break;
case 'right':
this.text.anchor.set(1, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width;
if (null !== this.placeHolder) {
this.placeHolder.anchor.set(1, 0);
this.placeHolder.x = this.inputOptions.padding + this.inputOptions.width;
}
this.cursor.x = this.inputOptions.padding + this.inputOptions.width;
break;
}
}
/**
* 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: Phaser.Pointer): void
{
if(!this.value){
this.resetText();
}
if (this.input.checkPointerOver(e)) {
if (this.focus) {
this.setCaretOnclick(e);
return;
}
if (this.inputOptions.zoom && !PhaserInput.Zoomed) {
this.zoomIn();
}
this.startFocus();
} else {
if (this.focus === true) {
this.endFocus();
if (this.inputOptions.zoom) {
this.zoomOut();
}
}
}
}
/**
* Update function makes the cursor blink, it uses two private properties to make it toggle
*
* @returns {number}
*/
private blink:boolean = true;
private cnt: number = 0;
public update() {
this.text.update();
if (this.placeHolder) {
this.placeHolder.update();
}
if (!this.focus) {
return;
}
if (this.cnt !== 30) {
return this.cnt++;
}
this.cursor.visible = this.blink;
this.blink = !this.blink;
this.cnt = 0;
}
/**
* Focus is lost on the input element, we disable the cursor and remove the hidden input element
*/
public endFocus() {
if(!this.focus){
return;
}
this.domElement.removeEventListener();
if(this.blockInput === true) {
this.domElement.unblockKeyDownEvents();
}
this.focus = false;
if (this.value.length === 0 && null !== this.placeHolder) {
this.placeHolder.visible = true;
}
this.cursor.visible = false;
if (this.game.device.desktop) {
//Timeout is a chrome hack
setTimeout(() => {
this.domElement.blur();
}, 0);
} else {
this.domElement.blur();
}
if (!this.game.device.desktop) {
PhaserInput.KeyboardOpen = false;
PhaserInput.onKeyboardClose.dispatch();
}
}
/**
*
*/
public startFocus() {
this.focus = true;
if (null !== this.placeHolder) {
this.placeHolder.visible = false;
}
if (this.game.device.desktop) {
//Timeout is a chrome hack
setTimeout(() => {
this.keyUpProcessor();
}, 0);
} else {
this.keyUpProcessor();
}
if (!this.game.device.desktop) {
PhaserInput.KeyboardOpen = true;
PhaserInput.onKeyboardOpen.dispatch();
}
}
private keyUpProcessor():void {
this.domElement.addKeyUpListener(this.keyListener.bind(this));
this.domElement.focus();
if(this.blockInput === true) {
this.domElement.blockKeyDownEvents();
}
}
/**
* Update the text value in the box, and make sure the cursor is positioned correctly
*/
private updateText()
{
var text: string = '';
if (this.inputOptions.type === InputType.password) {
for (let i = 0; i < this.value.length; i++) {
text += '*';
}
}else if (this.inputOptions.type === InputType.number) {
var val = parseInt(this.value);
if (val < parseInt(this.inputOptions.min)) {
text = this.value = this.domElement.value = this.inputOptions.min;
} else if (val > parseInt(this.inputOptions.max)) {
text = this.value = this.domElement.value = this.inputOptions.max;
} else {
text = this.value;
}
} else {
text = this.value;
}
this.text.setText(text);
if (this.text.width > this.inputOptions.width) {
this.text.anchor.x = 1;
this.text.x = this.inputOptions.padding + this.inputOptions.width;
} else {
switch (this.inputOptions.textAlign) {
case 'left':
this.text.anchor.set(0, 0);
this.text.x = this.inputOptions.padding;
break;
case 'center':
this.text.anchor.set(0.5, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width / 2;
break;
case 'right':
this.text.anchor.set(1, 0);
this.text.x = this.inputOptions.padding + this.inputOptions.width;
break;
}
}
}
/**
* Updates the position of the caret in the phaser input field
*/
private updateCursor() {
if (this.text.width > this.inputOptions.width || this.inputOptions.textAlign === 'right') {
this.cursor.x = this.inputOptions.padding + this.inputOptions.width;
} else {
switch (this.inputOptions.textAlign) {
case 'left':
this.cursor.x = this.inputOptions.padding + this.getCaretPosition();
break;
case 'center':
this.cursor.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2 + this.getCaretPosition();
break;
}
}
}
/**
* Fetches the carrot position from the dom element. This one changes when you use the keyboard to navigate the element
*
* @returns {number}
*/
private getCaretPosition() {
var caretPosition: number = this.domElement.getCaretPosition();
if (-1 === caretPosition) {
return this.text.width;
}
var text = this.value;
if (this.inputOptions.type === InputType.password) {
text = '';
for (let i = 0; i < this.value.length; i++) {
text += '*';
}
}
this.offscreenText.setText(text.slice(0, caretPosition));
return this.offscreenText.width;
}
/**
* Set the caret when a click was made in the input field
*
* @param e
*/
private setCaretOnclick(e: Phaser.Pointer) {
var localX: number = (this.text.toLocal(new PIXI.Point(e.x, e.y), this.game.world)).x;
if (this.inputOptions.textAlign && this.inputOptions.textAlign === 'center') {
localX += this.text.width / 2;
}
var characterWidth: number = this.text.width / this.value.length;
var index: number = 0;
for (let i: number = 0; i < this.value.length; i++) {
if (localX >= i * characterWidth && localX <= (i + 1) * characterWidth) {
index = i;
break;
}
}
if (localX > (this.value.length - 1) * characterWidth) {
index = this.value.length;
}
this.startFocus();
this.domElement.setCaretPosition(index);
this.updateCursor();
}
/**
* This checks if a select has been made, and if so highlight it with blue
*/
private updateSelection(): void {
if (this.domElement.hasSelection) {
var text = this.value;
if (this.inputOptions.type === InputType.password) {
text = '';
for (let i = 0; i < this.value.length; i++) {
text += '*';
}
}
text = text.substring(this.domElement.caretStart, this.domElement.caretEnd);
this.offscreenText.setText(text);
this.selection.updateSelection(this.offscreenText.getBounds());
switch (this.inputOptions.textAlign) {
case 'left':
this.selection.x = this.inputOptions.padding;
break;
case 'center':
this.selection.x = this.inputOptions.padding + this.inputOptions.width / 2 - this.text.width / 2;
break;
}
} else {
this.selection.clear();
}
}
private zoomIn(): void {
if (PhaserInput.Zoomed) {
return;
}
let bounds: PIXI.Rectangle = this.getBounds();
if (window.innerHeight > window.innerWidth) {
this.windowScale = this.game.width / (bounds.width * 1.5);
} else {
this.windowScale = (this.game.width / 2) / (bounds.width * 1.5);
}
let offsetX: number = ((this.game.width - bounds.width * 1.5) / 2) / this.windowScale;
this.game.world.scale.set(this.game.world.scale.x * this.windowScale, this.game.world.scale.y * this.windowScale);
this.game.world.pivot.set(bounds.x - offsetX, bounds.y - this.inputOptions.padding * 2);
PhaserInput.Zoomed = true;
}
private zoomOut(): void {
if (!PhaserInput.Zoomed) {
return;
}
this.game.world.scale.set(this.game.world.scale.x / this.windowScale, this.game.world.scale.y / this.windowScale);
this.game.world.pivot.set(0, 0);
PhaserInput.Zoomed = false;
}
/**
* Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own
*/
private keyListener(evt: KeyboardEvent)
{
this.value = this.getFormattedText(this.domElement.value);
if (evt.keyCode === 13) {
if(this.focusOutOnEnter) {
this.endFocus();
}
return;
}
this.updateText();
this.updateCursor();
this.updateSelection();
evt.preventDefault();
}
/**
* We overwrite the destroy method because we want to delete the (hidden) dom element when the inputField was removed
*/
public destroy(destroyChildren?: boolean) {
this.game.input.onDown.remove(this.checkDown, this);
this.focusIn.removeAll();
this.focusOut.removeAll();
this.domElement.destroy();
super.destroy(destroyChildren);
}
/**
* Resets the text to an empty value
*/
public resetText() {
this.setText();
}
public setText(text: string = ''): void {
if (null !== this.placeHolder) {
if (text.length > 0) {
this.placeHolder.visible = false;
} else {
this.placeHolder.visible = true;
}
}
this.value = this.getFormattedText(text);
this.domElement.value = this.value;
this.updateText();
this.updateCursor();
this.endFocus();
}
/**
* Returns text formatted by rules stated in inputOptions
* @param text
*/
private getFormattedText(text: string): string {
switch (this.inputOptions.forceCase) {
default:
case ForceCase.none:
return text;
case ForceCase.lower:
return text.toLowerCase();
case ForceCase.upper:
return text.toUpperCase();
}
}
}
}
src/util/phaser-input-master/ts/Objects/InputBox.ts
Executable
+56
View File
@@ -0,0 +1,56 @@
module PhaserInput {
export class InputBox extends Phaser.Graphics {
private bgColor: number;
private borderRadius: number;
private borderColor: number;
private borderWidth: number;
private boxAlpha: number;
private boxHeight: number;
private padding: number;
private boxWidth: number;
constructor(game: Phaser.Game, inputOptions: InputOptions) {
super(game, 0, 0);
this.bgColor = (inputOptions.backgroundColor) ? parseInt(inputOptions.backgroundColor.slice(1), 16) : 0xffffff;
this.borderRadius = inputOptions.borderRadius || 0;
this.borderWidth = inputOptions.borderWidth || 1;
this.borderColor = (inputOptions.borderColor) ? parseInt(inputOptions.borderColor.slice(1), 16) : 0x959595;
this.boxAlpha = inputOptions.fillAlpha;
this.padding = inputOptions.padding;
var height: number = inputOptions.height;
var width: number = inputOptions.width;
var height: number;
if (inputOptions.font) {
//fetch height from font;
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
this.boxHeight = this.padding * 2 + height;
var width = inputOptions.width;
this.boxWidth = this.padding * 2 + width;
this.drawBox();
}
public resize(newWidth: number): void {
this.boxWidth = this.padding * 2 + newWidth;
this.drawBox();
}
private drawBox(): void {
this.clear()
.beginFill(this.bgColor, this.boxAlpha)
.lineStyle(this.borderWidth, this.borderColor, this.boxAlpha);
if (this.borderRadius > 0) {
this.drawRoundedRect(0, 0, this.boxWidth, this.boxHeight, this.borderRadius);
} else {
this.drawRect(0, 0, this.boxWidth, this.boxHeight);
}
}
}
}
src/util/phaser-input-master/ts/Objects/SelectionHighlight.ts
Executable
+25
View File
@@ -0,0 +1,25 @@
module PhaserInput {
export class SelectionHighlight extends Phaser.Graphics {
private inputOptions: InputOptions;
constructor(game: Phaser.Game, inputOptions: InputOptions) {
super(game, inputOptions.padding, inputOptions.padding);
this.inputOptions = inputOptions;
}
public updateSelection(rect: PIXI.Rectangle): void {
var color = Phaser.Color.webToColor(this.inputOptions.selectionColor);
this.clear();
this.beginFill(SelectionHighlight.rgb2hex(color), color.a);
this.drawRect(rect.x, rect.y, rect.width, rect.height - this.inputOptions.padding);
}
public static rgb2hex(color: {r: number, g: number, b: number, a: number}): number {
return parseInt(("0" + color.r.toString(16)).slice(-2) +
("0" + color.g.toString(16)).slice(-2) +
("0" + color.b.toString(16)).slice(-2), 16);
}
}
}
src/util/phaser-input-master/ts/Objects/TextMask.ts
Executable
+32
View File
@@ -0,0 +1,32 @@
module PhaserInput {
export class TextMask extends Phaser.Graphics {
private maskWidth: number;
private maskHeight: number;
constructor(game: Phaser.Game, inputOptions: InputOptions) {
super(game, inputOptions.padding, inputOptions.padding);
var height = inputOptions.height;
if (inputOptions.font) {
//fetch height from font;
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
this.maskWidth = inputOptions.width;
this.maskHeight = height * 1.3;
this.drawMask();
}
public resize(newWidth: number): void {
this.maskWidth = newWidth;
this.drawMask();
}
private drawMask(): void {
this.clear()
.beginFill(0x000000)
.drawRect(0, 0, this.maskWidth, this.maskHeight)
.endFill();
}
}
}
src/util/phaser-input-master/ts/Plugin.ts
Executable
+53
View File
@@ -0,0 +1,53 @@
module PhaserInput {
export var Zoomed: boolean = false;
export var KeyboardOpen: boolean = false;
export const onKeyboardOpen: Phaser.Signal = new Phaser.Signal();
export const onKeyboardClose: Phaser.Signal = new Phaser.Signal()
export interface InputFieldObjectFactory extends Phaser.GameObjectFactory {
inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions, group?: Phaser.Group) => PhaserInput.InputField;
}
export interface InputFieldObjectCreator extends Phaser.GameObjectCreator {
inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions) => PhaserInput.InputField;
}
export interface InputFieldGame extends Phaser.Game {
add: InputFieldObjectFactory;
make: InputFieldObjectCreator;
}
export class Plugin extends Phaser.Plugin {
public static Zoomed: boolean = false;
public static KeyboardOpen: boolean = false;
public static onKeyboardOpen: Phaser.Signal = new Phaser.Signal();
public static onKeyboardClose: Phaser.Signal = new Phaser.Signal();
constructor(game: Phaser.Game, parent: Phaser.PluginManager) {
super(game, parent);
this.addInputFieldFactory();
}
/**
* Extends the GameObjectFactory prototype with the support of adding InputField. this allows us to add InputField methods to the game just like any other object:
* game.add.InputField();
*/
private addInputFieldFactory() {
(<PhaserInput.InputFieldObjectFactory>Phaser.GameObjectFactory.prototype).inputField = function (x: number, y: number, inputOptions: PhaserInput.InputOptions, group?: Phaser.Group): PhaserInput.InputField {
if (group === undefined) {
group = this.world;
}
var nineSliceObject = new PhaserInput.InputField(this.game, x, y, inputOptions);
return group.add(nineSliceObject);
};
(<PhaserInput.InputFieldObjectCreator>Phaser.GameObjectCreator.prototype).inputField = function (x: number, y: number, inputOptions: PhaserInput.InputOptions): PhaserInput.InputField {
return new PhaserInput.InputField(this.game, x, y, inputOptions);
};
}
}
}
src/util/phaser-input-master/ts/definitions.d.ts
Vendored Executable
+2
View File
@@ -0,0 +1,2 @@
/// <reference path='../node_modules/phaser/typescript/pixi.d.ts'/>
/// <reference path='../node_modules/phaser/typescript/phaser.d.ts'/>
src/util/phaser-input-master/tslint.json
Executable
+131
View File
@@ -0,0 +1,131 @@
{
"rules": {
"align": [
true,
"parameters",
"statements"
],
"ban": false,
"class-name": true,
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"interface-name": true,
"jsdoc-format": true,
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
200
],
"member-access": true,
"no-any": false,
"no-arg": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-constructor-vars": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-inferrable-types": false,
"no-internal-module": false,
"no-null-keyword": false,
"no-require-imports": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unreachable": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-finally",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"radix": true,
"semicolon": [
true,
"always"
],
"switch-default": true,
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef": [
true,
"call-signature",
"parameter",
"arrow-parameter",
"property-declaration",
"variable-declaration",
"member-variable-declaration"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"use-strict": false,
"variable-name": [
true,
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}