Status
Not open for further replies.

BurningOrca

Veteran
Veteran
Joined
Apr 14, 2019
Messages
240
Reaction score
207
First Language
German
Primarily Uses
RMMV
I want a certain window of mine to listen to keyboard events, when it is shown and don't listen to them, when it is hidden. The problem is document.removeEventListener seems not to work, not to throw any exception and always return undefined, so I cannot figure out why it does not work. From the description of the function I also cannot figure out why. I don't use any of the optional parameter, so I thought it should work.

Here is some code to test out what I mean. Just call SceneManager.push(Scene_EventListener) in the console. Even when the scene is popped and the window should not exist anymore, the onKeyPress Event is still functioning:
Code:
function Scene_EventListener()
{
    this.initialize.apply(this, arguments);
}

Scene_EventListener.prototype = Object.create(Scene_MenuBase.prototype);
Scene_EventListener.prototype.constructor = Scene_EventListener;

Scene_EventListener.prototype.initialize = function()
{
     Scene_MenuBase.prototype.initialize.call(this, arguments);
}

Scene_EventListener.prototype.create = function()
{
    Scene_MenuBase.prototype.create.call(this);
    this._commandWindow = new Window_EventListenerCommand();
    this._eventListenerWindow = new Window_EventListener();

    this._commandWindow.setHandler('Show', this.onShow.bind(this));
    this._commandWindow.setHandler('Hide', this.onHide.bind(this));
    this._commandWindow.setHandler('cancel', this.popScene.bind(this));

    this.addWindow(this._commandWindow);
    this.addWindow(this._eventListenerWindow);
}

Scene_EventListener.prototype.onShow = function()
{
    this._commandWindow._showEnabled = false;
    this._commandWindow.refresh();
    this._commandWindow.activate();
    this._eventListenerWindow.show();
}

Scene_EventListener.prototype.onHide = function()
{
    this._commandWindow._showEnabled = true;
    this._commandWindow.refresh();
    this._commandWindow.activate();
    this._eventListenerWindow.hide();
}

Scene_EventListener.prototype.popScene = function()
{
    this._eventListenerWindow.hide();
    Scene_Base.prototype.popScene.call(this);
}

function Window_EventListenerCommand()
{
    this.initialize.apply(this, arguments);
}

Window_EventListenerCommand.prototype = Object.create(Window_Command.prototype);
Window_EventListenerCommand.prototype.constructor = Window_EventListenerCommand;

Window_EventListenerCommand.prototype.initialize = function()
{
    this._showEnabled = false;
    Window_Command.prototype.initialize.call(this, 0, 0);
}

Window_EventListenerCommand.prototype.maxCols = function()
{
    return 3;
}

Window_EventListenerCommand.prototype.windowWidth = function()
{
    return SceneManager._screenWidth;
}

Window_EventListenerCommand.prototype.windowHeight = function()
{
    return this.lineHeight() * 2;
}

Window_EventListenerCommand.prototype.makeCommandList = function()
{
    this.addCommand('Show', 'Show', this._showEnabled);
    this.addCommand('Hide', 'Hide', !this._showEnabled);
    this.addCommand(TextManager.cancel, 'cancel');
}

function Window_EventListener()
{
    this.initialize.apply(this, arguments);
}

Window_EventListener.prototype = Object.create(Window_Base.prototype);
Window_EventListener.prototype.constructor = Window_EventListener;

Window_EventListener.prototype.initialize = function()
{
    this._text = "";

    Window_Base.prototype.initialize.call(this, 0, this.lineHeight() * 2, SceneManager._screenWidth, SceneManager._screenHeight - this.lineHeight() * 2);

    document.addEventListener("keypress", this.onKeyPress.bind(this));
}

Window_EventListener.prototype.show = function()
{
    document.addEventListener("keypress", this.onKeyPress.bind(this));
    Window_Base.prototype.show.call(this);
}

Window_EventListener.prototype.hide = function()
{
    document.removeEventListener("keypress", this.onKeyPress.bind(this));
    Window_Base.prototype.hide.call(this);
}

Window_EventListener.prototype.onKeyPress = function(event)
{
    let char = String.fromCharCode(event.charCode)

    if( char )
    {
        this._text += char;
        alert(this._text);
    }
    else
    {
        SoundManager.playBuzzer();
    }
}
 

Drakkonis

Veteran
Veteran
Joined
Mar 5, 2021
Messages
210
Reaction score
160
First Language
English
Primarily Uses
RMMZ
Have you tried removing the ".bind(this)" from the removeEventListener? From what little I've seen, the function passed there has to be a simply named one, the page I found says that function(){script} style won't work, I'm not sure if that extends to the .bind as well or not.

Honestly I'd be leery of any document functions, since they modify the whole game window, not just windows in a game. The engine already has methods for listening to keypress events, you could just copy those with a check to see if the window is shown or not, windows also have open and close methods that can be used for checks like that as well.
 

BurningOrca

Veteran
Veteran
Joined
Apr 14, 2019
Messages
240
Reaction score
207
First Language
German
Primarily Uses
RMMV
It seems so, that bounded events don't work.
I've tried out many thing myself in the meantime and the following worked:

Code:
handleKeyPress = function(event)
{
    if( windowToHandleEvent )
        windowToHandleEvent.onKeyPress.call(windowToHandleEvent, event);
}

function Window_EventListener()
{
    this.initialize.apply(this, arguments);
}

Window_EventListener.prototype = Object.create(Window_Base.prototype);
Window_EventListener.prototype.constructor = Window_EventListener;

Window_EventListener.prototype.initialize = function()
{
    this._text = "";

    Window_Base.prototype.initialize.call(this, 0, this.lineHeight() * 2, SceneManager._screenWidth, SceneManager._screenHeight - this.lineHeight() * 2);

    windowToHandleEvent = this;
    document.addEventListener("keypress", handleKeyPress );
}


Window_EventListener.prototype.show = function()
{
    windowToHandleEvent = this;
    document.addEventListener("keypress", handleKeyPress);
    Window_Base.prototype.show.call(this);
}

Window_EventListener.prototype.hide = function()
{
    document.removeEventListener("keypress", handleKeyPress);
    Window_Base.prototype.hide.call(this);
}

Thank you!
 

Shaz

Global Moderators
Global Mod
Joined
Mar 2, 2012
Messages
43,670
Reaction score
15,291
First Language
English
Primarily Uses
RMMV

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.

 
Status
Not open for further replies.

Latest Threads

Latest Posts

Latest Profile Posts

I wonder if color LUTs is possible for RPG Maker. It would be game changer and can replace the not so good looking tint screen
new mechanic in battle where you can mentally erase enemies when you deplete all their MP instead HP. this gives you a special item of their "memory". it's pretty to do in battle so far.
Apparently MZ lets you preview move routes in the move route editor without having to start up test game. That could save a lot of time during development compared to MV, especially for a long game that uses a lot of event movement for cutscenes.
A repost of an old meme I had made, now with music

Forum statistics

Threads
115,862
Messages
1,093,547
Members
151,083
Latest member
pasted
Top