@wwawing/virtual-pad 3.8.0-beta.1

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 1996-2015 NAO
+Copyright (c) 2015-2022 WWA Wing Team
+
+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.

package/lib/VirtualPad.d.ts

@@ -0,0 +1,51 @@
+export declare enum VirtualPadButtonCode {
+    BUTTON_ENTER = 0,
+    BUTTON_ESC = 1,
+    BUTTON_SIDEBAR = 2,
+    BUTTON_ESTIMATE = 3,
+    BUTTON_FAST = 4,
+    BUTTON_SLOW = 5,
+    BUTTON_LEFT = 6,
+    BUTTON_UP = 7,
+    BUTTON_RIGHT = 8,
+    BUTTON_DOWN = 9
+}
+export declare enum VirtualPadState {
+    NONE = 0,
+    TOUCH = 1,
+    TOUCHING = 2,
+    LEAVE = 3
+}
+export declare type VirtualPadButtons = {
+    [VirtualPadButtonCode.BUTTON_ENTER]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_ESC]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_SIDEBAR]?: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_ESTIMATE]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_FAST]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_SLOW]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_LEFT]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_UP]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_RIGHT]: HTMLButtonElement;
+    [VirtualPadButtonCode.BUTTON_DOWN]: HTMLButtonElement;
+};
+declare type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
+export default class VirtualPadStore {
+    private _enabled;
+    private _onTouchStart;
+    private _onTouchEnd;
+    private _availableButtons;
+    private _isTouchingButtons;
+    private _moveButtonsElement;
+    constructor(buttons: VirtualPadButtons | {}, moveButtons?: HTMLElement, onTouchStart?: VirtualPadEventFunction, onTouchEnd?: VirtualPadEventFunction);
+    private _detectMovingMoveButton;
+    checkTouchButton(buttonType: VirtualPadButtonCode): boolean;
+    checkTouchingButton(buttonType: VirtualPadButtonCode): boolean;
+    getButtonState(buttonType: VirtualPadButtonCode): VirtualPadState;
+    setTouchInfo(buttonType: VirtualPadButtonCode): void;
+    clearTouchInfo(buttonType: VirtualPadButtonCode): void;
+    allMoveClear(): void;
+    allClear(): void;
+    static isMoveButton(buttonType: VirtualPadButtonCode): boolean;
+    update(): void;
+}
+export {};

package/lib/VirtualPad.js

