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

README.md

@@ -13,6 +13,7 @@ A project that builds showcase webpage for Arknights Live2D-equipped operators.
 - For Linux users: You power user should be able to find your solutions!
 
 ## Usage
+### Command Line Tool
 
 ``` bash
 $ python3 aklive2d.py -h  
@@ -47,6 +48,27 @@ optional arguments:
   -o {all,skadi} [{all,skadi} ...], --operators {all,skadi} [{all,skadi} ...]
                         Operators to build (default: ['all'])
 ```
+### Webpage & JavaScript
+
+Add query string `settings` to bring up the settings panel to adjust your settings. Then use appropriate JavaScript code to load your settings
+
+``` javascript
+settings.setFPS(integer) // set FPS
+settings.displayLogo(boolean) // display logo or not
+settings.resizeLogo(float) // the ratio of the logo
+settings.opacityLogo(float) // the opacity of the logo
+settings.setLogo(url, removeInvert) // change the logo, url: image url, removeInvert: boolean
+settings.setBackground(url) // change the background, url: image url
+settings.positionPadding("padLeft", integer) // left padding
+settings.positionPadding("padRight", integer) // right padding
+settings.positionPadding("padTop", integer) // top padding
+settings.positionPadding("padBottom", integer) // bottom padding
+
+settings.open() // open settings panel
+settings.close() // close settings panel
+settings.reset() // reset settings
+```
+
 ## Config
 ``` yaml
 # List all the supported operators under <operators> block

Version

@@ -1 +1 @@
-2.0.2
+2.0.3

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;
 }