@wwawing/virtual-pad 0.0.0-exe-chousa.based-on.3.12.21

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 1996-2025 NAO
+Copyright (c) 2015-2025 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,31 @@
+export declare const VirtualPadButtonCodes: readonly ["BUTTON_ENTER", "BUTTON_ESC", "BUTTON_SIDEBAR", "BUTTON_FAST", "BUTTON_SLOW", "BUTTON_LEFT", "BUTTON_UP", "BUTTON_RIGHT", "BUTTON_DOWN"];
+export type VirtualPadButtonCode = typeof VirtualPadButtonCodes[number];
+export type VirtualPadState = "NONE" | "TOUCH" | "TOUCHING" | "LEAVE";
+export type VirtualPadButtons = {
+    [key in string]: HTMLButtonElement;
+};
+type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
+export default class VirtualPadStore {
+    private _enabled;
+    private _visible;
+    private _onTouchStart;
+    private _onTouchEnd;
+    private _availableButtons;
+    private _isTouchingButtons;
+    private _moveButtonsElement;
+    private _buttonWrapperElement;
+    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;
+    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;
+    toggleVisible(): void;
+}
+export {};

package/lib/VirtualPad.js

@@ -0,0 +1,211 @@
+export const VirtualPadButtonCodes = [
+    "BUTTON_ENTER",
+    "BUTTON_ESC",
+    "BUTTON_SIDEBAR",
+    "BUTTON_FAST",
+    "BUTTON_SLOW",
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
+];
+const VirtualPadMoveButtonCodes = [
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
+];
+const VirtualPadMoveButtonsSet = new Set(VirtualPadMoveButtonCodes);
+export default class VirtualPadStore {
+    constructor(buttons, firstVisible = false, buttonWrapper = null, moveButtons = null, onTouchStart = null, onTouchEnd = null) {
+        this._enabled = buttons !== null;
+        this._visible = firstVisible;
+        this._onTouchStart = onTouchStart || null;
+        this._onTouchEnd = onTouchEnd || null;
+        this._availableButtons = [];
+        this._isTouchingButtons = {};
+        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;
+        }
+        for (const buttonTypeString in buttons) {
+            const button = buttons[buttonTypeString];
+            if (!button) {
+                continue;
+            }
+            const buttonCode = buttonTypeString;
+            this._availableButtons.push(buttonCode);
+            button.setAttribute("type", buttonTypeString);
+            this._isTouchingButtons[buttonCode] = {
+                prev: false,
+                current: false,
+                next: false
+            };
+            const cancelBrowserTouchEvent = (event) => {
+                if (event.cancelable) {
+                    event.preventDefault();
+                }
+            };
+            const cancelVirtualPad = (event) => {
+                cancelBrowserTouchEvent(event);
+                this.allClear();
+            };
+            button.addEventListener("touchstart", (event) => {
+                cancelBrowserTouchEvent(event);
+                this.setTouchInfo(buttonCode);
+            });
+            button.addEventListener("touchcancel", cancelVirtualPad);
+            if (VirtualPadStore.isMoveButton(buttonCode)) {
+                button.addEventListener("touchmove", this._detectMovingMoveButton.bind(this));
+                button.addEventListener("touchend", this.allMoveClear.bind(this));
+            }
+            else {
+                button.addEventListener("touchend", (event) => {
+                    cancelBrowserTouchEvent(event);
+                    this.clearTouchInfo(buttonCode);
+                });
+            }
+        }
+        if (moveButtons !== null) {
+            moveButtons.addEventListener("touchmove", this._detectMovingMoveButton.bind(this));
+        }
+    }
+    _detectMovingMoveButton(event) {
+        event.preventDefault();
+        this.allMoveClear();
+        const touch = event.targetTouches.item(0);
+        if (!this._moveButtonsElement || touch === null) {
+            return;
+        }
+        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 touchX = touch.pageX - centerPositionX;
+        const touchY = touch.pageY - centerPositionY;
+        if (touchX >= touchY) {
+            if (touchX <= -touchY) {
+                this.setTouchInfo("BUTTON_UP");
+            }
+            else {
+                this.setTouchInfo("BUTTON_RIGHT");
+            }
+        }
+        else {
+            if (touchX >= -touchY) {
+                this.setTouchInfo("BUTTON_DOWN");
+            }
+            else {
+                this.setTouchInfo("BUTTON_LEFT");
+            }
+        }
+    }
+    _setVisible(visible) {
+        if (this._moveButtonsElement !== null) {
+            this._moveButtonsElement.style.display = visible ? "grid" : "none";
+        }
+        if (this._buttonWrapperElement !== null) {
+            this._buttonWrapperElement.style.display = visible ? "grid" : "none";
+        }
+        this._visible = visible;
+    }
+    checkTouchButton(buttonType) {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === "TOUCH";
+    }
+    checkTouchingButton(buttonType) {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === "TOUCH" || state === "TOUCHING";
+    }
+    getButtonState(buttonType) {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return "NONE";
+        }
+        const touched = button.prev;
+        const isTouching = button.current;
+        if (touched && isTouching) {
+            return "TOUCHING";
+        }
+        else if (isTouching) {
+            return "TOUCH";
+        }
+        else if (touched) {
+            return "LEAVE";
+        }
+        return "NONE";
+    }
+    setTouchInfo(buttonType) {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return;
+        }
+        button.next = true;
+    }
+    clearTouchInfo(buttonType) {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return;
+        }
+        button.next = false;
+    }
+    allMoveClear() {
+        VirtualPadMoveButtonCodes.forEach((buttonCode) => {
+            if (this._availableButtons.includes(buttonCode)) {
+                this.clearTouchInfo(buttonCode);
+            }
+        });
+    }
+    allClear() {
+        this._availableButtons.forEach((buttonCode) => {
+            if (buttonCode !== undefined) {
+                const button = this._isTouchingButtons[buttonCode];
+                if (button !== undefined) {
+                    button.next = false;
+                }
+            }
+        });
+    }
+    static isMoveButton(buttonType) {
+        return VirtualPadMoveButtonsSet.has(buttonType);
+    }
+    update() {
+        this._availableButtons.forEach((buttonCode) => {
+            var _a, _b;
+            if (buttonCode === undefined) {
+                return;
+            }
+            const 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 "TOUCH":
+                    (_a = this._onTouchStart) === null || _a === void 0 ? void 0 : _a.call(this, buttonCode);
+                    break;
+                case "LEAVE":
+                    (_b = this._onTouchEnd) === null || _b === void 0 ? void 0 : _b.call(this, buttonCode);
+                    break;
+            }
+        });
+    }
+    toggleVisible() {
+        this._setVisible(!this._visible);
+    }
+}

