@wwawing/virtual-pad 3.8.0-beta.1 → 3.9.0-beta.2

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/autoRotate.js

@@ -8,16 +8,17 @@ export function initializeRotate() {
 export default function autoRotate() {
     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.8.0-beta.1",
+  "version": "3.9.0-beta.2",
   "description": "WWA Wing Virtual Pad for mobile phone",
   "main": "lib/index.js",
   "scripts": {
@@ -16,5 +16,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f27dbc4de044cc28ab944997ea1c3361e94228cc"
+  "gitHead": "a736ed0e709d1049bbd3c3f4b521790161ba2d50"
 }

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/autoRotate.ts

@@ -17,6 +17,8 @@ export function initializeRotate() {
 export default function autoRotate() {
     const WWA_WIDTH = 560;
     const WWA_HEIGHT = 440;
+    // ブラウザーCSSをここから取得することはできないようなのでここで仮の値を設定しておく
+    const BROWSER_MARGIN = 8;
 
     const viewportElement = document.querySelector("meta[name='viewport']");
     const browserWidth = window.innerWidth;
@@ -28,10 +30,10 @@ export default function autoRotate() {
     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}`);
 }