Input doesn't work in fullscreen

ebyron15 commented 5 years ago

When I use the Phaser function to go to fullscreen, it breaks the phaser-input functionality. I still see the input box and have a blinking cursor but cannot enter any text. If I toggle back out of fullscreen, without reloading the browser page or the game state, the input field works again.

I confirmed that the default setting for input options for zoom is correctly set to false and I'm currently testing on a desktop browser using Chrome.

halilcakar commented 5 years ago

I can confirm this, also having same issue with fullscreen and phaser-input.

halilcakar commented 5 years ago

Hey @ebyron15, I found the problem and fix it for my self. Let me explain to you. Phaser Input is adding the input element to directly body and if you add your game in another div it's not working.

So for example i change my config like this:

var config = {
     width: 1920,
     height: 1080,
     renderer: Phaser.AUTO,
     fullScreenTarget: document.getElementById('core'), // this line is new for me
     parent: 'core'
};

And also inside phaser-input.js, on var InputElement = .... part, added this instead of this:

document.body.appendChild(this.element);
->
document.getElementById('core').appendChild(this.element);

Just cause my parent div is named core.

Cause my config have fullScreenTarget option, It's changing that div which is core div for me. And cause they are the same directory like same parent div's(i mean canvas and input element) it's working.

I actually wanted to make the change and make a PR for this. But idk how to edit .ts files 😄 I only change the phaser-input.js, so it's not inside .min or .map or .ts files.

Anyway i changed directly on .js build. But Maybe @AleBles could change and make it for us?

ebyron15 commented 5 years ago

Thanks for sharing this. I don't have a div in my html but I was able to add the id to the and that worked. Really appreciate the help.

Eric

On Tue, Nov 27, 2018 at 12:42 AM Halil CAKAR notifications@github.com wrote:

Hey @ebyron15 https://github.com/ebyron15, I found the problem and fix it for my self. Let me explain to you. Phaser Input is adding the input element to directly body and if you add your game in another div it's not working.

So for example i change my config like this:

var config = { width: 1920, height: 1080, renderer: Phaser.AUTO, fullScreenTarget: document.getElementById('core'), // this line is new for me parent: 'core' };

And also inside phaser-input.js, on var InputElement = .... part, added this instead of this:

document.body.appendChild(this.element);->document.getElementById('core').appendChild(this.element);

Just cause my parent div is named core.

Cause my config have fullScreenTarget option, It's changing that div which is core div for me. And cause they are the same directory like same parent div's(i mean canvas and input element) it's working.

I actually wanted to make the change and make a PR for this. But idk how to edit .ts files 😄 I only change the phaser-input.js, so it's not inside .min or .map or .ts files.

Anyway i changed directly on .js build. But Maybe @AleBles https://github.com/AleBles could change and make it for us?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/orange-games/phaser-input/issues/74#issuecomment-441708971, or mute the thread https://github.com/notifications/unsubscribe-auth/AacAJqc_DmMUaTYiPj2i35wkTGtZZLT8ks5uzBnugaJpZM4YlBhU .

halilcakar commented 5 years ago

I'm glad that i could help @ebyron15. I hope also they made the changes for us for use properly @AleBles @zBart

AleBles commented 5 years ago

@halilcakarr If I understand correctly I can do the following:

1) First check if fullscreentarget is set, if so, append input to that element 2) If there is no fullscreen target we'll add it to the parent of the canvas 3) If all fails we can add it to the body

halilcakar commented 5 years ago

Hey @AleBles, I think with this update, everything will be fine for now. For the third option u might wanna add a console.warn() that says: update body like this:

<body id="body">

referanced from @ebyron15

Edit: If there is no fullScreenTarget is setted, it's not gonna work anyway. Cause when we request a fullscreen on canvas, it wraps it self with a div, in case our input's gonna be seperated and not gonna work again. So I believe u might wanna change the docs on this. Maybe we might offer ppl to use same parent and fullScreenTarget div's for phaser or smt.

@ebyron15 Any idea's ?

Edit-2: I want to ask if is there javascript version of this repo? I mean with webpack kind of this. If there is i would like to keep working on this repo. Cause there will be a lot person to use this with phaser-ce if only if someone* would keep developing this.

halilcakar commented 5 years ago

Hello @AleBles, Is there any news about this ? :)

andrewbaranov commented 5 years ago

yeh... we are also waiting for update/fix

halilcakar commented 5 years ago

Well @andrewbaranov, i just gave up and go through for phaser-v3, which on version 3.16 is gonna possibly come this week, it has a game.dom object with it.

Check the examples on phaser3-examples

So i'm just waiting to Rich to release version 3.16 and then gonna use that instead.

azerion / phaser-input

Input doesn't work in fullscreen #74