package/lib/index.d.ts

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

package/lib/index.js

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

package/lib/makeInject.d.ts

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

package/lib/makeInject.js

@@ -0,0 +1,16 @@
+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>
+    </div>`;
+}

package/lib/viewportFit.d.ts

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

package/lib/viewportFit.js

@@ -0,0 +1,24 @@
+export function initializeViewport() {
+    const headElement = document.getElementsByTagName('head')[0];
+    let viewportElement = document.createElement('meta');
+    viewportElement.setAttribute('name', 'viewport');
+    headElement.appendChild(viewportElement);
+    viewportFit();
+}
+export default function viewportFit() {
+    const WWA_WIDTH = 560;
+    const WWA_HEIGHT = 440;
+    const BROWSER_MARGIN = 8;
+    const viewportElement = document.querySelector("meta[name='viewport']");
+    const browserWidth = window.innerWidth;
+    const browserHeight = window.innerHeight;
+    let viewportValue = "user-scalable=no";
+    if (browserWidth > browserHeight) {
+        const width = Math.floor((browserWidth / browserHeight) * (WWA_HEIGHT + (BROWSER_MARGIN) * 2));
+        viewportValue = `width=${width},${viewportValue}`;
+    }
+    else if (browserWidth <= browserHeight) {
+        viewportValue = `width=${WWA_WIDTH + (BROWSER_MARGIN * 2)},${viewportValue}`;
+    }
+    viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.setAttribute("content", `${viewportValue}`);
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@wwawing/virtual-pad",
+  "version": "0.0.0-exe-chousa.based-on.3.12.21",
+  "description": "WWA Wing Virtual Pad for mobile phone",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WWAWing/WWAWing.git",
+    "directory": "packages/virtual-pad"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p .",
+    "prepare": "npm run build"
+  },
+  "author": "WWA Wing Team",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b52982378576ed3ef7223fae8457a7923eba7ace"
+}

package/src/VirtualPad.ts

@@ -0,0 +1,373 @@
+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: ボタンに一切触れていません
+ * TOUCH: ボタンに触れ始めました
+ * TOUCHING: ボタンに触れています
+ * LEAVE: ボタンから離れました
+ */
+export type VirtualPadState = "NONE" | "TOUCH" | "TOUCHING" | "LEAVE";
+
+export type VirtualPadButtons = { [key in string]: HTMLButtonElement };
+
+type VirtualPadButtonTouching = {
+    prev: boolean,
+    current: boolean,
+    next: boolean
+};
+
+type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
+
+const VirtualPadMoveButtonCodes = [
+    "BUTTON_LEFT",
+    "BUTTON_UP",
+    "BUTTON_RIGHT",
+    "BUTTON_DOWN"
+] as const;
+
+/**
+ * 移動ボタンかどうかの判定に使用します。
+ */
+const VirtualPadMoveButtonsSet = new Set<VirtualPadButtonCode>(VirtualPadMoveButtonCodes);
+
+/**
+ * 仮想パッドの状態管理を行うクラスです。
+ * @todo PCといった、タッチデバイスでないデバイスでは、このクラスのインスタンスを生成しないようにする。
+ *     (this._enabled で判別しているけど、いちいち判定処理書くのつらい...)
+ */
+export default class VirtualPadStore {
+
+    /**
+     * 仮想パッドが有効か
+     * @property
+     */
+    private _enabled: boolean;
+
+    private _visible: boolean;
+
+    private _onTouchStart: VirtualPadEventFunction | null;
+    private _onTouchEnd: VirtualPadEventFunction | null;
+
+    /**
+     * 有効なボタンが格納されている配列です。各ボタンを繰り返し処理する場合に使用します。
+     * @property
+     */
+    private _availableButtons: [VirtualPadButtonCode?];
+    private _isTouchingButtons: {
+        [key in VirtualPadButtonCode]?: VirtualPadButtonTouching
+    };
+
+    /**
+     * 移動ボタンの要素自体です。主に移動ボタンで指を動かす際に使用します。
+     * @property
+     */
+    private _moveButtonsElement: HTMLElement | null;
+
+    /**
+     * 操作ボタン群の親要素です。 {@code _moveButtonsElement} と併せて表示や非表示の切り替えに使用します。
+     */
+    private _buttonWrapperElement: HTMLElement | null;
+
+    /**
+     * @param buttons 仮想パッドの各要素
+     * @param firstVisible インスタンス化時点で仮想パッドを表示するか
+     * @param buttonWrapper 仮想パッドのボタン (主に右側) を覆う親要素
+     * @param moveButtons 仮想パッドの移動ボタンの要素
+     * @param onTouchStart 仮想パッドを押下した場合に発生するコールバック関数
+     * @param onTouchEnd 仮想パッドを話した場合に発生するコールバック関数
+     */
+    constructor(
+        buttons: VirtualPadButtons | null,
+        firstVisible: boolean = false,
+        buttonWrapper: HTMLElement | null = null,
+        moveButtons: HTMLElement | null = null,
+        onTouchStart: VirtualPadEventFunction | null = null,
+        onTouchEnd: VirtualPadEventFunction | null = null,
+    ) {
+        this._enabled = buttons !== null;
+        this._visible = firstVisible;
+        this._onTouchStart = onTouchStart || null;
+        this._onTouchEnd = onTouchEnd || null;
+        this._availableButtons = [];
+        this._isTouchingButtons = {};
+        this._moveButtonsElement = moveButtons;
+        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";
+        }
+
+        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);
+
+            /**
+             * 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 touch = event.targetTouches.item(0);
+        if (!this._moveButtonsElement || touch === null) {
+            return;
+        }
+        
+        // 中央のポジションを取得
+        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 touchX = touch.pageX - centerPositionX;
+        const touchY = touch.pageY - centerPositionY;
+
+        if (touchX >= touchY) { // 上と右
+            /**
+             * touchY をマイナスにして、グラフの空間上で擬似的に表現します。
+             */
+            if (touchX <= -touchY) { // 上
+                this.setTouchInfo("BUTTON_UP");
+            } else { // 右
+                this.setTouchInfo("BUTTON_RIGHT");
+            }
+        } else { // 左と下
+            if (touchX >= -touchY) { // 下
+                this.setTouchInfo("BUTTON_DOWN");
+            } else { // 左
+                this.setTouchInfo("BUTTON_LEFT");
+            }
+        }
+    }
+
+    private _setVisible(visible: boolean) {
+        if (this._moveButtonsElement !== null) {
+            this._moveButtonsElement.style.display = visible ? "grid" : "none";
+        }
+        if (this._buttonWrapperElement !== null) {
+            this._buttonWrapperElement.style.display = visible ? "grid" : "none";
+        }
+        this._visible = visible;
+    }
+
+    /**
+     * 指定したボタンが押されたかを判別します。
+     *     戦闘予測ボタンといった、1回しか押さないボタンの判定に使用します。
+     * @param buttonType 
+     */
+    public checkTouchButton(buttonType: VirtualPadButtonCode): boolean {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === "TOUCH";
+    }
+
+    /**
+     * 指定したボタンが押されているかを判別します。
+     *     移動ボタンといった、長時間押すボタンの判定に使用します。
+     * @param buttonType 
+     */
+    public checkTouchingButton(buttonType: VirtualPadButtonCode): boolean {
+        if (!this._enabled) {
+            return false;
+        }
+        const state = this.getButtonState(buttonType);
+        return state === "TOUCH" || state === "TOUCHING";
+    }
+
+    /**
+     * 今の仮想パッドのボタンの状態を出力します
+     * @param buttonType 
+     */
+    public getButtonState(buttonType: VirtualPadButtonCode): VirtualPadState {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return "NONE";
+        }
+
+        const touched = button.prev;
+        const isTouching = button.current;
+        if (touched && isTouching) {
+            return "TOUCHING";
+        } else if (isTouching) {
+            return "TOUCH";
+        } else if (touched) {
+            return "LEAVE";
+        }
+        return "NONE";
+    }
+
+    /**
+     * ボタンにタッチ信号を与えます
+     * @param buttonType 
+     */
+    public setTouchInfo(buttonType: VirtualPadButtonCode) {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return;
+        }
+
+        button.next = true;
+    }
+
+    /**
+     * ボタンのタッチ信号を解除します
+     * @param buttonType 
+     */
+    public clearTouchInfo(buttonType: VirtualPadButtonCode) {
+        const button = this._isTouchingButtons[buttonType];
+        if (!this._enabled || button === undefined) {
+            return;
+        }
+
+        button.next = false;
+    }
+
+    /**
+     * すべての移動ボタンのタッチ信号をキャンセルします
+     */
+    public allMoveClear(): void {
+        VirtualPadMoveButtonCodes.forEach((buttonCode) => {
+            if (this._availableButtons.includes(buttonCode)) {
+                this.clearTouchInfo(buttonCode);
+            }
+        });
+    }
+
+    /**
+     * すべてのボタンのタッチ信号をキャンセルします。
+     */
+    public allClear(): void {
+        this._availableButtons.forEach((buttonCode) => {
+            if (buttonCode !== undefined) {
+                const button = this._isTouchingButtons[buttonCode];
+                if (button !== undefined) {
+                    button.next = false;
+                }
+            }
+        });
+    }
+
+    /**
+     * 押したボタンが移動ボタンか判定します。
+     * @param buttonType 
+     */
+    public static isMoveButton(buttonType: VirtualPadButtonCode): boolean {
+        return VirtualPadMoveButtonsSet.has(buttonType);
+    }
+
+    /**
+     * 今の仮想パッドボタンの状態を次の状態に送ります。
+     */
+    public update() {
+        this._availableButtons.forEach((buttonCode) => {
+            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 "TOUCH":
+                    this._onTouchStart?.(buttonCode);
+                    break;
+                case "LEAVE":
+                    this._onTouchEnd?.(buttonCode);
+                    break;
+            }
+        });
+    }
+
+    public toggleVisible() {
+        this._setVisible(!this._visible);
+    }
+}

package/src/index.ts

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

package/src/makeInject.ts

@@ -0,0 +1,16 @@
+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>
+    </div>`;
+}

