@wwawing/virtual-pad 3.10.0-beta.1 → 3.10.0-beta.2

package/lib/VirtualPad.d.ts

@@ -1,32 +1,8 @@
-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 const VirtualPadButtonCodes: readonly ["BUTTON_ENTER", "BUTTON_ESC", "BUTTON_SIDEBAR", "BUTTON_FAST", "BUTTON_SLOW", "BUTTON_LEFT", "BUTTON_UP", "BUTTON_RIGHT", "BUTTON_DOWN"];
+export declare type VirtualPadButtonCode = typeof VirtualPadButtonCodes[number];
+export declare type VirtualPadState = "NONE" | "TOUCH" | "TOUCHING" | "LEAVE";
 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;
+    [key in string]: HTMLButtonElement;
 };
 declare type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
 export default class VirtualPadStore {
@@ -38,7 +14,7 @@ export default class VirtualPadStore {
     private _isTouchingButtons;
     private _moveButtonsElement;
     private _buttonWrapperElement;
-    constructor(buttons: VirtualPadButtons | {}, firstVisible?: boolean, buttonWrapper?: HTMLElement, moveButtons?: HTMLElement, onTouchStart?: VirtualPadEventFunction, onTouchEnd?: VirtualPadEventFunction);
+    constructor(buttons: VirtualPadButtons | null, firstVisible?: boolean, buttonWrapper?: HTMLElement | null, moveButtons?: HTMLElement | null, onTouchStart?: VirtualPadEventFunction | null, onTouchEnd?: VirtualPadEventFunction | null);
     private _detectMovingMoveButton;
     private _setVisible;
     checkTouchButton(buttonType: VirtualPadButtonCode): boolean;

package/lib/VirtualPad.js

@@ -1,28 +1,19 @@
-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 = {}));
+export var VirtualPadButtonCodes = [
+    "BUTTON_ENTER",
+    "BUTTON_ESC",
+    "BUTTON_SIDEBAR",
+    "BUTTON_FAST",
+    "BUTTON_SLOW",
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
+];
 var VirtualPadMoveButtonCodes = [
-    VirtualPadButtonCode.BUTTON_LEFT,
-    VirtualPadButtonCode.BUTTON_UP,
-    VirtualPadButtonCode.BUTTON_RIGHT,
-    VirtualPadButtonCode.BUTTON_DOWN
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
 ];
 var VirtualPadStore = (function () {
     function VirtualPadStore(buttons, firstVisible, buttonWrapper, moveButtons, onTouchStart, onTouchEnd) {
@@ -32,7 +23,7 @@ var VirtualPadStore = (function () {
         if (onTouchStart === void 0) { onTouchStart = null; }
         if (onTouchEnd === void 0) { onTouchEnd = null; }
         var _this = this;
-        this._enabled = Object.keys(buttons).length > 0;
+        this._enabled = buttons !== null;
         this._visible = firstVisible;
         this._onTouchStart = onTouchStart || null;
         this._onTouchEnd = onTouchEnd || null;
@@ -41,9 +32,21 @@ var VirtualPadStore = (function () {
         this._moveButtonsElement = moveButtons;
         this._buttonWrapperElement = buttonWrapper;
         this._setVisible(firstVisible);
+        if (this._moveButtonsElement) {
+            this._moveButtonsElement.style.visibility = "visible";
+        }
+        if (this._buttonWrapperElement) {
+            this._buttonWrapperElement.style.visibility = "visible";
+        }
+        if (buttons === null) {
+            return;
+        }
         var _loop_1 = function (buttonTypeString) {
-            var buttonCode = parseInt(buttonTypeString);
-            var button = buttons[buttonCode];
+            var button = buttons[buttonTypeString];
+            if (!button) {
+                return "continue";
+            }
+            var buttonCode = buttonTypeString;
             this_1._availableButtons.push(buttonCode);
             button.setAttribute("type", buttonTypeString);
             this_1._isTouchingButtons[buttonCode] = {
@@ -64,7 +67,6 @@ var VirtualPadStore = (function () {
                 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));
@@ -88,27 +90,30 @@ var VirtualPadStore = (function () {
     VirtualPadStore.prototype._detectMovingMoveButton = function (event) {
         event.preventDefault();
         this.allMoveClear();
+        var touch = event.targetTouches.item(0);
+        if (!this._moveButtonsElement || touch === null) {
+            return;
+        }
         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);
+                this.setTouchInfo("BUTTON_UP");
             }
             else {
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_RIGHT);
+                this.setTouchInfo("BUTTON_RIGHT");
             }
         }
         else {
             if (touchX >= -touchY) {
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_DOWN);
+                this.setTouchInfo("BUTTON_DOWN");
             }
             else {
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_LEFT);
+                this.setTouchInfo("BUTTON_LEFT");
             }
         }
     };
@@ -116,7 +121,7 @@ var VirtualPadStore = (function () {
         if (this._moveButtonsElement !== null) {
             this._moveButtonsElement.style.display = visible ? "grid" : "none";
         }
-        if (this._moveButtonsElement !== null) {
+        if (this._buttonWrapperElement !== null) {
             this._buttonWrapperElement.style.display = visible ? "grid" : "none";
         }
         this._visible = visible;
@@ -126,40 +131,41 @@ var VirtualPadStore = (function () {
             return false;
         }
         var state = this.getButtonState(buttonType);
-        return state === VirtualPadState.TOUCH;
+        return state === "TOUCH";
     };
     VirtualPadStore.prototype.checkTouchingButton = function (buttonType) {
         if (!this._enabled) {
             return false;
         }
         var state = this.getButtonState(buttonType);
-        return state === VirtualPadState.TOUCH || state === VirtualPadState.TOUCHING;
+        return state === "TOUCH" || state === "TOUCHING";
     };
     VirtualPadStore.prototype.getButtonState = function (buttonType) {
-        if (!this._enabled) {
-            return VirtualPadState.NONE;
+        var button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return "NONE";
         }
-        var touched = this._isTouchingButtons[buttonType].prev;
-        var isTouching = this._isTouchingButtons[buttonType].current;
+        var touched = button.prev;
+        var isTouching = button.current;
         if (touched && isTouching) {
-            return VirtualPadState.TOUCHING;
+            return "TOUCHING";
         }
         else if (isTouching) {
-            return VirtualPadState.TOUCH;
+            return "TOUCH";
         }
         else if (touched) {
-            return VirtualPadState.LEAVE;
+            return "LEAVE";
         }
-        return VirtualPadState.NONE;
+        return "NONE";
     };
     VirtualPadStore.prototype.setTouchInfo = function (buttonType) {
-        if (!this._enabled) {
+        if (!this._enabled || this._isTouchingButtons[buttonType] === undefined) {
             return;
         }
         this._isTouchingButtons[buttonType].next = true;
     };
     VirtualPadStore.prototype.clearTouchInfo = function (buttonType) {
-        if (!this._enabled) {
+        if (!this._enabled || this._isTouchingButtons[buttonType] === undefined) {
             return;
         }
         this._isTouchingButtons[buttonType].next = false;
@@ -175,7 +181,9 @@ var VirtualPadStore = (function () {
     VirtualPadStore.prototype.allClear = function () {
         var _this = this;
         this._availableButtons.forEach(function (buttonCode) {
-            _this._isTouchingButtons[buttonCode].next = false;
+            if (buttonCode !== undefined && _this._isTouchingButtons[buttonCode] !== undefined) {
+                _this._isTouchingButtons[buttonCode].next = false;
+            }
         });
     };
     VirtualPadStore.isMoveButton = function (buttonType) {
@@ -184,15 +192,22 @@ var VirtualPadStore = (function () {
     VirtualPadStore.prototype.update = function () {
         var _this = this;
         this._availableButtons.forEach(function (buttonCode) {
+            var _a, _b;
+            if (buttonCode === undefined) {
+                return;
+            }
             var currentButtonTouching = _this._isTouchingButtons[buttonCode];
+            if (currentButtonTouching === undefined) {
+                return;
+            }
             _this._isTouchingButtons[buttonCode].prev = currentButtonTouching.current;
             _this._isTouchingButtons[buttonCode].current = currentButtonTouching.next;
             switch (_this.getButtonState(buttonCode)) {
-                case VirtualPadState.TOUCH:
-                    _this._onTouchStart(buttonCode);
+                case "TOUCH":
+                    (_a = _this._onTouchStart) === null || _a === void 0 ? void 0 : _a.call(_this, buttonCode);
                     break;
-                case VirtualPadState.LEAVE:
-                    _this._onTouchEnd(buttonCode);
+                case "LEAVE":
+                    (_b = _this._onTouchEnd) === null || _b === void 0 ? void 0 : _b.call(_this, buttonCode);
                     break;
             }
         });

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
+import VirtualPadStore, { VirtualPadState, VirtualPadButtonCodes, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
 import viewportFit, { initializeViewport } from './viewportFit';
 import makeInject from './makeInject';
-export { VirtualPadStore, VirtualPadState, VirtualPadButtonCode, VirtualPadButtons, viewportFit, initializeViewport, makeInject };
+export { VirtualPadStore, VirtualPadState, VirtualPadButtonCodes, VirtualPadButtonCode, VirtualPadButtons, viewportFit, initializeViewport, makeInject };

package/lib/index.js

@@ -1,4 +1,4 @@
-import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode } from './VirtualPad';
+import VirtualPadStore, { VirtualPadButtonCodes } from './VirtualPad';
 import viewportFit, { initializeViewport } from './viewportFit';
 import makeInject from './makeInject';
-export { VirtualPadStore, VirtualPadState, VirtualPadButtonCode, viewportFit, initializeViewport, makeInject };
+export { VirtualPadStore, VirtualPadButtonCodes, viewportFit, initializeViewport, makeInject };

package/lib/makeInject.js

@@ -1,3 +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>";
+    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    </div>";
 }

package/lib/viewportFit.js

@@ -20,5 +20,5 @@ export default function viewportFit() {
     else if (browserWidth <= browserHeight) {
         viewportValue = "width=".concat(WWA_WIDTH + (BROWSER_MARGIN * 2), ",").concat(viewportValue);
     }
-    viewportElement.setAttribute("content", "".concat(viewportValue));
+    viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.setAttribute("content", "".concat(viewportValue));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwawing/virtual-pad",
-  "version": "3.10.0-beta.1",
+  "version": "3.10.0-beta.2",
   "description": "WWA Wing Virtual Pad for mobile phone",
   "main": "lib/index.js",
   "scripts": {
@@ -16,5 +16,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d01da974eb9b40670bf46bdf677d25340a6e5542"
+  "gitHead": "6d3289453a463b5292a66502ed9f7dccfb60fcac"
 }

package/src/VirtualPad.ts

@@ -1,15 +1,16 @@
-export enum VirtualPadButtonCode {
-    BUTTON_ENTER,
-    BUTTON_ESC,
-    BUTTON_SIDEBAR,
-    BUTTON_ESTIMATE,
-    BUTTON_FAST,
-    BUTTON_SLOW,
-    BUTTON_LEFT,
-    BUTTON_UP,
-    BUTTON_RIGHT,
-    BUTTON_DOWN
-}
+export const VirtualPadButtonCodes = [
+    "BUTTON_ENTER",
+    "BUTTON_ESC",
+    "BUTTON_SIDEBAR",
+    "BUTTON_FAST",
+    "BUTTON_SLOW",
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
+] as const;
+
+export type VirtualPadButtonCode = typeof VirtualPadButtonCodes[number];
 
 /**
  * NONE: ボタンに一切触れていません
@@ -17,25 +18,9 @@ export enum VirtualPadButtonCode {
  * TOUCHING: ボタンに触れています
  * LEAVE: ボタンから離れました
  */
-export enum VirtualPadState {
-    NONE,
-    TOUCH,
-    TOUCHING,
-    LEAVE
-}
+export type 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
-};
+export type VirtualPadButtons = { [key in string]: HTMLButtonElement };
 
 type VirtualPadButtonTouching = {
     prev: boolean,
@@ -46,10 +31,10 @@ type VirtualPadButtonTouching = {
 type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
 
 const VirtualPadMoveButtonCodes = [
-    VirtualPadButtonCode.BUTTON_LEFT,
-    VirtualPadButtonCode.BUTTON_UP,
-    VirtualPadButtonCode.BUTTON_RIGHT,
-    VirtualPadButtonCode.BUTTON_DOWN
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
 ];
 
 /**
@@ -83,12 +68,12 @@ export default class VirtualPadStore {
      * 移動ボタンの要素自体です。主に移動ボタンで指を動かす際に使用します。
      * @property
      */
-    private _moveButtonsElement: HTMLElement;
+    private _moveButtonsElement: HTMLElement | null;
 
     /**
      * 操作ボタン群の親要素です。 {@code _moveButtonsElement} と併せて表示や非表示の切り替えに使用します。
      */
-    private _buttonWrapperElement: HTMLElement;
+    private _buttonWrapperElement: HTMLElement | null;
 
     /**
      * @param buttons 仮想パッドの各要素
@@ -99,14 +84,14 @@ export default class VirtualPadStore {
      * @param onTouchEnd 仮想パッドを話した場合に発生するコールバック関数
      */
     constructor(
-        buttons: VirtualPadButtons | {},
+        buttons: VirtualPadButtons | null,
         firstVisible: boolean = false,
-        buttonWrapper: HTMLElement = null,
-        moveButtons: HTMLElement = null,
-        onTouchStart: VirtualPadEventFunction = null,
-        onTouchEnd: VirtualPadEventFunction = null,
+        buttonWrapper: HTMLElement | null = null,
+        moveButtons: HTMLElement | null = null,
+        onTouchStart: VirtualPadEventFunction | null = null,
+        onTouchEnd: VirtualPadEventFunction | null = null,
     ) {
-        this._enabled = Object.keys(buttons).length > 0;
+        this._enabled = buttons !== null;
         this._visible = firstVisible;
         this._onTouchStart = onTouchStart || null;
         this._onTouchEnd = onTouchEnd || null;
@@ -116,15 +101,25 @@ export default class VirtualPadStore {
         this._buttonWrapperElement = buttonWrapper;
 
         this._setVisible(firstVisible);
+        // PC でアクセスする場合、 VirtualPadStore が生成されるまでの間一瞬表示されてしまう
+        // そうならないようにするために、 CSS 側で visibility: hidden を付与し、インラインスタイルシートで解除している
+        if (this._moveButtonsElement) {
+            this._moveButtonsElement.style.visibility = "visible";
+        }
+        if (this._buttonWrapperElement) {
+            this._buttonWrapperElement.style.visibility = "visible";
+        }
 
-        for (let buttonTypeString in buttons) {
-            /**
-             * for in ... で渡される buttonTypeString は必ず文字列型になります。
-             *     このまま buttons の配列のキーに渡すと、正しく要素が受け取れません。
-             *     このため、一度 parseInt で数字に変換した上で渡しています。
-             */
-            let buttonCode = parseInt(buttonTypeString);
-            let button: HTMLButtonElement = buttons[buttonCode];
+        if (buttons === null) {
+            return;
+        }
+        for (const buttonTypeString in buttons) {
+            const button = buttons[buttonTypeString];
+            if (!button) {
+                continue;
+            }
+            // ここまでくれば buttonTypeString は VirtualPadButtonCode になる
+            const buttonCode = buttonTypeString  as VirtualPadButtonCode;
             this._availableButtons.push(buttonCode);
 
             /**
@@ -160,7 +155,7 @@ export default class VirtualPadStore {
                 this.setTouchInfo(buttonCode);
             });
 
-            button.addEventListener("cancel", cancelVirtualPad);
+            // button.addEventListener("cancel", cancelVirtualPad);
             button.addEventListener("touchcancel", cancelVirtualPad);
 
             /**
@@ -188,6 +183,11 @@ export default class VirtualPadStore {
     private _detectMovingMoveButton(event: TouchEvent) {
         event.preventDefault();
         this.allMoveClear();
+
+        const touch = event.targetTouches.item(0);
+        if (!this._moveButtonsElement || touch === null) {
+            return;
+        }
         
         // 中央のポジションを取得
         const moveButtonRect = this._moveButtonsElement.getBoundingClientRect();
@@ -195,7 +195,6 @@ export default class VirtualPadStore {
         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;
 
@@ -204,15 +203,15 @@ export default class VirtualPadStore {
              * touchY をマイナスにして、グラフの空間上で擬似的に表現します。
              */
             if (touchX <= -touchY) { // 上
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_UP);
+                this.setTouchInfo("BUTTON_UP");
             } else { // 右
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_RIGHT);
+                this.setTouchInfo("BUTTON_RIGHT");
             }
         } else { // 左と下
             if (touchX >= -touchY) { // 下
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_DOWN);
+                this.setTouchInfo("BUTTON_DOWN");
             } else { // 左
-                this.setTouchInfo(VirtualPadButtonCode.BUTTON_LEFT);
+                this.setTouchInfo("BUTTON_LEFT");
             }
         }
     }
@@ -221,7 +220,7 @@ export default class VirtualPadStore {
         if (this._moveButtonsElement !== null) {
             this._moveButtonsElement.style.display = visible ? "grid" : "none";
         }
-        if (this._moveButtonsElement !== null) {
+        if (this._buttonWrapperElement !== null) {
             this._buttonWrapperElement.style.display = visible ? "grid" : "none";
         }
         this._visible = visible;
@@ -237,7 +236,7 @@ export default class VirtualPadStore {
             return false;
         }
         const state = this.getButtonState(buttonType);
-        return state === VirtualPadState.TOUCH;
+        return state === "TOUCH";
     }
 
     /**
@@ -250,7 +249,7 @@ export default class VirtualPadStore {
             return false;
         }
         const state = this.getButtonState(buttonType);
-        return state === VirtualPadState.TOUCH || state === VirtualPadState.TOUCHING;
+        return state === "TOUCH" || state === "TOUCHING";
     }
 
     /**
@@ -258,20 +257,21 @@ export default class VirtualPadStore {
      * @param buttonType 
      */
     public getButtonState(buttonType: VirtualPadButtonCode): VirtualPadState {
-        if (!this._enabled) {
-            return VirtualPadState.NONE;
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return "NONE";
         }
 
-        const touched = this._isTouchingButtons[buttonType].prev;
-        const isTouching = this._isTouchingButtons[buttonType].current;
+        const touched = button.prev;
+        const isTouching = button.current;
         if (touched && isTouching) {
-            return VirtualPadState.TOUCHING;
+            return "TOUCHING";
         } else if (isTouching) {
-            return VirtualPadState.TOUCH;
+            return "TOUCH";
         } else if (touched) {
-            return VirtualPadState.LEAVE;
+            return "LEAVE";
         }
-        return VirtualPadState.NONE;
+        return "NONE";
     }
 
     /**
@@ -279,11 +279,11 @@ export default class VirtualPadStore {
      * @param buttonType 
      */
     public setTouchInfo(buttonType: VirtualPadButtonCode) {
-        if (!this._enabled) {
+        if (!this._enabled || this._isTouchingButtons[buttonType] === undefined) {
             return;
         }
 
-        this._isTouchingButtons[buttonType].next = true;
+        (this._isTouchingButtons[buttonType] as VirtualPadButtonTouching).next = true;
     }
 
     /**
@@ -291,11 +291,11 @@ export default class VirtualPadStore {
      * @param buttonType 
      */
     public clearTouchInfo(buttonType: VirtualPadButtonCode) {
-        if (!this._enabled) {
+        if (!this._enabled || this._isTouchingButtons[buttonType] === undefined) {
             return;
         }
 
-        this._isTouchingButtons[buttonType].next = false;
+        (this._isTouchingButtons[buttonType] as VirtualPadButtonTouching).next = false;
     }
 
     /**
@@ -303,8 +303,8 @@ export default class VirtualPadStore {
      */
     public allMoveClear(): void {
         VirtualPadMoveButtonCodes.forEach((buttonCode) => {
-            if (this._availableButtons.includes(buttonCode)) {
-                this.clearTouchInfo(buttonCode);
+            if (this._availableButtons.includes(buttonCode as VirtualPadButtonCode)) {
+                this.clearTouchInfo(buttonCode as VirtualPadButtonCode);
             }
         });
     }
@@ -314,7 +314,9 @@ export default class VirtualPadStore {
      */
     public allClear(): void {
         this._availableButtons.forEach((buttonCode) => {
-            this._isTouchingButtons[buttonCode].next = false;
+            if (buttonCode !== undefined && this._isTouchingButtons[buttonCode] !== undefined) {
+                (this._isTouchingButtons[buttonCode] as VirtualPadButtonTouching).next = false;
+            }
         });
     }
 
@@ -331,19 +333,25 @@ export default class VirtualPadStore {
      */
     public update() {
         this._availableButtons.forEach((buttonCode) => {
-            let currentButtonTouching = this._isTouchingButtons[buttonCode];
-            this._isTouchingButtons[buttonCode].prev = currentButtonTouching.current;
-            this._isTouchingButtons[buttonCode].current = currentButtonTouching.next;
+            if (buttonCode === undefined) {
+                return;
+            }
+            const currentButtonTouching = this._isTouchingButtons[buttonCode];
+            if (currentButtonTouching === undefined) {
+                return;
+            }
+            (this._isTouchingButtons[buttonCode] as VirtualPadButtonTouching).prev = currentButtonTouching.current;
+            (this._isTouchingButtons[buttonCode] as VirtualPadButtonTouching).current = currentButtonTouching.next;
 
             /**
              * ボタンの状態に応じて、コールバック関数を実行
              */
             switch (this.getButtonState(buttonCode)) {
-                case VirtualPadState.TOUCH:
-                    this._onTouchStart(buttonCode);
+                case "TOUCH":
+                    this._onTouchStart?.(buttonCode);
                     break;
-                case VirtualPadState.LEAVE:
-                    this._onTouchEnd(buttonCode);
+                case "LEAVE":
+                    this._onTouchEnd?.(buttonCode);
                     break;
             }
         });

package/src/index.ts

@@ -1,10 +1,11 @@
-import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
+import VirtualPadStore, { VirtualPadState, VirtualPadButtonCodes, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
 import viewportFit, { initializeViewport } from './viewportFit';
 import makeInject from './makeInject';
 
 export {
   VirtualPadStore,
   VirtualPadState,
+  VirtualPadButtonCodes,
   VirtualPadButtonCode,
   VirtualPadButtons,
   viewportFit,

package/src/makeInject.ts

@@ -12,6 +12,5 @@ export default function makeInject() {
       <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/src/viewportFit.ts

@@ -35,5 +35,5 @@ export default function viewportFit() {
     } else if (browserWidth <= browserHeight) {
         viewportValue = `width=${WWA_WIDTH + (BROWSER_MARGIN * 2)},${viewportValue}`;
     }
-    viewportElement.setAttribute("content", `${viewportValue}`);
+    viewportElement?.setAttribute("content", `${viewportValue}`);
 }

package/tsconfig.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./lib",
-    "module": "esnext"
+    "module": "esnext",
+    "strict": true,
+    "noImplicitAny": true,
   },
   "include": [
     "src/**/*.ts"