RS_InputDialog.js

//================================================================
// RS_InputDialog.js
// ---------------------------------------------------------------
// The MIT License
// Copyright (c) 2016 biud436
// ---------------------------------------------------------------
// Free for commercial and non commercial use.
//================================================================
/*:
 * @target MZ
 * @plugindesc This plugin allows you to display Text Edit Box on the screen. <RS_InputDialog>
 * @author biud436
 * @url https://biud436.tistory.com
 *
 * @param textBox Width
 * @type number
 * @desc Sets the width of Text Box.
 * @default 488
 * @decimals 0
 * @min 28
 *
 * @param textBox Height
 * @type number
 * @desc Sets the height of Text Box.
 * @default 36
 * @decimals 0
 * @min 8
 *
 * @param variable ID
 * @type variable
 * @desc Sets an id of the game variables.
 * @default 3
 *
 * @param debug
 * @type boolean
 * @desc Whether this determines the alert window.
 * @default false
 *
 * @param Text Hint
 * @desc Sets the string that is the top of the text box.
 * @default Please enter the value...
 *
 * @param direction
 * @type select
 * @desc Sets the direction of content flow.
 * @default ltr
 * @option Left to Right
 * @value ltr
 * @option Right to Left
 * @value rtl
 *
 * @param Max Length
 * @type number
 * @desc Specifies the maximum number of character for an input field
 * @default 255
 * @min 1
 * @max 255
 *
 * @param Style
 *
 * @param CSS
 * @parent Style
 * @type note
 * @desc Edit the css as you want.
 * @default ""
 *
 * @param Font Family
 * @parent Style
 * @type String
 * @desc Specify the font family.
 * @default GameFont
 *
 * @param Button Name
 *
 * @param Ok
 * @parent Button Name
 * @text Ok Button Name
 * @desc Specify the name of the Ok Button.
 * @default OK
 *
 * @param Cancel
 * @parent Button Name
 * @text Cancel Button Name
 * @desc Specify the name of the Cancel Button.
 * @default Cancel
 *
 * @param Position
 * @text Initial Position
 * @desc Specify the position of the input dialog.
 * ('center' or '0, 0')
 * @default center
 *
 *
 * @help
 * This plugin is RS_InputDialog for MZ version.
 *
 * =============================================================================
 * Change Log
 * =============================================================================
 * 2016.08.09 (v1.0.0) - First Release.
 * 2016.08.09 (v1.0.1) - Added Background Color.
 * 2016.08.10 (v1.0.1a) - Added ID Variables.
 * 2016.08.10 (v1.1.0) - Fixed Window_DialogHelp class into the plugin.
 * 2016.08.16 (v1.1.1) - Added the direction property setting the direction of content flow.
 * 2016.08.16 (v1.1.1a) - Fixed a whitespace bug.
 * 2016.10.14 (v1.1.2) - Fixed the issue that is not working in Battle.
 * 2016.10.14 (v1.1.3) :
 * - Fixed the bug that does not change the background color.
 * - Fixed the bug that does not change the variable ID.
 * 2016.10.17 (v1.1.4) - Fixed the frame works of input dialog in battle.
 * 2016.10.18 (v1.1.5) - Fixed an issue that battler's movement is too fast.
 * 2016.10.29 (v1.1.6) - Added the function that allows you to specify the maximum number of character for an input field.
 * 2016.11.13 (v1.1.6a) - Fixed the issue that is directly calling the requestUpdate function of SceneManager.
 * 2016.12.02 (v1.1.6e) :
 * - Added some style codes such as a text shadow and an outline into the text box.
 * - Fixed the way that can temporarily stop attack and skill actions with an enemy when the text box is activated in the battle.
 * - It will not process the text input when the text box is not shown in the battle.
 * - In the debug mode, It adds the result value to a log window after the text input is done.
 * 2016.12.08 (v1.1.6h) - Removed the text hint window.
 * 2016.12.17 (v1.1.6i) - Fixed an issue that an integer value could not be checked due to the text type issue.
 * 2017.01.30 (v1.1.7) - Fixed an issue that is not working properly if the text dialog has a string to start with a number.
 * 2017.02.16 (v1.1.8) :
 * - Fixed incorrect position and width, height values in the text box.
 * - Added new feature that indicates the input dialog at the top position of the screen when pressing any key on your own mobile device.
 * - Added new feature that automatically returns a result of the text box if you did not press anything.
 * 2018.01.25 (v1.1.8a) - test...
 * 2018.01.30 (v1.1.9) :
 * - Added the button called 'OK'.
 * - Added the button called 'Cancel'.
 * - Removed the feature that can change the background-color of the input dialog.
 * - Fixed the issue that is not clicking the button in the mobile.
 * 2018.02.03 (v1.1.10) :
 * - Fixed the issue that is not working in RMMV 1.5.1
 * - Fixed the default value of the plugin parameter  called 'CSS'.
 * 2018.02.06 (v1.1.11) :
 * - Fixed the issue that is not working in the battle scene.
 * 2018.10.22 (v1.1.15) :
 * - Added a plugin command that sets the position of the input dialog.
 * - Added a feature that the keyboard layout is displayed again if you touch the text box from android devices.
 * - On the mobile device, the font size is now set to 1rem (16px).
 * - Fixed the default UI-theme is to black.
 * - In the chromium 69+ more over, The input element is always displayed even though <canvas>'s z-index is large than <input> element's z-index. so I've fixed that.
 * 2019.03.05 (v1.1.16) :
 * - Fixed the issue that can not create a background when using Irina_PerformanceUpgrade.
 * 2020.08.28 (v2.0.0) :
 * - Ported with MZ.
 * 2024.01.01 (v2.1.0) :
 * - added a feature that can change the font family.
 * - fixed the issue that can't move cursor by touch on mobile device.
 * 2024.01.01 (v2.1.1) :
 * - Fixed an issue with <input> appearing in the right-hand corner on mobile.
 * 2024.10.19 (v2.2) :
 * - Added a new event listener for the onchange event.
 *
 * @command open
 * @desc Opens Input Dialog.
 *
 * @command width
 * @desc Changes the width of Input Dialog.
 *
 * @arg width
 * @type number
 * @desc Specify the width value.
 * @default 488
 *
 * @command text
 * @text Set placeholder Text
 * @desc Changes the text of Input Dialog for representing the description.
 *
 * @arg text
 * @type string
 * @desc Specify the placeholder text
 * @default Please enter the string...
 *
 * @command variableID
 * @desc Changes an id of the variable for saving the value.
 *
 * @arg number
 * @type variable
 * @desc Specify game variable's id.
 * @default 3
 *
 * @command debug
 * @desc Displays a alert window of the browser when you are pressing the enter
 *
 * @arg valid
 * @type boolean
 * @desc Checks with whether the alert window is displayed.
 * @default false
 * @on true
 * @off false
 *
 * @command maxLength
 * @desc Specifies the maximum number of character for an input field
 *
 * @arg value
 * @type number
 * @desc Specify the maxLength value.
 * @default 10
 *
 * @command pos
 * @desc This plugin commands decide how to set the position of the input dialog.
 *
 * @arg posType
 * @type select
 * @desc Specify the position type value.
 * @default center
 * @option center
 * @value center
 * @option 0 0
 * @value 0 0
 *
 */

