@wwawing/virtual-pad 3.9.0-beta.0 → 3.9.0-beta.3

package/lib/VirtualPad.d.ts

@@ -31,13 +31,16 @@ export declare type VirtualPadButtons = {
 declare type VirtualPadEventFunction = (buttonCode: VirtualPadButtonCode) => void;
 export default class VirtualPadStore {
     private _enabled;
+    private _visible;
     private _onTouchStart;
     private _onTouchEnd;
     private _availableButtons;
     private _isTouchingButtons;
     private _moveButtonsElement;
-    constructor(buttons: VirtualPadButtons | {}, moveButtons?: HTMLElement, onTouchStart?: VirtualPadEventFunction, onTouchEnd?: VirtualPadEventFunction);
+    private _buttonWrapperElement;
+    constructor(buttons: VirtualPadButtons | {}, firstVisible?: boolean, buttonWrapper?: HTMLElement, moveButtons?: HTMLElement, onTouchStart?: VirtualPadEventFunction, onTouchEnd?: VirtualPadEventFunction);
     private _detectMovingMoveButton;
+    private _setVisible;
     checkTouchButton(buttonType: VirtualPadButtonCode): boolean;
     checkTouchingButton(buttonType: VirtualPadButtonCode): boolean;
     getButtonState(buttonType: VirtualPadButtonCode): VirtualPadState;
@@ -47,5 +50,6 @@ export default class VirtualPadStore {
     allClear(): void;
     static isMoveButton(buttonType: VirtualPadButtonCode): boolean;
     update(): void;
+    toggleVisible(): void;
 }
 export {};

package/lib/VirtualPad.js

@@ -25,17 +25,22 @@ var VirtualPadMoveButtonCodes = [
     VirtualPadButtonCode.BUTTON_DOWN
 ];
 var VirtualPadStore = (function () {
-    function VirtualPadStore(buttons, moveButtons, onTouchStart, onTouchEnd) {
+    function VirtualPadStore(buttons, firstVisible, buttonWrapper, moveButtons, onTouchStart, onTouchEnd) {
+        if (firstVisible === void 0) { firstVisible = false; }
+        if (buttonWrapper === void 0) { buttonWrapper = null; }
         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._visible = firstVisible;
         this._onTouchStart = onTouchStart || null;
         this._onTouchEnd = onTouchEnd || null;
         this._availableButtons = [];
         this._isTouchingButtons = {};
         this._moveButtonsElement = moveButtons;
+        this._buttonWrapperElement = buttonWrapper;
+        this._setVisible(firstVisible);
         var _loop_1 = function (buttonTypeString) {
             var buttonCode = parseInt(buttonTypeString);
             var button = buttons[buttonCode];
@@ -107,6 +112,15 @@ var VirtualPadStore = (function () {
             }
         }
     };
+    VirtualPadStore.prototype._setVisible = function (visible) {
+        if (this._moveButtonsElement !== null) {
+            this._moveButtonsElement.style.display = visible ? "grid" : "none";
+        }
+        if (this._moveButtonsElement !== null) {
+            this._buttonWrapperElement.style.display = visible ? "grid" : "none";
+        }
+        this._visible = visible;
+    };
     VirtualPadStore.prototype.checkTouchButton = function (buttonType) {
         if (!this._enabled) {
             return false;
@@ -183,6 +197,9 @@ var VirtualPadStore = (function () {
             }
         });
     };
+    VirtualPadStore.prototype.toggleVisible = function () {
+        this._setVisible(!this._visible);
+    };
     return VirtualPadStore;
 }());
 export default VirtualPadStore;

package/lib/index.d.ts

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

package/lib/index.js

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

package/lib/viewportFit.d.ts

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

package/lib/{autoRotate.js → viewportFit.js}

@@ -1,23 +1,24 @@
-export function initializeRotate() {
+export function initializeViewport() {
     var headElement = document.getElementsByTagName('head')[0];
     var viewportElement = document.createElement('meta');
     viewportElement.setAttribute('name', 'viewport');
     headElement.appendChild(viewportElement);
-    autoRotate();
+    viewportFit();
 }
-export default function autoRotate() {
+export default function viewportFit() {
     var WWA_WIDTH = 560;
     var WWA_HEIGHT = 440;
+    var BROWSER_MARGIN = 8;
     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);
+        var width = Math.floor((browserWidth / browserHeight) * (WWA_HEIGHT + (BROWSER_MARGIN) * 2));
         viewportValue = "width=".concat(width, ",").concat(viewportValue);
     }
     else if (browserWidth <= browserHeight) {
-        viewportValue = "width=".concat(WWA_WIDTH, ",").concat(viewportValue);
+        viewportValue = "width=".concat(WWA_WIDTH + (BROWSER_MARGIN * 2), ",").concat(viewportValue);
     }
     viewportElement.setAttribute("content", "".concat(viewportValue));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwawing/virtual-pad",
-  "version": "3.9.0-beta.0",
+  "version": "3.9.0-beta.3",
   "description": "WWA Wing Virtual Pad for mobile phone",
   "main": "lib/index.js",
   "scripts": {
@@ -16,5 +16,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "31f57918222d901ab542e8382dcd2c2b79023af4"
+  "gitHead": "42a88c02b75b6f8ce6bb22fb38f2b8a952ee38d6"
 }

package/src/VirtualPad.ts

@@ -65,6 +65,8 @@ export default class VirtualPadStore {
      */
     private _enabled: boolean;
 
+    private _visible: boolean;
+
     private _onTouchStart: VirtualPadEventFunction | null;
     private _onTouchEnd: VirtualPadEventFunction | null;
 
@@ -83,24 +85,37 @@ export default class VirtualPadStore {
      */
     private _moveButtonsElement: HTMLElement;
 
+    /**
+     * 操作ボタン群の親要素です。 {@code _moveButtonsElement} と併せて表示や非表示の切り替えに使用します。
+     */
+    private _buttonWrapperElement: HTMLElement;
+
     /**
      * @param buttons 仮想パッドの各要素
+     * @param firstVisible インスタンス化時点で仮想パッドを表示するか
+     * @param buttonWrapper 仮想パッドのボタン (主に右側) を覆う親要素
      * @param moveButtons 仮想パッドの移動ボタンの要素
      * @param onTouchStart 仮想パッドを押下した場合に発生するコールバック関数
      * @param onTouchEnd 仮想パッドを話した場合に発生するコールバック関数
      */
     constructor(
         buttons: VirtualPadButtons | {},
+        firstVisible: boolean = false,
+        buttonWrapper: HTMLElement = null,
         moveButtons: HTMLElement = null,
         onTouchStart: VirtualPadEventFunction = null,
-        onTouchEnd: VirtualPadEventFunction = null
+        onTouchEnd: VirtualPadEventFunction = null,
     ) {
         this._enabled = Object.keys(buttons).length > 0;
+        this._visible = firstVisible;
         this._onTouchStart = onTouchStart || null;
         this._onTouchEnd = onTouchEnd || null;
         this._availableButtons = [];
         this._isTouchingButtons = {};
         this._moveButtonsElement = moveButtons;
+        this._buttonWrapperElement = buttonWrapper;
+
+        this._setVisible(firstVisible);
 
         for (let buttonTypeString in buttons) {
             /**
@@ -202,6 +217,16 @@ export default class VirtualPadStore {
         }
     }
 
+    private _setVisible(visible: boolean) {
+        if (this._moveButtonsElement !== null) {
+            this._moveButtonsElement.style.display = visible ? "grid" : "none";
+        }
+        if (this._moveButtonsElement !== null) {
+            this._buttonWrapperElement.style.display = visible ? "grid" : "none";
+        }
+        this._visible = visible;
+    }
+
     /**
      * 指定したボタンが押されたかを判別します。
      *     戦闘予測ボタンといった、1回しか押さないボタンの判定に使用します。
@@ -323,4 +348,8 @@ export default class VirtualPadStore {
             }
         });
     }
+
+    public toggleVisible() {
+        this._setVisible(!this._visible);
+    }
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 import VirtualPadStore, { VirtualPadState, VirtualPadButtonCode, VirtualPadButtons } from './VirtualPad';
-import autoRotate, { initializeRotate } from './autoRotate';
+import viewportFit, { initializeViewport } from './viewportFit';
 import makeInject from './makeInject';
 
 export {
@@ -7,7 +7,7 @@ export {
   VirtualPadState,
   VirtualPadButtonCode,
   VirtualPadButtons,
-  autoRotate,
-  initializeRotate,
+  viewportFit,
+  initializeViewport,
   makeInject
 }

package/src/{autoRotate.ts → viewportFit.ts}

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

package/lib/autoRotate.d.ts

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