@@ -0,0 +1,188 @@
+export var VirtualPadButtonCode;
+(function (VirtualPadButtonCode) {
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_ENTER"] = 0] = "BUTTON_ENTER";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_ESC"] = 1] = "BUTTON_ESC";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_SIDEBAR"] = 2] = "BUTTON_SIDEBAR";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_ESTIMATE"] = 3] = "BUTTON_ESTIMATE";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_FAST"] = 4] = "BUTTON_FAST";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_SLOW"] = 5] = "BUTTON_SLOW";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_LEFT"] = 6] = "BUTTON_LEFT";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_UP"] = 7] = "BUTTON_UP";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_RIGHT"] = 8] = "BUTTON_RIGHT";
+    VirtualPadButtonCode[VirtualPadButtonCode["BUTTON_DOWN"] = 9] = "BUTTON_DOWN";
+})(VirtualPadButtonCode || (VirtualPadButtonCode = {}));
+export var VirtualPadState;
+(function (VirtualPadState) {
+    VirtualPadState[VirtualPadState["NONE"] = 0] = "NONE";
+    VirtualPadState[VirtualPadState["TOUCH"] = 1] = "TOUCH";
+    VirtualPadState[VirtualPadState["TOUCHING"] = 2] = "TOUCHING";
+    VirtualPadState[VirtualPadState["LEAVE"] = 3] = "LEAVE";
+})(VirtualPadState || (VirtualPadState = {}));
+var VirtualPadMoveButtonCodes = [
+    VirtualPadButtonCode.BUTTON_LEFT,
+    VirtualPadButtonCode.BUTTON_UP,
+    VirtualPadButtonCode.BUTTON_RIGHT,
+    VirtualPadButtonCode.BUTTON_DOWN
+];
+var VirtualPadStore = (function () {
+    function VirtualPadStore(buttons, moveButtons, onTouchStart, onTouchEnd) {
+        if (moveButtons === void 0) { moveButtons = null; }
+        if (onTouchStart === void 0) { onTouchStart = null; }
+        if (onTouchEnd === void 0) { onTouchEnd = null; }
+        var _this = this;
+        this._enabled = Object.keys(buttons).length > 0;
+        this._onTouchStart = onTouchStart || null;
+        this._onTouchEnd = onTouchEnd || null;
+        this._availableButtons = [];
+        this._isTouchingButtons = {};
+        this._moveButtonsElement = moveButtons;
+        var _loop_1 = function (buttonTypeString) {
+            var buttonCode = parseInt(buttonTypeString);
+            var button = buttons[buttonCode];
+            this_1._availableButtons.push(buttonCode);
+            button.setAttribute("type", buttonTypeString);
+            this_1._isTouchingButtons[buttonCode] = {
+                prev: false,
+                current: false,
+                next: false
+            };
+            var cancelBrowserTouchEvent = function (event) {
+                if (event.cancelable) {
+                    event.preventDefault();
+                }
+            };
+            var cancelVirtualPad = function (event) {
+                cancelBrowserTouchEvent(event);
+                _this.allClear();
+            };
+            button.addEventListener("touchstart", function (event) {
+                cancelBrowserTouchEvent(event);
+                _this.setTouchInfo(buttonCode);
+            });
+            button.addEventListener("cancel", cancelVirtualPad);
+            button.addEventListener("touchcancel", cancelVirtualPad);
+            if (VirtualPadStore.isMoveButton(buttonCode)) {
+                button.addEventListener("touchmove", this_1._detectMovingMoveButton.bind(this_1));
+                button.addEventListener("touchend", this_1.allMoveClear.bind(this_1));
+            }
+            else {
+                button.addEventListener("touchend", function (event) {
+                    cancelBrowserTouchEvent(event);
+                    _this.clearTouchInfo(buttonCode);
+                });
+            }
+        };
+        var this_1 = this;
+        for (var buttonTypeString in buttons) {
+            _loop_1(buttonTypeString);
+        }
+        if (moveButtons !== null) {
+            moveButtons.addEventListener("touchmove", this._detectMovingMoveButton.bind(this));
+        }
+    }
+    VirtualPadStore.prototype._detectMovingMoveButton = function (event) {
+        event.preventDefault();
+        this.allMoveClear();
+        var moveButtonRect = this._moveButtonsElement.getBoundingClientRect();
+        var bodyRect = document.body.getBoundingClientRect();
+        var centerPositionX = moveButtonRect.left - bodyRect.left + (moveButtonRect.width / 2);
+        var centerPositionY = moveButtonRect.top - bodyRect.top + (moveButtonRect.height / 2);
+        var touch = event.targetTouches.item(0);
+        var touchX = touch.pageX - centerPositionX;
+        var touchY = touch.pageY - centerPositionY;
+        if (touchX >= touchY) {
+            if (touchX <= -touchY) {
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_UP);
+            }
+            else {
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_RIGHT);
+            }
+        }
+        else {
+            if (touchX >= -touchY) {
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_DOWN);
+            }
+            else {
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_LEFT);
+            }
+        }
+    };
+    VirtualPadStore.prototype.checkTouchButton = function (buttonType) {
+        if (!this._enabled) {
+            return false;
+        }
+        var state = this.getButtonState(buttonType);
+        return state === VirtualPadState.TOUCH;
+    };
+    VirtualPadStore.prototype.checkTouchingButton = function (buttonType) {
+        if (!this._enabled) {
+            return false;
+        }
+        var state = this.getButtonState(buttonType);
+        return state === VirtualPadState.TOUCH || state === VirtualPadState.TOUCHING;
+    };
+    VirtualPadStore.prototype.getButtonState = function (buttonType) {
+        if (!this._enabled) {
+            return VirtualPadState.NONE;
+        }
+        var touched = this._isTouchingButtons[buttonType].prev;
+        var isTouching = this._isTouchingButtons[buttonType].current;
+        if (touched && isTouching) {
+            return VirtualPadState.TOUCHING;
+        }
+        else if (isTouching) {
+            return VirtualPadState.TOUCH;
+        }
+        else if (touched) {
+            return VirtualPadState.LEAVE;
+        }
+        return VirtualPadState.NONE;
+    };
+    VirtualPadStore.prototype.setTouchInfo = function (buttonType) {
+        if (!this._enabled) {
+            return;
+        }
+        this._isTouchingButtons[buttonType].next = true;
+    };
+    VirtualPadStore.prototype.clearTouchInfo = function (buttonType) {
+        if (!this._enabled) {
+            return;
+        }
+        this._isTouchingButtons[buttonType].next = false;
+    };
+    VirtualPadStore.prototype.allMoveClear = function () {
+        var _this = this;
+        VirtualPadMoveButtonCodes.forEach(function (buttonCode) {
+            if (_this._availableButtons.includes(buttonCode)) {
+                _this.clearTouchInfo(buttonCode);
+            }
+        });
+    };
+    VirtualPadStore.prototype.allClear = function () {
+        var _this = this;
+        this._availableButtons.forEach(function (buttonCode) {
+            _this._isTouchingButtons[buttonCode].next = false;
+        });
+    };
+    VirtualPadStore.isMoveButton = function (buttonType) {
+        return VirtualPadMoveButtonCodes.includes(buttonType);
+    };
+    VirtualPadStore.prototype.update = function () {
+        var _this = this;
+        this._availableButtons.forEach(function (buttonCode) {
+            var currentButtonTouching = _this._isTouchingButtons[buttonCode];
+            _this._isTouchingButtons[buttonCode].prev = currentButtonTouching.current;
+            _this._isTouchingButtons[buttonCode].current = currentButtonTouching.next;
+            switch (_this.getButtonState(buttonCode)) {
+                case VirtualPadState.TOUCH:
+                    _this._onTouchStart(buttonCode);
+                    break;
+                case VirtualPadState.LEAVE:
+                    _this._onTouchEnd(buttonCode);
+                    break;
+            }
+        });
+    };
+    return VirtualPadStore;
+}());
+export default VirtualPadStore;