var Imported = Imported || {};
Imported.RS_InputDialog = true;

var RS = RS || {};
RS.InputDialog = RS.InputDialog || {};
RS.InputDialog.Params = RS.InputDialog.Params || {};
RS.Utils = RS.Utils || {};

(() => {
    "use strict";

    const pluginParams = $plugins.filter((i) => {
        return i.description.contains("<RS_InputDialog>");
    });

    const pluginName = pluginParams.length > 0 && pluginParams[0].name;
    const parameters = pluginParams.length > 0 && pluginParams[0].parameters;

    RS.Utils.jsonParse = function (str) {
        let retData = JSON.parse(str, function (k, v) {
            try {
                return RS.Utils.jsonParse(v);
            } catch (e) {
                return v;
            }
        });
        return retData;
    };

    //============================================================================
    // Global Variables in RS.InputDialog
    //============================================================================

    RS.InputDialog.Params.textBoxWidth = Number(
        parameters["textBox Width"] || 488
    );
    RS.InputDialog.Params.textBoxHeight = Number(
        parameters["textBox Height"] || 36
    );
    RS.InputDialog.Params.variableID = Number(parameters["variable ID"] || 3);

    RS.InputDialog.Params.debug = Boolean(parameters["debug"] === "true");

    RS.InputDialog.Params.localText = String(
        parameters["Text Hint"] || "Test Message"
    );
    RS.InputDialog.Params.inputDirection = String(
        parameters["direction"] || "ltr"
    );

    RS.InputDialog.Params.nMaxLength = parseInt(
        parameters["Max Length"] || "6"
    );

    RS.InputDialog.Params.szFontFamily = String(
        parameters["Font Family"] || "GameFont"
    );

    RS.InputDialog.Params.szTextBoxId = "md_textBox";
    RS.InputDialog.Params.szFieldId = "md_inputField";

    RS.InputDialog.Params.nCheckScreenLock = 8000;

    RS.InputDialog.Params.okButtonName = parameters["Ok"] || "Ok";
    RS.InputDialog.Params.cancelButtonName = parameters["Cancel"] || "Cancel";

    RS.InputDialog.Params.exStyle = RS.Utils.jsonParse(parameters["CSS"]);

    RS.InputDialog.Params.pos = new PIXI.Point(0, 0);
    RS.InputDialog.Params.isCenterAlignment = (() => {
        let position = parameters["Position"];
        position = position.trim();
        if (position === "center") {
            return true;
        }
        const reg = /(.*)[ ]*,[ ]*(.*)/i;
        if (reg.exec(position)) {
            if (RS.InputDialog.Params.pos) {
                RS.InputDialog.Params.pos.x = parseFloat(RegExp.$1);
                RS.InputDialog.Params.pos.y = parseFloat(RegExp.$2);
            }
        }
        return false;
    })();

    //============================================================================
    // public methods in RS.InputDialog
    //============================================================================

    Object.assign(RS.InputDialog, {
        createInstance() {
            const scene = SceneManager._scene;
            if (scene instanceof Scene_Battle) {
                scene.showTextBox();
            } else {
                SceneManager.push(Scene_InputDialog);
            }
        },

        setRect() {
            "use strict";

            let query, textBox, OkButton, CancelButton;

            query = `div#${RS.InputDialog.Params.szFieldId} table.inputDialogContainer tr td input[type=text]`;
            textBox = document.querySelector(query);

            query = `div#${RS.InputDialog.Params.szFieldId} table.inputDialogContainer tr td input[type=button][id=inputDialog-OkBtn]`;
            OkButton = document.querySelector(query);

            query = `div#${RS.InputDialog.Params.szFieldId} table.inputDialogContainer tr td input[type=button][id=inputDialog-CancelBtn]`;
            CancelButton = document.querySelector(query);

            if (textBox) {
                textBox.style.fontSize = Utils.isMobileDevice()
                    ? "1rem"
                    : 2 * Graphics._realScale + "em";
                textBox.style.width =
                    RS.InputDialog.getScreenWidth(
                        RS.InputDialog.Params.textBoxWidth * Graphics._realScale
                    ) + "px";
                textBox.style.height =
                    RS.InputDialog.getScreenHeight(
                        RS.InputDialog.Params.textBoxHeight *
                            Graphics._realScale
                    ) + "px";
            }

            if (OkButton)
                OkButton.style.fontSize = Utils.isMobileDevice()
                    ? "1rem"
                    : 1 * Graphics._realScale + "em";
            if (CancelButton)
                CancelButton.style.fontSize = Utils.isMobileDevice()
                    ? "1rem"
                    : 1 * Graphics._realScale + "em";
        },

        startBattleBlur(target, value) {
            var blur = "blur(%1px)".format(value);
            target.style.webkitFilter = blur;
            target.style.filter = blur;
        },

        getScreenWidth(value) {
            return value;
        },

        getScreenHeight(value) {
            return value;
        },
    });

    //============================================================================
    // Input
    //============================================================================

    var original_Input_shouldPreventDefault = Input._shouldPreventDefault;
    var dialog_Input_shouldPreventDefault = function (keyCode) {
        switch (keyCode) {
            case 33: // pageup
            case 34: // pagedown
            // case 37:    // left arrow
            case 38: // up arrow
            // case 39:    // right arrow
            case 40: // down arrow
                return true;
        }
        return false;
    };

    TouchInput._onTouchStart = function (event) {
        const field = document.getElementById(RS.InputDialog.Params.szFieldId);
        const isFieldVisible = field && field.style.display !== "none";

        for (const touch of event.changedTouches) {
            const x = Graphics.pageToCanvasX(touch.pageX);
            const y = Graphics.pageToCanvasY(touch.pageY);
            if (Graphics.isInsideCanvas(x, y)) {
                this._screenPressed = true;
                this._pressedTime = 0;
                if (event.touches.length >= 2) {
                    this._onCancel(x, y);
                } else {
                    this._onTrigger(x, y);
                }

                if (!isFieldVisible) {
                    event.preventDefault();
                }
            }
        }
        if (window.cordova || window.navigator.standalone) {
            if (!isFieldVisible) {
                event.preventDefault();
            }
        }
    };

    const utils = {
        createVirutalElement(tagName) {
            if (typeof document === "undefined") {
                const jsdom = require("jsdom").JSDOM;
                const doc = new jsdom("<html><body></body></html>");
                const document = doc.window.document;

                return document.createElement(tagName);
            } else {
                if (tagName === "body") return document.body;
                return document.createElement(tagName);
            }
        },
        toCamelCase(name) {
            const snake = name || "";

            let nodes = snake.split(/[\s\-]/);
            let nodesTail = nodes.slice(1);

            const camel = nodes[0].concat(
                nodesTail.map((i) => {
                    return i[0].toUpperCase() + i.slice(1);
                })
            );
            return camel;
        },
        getClassName(name) {
            const str = toCamelCase(name);
            return str.slice(0, 1).toUpperCase() + str.slice(1);
        },
    };

    /**
     * @class TextBoxBuilder
     * @description
     * This class is used to create a text box.
     */

    class TextBoxBuilder {
        render() {
            const elements = this.prepareElement();
            const rootElement = elements.root;
            let parentNode = null;

            const virtualRender = (root) => {
                if (!root.tagName) {
                    return;
                }

                // create an element.
                const elem = utils.createVirutalElement(root.tagName);
                if (!parentNode) {
                    // parentNode = document.body;
                    parentNode = body;
                }
                parentNode.appendChild(elem);

                // set attributes.
                if (root.attributes) {
                    for (const attr in root.attributes) {
                        elem.setAttribute(attr, root.attributes[attr]);
                    }
                }

                // set class.
                if (root.class) {
                    elem.className = root.class;
                }

                // set type.
                if (root.type) {
                    elem.setAttribute("type", root.type);
                }

                // set id.
                if (root.id) {
                    elem.setAttribute("id", root.id);
                }

                // set placeholder.
                if (root.placeholder) {
                    elem.setAttribute("placeholder", root.placeholder);
                }

                // set value.
                if (root.value) {
                    elem.setAttribute("value", root.value);
                }

                // set style.
                if (root.style) {
                    // change snake to camel.
                    const propertyName = utils.toCamelCase(style);

                    for (const style in root.style) {
                        elem.style[propertyName] = root.style[style];
                    }
                }

                // set injected style.
                if (root.injectedStyle) {
                    elem.setAttribute("style", root.injectedStyle);
                }

                // set children.
                if (root.children) {
                    // parent node를 이것으로 설정
                    parentNode = elem;

                    root.children.forEach((child) => {
                        virtualRender(child);
                    });
                }
            };

            virtualRender(rootElement);
        }

        prepareElement() {
            return {
                root: {
                    class: "inputDialogContainer",
                    tagName: "table",
                    children: [
                        {
                            tagName: "tr",
                            children: [
                                {
                                    tagName: "td",
                                    class: "col",
                                    children: [
                                        {
                                            tagName: "input",
                                            type: "text",
                                            id: "RS.InputDialog.Params.szTextBoxId",
                                            class: "inputDialog",
                                            placeholder:
                                                "RS.InputDialog.Params.localText",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tagName: "tr",
                            class: "row",
                            attributes: {
                                valign: "bottom",
                            },
                            children: [
                                {
                                    tagName: "td",
                                    class: "col",
                                    attributes: {
                                        align: "right",
                                    },
                                    children: [
                                        {
                                            tagName: "input",
                                            type: "button",
                                            class: "defaultButton",
                                            id: "inputDialog-OkBtn",
                                            value: "RS.InputDialog.Params.okButtonName",
                                        },
                                        {
                                            tagName: "input",
                                            type: "button",
                                            class: "defaultButton",
                                            id: "inputDialog-CancelBtn",
                                            value: "RS.InputDialog.Params.cancelButtonName",
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            };
        }
    }

    //============================================================================
    // TextBox
    //============================================================================

    class TextBox {
        constructor(fieldID, textBoxID) {
            this._fieldId = fieldID;
            this._textBoxID = textBoxID;
            this._lastInputTime = performance.now();
            this._ready = false;
            this.prepareElement(fieldID);
            this.createTextBox(textBoxID);
        }

        startToConvertInput() {
            Input._shouldPreventDefault = dialog_Input_shouldPreventDefault;
        }

        startToOriginalInput() {
            Input._shouldPreventDefault = original_Input_shouldPreventDefault;
        }

        createTextBox(id) {
            "use strict";

            const field = document.getElementById(this._fieldId);

            if (RS.InputDialog.Params.szFontFamily === "") {
                RS.InputDialog.Params.szFontFamily = "GameFont";
            }

            const style = `
        .inputDialogContainer {
          display : flex;
          align-items : center;
          justify-content : center;
          width: 100%;
          height: 100%;
          padding : 0;
          margin : 0;
          box-sizing : border-box;
          resize : both;
          font-size: 16px!important;
          gap: 0.5em;
          flex-direction: column;
          
      }

      .inputDialogContainer > tr:last-child {
            position:relative;
      }
      
      .inputDialog {
          top : 0em;
          left : 0em;
          right : 0em;
          bottom : 0em;
          z-index : 1000;
          opacity : 0.8;
          position : relative;
          border-radius : 10px;
          font-family : ${RS.InputDialog.Params.szFontFamily};  
          font-weight: bold;
          outline : none;
          font-size: 1rem!important;

          background-color : #e0e0e0;
          border : 1px solid #e0e0e0;
          padding : 0.5em;
      }
      
      .defaultButton {
          opacity : 0.8;
          font-family : ${RS.InputDialog.Params.szFontFamily};
          color : rgb(19, 19, 19);
          cursor : pointer;
          border-radius: 5px;
          box-sizing : border-box;
          font-size : 1rem!important;
          border : 1px solid #e0e0e0;
          background-color : #e0e0e0;
          padding : 0.5em;
          transition: all 0.2s ease-in-out;
      }

      .defaultButton:active {
        color : rgb(19, 19, 38); 
      } 

      .defaultButton:hover, .defaultButton:focus {
        transform: scale(1.1);
        font-weight: bold;
      }     

      .row {
            display : flex;
            flex-flow : row wrap;
            align-items : center;
            justify-content : center;
            gap: 0.5em;
      }

      .row-flex-end {
            display : flex;
            flex-flow : row wrap;
            align-items : center;
            justify-content : flex-end;
            width: 488px;
      }

      .col {
            display : flex;
            flex-flow : column wrap;
            align-items : center;
            justify-content : center;
            gap: 0.5em;
      }
          `;

            var exStyle = RS.InputDialog.Params.exStyle;

            var divInnerHTML = `
        <style>
        ${style}
        ${exStyle}
        .inputDialog {
          direction : ${RS.InputDialog.Params.inputDirection};
        }
        </style>
        <div class="inputDialogContainer">
            <div class="row">
                <input class="inputDialog" type="text" id"=${id} placeholder="${RS.InputDialog.Params.localText}">
            </div>
            <div class="row row-flex-end">
                <input class="defaultButton" id="inputDialog-OkBtn" type="button" value="${RS.InputDialog.Params.okButtonName}" name="">
                <input class="defaultButton" id="inputDialog-CancelBtn" type="button" value="${RS.InputDialog.Params.cancelButtonName}" name="">
            </div>
        <img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' onload='TextBox.onLoadAfterInnerHTML();this.parentNode.removeChild(this);'>
          </div>
        `;

            field.innerHTML = divInnerHTML;
        }

        static onLoadAfterInnerHTML = function () {
            if (SceneManager._scene) {
                if (SceneManager._scene instanceof Scene_InputDialog) {
                    if (SceneManager._scene._textBox) {
                        SceneManager._scene._textBox.addAllEventListener();
                    }
                }
            }
        };

        getTextBoxId() {
            "use strict";
            const query = `div#${RS.InputDialog.Params.szFieldId} .inputDialog`;
            return document.querySelector(query);
        }

        getDefaultButtonId(id) {
            "use strict";
            id = id || "inputDialog-OkBtn";
            const query = `#${id}`;
            return document.querySelector(query);
        }

        getMainContainer() {
            "use strict";
            const query = `div#${RS.InputDialog.Params.szFieldId} .inputDialogContainer`;
            return document.querySelector(query);
        }

        addAllEventListener() {
            this._textBox = this.getTextBoxId();
            this._textBox.maxLength = RS.InputDialog.Params.nMaxLength;
            this._textBox.max = RS.InputDialog.Params.nMaxLength;

            this._textBox.addEventListener(
                "keydown",
                this.onKeyDown.bind(this),
                false
            );
            if (!Utils.isMobileDevice()) {
                this._textBox.addEventListener(
                    "focus",
                    this.onFocus.bind(this),
                    false
                );
            }
            this._textBox.addEventListener(
                "blur",
                this.onBlur.bind(this),
                false
            );
            this._textBox.addEventListener(
                "touchstart",
                this.getFocus.bind(this),
                false
            );
            this._textBox.addEventListener(
                "autosize",
                this.onResize.bind(this),
                false
            );

            window.addEventListener("resize", this.onResize.bind(this), false);

            this.startToConvertInput();
            this.setRect();
            this.onResize();

            if (SceneManager._scene instanceof Scene_InputDialog) {
                this.getFocus();
                this.show();
            }

            this._ready = true;
        }

        setRect() {
            const textBox = this.getTextBoxId();
            const OkButton = this.getDefaultButtonId("inputDialog-OkBtn");
            const CancelButton = this.getDefaultButtonId(
                "inputDialog-CancelBtn"
            );

            if (OkButton)
                OkButton.style.fontSize = Utils.isMobileDevice()
                    ? "1rem"
                    : 1 * Graphics._realScale + "em";
            if (CancelButton)
                CancelButton.style.fontSize = Utils.isMobileDevice()
                    ? "1rem"
                    : 1 * Graphics._realScale + "em";

            textBox.style.fontSize = Utils.isMobileDevice()
                ? "1rem"
                : 2 * Graphics._realScale + "em";
            textBox.style.width =
                RS.InputDialog.getScreenWidth(
                    RS.InputDialog.Params.textBoxWidth * Graphics._realScale
                ) + "px";
            textBox.style.height =
                RS.InputDialog.getScreenHeight(
                    RS.InputDialog.Params.textBoxHeight * Graphics._realScale
                ) + "px";
        }

        prepareElement(id) {
            const field = document.createElement("div");

            field.id = id;
            field.style.position = "absolute";
            field.style.left = "0";
            field.style.top = "0";
            field.style.width = "100%";
            field.style.height = "100%";
            field.style.zIndex = "0";
            field.style.display = "none";

            document.body.appendChild(field);

            return field;
        }

        setEvent(okFunc, cancelFunc) {
            const okButton = this.getDefaultButtonId("inputDialog-OkBtn");
            const cancelButton = this.getDefaultButtonId(
                "inputDialog-CancelBtn"
            );
            const textBox = this.getTextBoxId();

            if (textBox) {
                textBox.addEventListener("change", (e) => {
                    okFunc();
                    e.preventDefault();
                });
            }

            okButton.addEventListener(
                "click",
                (e) => {
                    okFunc();
                    e.preventDefault();
                },
                false
            );
            cancelButton.addEventListener(
                "click",
                (e) => {
                    cancelFunc();
                    e.preventDefault();
                },
                false
            );
            okButton.addEventListener(
                "touchend",
                (e) => {
                    okFunc();
                    e.preventDefault();
                },
                false
            );
            cancelButton.addEventListener(
                "touchend",
                (e) => {
                    cancelFunc();
                    e.preventDefault();
                },
                false
            );

            this._okFunc = okFunc;
            this._cancelFunc = cancelFunc;
        }

        terminateTextBox() {
            const field = document.getElementById(this._fieldId);

            if (field) {
                document.body.removeChild(field);
            }

            this.startToOriginalInput();
        }

        onKeyDown(e) {
            const keyCode = e.which;
            if (keyCode < TextBox.IS_NOT_CHAR) {
                if (keyCode === TextBox.ENTER) {
                    if (this._okFunc instanceof Function) this._okFunc();
                }
                if (keyCode === TextBox.ESC) {
                    if (this._cancelFunc instanceof Function)
                        this._cancelFunc();
                }
            }

            this._lastInputTime = performance.now();
        }

        onFocus(e) {
            const text = this.getTextBoxId();
            if (text && Utils.isMobileDevice()) {
                text.style.bottom =
                    RS.InputDialog.getScreenHeight(Graphics.height / 2) + "px";
            }
        }

        onBlur(e) {
            const text = this.getTextBoxId();
            if (text && Utils.isMobileDevice()) {
                text.style.bottom = "0";
                text.focus();
            }
            e.preventDefault();
        }

        setPosition(x, y) {
            let self = this;

            const field = document.getElementById(self._fieldId);
            const mainContainer = self.getMainContainer();
            if (field) {
                field.style.margin = "0";
                mainContainer.style.margin = "0";
                if (x < 0) {
                    x = 0;
                }
                if (x > Graphics.width - RS.InputDialog.Params.textBoxWidth) {
                    x = Graphics.width - RS.InputDialog.Params.textBoxWidth;
                }
                if (y < 0) {
                    y = 0;
                }
                if (y > Graphics.height - RS.InputDialog.Params.textBoxHeight) {
                    y = Graphics.height - RS.InputDialog.Params.textBoxHeight;
                }
                mainContainer.style.left =
                    Graphics._canvas.getBoundingClientRect().left + x + "px";
                mainContainer.style.top =
                    Graphics._canvas.getBoundingClientRect().top + y + "px";
            }
        }

        onResize() {
            let self = this;

            const field = document.getElementById(self._fieldId);
            const textBox = self.getTextBoxId();
            const mainContainer = self.getMainContainer();

            if (field && textBox) {
                Graphics._centerElement(field);
                // Graphics._centerElement(mainContainer);
                this.setRect();

                if (RS.InputDialog.Params.isCenterAlignment) {
                    const px =
                        Graphics.width / 2 -
                        RS.InputDialog.Params.textBoxWidth / 2;
                    const py =
                        Graphics.height / 2 -
                        RS.InputDialog.Params.textBoxHeight / 2;
                    this.setPosition(px, py);
                } else {
                    this.setPosition(
                        RS.InputDialog.Params.pos.x,
                        RS.InputDialog.Params.pos.y
                    );
                }
            }
        }

        isScreenLock() {
            const val = parseInt(performance.now() - this._lastInputTime);
            let ret = false;
            if (val >= RS.InputDialog.Params.nCheckScreenLock && this.isBusy())
                ret = true;
            this._lastInputTime = performance.now();
            return ret;
        }

        getTextLength() {
            const textBox = this.getTextBoxId();
            return textBox.value.length;
        }

        getFocus() {
            const textBox = this.getTextBoxId();
            textBox.focus();
        }

        setText(text) {
            const textBox = this.getTextBoxId();
            textBox.value = text || "";
            return textBox;
        }

        getText() {
            const textBox = this.getTextBoxId();
            return textBox.value;
        }

        hide() {
            const field = document.getElementById(this._fieldId);
            field.style.zIndex = 0;
            field.style.display = "none";
        }

        show() {
            const field = document.getElementById(this._fieldId);
            field.style.zIndex = 1000;
            field.style.display = "block";
        }

        setTextHint() {
            const textBox = this.getTextBoxId();
            return (textBox.placeholder = RS.InputDialog.Params.localText);
        }

        isBusy() {
            const field = document.getElementById(this._fieldId);
            return field.style.zIndex > 0;
        }

        removeAllEventListener() {
            this._okFunc = null;
            this._cancelFunc = null;

            if (this._textBox) {
                this._textBox.outerHTML = this._textBox.outerHTML;
            }

            window.removeEventListener(
                "resize",
                this.onResize.bind(this),
                false
            );
        }

        terminate() {
            this.removeAllEventListener();
            this.terminateTextBox();
        }
    }

    TextBox.BACK_SPACE = 8;
    TextBox.ENTER = 13;
    TextBox.ESC = 27;
    TextBox.IS_NOT_CHAR = 32;
    TextBox.KEYS_ARRAY = 255;

    //============================================================================
    // Scene_InputDialog
    //============================================================================

    class Scene_InputDialog extends Scene_Base {
        create() {
            super.create();
            this.createBackground();
            this.createTextBox();
        }

        update() {
            super.update();
            // TODO: 모바일에서 취소키를 누르면 키입력 창이 사라지는 버그가 있다.
            // 그래서 추가했지만 화면을 누르면 꺼진다는 것을 모르는 유저들이 버그로 착각할 수 있다.
            if (this.isScreenLock() && TouchInput.isTriggered()) {
                this.okResult();
            }
        }

        terminate() {
            super.terminate();
            this._textBox.terminate();
            this._textBox = null;
        }

        isScreenLock() {
            return this._textBox.isScreenLock();
        }

        createBackground() {
            this._backgroundSprite = new Sprite();
            this._backgroundSprite.bitmap = SceneManager.backgroundBitmap();
            this._backgroundSprite.opacity = 128;
            this.addChild(this._backgroundSprite);
        }

        createTextBox() {
            this._textBox = new TextBox(
                RS.InputDialog.Params.szFieldId,
                RS.InputDialog.Params.szTextBoxId
            );
            this._textBox.setEvent(
                this.okResult.bind(this),
                this.cancelResult.bind(this)
            );
            this._textBox.show();
            this._textBox.setTextHint();
        }

        okResult() {
            let text = this._textBox.getText() || "";
            if (text.match(/^([\d]+)$/g)) text = Number(RegExp.$1);
            $gameVariables.setValue(RS.InputDialog.Params.variableID, text);
            if (SceneManager._stack.length > 0) {
                TouchInput.clear();
                Input.clear();
                this.popScene();
            }
        }

        cancelResult() {
            if (SceneManager._stack.length > 0) {
                TouchInput.clear();
                Input.clear();
                this.popScene();
            }
        }
    }

    window.Scene_InputDialog = Scene_InputDialog;

    //============================================================================
    // Game_Troop
    //============================================================================

    Object.assign(Game_Troop.prototype, {
        battleInterpreterTaskLock() {
            this._interpreter._waitMode = "IME Mode";
        },
        battleInterpreterTaskUnlock() {
            this._interpreter._waitMode = "";
        },
    });

    //============================================================================
    // Scene_Battle
    //============================================================================

    const alias_Scene_Battle_initialize = Scene_Battle.prototype.initialize;
    const alias_Scene_Battle_create = Scene_Battle.prototype.create;
    const alias_Scene_Battle_update = Scene_Battle.prototype.update;
    const alias_Scene_Battle_terminate = Scene_Battle.prototype.terminate;

    Object.assign(Scene_Battle.prototype, {
        initialize() {
            alias_Scene_Battle_initialize.call(this);
            this.createTextBox();
        },

        create() {
            alias_Scene_Battle_create.call(this);
        },

        update() {
            alias_Scene_Battle_update.call(this);
            // TODO: 모바일에서 취소키를 누르면 키입력 창이 사라지는 버그가 있다.
            // 그래서 추가했지만 화면을 누르면 꺼진다는 것을 모르는 유저들이 버그로 착각할 수 있다.
            if (this.isScreenLock() && TouchInput.isTriggered()) {
                this.okResult();
            }
        },

        terminate() {
            alias_Scene_Battle_terminate.call(this);
            if (this._textBox) {
                this._textBox.terminate();
                this._textBox = null;
            }
            if ($gameTemp.isCommonEventReserved()) {
                $gameTemp.clearCommonEvent();
            }
        },

        createTextBox() {
            this._textBox = new TextBox(
                RS.InputDialog.Params.szFieldId,
                RS.InputDialog.Params.szTextBoxId
            );
            this._textBox.setEvent(
                this.okResult.bind(this),
                this.cancelResult.bind(this)
            );
        },

        textBoxIsBusy() {
            return this._textBox.isBusy();
        },

        showTextBox() {
            this._textBox.setText("");
            this._textBox.show();
            this._textBox.getFocus();
            this._textBox.setTextHint();
            this._textBox.setRect();
            this._textBox.onResize();
            $gameTroop.battleInterpreterTaskLock();
            this._textBox.addAllEventListener();
        },

        hideTextBox() {
            if (!this.textBoxIsBusy()) return false;
            this._textBox.hide();
            Input.clear();
            $gameTroop.battleInterpreterTaskUnlock();
        },

        isScreenLock() {
            return this._textBox.isScreenLock();
        },

        okResult() {
            if (!this._textBox) return "";
            if (this.textBoxIsBusy()) {
                let text = this._textBox.getText() || "";
                if (text.match(/^([\d]+)$/g)) text = Number(RegExp.$1);
                $gameVariables.setValue(RS.InputDialog.Params.variableID, text);
                this._textBox.setText("");
                if (RS.InputDialog.Params.debug) {
                    const dmsg = "You typed the text is same as ".concat(
                        $gameVariables.value(RS.InputDialog.Params.variableID) +
                            "" || "NONE"
                    );
                    this._logWindow.push("addText", dmsg);
                }
                this.hideTextBox();
            }
        },

        cancelResult() {
            if (!this._textBox) return "";
            if (this.textBoxIsBusy()) {
                this._textBox.setText("");
                this.hideTextBox();
            }
        },
    });

    //============================================================================
    // RS.InputDialog.isEqual
    //============================================================================

    RS.InputDialog.isEqual = function (eq) {
        const data = String(
            $gameVariables.value(RS.InputDialog.Params.variableID)
        );
        eq = String(eq);
        return data === eq;
    };

    //============================================================================
    // Game_Interpreter
    //============================================================================

    const alias_Game_Interpreter_updateWaitMode =
        Game_Interpreter.prototype.updateWaitMode;

    Object.assign(Game_Interpreter.prototype, {
        updateWaitMode() {
            if (this._waitMode === "IME Mode") {
                return true;
            } else {
                return alias_Game_Interpreter_updateWaitMode.call(this);
            }
        },

        isEqualInputData(eq) {
            return RS.InputDialog.isEqual(eq);
        },
    });

    //============================================================================
    // Plugin Commands
    //============================================================================

    PluginManager.registerCommand(pluginName, "open", () => {
        RS.InputDialog.createInstance();
    });

    PluginManager.registerCommand(pluginName, "width", (args) => {
        RS.InputDialog.Params.textBoxWidth = Number(args.width || 488);
        RS.InputDialog.setRect();
    });

    PluginManager.registerCommand(pluginName, "text", (args) => {
        RS.InputDialog.Params.localText = args.text;
    });

    PluginManager.registerCommand(pluginName, "variableID", (args) => {
        RS.InputDialog.Params.variableID = Number(args.number || 3);
    });

    PluginManager.registerCommand(pluginName, "debug", (args) => {
        RS.InputDialog.Params.debug = Boolean(args.valid === "true");
    });

    PluginManager.registerCommand(pluginName, "maxLength", (args) => {
        RS.InputDialog.Params.nMaxLength = Number(args.value || 255);
        RS.InputDialog.setRect();
    });

    PluginManager.registerCommand(pluginName, "pos", (args) => {
        if (args.posType === "center") {
            RS.InputDialog.Params.isCenterAlignment = true;
        } else {
            RS.InputDialog.Params.isCenterAlignment = false;
            RS.InputDialog.Params.pos.x = parseFloat(args[1] || 0);
            RS.InputDialog.Params.pos.y = parseFloat(args[2] || 0);
        }
    });

    window.TextBox = TextBox;
})();