package/src/viewportFit.ts

@@ -0,0 +1,39 @@
+/**
+ * ビューポート制御の初期化を行うメソッドです。
+ */
+export function initializeViewport() {
+    const headElement = document.getElementsByTagName('head')[0];
+    let viewportElement = document.createElement('meta');
+
+    viewportElement.setAttribute('name', 'viewport');
+    headElement.appendChild(viewportElement);
+    viewportFit();
+}
+
+/**
+ * 画面の向きやサイズに合わせて自動的に画面のビューポートを調整する機能のメソッドです。 "resize" イベントと併せてご利用ください。
+ * @example window.addEventListener("resize", viewportFit);
+ */
+export default function viewportFit() {
+    const WWA_WIDTH = 560;
+    const WWA_HEIGHT = 440;
+    // ブラウザーCSSをここから取得することはできないようなのでここで仮の値を設定しておく
+    const BROWSER_MARGIN = 8;
+
+    const viewportElement = document.querySelector("meta[name='viewport']");
+    const browserWidth = window.innerWidth;
+    const browserHeight = window.innerHeight;
+    /**
+     * viewportFit を有効化すると、誤動作を防ぐため、拡大操作が無効になります。
+     *     Webページの中に設置する場合は、特にご注意ください。
+     */
+    let viewportValue = "user-scalable=no";
+
+    if (browserWidth > browserHeight) {
+        const width = Math.floor((browserWidth / browserHeight) * (WWA_HEIGHT + (BROWSER_MARGIN) * 2));
+        viewportValue = `width=${width},${viewportValue}`;
+    } else if (browserWidth <= browserHeight) {
+        viewportValue = `width=${WWA_WIDTH + (BROWSER_MARGIN * 2)},${viewportValue}`;
+    }
+    viewportElement?.setAttribute("content", `${viewportValue}`);
+}

package/tsconfig.json

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