package/lib/autoRotate.d.ts

@@ -0,0 +1,2 @@
+export declare function initializeRotate(): void;
+export default function autoRotate(): void;

package/lib/autoRotate.js

@@ -0,0 +1,23 @@
+export function initializeRotate() {
+    var headElement = document.getElementsByTagName('head')[0];
+    var viewportElement = document.createElement('meta');
+    viewportElement.setAttribute('name', 'viewport');
+    headElement.appendChild(viewportElement);
+    autoRotate();
+}
+export default function autoRotate() {
+    var WWA_WIDTH = 560;
+    var WWA_HEIGHT = 440;
+    var viewportElement = document.querySelector("meta[name='viewport']");
+    var browserWidth = window.innerWidth;
+    var browserHeight = window.innerHeight;
+    var viewportValue = "user-scalable=no";
+    if (browserWidth > browserHeight) {
+        var width = Math.floor((browserWidth / browserHeight) * WWA_HEIGHT);
+        viewportValue = "width=".concat(width, ",").concat(viewportValue);
+    }
+    else if (browserWidth <= browserHeight) {
+        viewportValue = "width=".concat(WWA_WIDTH, ",").concat(viewportValue);
+    }
+    viewportElement.setAttribute("content", "".concat(viewportValue));
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
+import autoRotate, { initializeRotate } from './autoRotate';
+import makeInject from './makeInject';
+export { VirtualPadStore, VirtualPadState, VirtualPadButtonCode, VirtualPadButtons, autoRotate, initializeRotate, makeInject };

package/lib/index.js

@@ -0,0 +1,4 @@
+import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode } from './VirtualPad';
+import autoRotate, { initializeRotate } from './autoRotate';
+import makeInject from './makeInject';
+export { VirtualPadStore, VirtualPadState, VirtualPadButtonCode, autoRotate, initializeRotate, makeInject };

