fix(settings): fixed the settings panel was shown by default

fix(settings): fixed close button
feat(settings): use query string to bring up the settings panel
doc(readme): update README.md

template/assets/runner.js

@@ -1,3 +1,5 @@
+const params = new URLSearchParams(window.location.search);
+
 function supportsWebGL() {
     try {
         let canvas = document.createElement("canvas");
@@ -55,6 +57,9 @@ if (!supportsWebGL()) {
             window.operatorSettings.success(e);
             settings.spinePlayerLoaded = true;
             settings.loadViewport();
+            if (params.has("settings")) {
+                settings.open();
+            }
         },
     });
     settings = new Settings({

template/assets/settings.js

@@ -89,10 +89,10 @@ var Settings = (function () {
             this.spinePlayer.updateViewport(this.viewport);
     };
     Settings.prototype.open = function () {
-        this.el.classList.add("website-settings");
+        this.el.style.display = "inherit";
     };
     Settings.prototype.close = function () {
-        this.el.classList.remove("website-settings");
+        this.el.style.display = "none";
     };
     Settings.prototype.reset = function () {
         this.setFPS(this.fps);
@@ -201,7 +201,7 @@ var Settings = (function () {
                 <button type="button" id="settings_close">Close</button>
             </div>
         `
-
+        this.el.classList.add("website-settings");
         this.el.innerHTML = htmldata;
         document.body.appendChild(this.el);
         
@@ -326,7 +326,7 @@ var Settings = (function () {
         document.getElementById("settings_reset").addEventListener("click", e => {
             _this.reset();
         })
-        document.getElementById("settings_reset").addEventListener("click", e => {
+        document.getElementById("settings_close").addEventListener("click", e => {
             _this.close();
         })
     };

template/assets/style.css

@@ -16,6 +16,8 @@ body {
     background-image: url("../operator/operator_bg.png");
     height: 100%;
     width: 100%;
+    touch-action: none;
+    -ms-touch-action: none;
 }
 
 .logo {
@@ -49,4 +51,5 @@ body {
     background-color: white;
     user-select: auto;
     z-index: 999;
+    display: none;
 }