package/lib/makeInject.d.ts

@@ -0,0 +1 @@
+export default function makeInject(): string;

package/lib/makeInject.js

@@ -0,0 +1,3 @@
+export default function makeInject() {
+    return "\n    <div id=\"wwa-virtualpad-left\">\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-up-button\"></button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-left-button\"></button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-right-button\"></button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-down-button\"></button>\n      <div class=\"wwa-virtualpad__hole\"></div>\n    </div>\n    <div id=\"wwa-virtualpad-right\">\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-slow-button\">I</button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-fast-button\">P</button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-enter-button\">Y</button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-esc-button\">N</button>\n      <button class=\"wwa-virtualpad__button\" id=\"wwa-estimate-button\">M</button>\n    </div>";
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@wwawing/virtual-pad",
+  "version": "3.8.0-beta.1",
+  "description": "WWA Wing Virtual Pad for mobile phone",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p .",
+    "prepare": "npm run build"
+  },
+  "author": "WWA Wing Team",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "f27dbc4de044cc28ab944997ea1c3361e94228cc"
+}

package/src/VirtualPad.ts

@@ -0,0 +1,326 @@
+export enum VirtualPadButtonCode {
+    BUTTON_ENTER,
+    BUTTON_ESC,
+    BUTTON_SIDEBAR,
+    BUTTON_ESTIMATE,
+    BUTTON_FAST,
+    BUTTON_SLOW,
+    BUTTON_LEFT,
+    BUTTON_UP,
+    BUTTON_RIGHT,
+    BUTTON_DOWN
+}
+
+/**
+ * NONE: ボタンに一切触れていません
+ * TOUCH: ボタンに触れ始めました
+ * TOUCHING: ボタンに触れています
+ * LEAVE: ボタンから離れました
+ */
+export enum VirtualPadState {
+    NONE,
+    TOUCH,
+    TOUCHING,
+    LEAVE
+}
+
+export type VirtualPadButtons = {
+    [VirtualPadButtonCode.BUTTON_ENTER]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_ESC]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_SIDEBAR]?: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_ESTIMATE]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_FAST]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_SLOW]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_LEFT]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_UP]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_RIGHT]: HTMLButtonElement,
+    [VirtualPadButtonCode.BUTTON_DOWN]: HTMLButtonElement
+};
+
+type VirtualPadButtonTouching = {
+    prev: boolean,
+    current: boolean,
+    next: boolean
+};
+
+type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
+
+const VirtualPadMoveButtonCodes = [
+    VirtualPadButtonCode.BUTTON_LEFT,
+    VirtualPadButtonCode.BUTTON_UP,
+    VirtualPadButtonCode.BUTTON_RIGHT,
+    VirtualPadButtonCode.BUTTON_DOWN
+];
+
+/**
+ * 仮想パッドの状態管理を行うクラスです。
+ * @todo PCといった、タッチデバイスでないデバイスでは、このクラスのインスタンスを生成しないようにする。
+ *     (this._enabled で判別しているけど、いちいち判定処理書くのつらい...)
+ */
+export default class VirtualPadStore {
+
+    /**
+     * 仮想パッドが有効か
+     * @property
+     */
+    private _enabled: boolean;
+
+    private _onTouchStart: VirtualPadEventFunction | null;
+    private _onTouchEnd: VirtualPadEventFunction | null;
+
+    /**
+     * 有効なボタンが格納されている配列です。各ボタンを繰り返し処理する場合に使用します。
+     * @property
+     */
+    private _availableButtons: [VirtualPadButtonCode?];
+    private _isTouchingButtons: {
+        [key in VirtualPadButtonCode]?: VirtualPadButtonTouching
+    };
+
+    /**
+     * 移動ボタンの要素自体です。主に移動ボタンで指を動かす際に使用します。
+     * @property
+     */
+    private _moveButtonsElement: HTMLElement;
+
+    /**
+     * @param buttons 仮想パッドの各要素
+     * @param moveButtons 仮想パッドの移動ボタンの要素
+     * @param onTouchStart 仮想パッドを押下した場合に発生するコールバック関数
+     * @param onTouchEnd 仮想パッドを話した場合に発生するコールバック関数
+     */
+    constructor(
+        buttons: VirtualPadButtons | {},
+        moveButtons: HTMLElement = null,
+        onTouchStart: VirtualPadEventFunction = null,
+        onTouchEnd: VirtualPadEventFunction = null
+    ) {
+        this._enabled = Object.keys(buttons).length > 0;
+        this._onTouchStart = onTouchStart || null;
+        this._onTouchEnd = onTouchEnd || null;
+        this._availableButtons = [];
+        this._isTouchingButtons = {};
+        this._moveButtonsElement = moveButtons;
+
+        for (let buttonTypeString in buttons) {
+            /**
+             * for in ... で渡される buttonTypeString は必ず文字列型になります。
+             *     このまま buttons の配列のキーに渡すと、正しく要素が受け取れません。
+             *     このため、一度 parseInt で数字に変換した上で渡しています。
+             */
+            let buttonCode = parseInt(buttonTypeString);
+            let button: HTMLButtonElement = buttons[buttonCode];
+            this._availableButtons.push(buttonCode);
+
+            /**
+             * type 属性について
+             *     HTML側の各仮想パッドボタンは、 type 属性を元に各ボタンを特定しています。
+             *     各仮想パッドボタンの種類を判別するために、初期化時に type 属性を割り振っています。
+             */
+            button.setAttribute("type", buttonTypeString);
+
+            this._isTouchingButtons[buttonCode] = {
+                prev: false,
+                current: false,
+                next: false
+            };
+            
+            const cancelBrowserTouchEvent = (event: TouchEvent) => {
+                if (event.cancelable) {
+                    event.preventDefault();
+                }
+            };
+
+            /**
+             * 何かしらの割り込み処理が発生した場合に、緊急で仮想パッドを停止する処理です。
+             * @param event 
+             */
+            const cancelVirtualPad = (event: TouchEvent) => {
+                cancelBrowserTouchEvent(event);
+                this.allClear();
+            };
+
+            button.addEventListener("touchstart", (event: TouchEvent) => {
+                cancelBrowserTouchEvent(event);
+                this.setTouchInfo(buttonCode);
+            });
+
+            button.addEventListener("cancel", cancelVirtualPad);
+            button.addEventListener("touchcancel", cancelVirtualPad);
+
+            /**
+             * 移動ボタンに関しては、指先を移動しながら操作することがあるため、 touchmove イベントにも対応します。
+             */
+            if (VirtualPadStore.isMoveButton(buttonCode)) {
+                button.addEventListener("touchmove", this._detectMovingMoveButton.bind(this));
+                button.addEventListener("touchend", this.allMoveClear.bind(this));
+            } else {
+                button.addEventListener("touchend", (event: TouchEvent) => {
+                    cancelBrowserTouchEvent(event);
+                    this.clearTouchInfo(buttonCode);
+                });
+            }
+        }
+        if (moveButtons !== null) {
+            moveButtons.addEventListener("touchmove", this._detectMovingMoveButton.bind(this));
+        }
+    }
+
+    /**
+     * TouchMove した要素から触れた先の要素に、触れたことを呼び出します。
+     * @param event 
+     */
+    private _detectMovingMoveButton(event: TouchEvent) {
+        event.preventDefault();
+        this.allMoveClear();
+        
+        // 中央のポジションを取得
+        const moveButtonRect = this._moveButtonsElement.getBoundingClientRect();
+        const bodyRect = document.body.getBoundingClientRect();
+        const centerPositionX = moveButtonRect.left - bodyRect.left + (moveButtonRect.width / 2);
+        const centerPositionY = moveButtonRect.top - bodyRect.top + (moveButtonRect.height / 2);
+
+        const touch = event.targetTouches.item(0);
+        const touchX = touch.pageX - centerPositionX;
+        const touchY = touch.pageY - centerPositionY;
+
+        if (touchX >= touchY) { // 上と右
+            /**
+             * touchY をマイナスにして、グラフの空間上で擬似的に表現します。
+             */
+            if (touchX <= -touchY) { // 上
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_UP);
+            } else { // 右
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_RIGHT);
+            }
+        } else { // 左と下
+            if (touchX >= -touchY) { // 下
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_DOWN);
+            } else { // 左
+                this.setTouchInfo(VirtualPadButtonCode.BUTTON_LEFT);
+            }
+        }
+    }
+
+    /**
+     * 指定したボタンが押されたかを判別します。
+     *     戦闘予測ボタンといった、1回しか押さないボタンの判定に使用します。
+     * @param buttonType 
+     */
+    public checkTouchButton(buttonType: VirtualPadButtonCode): boolean {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === VirtualPadState.TOUCH;
+    }
+
+    /**
+     * 指定したボタンが押されているかを判別します。
+     *     移動ボタンといった、長時間押すボタンの判定に使用します。
+     * @param buttonType 
+     */
+    public checkTouchingButton(buttonType: VirtualPadButtonCode): boolean {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === VirtualPadState.TOUCH || state === VirtualPadState.TOUCHING;
+    }
+
+    /**
+     * 今の仮想パッドのボタンの状態を出力します
+     * @param buttonType 
+     */
+    public getButtonState(buttonType: VirtualPadButtonCode): VirtualPadState {
+        if (!this._enabled) {
+            return VirtualPadState.NONE;
+        }
+
+        const touched = this._isTouchingButtons[buttonType].prev;
+        const isTouching = this._isTouchingButtons[buttonType].current;
+        if (touched && isTouching) {
+            return VirtualPadState.TOUCHING;
+        } else if (isTouching) {
+            return VirtualPadState.TOUCH;
+        } else if (touched) {
+            return VirtualPadState.LEAVE;
+        }
+        return VirtualPadState.NONE;
+    }
+
+    /**
+     * ボタンにタッチ信号を与えます
+     * @param buttonType 
+     */
+    public setTouchInfo(buttonType: VirtualPadButtonCode) {
+        if (!this._enabled) {
+            return;
+        }
+
+        this._isTouchingButtons[buttonType].next = true;
+    }
+
+    /**
+     * ボタンのタッチ信号を解除します
+     * @param buttonType 
+     */
+    public clearTouchInfo(buttonType: VirtualPadButtonCode) {
+        if (!this._enabled) {
+            return;
+        }
+
+        this._isTouchingButtons[buttonType].next = false;
+    }
+
+    /**
+     * すべての移動ボタンのタッチ信号をキャンセルします
+     */
+    public allMoveClear(): void {
+        VirtualPadMoveButtonCodes.forEach((buttonCode) => {
+            if (this._availableButtons.includes(buttonCode)) {
+                this.clearTouchInfo(buttonCode);
+            }
+        });
+    }
+
+    /**
+     * すべてのボタンのタッチ信号をキャンセルします。
+     */
+    public allClear(): void {
+        this._availableButtons.forEach((buttonCode) => {
+            this._isTouchingButtons[buttonCode].next = false;
+        });
+    }
+
+    /**
+     * 押したボタンが移動ボタンか判定します。
+     * @param buttonType 
+     */
+    public static isMoveButton(buttonType: VirtualPadButtonCode): boolean {
+        return VirtualPadMoveButtonCodes.includes(buttonType);
+    }
+
+    /**
+     * 今の仮想パッドボタンの状態を次の状態に送ります。
+     */
+    public update() {
+        this._availableButtons.forEach((buttonCode) => {
+            let currentButtonTouching = this._isTouchingButtons[buttonCode];
+            this._isTouchingButtons[buttonCode].prev = currentButtonTouching.current;
+            this._isTouchingButtons[buttonCode].current = currentButtonTouching.next;
+
+            /**
+             * ボタンの状態に応じて、コールバック関数を実行
+             */
+            switch (this.getButtonState(buttonCode)) {
+                case VirtualPadState.TOUCH:
+                    this._onTouchStart(buttonCode);
+                    break;
+                case VirtualPadState.LEAVE:
+                    this._onTouchEnd(buttonCode);
+                    break;
+            }
+        });
+    }
+}

package/src/autoRotate.ts

@@ -0,0 +1,37 @@
+/**
+ * 自動回転制御の初期化を行うメソッドです。
+ */
+export function initializeRotate() {
+    const headElement = document.getElementsByTagName('head')[0];
+    let viewportElement = document.createElement('meta');
+
+    viewportElement.setAttribute('name', 'viewport');
+    headElement.appendChild(viewportElement);
+    autoRotate();
+}
+
+/**
+ * 回転の自動制御メソッドです。 "resize" イベントと併せてご利用ください。
+ * @example window.addEventListener("resize", autoRotate);
+ */
+export default function autoRotate() {
+    const WWA_WIDTH = 560;
+    const WWA_HEIGHT = 440;
+
+    const viewportElement = document.querySelector("meta[name='viewport']");
+    const browserWidth = window.innerWidth;
+    const browserHeight = window.innerHeight;
+    /**
+     * autoRotate を有効化すると、誤動作を防ぐため、拡大操作が無効になります。
+     *     Webページの中に設置する場合は、特にご注意ください。
+     */
+    let viewportValue = "user-scalable=no";
+
+    if (browserWidth > browserHeight) {
+        const width = Math.floor((browserWidth / browserHeight) * WWA_HEIGHT);
+        viewportValue = `width=${width},${viewportValue}`;
+    } else if (browserWidth <= browserHeight) {
+        viewportValue = `width=${WWA_WIDTH},${viewportValue}`;
+    }
+    viewportElement.setAttribute("content", `${viewportValue}`);
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
+import autoRotate, { initializeRotate } from './autoRotate';
+import makeInject from './makeInject';
+
+export {
+  VirtualPadStore,
+  VirtualPadState,
+  VirtualPadButtonCode,
+  VirtualPadButtons,
+  autoRotate,
+  initializeRotate,
+  makeInject
+}

package/src/makeInject.ts

@@ -0,0 +1,17 @@
+export default function makeInject() {
+  return `
+    <div id="wwa-virtualpad-left">
+      <button class="wwa-virtualpad__button" id="wwa-up-button"></button>
+      <button class="wwa-virtualpad__button" id="wwa-left-button"></button>
+      <button class="wwa-virtualpad__button" id="wwa-right-button"></button>
+      <button class="wwa-virtualpad__button" id="wwa-down-button"></button>
+      <div class="wwa-virtualpad__hole"></div>
+    </div>
+    <div id="wwa-virtualpad-right">
+      <button class="wwa-virtualpad__button" id="wwa-slow-button">I</button>
+      <button class="wwa-virtualpad__button" id="wwa-fast-button">P</button>
+      <button class="wwa-virtualpad__button" id="wwa-enter-button">Y</button>
+      <button class="wwa-virtualpad__button" id="wwa-esc-button">N</button>
+      <button class="wwa-virtualpad__button" id="wwa-estimate-button">M</button>
+    </div>`;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "module": "esnext"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}