feat(showcase): use vanilla js instead due to incompatibility of wallpaper engine

2023-01-16 17:52:09 -05:00
parent 6d54eb068c
commit 2f53443064
25 changed files with 642 additions and 1365 deletions
--- a/index.html
+++ b/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="renderer" content="webkit">
-    <title>aklive2d</title>
-  </head>
-  <body style="background-image: url('./operator_bg.png');">
-    <div id="app"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="renderer" content="webkit">
+  <title>aklive2d</title>
+</head>
+<body style="background-image: url('./operator_bg.png');">
+  <div id="app"></div>
+  <script type="module" src="/src/index.js"></script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@@ -8,13 +8,11 @@
    "build": "vite build",
    "preview": "vite preview"
  },
+  "devDependencies": {
+    "vite": "^4.0.0"
+  },
  "dependencies": {
-    "preact": "^10.11.3",
    "sharp": "^0.31.3",
    "yaml": "^2.2.1"
-  },
-  "devDependencies": {
-    "@preact/preset-vite": "^2.4.0",
-    "vite": "^4.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,273 +1,21 @@
 lockfileVersion: 5.4

 specifiers:
-  '@preact/preset-vite': ^2.4.0
-  preact: ^10.11.3
  sharp: ^0.31.3
  vite: ^4.0.0
  yaml: ^2.2.1

 dependencies:
-  preact: 10.11.3
  sharp: 0.31.3
  yaml: 2.2.1

 devDependencies:
-  '@preact/preset-vite': 2.5.0_6lv424qzfa5w4k4pp4rg6latw4
  vite: 4.0.4

 packages:

-  /@ampproject/remapping/2.2.0:
-    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: true
-
-  /@babel/code-frame/7.18.6:
-    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.18.6
-    dev: true
-
-  /@babel/compat-data/7.20.10:
-    resolution: {integrity: sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/core/7.20.7:
-    resolution: {integrity: sha512-t1ZjCluspe5DW24bn2Rr1CDb2v9rn/hROtg9a2tmd0+QYf4bsloYfLQzjG4qHPNMhWtKdGC33R5AxGR2Af2cBw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.20.7
-      '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.7
-      '@babel/helper-module-transforms': 7.20.11
-      '@babel/helpers': 7.20.7
-      '@babel/parser': 7.20.7
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.10
-      '@babel/types': 7.20.7
-      convert-source-map: 1.9.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/generator/7.20.7:
-    resolution: {integrity: sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-      '@jridgewell/gen-mapping': 0.3.2
-      jsesc: 2.5.2
-    dev: true
-
-  /@babel/helper-annotate-as-pure/7.18.6:
-    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-compilation-targets/7.20.7_@babel+core@7.20.7:
-    resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.20.10
-      '@babel/core': 7.20.7
-      '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.21.4
-      lru-cache: 5.1.1
-      semver: 6.3.0
-    dev: true
-
-  /@babel/helper-environment-visitor/7.18.9:
-    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-function-name/7.19.0:
-    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-hoist-variables/7.18.6:
-    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-module-imports/7.18.6:
-    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-module-transforms/7.20.11:
-    resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-simple-access': 7.20.2
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.19.1
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.10
-      '@babel/types': 7.20.7
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helper-plugin-utils/7.20.2:
-    resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-simple-access/7.20.2:
-    resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-split-export-declaration/7.18.6:
-    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/helper-string-parser/7.19.4:
-    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-validator-identifier/7.19.1:
-    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-validator-option/7.18.6:
-    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helpers/7.20.7:
-    resolution: {integrity: sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.10
-      '@babel/types': 7.20.7
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/highlight/7.18.6:
-    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.19.1
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: true
-
-  /@babel/parser/7.20.7:
-    resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.20.7:
-    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.7
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.20.7:
-    resolution: {integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.7
-      '@babel/plugin-transform-react-jsx': 7.20.7_@babel+core@7.20.7
-    dev: true
-
-  /@babel/plugin-transform-react-jsx/7.20.7_@babel+core@7.20.7:
-    resolution: {integrity: sha512-Tfq7qqD+tRj3EoDhY00nn2uP2hsRxgYGi5mLQ5TimKav0a9Lrpd4deE+fcLXU8zFYRjlKPHZhpCvfEA6qnBxqQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.7
-      '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.7
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/template/7.20.7:
-    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.20.7
-      '@babel/types': 7.20.7
-    dev: true
-
-  /@babel/traverse/7.20.10:
-    resolution: {integrity: sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.20.7
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.19.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.20.7
-      '@babel/types': 7.20.7
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/types/7.20.7:
-    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.19.4
-      '@babel/helper-validator-identifier': 7.19.1
-      to-fast-properties: 2.0.0
-    dev: true
-
-  /@esbuild/android-arm/0.16.13:
-    resolution: {integrity: sha512-JmtqThupn9Yf+FzANE+GG73ASUkssnPwOsndUElhp23685QzRK+MO1UompOlBaXV9D5FTuYcPnw7p4mCq2YbZQ==}
+  /@esbuild/android-arm/0.16.17:
+    resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [android]
@@ -275,8 +23,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/android-arm64/0.16.13:
-    resolution: {integrity: sha512-r4xetsd1ez1NF9/9R2f9Q6AlxqiZLwUqo7ICOcvEVwopVkXUcspIjEbJk0EVTgT6Cp5+ymzGPT6YNV0ievx4yA==}
+  /@esbuild/android-arm64/0.16.17:
+    resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [android]
@@ -284,8 +32,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/android-x64/0.16.13:
-    resolution: {integrity: sha512-hKt1bFht/Vtp0xJ0ZVzFMnPy1y1ycmM3KNnp3zsyZfQmw7nhs2WLO4vxdR5YG+6RsHKCb2zbZ3VwlC0Tij0qyA==}
+  /@esbuild/android-x64/0.16.17:
+    resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]
@@ -293,8 +41,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/darwin-arm64/0.16.13:
-    resolution: {integrity: sha512-ogrVuNi2URocrr3Ps20f075EMm9V7IeenOi9FRj4qdbT6mQlwLuP4l90PW2iBrKERx0oRkcZprEUNsz/3xd7ww==}
+  /@esbuild/darwin-arm64/0.16.17:
+    resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]
@@ -302,8 +50,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/darwin-x64/0.16.13:
-    resolution: {integrity: sha512-Agajik9SBGiKD7FPXE+ExW6x3MgA/dUdpZnXa9y1tyfE4lKQx+eQiknSdrBnWPeqa9wL0AOvkhghmYhpVkyqkA==}
+  /@esbuild/darwin-x64/0.16.17:
+    resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]
@@ -311,8 +59,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/freebsd-arm64/0.16.13:
-    resolution: {integrity: sha512-KxMO3/XihBcHM+xQUM6nQZO1SgQuOsd1DCnKF1a4SIf/i5VD45vrqN3k8ePgFrEbMi7m5JeGmvNqwJXinF0a4Q==}
+  /@esbuild/freebsd-arm64/0.16.17:
+    resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]
@@ -320,8 +68,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/freebsd-x64/0.16.13:
-    resolution: {integrity: sha512-Ez15oqV1vwvZ30cVLeBW14BsWq/fdWNQGMOxxqaSJVQVLqHhvgfQ7gxGDiN9tpJdeQhqJO+Q0r02/Tce5+USNg==}
+  /@esbuild/freebsd-x64/0.16.17:
+    resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]
@@ -329,8 +77,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-arm/0.16.13:
-    resolution: {integrity: sha512-18dLd2L3mda+iFj6sswyBMSh2UwniamD9M4DwPv8VM+9apRFlQ5IGKxBdumnTuOI4NvwwAernmUseWhYQ9k+rg==}
+  /@esbuild/linux-arm/0.16.17:
+    resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]
@@ -338,8 +86,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-arm64/0.16.13:
-    resolution: {integrity: sha512-qi5n7KwcGViyJeZeQnu8fB6dC3Mlm5PGaqSv2HhQDDx/MPvVfQGNMcv7zcBL4qk3FkuWhGVwXkjQ76x7R0PWlA==}
+  /@esbuild/linux-arm64/0.16.17:
+    resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]
@@ -347,8 +95,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-ia32/0.16.13:
-    resolution: {integrity: sha512-2489Xad9sr+6GD7nB913fUqpCsSwVwgskkQTq4Or2mZntSPYPebyJm8l1YruHo7oqYMTGV6RiwGE4gRo3H+EPQ==}
+  /@esbuild/linux-ia32/0.16.17:
+    resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [linux]
@@ -356,8 +104,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-loong64/0.16.13:
-    resolution: {integrity: sha512-x8KplRu9Y43Px8I9YS+sPBwQ+fw44Mvp2BPVADopKDWz+h3fcj1BvRU58kxb89WObmwKX9sWdtYzepL4Fmx03A==}
+  /@esbuild/linux-loong64/0.16.17:
+    resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]
@@ -365,8 +113,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-mips64el/0.16.13:
-    resolution: {integrity: sha512-qhhdWph9FLwD9rVVC/nUf7k2U4NZIA6/mGx0B7+O6PFV0GjmPA2E3zDQ4NUjq9P26E0DeAZy9akH9dYcUBRU7A==}
+  /@esbuild/linux-mips64el/0.16.17:
+    resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]
@@ -374,8 +122,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-ppc64/0.16.13:
-    resolution: {integrity: sha512-cVWAPKsrRVxI1jCeJHnYSbE3BrEU+pZTZK2gfao9HRxuc+3m4+RLfs3EVEpGLmMKEcWfVCB9wZ3yNxnknutGKQ==}
+  /@esbuild/linux-ppc64/0.16.17:
+    resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]
@@ -383,8 +131,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-riscv64/0.16.13:
-    resolution: {integrity: sha512-Agb7dbRyZWnmPn5Vvf0eyqaEUqSsaIUwwyInu2EoFTaIDRp093QU2M5alUyOooMLkRbD1WvqQNwx08Z/g+SAcQ==}
+  /@esbuild/linux-riscv64/0.16.17:
+    resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]
@@ -392,8 +140,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-s390x/0.16.13:
-    resolution: {integrity: sha512-AqRBIrc/+kl08ahliNG+EyU+j41wIzQfwBTKpi80cCDiYvYFPuXjvzZsD9muiu58Isj0RVni9VgC4xK/AnSW4g==}
+  /@esbuild/linux-s390x/0.16.17:
+    resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]
@@ -401,8 +149,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-x64/0.16.13:
-    resolution: {integrity: sha512-S4wn2BimuhPcoArRtVrdHUKIymCCZcYAXQE47kUiX4yrUrEX2/ifn5eKNbZ5c1jJKUlh1gC2ESIN+iw3wQax3g==}
+  /@esbuild/linux-x64/0.16.17:
+    resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]
@@ -410,8 +158,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/netbsd-x64/0.16.13:
-    resolution: {integrity: sha512-2c8JWgfUMlQHTdaR5X3xNMwqOyad8kgeCupuVkdm3QkUOzGREjlTETQsK6oHifocYzDCo9FeKcUwsK356SdR+g==}
+  /@esbuild/netbsd-x64/0.16.17:
+    resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]
@@ -419,8 +167,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/openbsd-x64/0.16.13:
-    resolution: {integrity: sha512-Bwh+PmKD/LK+xBjqIpnYnKYj0fIyQJ0YpRxsn0F+WfzvQ2OA+GKDlf8AHosiCns26Q4Dje388jQVwfOBZ1GaFw==}
+  /@esbuild/openbsd-x64/0.16.17:
+    resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]
@@ -428,8 +176,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/sunos-x64/0.16.13:
-    resolution: {integrity: sha512-8wwk6f9XGnhrF94/DBdFM4Xm1JeCyGTCj67r516VS9yvBVQf3Rar54L+XPVDs/oZOokwH+XsktrgkuTMAmjntg==}
+  /@esbuild/sunos-x64/0.16.17:
+    resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]
@@ -437,8 +185,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-arm64/0.16.13:
-    resolution: {integrity: sha512-Jmwbp/5ArLCiRAHC33ODfcrlIcbP/exXkOEUVkADNJC4e/so2jm+i8IQFvVX/lA2GWvK3GdgcN0VFfp9YITAbg==}
+  /@esbuild/win32-arm64/0.16.17:
+    resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]
@@ -446,8 +194,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-ia32/0.16.13:
-    resolution: {integrity: sha512-AX6WjntGjhJHzrPSVvjMD7grxt41koHfAOx6lxLorrpDwwIKKPaGDASPZgvFIZHTbwhOtILW6vAXxYPDsKpDJA==}
+  /@esbuild/win32-ia32/0.16.17:
+    resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]
@@ -455,8 +203,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-x64/0.16.13:
-    resolution: {integrity: sha512-A+U4gM6OOkPS03UgVU08GTpAAAxPsP/8Z4FmneGo4TaVSD99bK9gVJXlqUEPMO/htFXEAht2O6pX4ErtLY5tVg==}
+  /@esbuild/win32-x64/0.16.17:
+    resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [win32]
@@ -464,121 +212,6 @@ packages:
    dev: true
    optional: true

-  /@jridgewell/gen-mapping/0.1.1:
-    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
-
-  /@jridgewell/gen-mapping/0.3.2:
-    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: true
-
-  /@jridgewell/resolve-uri/3.1.0:
-    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
-    engines: {node: '>=6.0.0'}
-    dev: true
-
-  /@jridgewell/set-array/1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: true
-
-  /@jridgewell/sourcemap-codec/1.4.14:
-    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true
-
-  /@jridgewell/trace-mapping/0.3.17:
-    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
-
-  /@preact/preset-vite/2.5.0_6lv424qzfa5w4k4pp4rg6latw4:
-    resolution: {integrity: sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==}
-    peerDependencies:
-      '@babel/core': 7.x
-      vite: 2.x || 3.x || 4.x
-    dependencies:
-      '@babel/core': 7.20.7
-      '@babel/plugin-transform-react-jsx': 7.20.7_@babel+core@7.20.7
-      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.20.7
-      '@prefresh/vite': 2.2.9_preact@10.11.3+vite@4.0.4
-      '@rollup/pluginutils': 4.2.1
-      babel-plugin-transform-hook-names: 1.0.2_@babel+core@7.20.7
-      debug: 4.3.4
-      kolorist: 1.6.0
-      resolve: 1.22.1
-      vite: 4.0.4
-    transitivePeerDependencies:
-      - preact
-      - supports-color
-    dev: true
-
-  /@prefresh/babel-plugin/0.4.4:
-    resolution: {integrity: sha512-/EvgIFMDL+nd20WNvMO0JQnzIl1EJPgmSaSYrZUww7A+aSdKsi37aL07TljrZR1cBMuzFxcr4xvqsUQLFJEukw==}
-    dev: true
-
-  /@prefresh/core/1.4.1_preact@10.11.3:
-    resolution: {integrity: sha512-og1vaBj3LMJagVncNrDb37Gqc0cWaUcDbpVt5hZtsN4i2Iwzd/5hyTsDHvlMirhSym3wL9ihU0Xa2VhSaOue7g==}
-    peerDependencies:
-      preact: ^10.0.0
-    dependencies:
-      preact: 10.11.3
-    dev: true
-
-  /@prefresh/utils/1.1.3:
-    resolution: {integrity: sha512-Mb9abhJTOV4yCfkXrMrcgFiFT7MfNOw8sDa+XyZBdq/Ai2p4Zyxqsb3EgHLOEdHpMj6J9aiZ54W8H6FTam1u+A==}
-    dev: true
-
-  /@prefresh/vite/2.2.9_preact@10.11.3+vite@4.0.4:
-    resolution: {integrity: sha512-1ERBF85Ja9/lkrfaltmo4Gca7R2ClQPSHHDDysFgfvPzHmLUeyB0x9WHwhwov/AA1DnyPhsfYT54z3yQd8XrgA==}
-    peerDependencies:
-      preact: ^10.4.0
-      vite: '>=2.0.0-beta.3'
-    dependencies:
-      '@babel/core': 7.20.7
-      '@prefresh/babel-plugin': 0.4.4
-      '@prefresh/core': 1.4.1_preact@10.11.3
-      '@prefresh/utils': 1.1.3
-      '@rollup/pluginutils': 4.2.1
-      preact: 10.11.3
-      vite: 4.0.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
-  /ansi-styles/3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-    dependencies:
-      color-convert: 1.9.3
-    dev: true
-
-  /babel-plugin-transform-hook-names/1.0.2_@babel+core@7.20.7:
-    resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
-    peerDependencies:
-      '@babel/core': ^7.12.10
-    dependencies:
-      '@babel/core': 7.20.7
-    dev: true
-
  /base64-js/1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
    dev: false
@@ -591,17 +224,6 @@ packages:
      readable-stream: 3.6.0
    dev: false

-  /browserslist/4.21.4:
-    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001441
-      electron-to-chromium: 1.4.284
-      node-releases: 2.0.8
-      update-browserslist-db: 1.0.10_browserslist@4.21.4
-    dev: true
-
  /buffer/5.7.1:
    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
    dependencies:
@@ -609,29 +231,10 @@ packages:
      ieee754: 1.2.1
    dev: false

-  /caniuse-lite/1.0.30001441:
-    resolution: {integrity: sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==}
-    dev: true
-
-  /chalk/2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-    dev: true
-
  /chownr/1.1.4:
    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
    dev: false

-  /color-convert/1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-    dependencies:
-      color-name: 1.1.3
-    dev: true
-
  /color-convert/2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -639,9 +242,6 @@ packages:
      color-name: 1.1.4
    dev: false

-  /color-name/1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
  /color-name/1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: false
@@ -649,7 +249,7 @@ packages:
  /color-string/1.9.1:
    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
    dependencies:
-      color-name: 1.1.3
+      color-name: 1.1.4
      simple-swizzle: 0.2.2
    dev: false

@@ -661,22 +261,6 @@ packages:
      color-string: 1.9.1
    dev: false

-  /convert-source-map/1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-    dev: true
-
-  /debug/4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: true
-
  /decompress-response/6.0.0:
    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
    engines: {node: '>=10'}
@@ -694,58 +278,40 @@ packages:
    engines: {node: '>=8'}
    dev: false

-  /electron-to-chromium/1.4.284:
-    resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
-    dev: true
-
  /end-of-stream/1.4.4:
    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
    dependencies:
      once: 1.4.0
    dev: false

-  /esbuild/0.16.13:
-    resolution: {integrity: sha512-oYwFdSEIoKM1oYzyem1osgKJAvg5447XF+05ava21fOtilyb2HeQQh26/74K4WeAk5dZmj/Mx10zUqUnI14jhA==}
+  /esbuild/0.16.17:
+    resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
    optionalDependencies:
-      '@esbuild/android-arm': 0.16.13
-      '@esbuild/android-arm64': 0.16.13
-      '@esbuild/android-x64': 0.16.13
-      '@esbuild/darwin-arm64': 0.16.13
-      '@esbuild/darwin-x64': 0.16.13
-      '@esbuild/freebsd-arm64': 0.16.13
-      '@esbuild/freebsd-x64': 0.16.13
-      '@esbuild/linux-arm': 0.16.13
-      '@esbuild/linux-arm64': 0.16.13
-      '@esbuild/linux-ia32': 0.16.13
-      '@esbuild/linux-loong64': 0.16.13
-      '@esbuild/linux-mips64el': 0.16.13
-      '@esbuild/linux-ppc64': 0.16.13
-      '@esbuild/linux-riscv64': 0.16.13
-      '@esbuild/linux-s390x': 0.16.13
-      '@esbuild/linux-x64': 0.16.13
-      '@esbuild/netbsd-x64': 0.16.13
-      '@esbuild/openbsd-x64': 0.16.13
-      '@esbuild/sunos-x64': 0.16.13
-      '@esbuild/win32-arm64': 0.16.13
-      '@esbuild/win32-ia32': 0.16.13
-      '@esbuild/win32-x64': 0.16.13
-    dev: true
-
-  /escalade/3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /escape-string-regexp/1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-    dev: true
-
-  /estree-walker/2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+      '@esbuild/android-arm': 0.16.17
+      '@esbuild/android-arm64': 0.16.17
+      '@esbuild/android-x64': 0.16.17
+      '@esbuild/darwin-arm64': 0.16.17
+      '@esbuild/darwin-x64': 0.16.17
+      '@esbuild/freebsd-arm64': 0.16.17
+      '@esbuild/freebsd-x64': 0.16.17
+      '@esbuild/linux-arm': 0.16.17
+      '@esbuild/linux-arm64': 0.16.17
+      '@esbuild/linux-ia32': 0.16.17
+      '@esbuild/linux-loong64': 0.16.17
+      '@esbuild/linux-mips64el': 0.16.17
+      '@esbuild/linux-ppc64': 0.16.17
+      '@esbuild/linux-riscv64': 0.16.17
+      '@esbuild/linux-s390x': 0.16.17
+      '@esbuild/linux-x64': 0.16.17
+      '@esbuild/netbsd-x64': 0.16.17
+      '@esbuild/openbsd-x64': 0.16.17
+      '@esbuild/sunos-x64': 0.16.17
+      '@esbuild/win32-arm64': 0.16.17
+      '@esbuild/win32-ia32': 0.16.17
+      '@esbuild/win32-x64': 0.16.17
    dev: true

  /expand-template/2.0.3:
@@ -769,25 +335,10 @@ packages:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
    dev: true

-  /gensync/1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
  /github-from-package/0.0.0:
    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
    dev: false

-  /globals/11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /has-flag/3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-    dev: true
-
  /has/1.0.3:
    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
    engines: {node: '>= 0.4.0'}
@@ -817,32 +368,6 @@ packages:
      has: 1.0.3
    dev: true

-  /js-tokens/4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
-
-  /jsesc/2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
-
-  /json5/2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: true
-
-  /kolorist/1.6.0:
-    resolution: {integrity: sha512-dLkz37Ab97HWMx9KTes3Tbi3D1ln9fCAy2zr2YVExJasDRPGRaKcoE4fycWNtnCAJfjFqe0cnY+f8KT2JePEXQ==}
-    dev: true
-
-  /lru-cache/5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-    dependencies:
-      yallist: 3.1.1
-    dev: true
-
  /lru-cache/6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}
@@ -863,10 +388,6 @@ packages:
    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
    dev: false

-  /ms/2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
-
  /nanoid/3.3.4:
    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -888,10 +409,6 @@ packages:
    resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==}
    dev: false

-  /node-releases/2.0.8:
-    resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==}
-    dev: true
-
  /once/1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
@@ -906,13 +423,8 @@ packages:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
    dev: true

-  /picomatch/2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: true
-
-  /postcss/8.4.20:
-    resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
    engines: {node: ^10 || ^12 || >=14}
    dependencies:
      nanoid: 3.3.4
@@ -920,9 +432,6 @@ packages:
      source-map-js: 1.0.2
    dev: true

-  /preact/10.11.3:
-    resolution: {integrity: sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==}
-
  /prebuild-install/7.1.1:
    resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
    engines: {node: '>=10'}
@@ -977,8 +486,8 @@ packages:
      supports-preserve-symlinks-flag: 1.0.0
    dev: true

-  /rollup/3.9.1:
-    resolution: {integrity: sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==}
+  /rollup/3.10.0:
+    resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
@@ -989,11 +498,6 @@ packages:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
    dev: false

-  /semver/6.3.0:
-    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
-    hasBin: true
-    dev: true
-
  /semver/7.3.8:
    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
    engines: {node: '>=10'}
@@ -1051,13 +555,6 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

-  /supports-color/5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-    dependencies:
-      has-flag: 3.0.0
-    dev: true
-
  /supports-preserve-symlinks-flag/1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
@@ -1083,28 +580,12 @@ packages:
      readable-stream: 3.6.0
    dev: false

-  /to-fast-properties/2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-    dev: true
-
  /tunnel-agent/0.6.0:
    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
    dependencies:
      safe-buffer: 5.2.1
    dev: false

-  /update-browserslist-db/1.0.10_browserslist@4.21.4:
-    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.4
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
-
  /util-deprecate/1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
    dev: false
@@ -1134,10 +615,10 @@ packages:
      terser:
        optional: true
    dependencies:
-      esbuild: 0.16.13
-      postcss: 8.4.20
+      esbuild: 0.16.17
+      postcss: 8.4.21
      resolve: 1.22.1
-      rollup: 3.9.1
+      rollup: 3.10.0
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
@@ -1146,10 +627,6 @@ packages:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
    dev: false

-  /yallist/3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
-
  /yallist/4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: false
--- a/public/assets/char_1013_chen2_2.png
+++ b/public/assets/char_1013_chen2_2.png
--- a/public/assets/char_113_cqbw_epoque#7.png
+++ b/public/assets/char_113_cqbw_epoque#7.png
--- a/public/assets/logo_babel.png
+++ b/public/assets/logo_babel.png
--- a/public/assets/logo_rhodes_override.png
+++ b/public/assets/logo_rhodes_override.png
--- a/src/app.css
+++ b/src/app.css
@@ -1,18 +0,0 @@
-#widget-wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.logo {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: -1;
-}
-
-.invert-filter {
-  filter: invert(1);
-  opacity: 0.3;
-}
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,46 +0,0 @@
-import { useState, useEffect, useRef } from 'preact/hooks'
-import '@/app.css'
-import '@/libs/wallpaper_engine'
-import check_web_gl from '@/libs/check_web_gl'
-import Player from '@/components/player'
-import Fallback from '@/components/fallback'
-import Settings from '@/components/settings'
-
-export function App() {
-  const params = new URLSearchParams(window.location.search);
-  const isSupportWebGL = check_web_gl()
-  const logoRef = useRef(null);
-  const [spinePlayer, setSpinePlayer] = useState(null);
-
-  const [showControls, setShowControls] = useState(params.has("controls"));
-  const [showSettings, setShowSettings] = useState(params.has("settings") || import.meta.env.MODE === 'development');
-
-  useEffect(() => {
-    document.title = import.meta.env.VITE_TITLE
-    console.log("All resources are extracted from Arknights. Github: https://github.com/Halyul/aklive2d")
-  }, []);
-
-  return (
-    <>
-      <img src={`./assets/${import.meta.env.VITE_LOGO_FILENAME}.png `} class="logo invert-filter" id="logo" alt="operator logo" ref={logoRef} width={16} />
-      <Settings
-        spinePlayer={spinePlayer}
-        setShowSettings={setShowSettings}
-        hidden={!showSettings}
-        logoEl={logoRef.current}
-      />
-      <div id="widget-wrapper">
-        {
-          !isSupportWebGL ? (
-            <Fallback />
-          ) : (
-            <Player
-              showControls={showControls}
-              setSpinePlayer={setSpinePlayer}
-            />
-          )
-        }
-      </div>
-    </>
-  )
-}
--- a/src/components/fallback.js
+++ b/src/components/fallback.js
@@ -0,0 +1,16 @@
+import '@/components/fallback.css'
+
+export default function (el) {
+    el.hidden = false;
+    alert('WebGL is unavailable. Fallback image will be used.');
+    const calculateScale = (width, height) => {
+        return { x: window.innerWidth / width, y: window.innerHeight / height };
+    }
+    const fallback = () => {
+        const scale = calculateScale(import.meta.env.VITE_IMAGE_WIDTH, import.meta.env.VITE_IMAGE_HEIGHT);
+        el.style.width = import.meta.env.VITE_IMAGE_WIDTH * (scale.x > scale.y ? scale.y : scale.x) + "px";
+        el.style.height = import.meta.env.VITE_IMAGE_HEIGHT * (scale.x > scale.y ? scale.y : scale.x) + "px";
+    }
+    fallback();
+    window.addEventListener('resize', fallback, true);
+}
--- a/src/components/fallback.jsx
+++ b/src/components/fallback.jsx
@@ -1,30 +0,0 @@
-import { useRef, useEffect } from 'preact/hooks'
-import '@/components/fallback.css'
-
-export default function Fallback() {
-    const fallbackRef = useRef(null)
-
-    useEffect(() => {
-        alert('WebGL is unavailable. Fallback image will be used.');
-        const calculateScale = (width, height) => {
-            return { x: window.innerWidth / width, y: window.innerHeight / height };
-        }
-        const fallback = () => {
-            const scale = calculateScale(import.meta.env.VITE_IMAGE_WIDTH, import.meta.env.VITE_IMAGE_HEIGHT);
-            fallbackRef.current.style.width = import.meta.env.VITE_IMAGE_WIDTH * (scale.x > scale.y ? scale.y : scale.x) + "px";
-            fallbackRef.current.style.height = import.meta.env.VITE_IMAGE_HEIGHT * (scale.x > scale.y ? scale.y : scale.x) + "px";
-        }
-        fallback();
-        window.addEventListener('resize', fallback, true);
-        return () => window.removeEventListener('resize', fallback, true);
-    }, [])
-
-    return (
-        <div id="fallback"
-            style={{
-                backgroundImage: `url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)`,
-            }}
-            ref={fallbackRef}
-        />
-    )
-}
--- a/src/components/player.css
+++ b/src/components/player.css
@@ -1,4 +1,4 @@
-#container {
+#player {
    width: 100%;
    height: 100%;
 }
--- a/src/components/player.js
+++ b/src/components/player.js
@@ -0,0 +1,60 @@
+import '@/libs/spine-player.css'
+import spine from '@/libs/spine-player'
+import assets from '#'
+import '@/components/player.css'
+
+const showControls = (new URLSearchParams(window.location.search)).has("controls")
+let resetTime = window.performance.now();
+let isPlayingInteract = false;
+
+export default function spinePlayer(el) {
+  el.hidden = false
+  return new spine.SpinePlayer(el, {
+    skelUrl: `./assets/${import.meta.env.VITE_FILENAME}.skel`,
+    atlasUrl: `./assets/${import.meta.env.VITE_FILENAME}.atlas`,
+    rawDataURIs: assets,
+    animation: "Idle",
+    premultipliedAlpha: true,
+    alpha: true,
+    backgroundColor: "#00000000",
+    viewport: {
+      debugRender: false,
+      padLeft: `${import.meta.env.VITE_VIEWPORT_LEFT}%`,
+      padRight: `${import.meta.env.VITE_VIEWPORT_RIGHT}%`,
+      padTop: `${import.meta.env.VITE_VIEWPORT_TOP}%`,
+      padBottom: `${import.meta.env.VITE_VIEWPORT_BOTTOM}%`,
+      x: 0,
+      y: 0,
+    },
+    showControls: showControls,
+    touch: showControls,
+    fps: 60,
+    defaultMix: 0,
+    success: function (widget) {
+      widget.animationState.addListener({
+        end: (e) => {
+          if (e.animation.name == "Interact") {
+            isPlayingInteract = false;
+          }
+        },
+        complete: (e) => {
+          if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
+            resetTime = window.performance.now();
+            let entry = widget.animationState.setAnimation(0, "Special", false, 0);
+            entry.mixDuration = 0.3;
+            widget.animationState.addAnimation(0, "Idle", true, 0);
+          }
+        },
+      });
+      widget.canvas.onclick = function () {
+        if (isPlayingInteract) {
+          return;
+        }
+        isPlayingInteract = true;
+        let entry = widget.animationState.setAnimation(0, "Interact", false, 0);
+        entry.mixDuration = 0.3;
+        widget.animationState.addAnimation(0, "Idle", true, 0);
+      }
+    },
+  })
+}
--- a/src/components/player.jsx
+++ b/src/components/player.jsx
@@ -1,69 +0,0 @@
-import { useRef, useEffect } from 'preact/hooks'
-import '@/libs/spine-player.css'
-import spine from '@/libs/spine-player'
-import assets from '#'
-import '@/components/player.css'
-
-export default function Player({ showControls, setSpinePlayer }) {
-  const spineRef = useRef(null)
-  let resetTime = window.performance.now();
-  let isPlayingInteract = false;
-
-  useEffect(() => {
-    document.title = "Operator name";
-    if (spineRef.current?.children.length == 0) {
-      setSpinePlayer(new spine.SpinePlayer(spineRef.current, {
-        skelUrl: `./assets/${import.meta.env.VITE_FILENAME}.skel`,
-        atlasUrl: `./assets/${import.meta.env.VITE_FILENAME}.atlas`,
-        rawDataURIs: assets,
-        animation: "Idle",
-        premultipliedAlpha: true,
-        alpha: true,
-        backgroundColor: "#00000000",
-        viewport: {
-          debugRender: false,
-          padLeft: `${import.meta.env.VITE_VIEWPORT_LEFT}%`,
-          padRight: `${import.meta.env.VITE_VIEWPORT_RIGHT}%`,
-          padTop: `${import.meta.env.VITE_VIEWPORT_TOP}%`,
-          padBottom: `${import.meta.env.VITE_VIEWPORT_BOTTOM}%`,
-          x: 0,
-          y: 0,
-        }, 
-        showControls: showControls,
-        touch: showControls,
-        fps: 60,
-        defaultMix: 0,
-        success: function (widget) {
-          widget.animationState.addListener({
-            end: (e) => {
-              if (e.animation.name == "Interact") {
-                isPlayingInteract = false;
-              }
-            },
-            complete: (e) => {
-              if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
-                resetTime = window.performance.now();
-                let entry = widget.animationState.setAnimation(0, "Special", false, 0);
-                entry.mixDuration = 0.3;
-                widget.animationState.addAnimation(0, "Idle", true, 0);
-              }
-            },
-          });
-          widget.canvas.onclick = function () {
-            if (isPlayingInteract) {
-              return;
-            }
-            isPlayingInteract = true;
-            let entry = widget.animationState.setAnimation(0, "Interact", false, 0);
-            entry.mixDuration = 0.3;
-            widget.animationState.addAnimation(0, "Idle", true, 0);
-          }
-        },
-      }))
-    }
-  }, []);
-
-  return (
-    <div id="container" ref={spineRef}></div>
-  )
-}
--- a/src/components/settings.css
+++ b/src/components/settings.css
@@ -1,4 +1,4 @@
-.website-settings {
+#settings {
    position: fixed;
    left: 0;
    top: 0;
--- a/src/components/settings.js
+++ b/src/components/settings.js
@@ -0,0 +1,408 @@
+import '@/components/settings.css'
+
+const getPercentage = (value) => parseInt(value.replace("%", ""))
+
+export default class Settings {
+  #el
+  #logoEl
+  #defaultLogoImage
+  #defaultFps = 60
+  #defaultRatio = 61.8
+  #defaultOpacity = 30
+  #defaulthideLogo = false
+  #defaultBackgroundImage = getComputedStyle(document.body).backgroundImage
+  #defaultInvertFilter = import.meta.env.VITE_INVERT_FILTER === "true"
+  #defaultPadLeft = getPercentage(`${import.meta.env.VITE_VIEWPORT_LEFT}%`)
+  #defaultPadRight = getPercentage(`${import.meta.env.VITE_VIEWPORT_RIGHT}%`)
+  #defaultPadTop = getPercentage(`${import.meta.env.VITE_VIEWPORT_TOP}%`)
+  #defaultPadBottom = getPercentage(`${import.meta.env.VITE_VIEWPORT_BOTTOM}%`)
+  #defaultViewport = {
+    debugRender: false,
+    padLeft: `${this.#defaultPadLeft}%`,
+    padRight: `${this.#defaultPadRight}%`,
+    padTop: `${this.#defaultPadTop}%`,
+    padBottom: `${this.#defaultPadBottom}%`,
+    x: 0,
+    y: 0,
+  }
+  #hidden = !((new URLSearchParams(window.location.search)).has("settings") || import.meta.env.MODE === 'development')
+  #fps = this.#defaultFps
+  #ratio = this.#defaultRatio
+  #opacity = this.#defaultOpacity
+  #padLeft = this.#defaultPadLeft
+  #padRight = this.#defaultPadRight
+  #padTop = this.#defaultPadTop
+  #padBottom = this.#defaultPadBottom
+  #hideLogo = this.#defaulthideLogo
+  #hidePositionSettings = true
+  #backgroundClearDisabled = true
+  #logoClearDisabled = true
+  #isPlaying = true
+
+  constructor(el, logoEl) {
+    this.#el = el
+    this.#logoEl = logoEl
+    this.spinePlayer = null
+    this.#defaultLogoImage = this.#logoEl.src
+    this.#init()
+  }
+
+  #init() {
+    const _this = this
+    window.addEventListener("contextmenu", e => e.preventDefault());
+    document.addEventListener("gesturestart", e => e.preventDefault());
+
+    const resize = () => {
+      _this.#resize(_this)
+    }
+    window.addEventListener("resize", resize, true);
+    resize()
+    this.#setLogoInvertFilter(this.#defaultInvertFilter)
+    this.setLogoOpacity(this.#defaultOpacity)
+
+    this.#insertHTML()
+  }
+
+  setFPS(value) {
+    this.#fps = value
+    console.log(typeof value)
+    this.spinePlayer.setFps(value)
+  }
+
+  setLogoDisplay(flag) {
+    this.#hideLogo = flag
+    this.#logoEl.hidden = flag;
+  }
+
+  #resize(_this, value) {
+    _this = _this || this
+    _this.#logoEl.width = window.innerWidth / 2 * (value || _this.#ratio) / 100
+  }
+
+  #setLogoInvertFilter(flag) {
+    if (!flag) {
+      this.#logoEl.style.filter = "invert(0)"
+    } else {
+      this.#logoEl.style.filter = "invert(1)"
+    }
+  }
+
+  setLogo(src, invert_filter) {
+    this.#logoEl.src = src
+    this.#resize()
+    this.#setLogoInvertFilter(invert_filter)
+  }
+
+  #readFile(e, onload, callback) {
+    const file = e.target.files[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.readAsDataURL(file);
+    reader.onload = readerEvent => onload(readerEvent)
+    callback()
+  }
+
+  setLogoImage(e) {
+    this.#readFile(
+      e,
+      (readerEvent) => {
+        const content = readerEvent.target.result;
+        this.setLogo(content, false)
+      },
+      () => document.getElementById("logo_image_clear").disabled = false
+    )
+  }
+
+  resetLogoImage() {
+    this.setLogo(this.#defaultLogoImage, this.#defaultInvertFilter)
+    document.getElementById("logo_image_clear").disabled = true
+  }
+
+  setLogoRatio(value) {
+    this.#ratio = value
+    this.#resize(this, value)
+  }
+
+  setLogoOpacity(value) {
+    this.#logoEl.style.opacity = value / 100
+    this.#opacity = value
+  }
+
+  setBackgoundImage(v) {
+    document.body.style.backgroundImage = v
+  }
+
+  setBackground(e) {
+    this.#readFile(
+      e,
+      (readerEvent) => {
+        const content = readerEvent.target.result;
+        this.setBackgoundImage(`url("${content}")`)
+      },
+      () => document.getElementById("background_image_clear").disabled = false
+    )
+  }
+
+  resetBackground() {
+    this.setBackgoundImage(this.#defaultBackgroundImage)
+    document.getElementById("background_image_clear").disabled = true
+  }
+
+  positionPadding(key, value) {
+    switch (key) {
+      case "left":
+        this.#padLeft = value
+        this.spinePlayer.updateViewport({
+          ...this.#defaultViewport,
+          padLeft: `${value}%`,
+        })
+        break;
+      case "right":
+        this.#padRight = value
+        this.spinePlayer.updateViewport({
+          ...this.#defaultViewport,
+          padRight: `${value}%`,
+        })
+        break;
+      case "top":
+        this.#padTop = value
+        this.spinePlayer.updateViewport({
+          ...this.#defaultViewport,
+          padTop: `${value}%`,
+        })
+        break;
+      case "bottom":
+        this.#padBottom = value
+        this.spinePlayer.updateViewport({
+          ...this.#defaultViewport,
+          padBottom: `${value}%`,
+        })
+        break;
+    }
+  }
+
+  positionReset() {
+    this.#padLeft = this.#defaultPadLeft
+    this.#padRight = this.#defaultPadRight
+    this.#padTop = this.#defaultPadTop
+    this.#padBottom = this.#defaultPadBottom
+    this.spinePlayer.updateViewport(this.#defaultViewport)
+    document.getElementById("position_padding_left_slider").value = this.#defaultPadLeft
+    document.getElementById("position_padding_left_input").value = this.#defaultPadLeft
+    document.getElementById("position_padding_right_slider").value = this.#defaultPadRight
+    document.getElementById("position_padding_right_input").value = this.#defaultPadRight
+    document.getElementById("position_padding_top_slider").value = this.#defaultPadTop
+    document.getElementById("position_padding_top_input").value = this.#defaultPadTop
+    document.getElementById("position_padding_bottom_slider").value = this.#defaultPadBottom
+    document.getElementById("position_padding_bottom_input").value = this.#defaultPadBottom
+  }
+
+  open() {
+    this.#el.hidden = false;
+  }
+
+  close() {
+    this.#el.hidden = true;
+  }
+
+  reset() {
+    this.positionReset()
+    this.setLogoRatio(this.#defaultRatio)
+    document.getElementById("logo_ratio_slider").value = this.#defaultRatio
+    document.getElementById("logo_ratio_input").value = this.#defaultRatio
+    this.setLogoOpacity(this.#defaultOpacity)
+    document.getElementById("logo_opacity_slider").value = this.#defaultOpacity
+    document.getElementById("logo_opacity_input").value = this.#defaultOpacity
+    this.resetLogoImage()
+    this.resetBackground()
+    this.setLogoDisplay(this.#defaulthideLogo)
+    this.setFPS(this.#defaultFps)
+    document.getElementById("fps_slider").value = this.#defaultFps
+    document.getElementById("fps_input").value = this.#defaultFps
+    this.spinePlayer.play()
+  }
+
+  #insertHTML() {
+    this.#el.innerHTML = `
+      <div ${this.#hidden && "hidden"}>
+        <div>
+          <label for="fps">FPS</label>
+          <input type="range" min="1" max="60" value="${this.#fps}" step="1" id="fps_slider"/>
+          <input type="number" id="fps_input" min="1" max="60" name="fps" value="${this.#fps}" />
+        </div>
+        <div>
+          <label for="operator_logo">Operator Logo</label>
+          <input type="checkbox" id="operator_logo" name="operator_logo" checked data-checked="true"/>
+          <div id="operator_logo_realted">
+            <div>
+              <label for="logo_image">Logo Image (Store Locally)</label>
+              <input type="file" id="logo_image" />
+              <button type="button" id="logo_image_clear" disabled>Clear</button>
+            </div>
+            <div>
+              <label for="logo_ratio">Logo Ratio</label>
+              <input type="range" min="0" max="100" step="0.1" id="logo_ratio_slider" value="${this.#ratio}" />
+              <input type="number" id="logo_ratio_input" name="logo_ratio" value="${this.#ratio}" />
+            </div>
+            <div>
+              <label for="logo_opacity">Logo Opacity</label>
+              <input type="range" min="0" max="100" data-css-class="logo" step="1" id="logo_opacity_slider" value="${this.#opacity}" />
+              <input type="number" id="logo_opacity_input" name="logo_opacity" value="${this.#opacity}" />
+            </div>
+            </div>
+        </div>
+        <div>
+          <label for="background_image">Background Image (Store Locally)</label>
+          <input type="file" id="background_image"/>
+          <button type="button" disabled id="background_image_clear" disabled>Clear</button>
+        </div>
+        <div>
+          <label for="position">Position</label>
+          <input type="checkbox" id="position" name="position" />
+          <div id="position_realted" hidden>
+            <div>
+              <label for="position_padding_left">Padding Left</label>
+                <input type="range" min="-100" max="100" id="position_padding_left_slider" value="${this.#padLeft}" />
+                <input type="number" id="position_padding_left_input" name="position_padding_left" value="${this.#padLeft}" />
+            </div>
+            <div>
+              <label for="position_padding_right">Padding Right</label>
+              <input type="range" min="-100" max="100" id="position_padding_right_slider" value="${this.padRight}" />
+              <input type="number" id="position_padding_right_input" name="position_padding_right" value="${this.#padRight}" />
+            </div>
+            <div>
+              <label for="position_padding_top">Padding Top</label>
+              <input type="range" min="-100" max="100" id="position_padding_top_slider" value="${this.#padTop}" />
+              <input type="number" id="position_padding_top_input" name="position_padding_top" value="${this.#padTop}" />
+            </div>
+            <div>
+              <label for="position_padding_bottom">Padding Bottom</label>
+              <input type="range" min="-100" max="100" id="position_padding_bottom_slider" value="${this.#padBottom}" />
+              <input type="number" id="position_padding_bottom_input" name="position_padding_bottom" value="${this.#padBottom}" />
+            </div>
+            </div>
+        </div>
+        <div>
+          <button type="button" id="settings_play" disabled>Play</button>
+          <button type="button" id="settings_pause">Pause</button>
+          <button type="button" id="settings_reset">Reset</button>
+          <button type="button" id="settings_close">Close</button>
+        </div>
+      </div>
+    `
+    this.#addEventListeners()
+  }
+
+  #sync(source, targetID) {
+    document.getElementById(targetID).value = source.value;
+  }
+
+  #showRelated(e, relatedSettingsID) {
+    const eRelatedSettings = document.getElementById(relatedSettingsID)
+    if (e.checked) {
+      eRelatedSettings.hidden = false;
+    } else {
+      eRelatedSettings.hidden = true;
+    }
+  };
+
+  #addEventListeners() {
+    const _this = this;
+
+    document.getElementById("fps_slider").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "fps_input");
+      _this.setFPS(e.currentTarget.value);
+    })
+    document.getElementById("fps_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "fps_slider");
+      _this.setFPS(e.currentTarget.value);
+    })
+
+    document.getElementById("operator_logo").addEventListener("click", e => {
+      _this.#showRelated(e.currentTarget, "operator_logo_realted");
+      _this.setLogoDisplay(!e.currentTarget.checked)
+    })
+
+    document.getElementById("logo_image").addEventListener("change", e => _this.setLogoImage(e))
+    document.getElementById("logo_image_clear").addEventListener("click", e => this.resetLogoImage())
+
+    document.getElementById("logo_ratio_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "logo_ratio_input");
+      _this.setLogoRatio(e.currentTarget.value);
+    })
+    document.getElementById("logo_ratio_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "logo_ratio_slider");
+      _this.setLogoRatio(e.currentTarget.value);
+    })
+
+    document.getElementById("logo_opacity_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "logo_opacity_input");
+      _this.setLogoOpacity(e.currentTarget.value);
+    })
+    document.getElementById("logo_opacity_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "logo_opacity_slider");
+      _this.setLogoOpacity(e.currentTarget.value);
+    })
+
+    document.getElementById("background_image").addEventListener("change", e => _this.setBackground(e))
+    document.getElementById("background_image_clear").addEventListener("click", e => _this.resetBackground())
+
+    document.getElementById("position").addEventListener("click", e => {
+      _this.#showRelated(e.currentTarget, "position_realted");
+      if (!e.currentTarget.checked) _this.positionReset();
+    })
+
+    document.getElementById("position_padding_left_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "position_padding_left_input");
+      _this.positionPadding("left", e.currentTarget.value);
+    })
+    document.getElementById("position_padding_left_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "position_padding_left_slider");
+      _this.positionPadding("left", e.currentTarget.value);
+    })
+
+    document.getElementById("position_padding_right_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "position_padding_right_input");
+      _this.positionPadding("right", e.currentTarget.value);
+    })
+    document.getElementById("position_padding_right_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "position_padding_right_slider");
+      _this.positionPadding("right", e.currentTarget.value);
+    })
+
+    document.getElementById("position_padding_top_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "position_padding_top_input");
+      _this.positionPadding("top", e.currentTarget.value);
+    })
+    document.getElementById("position_padding_top_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "position_padding_top_slider");
+      _this.positionPadding("top", e.currentTarget.value);
+    })
+
+    document.getElementById("position_padding_bottom_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "position_padding_bottom_input");
+      _this.positionPadding("bottom", e.currentTarget.value);
+    })
+    document.getElementById("position_padding_bottom_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "position_padding_bottom_slider");
+      _this.positionPadding("bottom", e.currentTarget.value);
+    })
+
+    document.getElementById("settings_play").addEventListener("click", e => {
+      this.spinePlayer.play();
+      e.currentTarget.disabled = true;
+      document.getElementById("settings_pause").disabled = false;
+    })
+    document.getElementById("settings_pause").addEventListener("click", e => {
+      this.spinePlayer.pause();
+      e.currentTarget.disabled = true;
+      document.getElementById("settings_play").disabled = false;
+    })
+    document.getElementById("settings_reset").addEventListener("click", e => {
+      _this.reset();
+    })
+    document.getElementById("settings_close").addEventListener("click", e => {
+      _this.close();
+    })
+  }
+}
--- a/src/components/settings.jsx
+++ b/src/components/settings.jsx
@@ -1,499 +0,0 @@
-import { useState, useEffect } from 'preact/hooks'
-import '@/components/settings.css'
-import { subscribe, unsubscribe, publish } from '@/libs/events'
-import '@/libs/setting_hooks'
-
-const getPercentage = (value) => parseInt(value.replace("%", ""))
-const defaultBackgroundImage = getComputedStyle(document.body).backgroundImage
-
-export default function Settings({
-  spinePlayer, setShowSettings, hidden, logoEl
-}) {
-  const defaultFps = 60
-  const defaultRatio = 61.8
-  const defaultOpacity = 30
-  const defaultShowLogo = false
-  const defaultInvertFilter = import.meta.env.VITE_INVERT_FILTER === "true"
-  const [defaultLogoImage, setDefaultLogoImage] = useState(null)
-  const defaultPadLeft = getPercentage(`${import.meta.env.VITE_VIEWPORT_LEFT}%`)
-  const defaultPadRight = getPercentage(`${import.meta.env.VITE_VIEWPORT_RIGHT}%`)
-  const defaultPadTop = getPercentage(`${import.meta.env.VITE_VIEWPORT_TOP}%`)
-  const defaultPadBottom = getPercentage(`${import.meta.env.VITE_VIEWPORT_BOTTOM}%`)
-  const defaultViewport = {
-    debugRender: false,
-    padLeft: `${defaultPadLeft}%`,
-    padRight: `${defaultPadRight}%`,
-    padTop: `${defaultPadTop}%`,
-    padBottom: `${defaultPadBottom}%`,
-    x: 0,
-    y: 0,
-  }
-
-  const [fps, setFps] = useState(defaultFps)
-  const [ratio, setRatio] = useState(defaultRatio)
-  const [opacity, setOpacity] = useState(defaultOpacity)
-  const [padLeft, setPadLeft] = useState(defaultPadLeft)
-  const [padRight, setPadRight] = useState(defaultPadRight)
-  const [padTop, setPadTop] = useState(defaultPadTop)
-  const [padBottom, setPadBottom] = useState(defaultPadBottom)
-
-  const [showLogo, setShowLogo] = useState(defaultShowLogo)
-  const [hidePositionSettings, setHidePositionSettings] = useState(true)
-  const [backgroundClearDisabled, setBackgroundClearDisabled] = useState(true)
-  const [logoClearDisabled, setLogoClearDisabled] = useState(true)
-
-  const [isPlaying, setIsPlaying] = useState(true)
-
-  const [eventFPSDelay, setEventFPSDelay] = useState(-1)
-  const [eventLogoDelay, setEventLogoDelay] = useState(null)
-  const [eventRatioDelay, setEventRatioDelay] = useState(-1)
-  const [eventOpacityDelay, setEventOpacityDelay] = useState(-1)
-  const [eventImageDelay, setEventImageDelay] = useState(null)
-  const [eventPadLeftDelay, setEventPadLeftDelay] = useState(-1)
-  const [eventPadRightDelay, setEventPadRightDelay] = useState(-1)
-  const [eventPadTopDelay, setEventPadTopDelay] = useState(-1)
-  const [eventPadBottomDelay, setEventPadBottomDelay] = useState(-1)
-  const [eventPositionResetDelay, setEventPositionResetDelay] = useState(null)
-  const [eventLogoResetDelay, setEventLogoResetDelay] = useState(null)
-
-  useEffect(() => {
-    if (spinePlayer === null) return;
-    if (eventFPSDelay !== -1) {
-      setFPS(eventFPSDelay)
-      setEventFPSDelay(-1)
-    }
-    if (eventPadLeftDelay !== -1) {
-      positionPadding("left", eventPadLeftDelay)
-      setEventPadLeftDelay(-1)
-    }
-    if (eventPadRightDelay !== -1) {
-      positionPadding("right", eventPadRightDelay)
-      setEventPadRightDelay(-1)
-    }
-    if (eventPadTopDelay !== -1) {
-      positionPadding("top", eventPadTopDelay)
-      setEventPadTopDelay(-1)
-    }
-    if (eventPadBottomDelay !== -1) {
-      positionPadding("bottom", eventPadBottomDelay)
-      setEventPadBottomDelay(-1)
-    }
-    if (eventPositionResetDelay) {
-      positionReset()
-      setEventPositionResetDelay(null)
-    }
-  }, [spinePlayer])
-
-  useEffect(() => {
-    if (logoEl === null) return;
-    if (eventLogoDelay !== null) {
-      setLogoDisplay(eventLogoDelay)
-      setEventLogoDelay(null)
-    }
-    if (eventRatioDelay !== -1) {
-      setLogoRatio(eventRatioDelay)
-      setEventRatioDelay(-1)
-    }
-    if (eventOpacityDelay !== -1) {
-      setLogoOpacity(eventOpacityDelay)
-      setEventOpacityDelay(-1)
-    }
-    if (eventImageDelay !== null) {
-      setLogo(eventImageDelay)
-      setEventImageDelay(null)
-    }
-    if (eventLogoResetDelay) {
-      resetLogoImage()
-      setEventLogoResetDelay(null)
-    }
-  }, [logoEl])
-
-  const setFPS = (value) => {
-    setFps(value)
-    spinePlayer.setFps(value)
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (spinePlayer === null) {
-        setEventFPSDelay(e.detail)
-        return
-      }
-      setFPS(e.detail)
-    }
-    subscribe("settings:fps", handleListener)
-    return () => unsubscribe("settings:fps", handleListener)
-  }, [spinePlayer])
-
-  const setLogoDisplay = (flag) => {
-    setShowLogo(flag)
-    logoEl.hidden = flag;
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (logoEl === null) {
-        setEventLogoDelay(e.detail)
-        return
-      }
-      setLogoDisplay(e.detail)
-    }
-    subscribe("settings:logo", handleListener)
-    return () => unsubscribe("settings:logo", handleListener)
-  }, [logoEl])
-
-  const resize = (value) => {
-    logoEl.width = window.innerWidth / 2 * (value || ratio) / 100
-  }
-
-  const setLogo = (src, invert_filter) => {
-    logoEl.src = src
-    resize()
-    setLogoInvertFilter(invert_filter)
-  }
-
-  const readFile = (e, onload, callback) => {
-    const file = e.target.files[0]
-    if (!file) return
-    const reader = new FileReader()
-    reader.readAsDataURL(file);
-    reader.onload = readerEvent => onload(readerEvent)
-    callback()
-  }
-
-  const setLogoImage = (e) => {
-    readFile(
-      e,
-      (readerEvent) => {
-        const content = readerEvent.target.result;
-        setLogo(content, false)
-      },
-      () => setLogoClearDisabled(false)
-    )
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (logoEl === null) {
-        setEventImageDelay(e.detail)
-        return
-      }
-      setLogo(e.detail)
-    }
-    subscribe("settings:image:set", handleListener)
-    return () => unsubscribe("settings:image:set", handleListener)
-  }, [logoEl])
-
-  const resetLogoImage = () => {
-    setLogo(defaultLogoImage, defaultInvertFilter)
-    setLogoClearDisabled(true)
-  }
-
-  useEffect(() => {
-    const handleListener = () => {
-      if (logoEl === null) {
-        setEventLogoResetDelay(true)
-        return
-      }
-      resetLogoImage()
-    }
-    subscribe("settings:image:reset", handleListener)
-    return () => unsubscribe("settings:image:reset", handleListener)
-  }, [logoEl])
-
-  const setLogoRatio = (value) => {
-    setRatio(value)
-    resize(value)
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (logoEl === null) {
-        setEventRatioDelay(e.detail)
-        return
-      }
-      setLogoRatio(e.detail)
-    }
-    subscribe("settings:ratio", handleListener)
-    return () => unsubscribe("settings:ratio", handleListener)
-  }, [logoEl])
-
-  const setLogoOpacity = (value) => {
-    setOpacity(value)
-    logoEl.style.opacity = value / 100
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (logoEl === null) {
-        setEventOpacityDelay(e.detail)
-        return
-      }
-      setLogoOpacity(e.detail)
-    }
-    subscribe("settings:opacity", handleListener)
-    return () => unsubscribe("settings:opacity", handleListener)
-  }, [logoEl])
-
-  const setLogoInvertFilter = (flag) => {
-    if (!flag) {
-      logoEl.style.filter = "invert(0)"
-    } else {
-      logoEl.style.filter = "invert(1)"
-    }
-  }
-
-  const setBackgoundImage = (v) => {
-    document.body.style.backgroundImage = v
-  }
-
-  const setBackground = (e) => {
-    readFile(
-      e,
-      (readerEvent) => {
-        const content = readerEvent.target.result;
-        setBackgoundImage(`url("${content}")`)
-      },
-      () => setBackgroundClearDisabled(false)
-    )
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      setBackgoundImage(`url("${e.detail}")`)
-    }
-    subscribe("settings:background:set", handleListener)
-    return () => unsubscribe("settings:background:set", handleListener)
-  }, [])
-
-  const resetBackground = () => {
-    setBackgoundImage(defaultBackgroundImage)
-    setBackgroundClearDisabled(true)
-  }
-
-  useEffect(() => {
-    subscribe("settings:background:reset", resetBackground)
-    return () => unsubscribe("settings:background:reset", resetBackground)
-  }, [])
-
-  const positionPadding = (key, value) => {
-    switch (key) {
-      case "left":
-        setPadLeft(value)
-        spinePlayer.updateViewport({
-          ...defaultViewport,
-          padLeft: `${value}%`,
-        })
-        break;
-      case "right":
-        setPadRight(value)
-        spinePlayer.updateViewport({
-          ...defaultViewport,
-          padRight: `${value}%`,
-        })
-        break;
-      case "top":
-        setPadTop(value)
-        spinePlayer.updateViewport({
-          ...defaultViewport,
-          padTop: `${value}%`,
-        })
-        break;
-      case "bottom":
-        setPadBottom(value)
-        spinePlayer.updateViewport({
-          ...defaultViewport,
-          padBottom: `${value}%`,
-        })
-        break;
-    }
-  }
-
-  useEffect(() => {
-    const handleListener = (e) => {
-      if (spinePlayer === null) {
-        switch (e.detail.key) {
-          case "left":
-            setEventPadLeftDelay(e.detail.value)
-            break;
-          case "right":
-            setEventPadRightDelay(e.detail.value)
-            break;
-          case "top":
-            setEventPadTopDelay(e.detail.value)
-            break;
-          case "bottom":
-            setEventPadBottomDelay(e.detail.value)
-            break;
-        }
-        return
-      }
-      positionPadding(e.detail.key, e.detail.value)
-    }
-    subscribe("settings:position:set", handleListener)
-    return () => unsubscribe("settings:position:set", handleListener)
-  }, [spinePlayer])
-
-  const positionReset = () => {
-    setPadLeft(defaultPadLeft)
-    setPadRight(defaultPadRight)
-    setPadTop(defaultPadTop)
-    setPadBottom(defaultPadBottom)
-    spinePlayer.updateViewport(defaultViewport)
-  }
-
-  useEffect(() => {
-    const handleListener = () => {
-      if (spinePlayer === null) {
-        setEventPositionResetDelay(true)
-        return
-      }
-      positionReset()
-    }
-    subscribe("settings:position:reset", handleListener)
-    return () => unsubscribe("settings:position:reset", handleListener)
-  }, [spinePlayer])
-
-  useEffect(() => {
-    const handleListener = () => {
-      setShowSettings(true)
-    }
-    subscribe("settings:open", handleListener)
-    return () => unsubscribe("settings:open", handleListener)
-  }, [])
-
-  useEffect(() => {
-    const handleListener = () => {
-      setShowSettings(false)
-    }
-    subscribe("settings:close", handleListener)
-    return () => unsubscribe("settings:close", handleListener)
-  }, [])
-
-  const settingsReset = () => {
-    setFPS(defaultFps)
-    setLogoDisplay(defaultShowLogo)
-    resetLogoImage()
-    setLogoRatio(defaultRatio)
-    setLogoOpacity(defaultOpacity)
-    resetBackground()
-    positionReset()
-    spinePlayer.play()
-  }
-
-  useEffect(() => {
-    const handleListener = () => {
-      settingsReset()
-    }
-    subscribe("settings:reset", handleListener)
-    return () => unsubscribe("settings:reset", handleListener)
-  }, [])
-
-  useEffect(() => {
-    if (logoEl) {
-      resize()
-      setLogoInvertFilter(defaultInvertFilter)
-      setLogoOpacity(defaultOpacity)
-      setDefaultLogoImage(logoEl.src)
-    }
-  }, [logoEl])
-
-  useEffect(() => {
-    window.addEventListener("contextmenu", e => e.preventDefault());
-    document.addEventListener("gesturestart", e => e.preventDefault());
-  }, [])
-
-  useEffect(() => {
-    window.addEventListener("resize", resize, true);
-    return () => {
-      window.removeEventListener("resize", resize, true);
-    }
-  }, [logoEl])
-
-  return (
-    <div class="website-settings" hidden={hidden}>
-      <div>
-        <label for="fps">FPS</label>
-        <input type="range" min="1" max="60" value={fps} step="1"
-          onChange={(e) => setFPS(e.target.value)}
-        />
-        <input type="number" id="fps_input" min="1" max="60" name="fps" value={fps}
-          onChange={(e) => setFPS(e.target.value)}
-        />
-      </div>
-      <div>
-        <label for="operator_logo">Operator Logo</label>
-        <input type="checkbox" name="operator_logo" checked={!showLogo} onClick={(e) => setLogoDisplay(!e.target.checked)} />
-        <div hidden={showLogo}>
-          <div>
-            <label for="logo_image">Logo Image (Store Locally)</label>
-            <input type="file" onChange={(e) => setLogoImage(e)} />
-            <button type="button" disabled={logoClearDisabled} onClick={() => resetLogoImage()}>Clear</button>
-          </div>
-          <div>
-            <label for="logo_ratio">Logo Ratio</label>
-            <input type="range" min="0" max="100" step="0.1" value={ratio} onChange={(e) => setLogoRatio(e.target.value)} />
-            <input type="number" name="logo_ratio" value={ratio} onChange={(e) => setLogoRatio(e.target.value)} />
-          </div>
-          <div>
-            <label for="logo_opacity">Logo Opacity</label>
-            <input type="range" min="0" max="100" step="1" id="logo_opacity_slider" value={opacity} onChange={(e) => setLogoOpacity(e.target.value)} />
-            <input type="number" id="logo_opacity_input" name="logo_opacity" value={opacity} onOpacity={(e) => setLogoOpacity(e.target.value)} />
-          </div>
-        </div>
-      </div>
-      <div>
-        <label for="background_image">Background Image (Store Locally)</label>
-        <input type="file" onChange={(e) => setBackground(e)} />
-        <button type="button" disabled={backgroundClearDisabled} onClick={() => resetBackground()}>Clear</button>
-      </div>
-      <div>
-        <label for="position">Position</label>
-        <input type="checkbox" name="position" checked={!hidePositionSettings} onClick={(e) => setHidePositionSettings(!e.target.checked)} />
-        <div hidden={hidePositionSettings}>
-          <div>
-            <label for="position_padding_left">Padding Left</label>
-            <input type="range" min="-100" max="100" value={padLeft} onChange={(e) => positionPadding("left", e.target.value)} />
-            <input type="number" name="position_padding_left" value={padLeft} onChange={(e) => positionPadding("left", e.target.value)} />
-          </div>
-          <div>
-            <label for="position_padding_right">Padding Right</label>
-            <input type="range" min="-100" max="100" value={padRight} onChange={(e) => positionPadding("right", e.target.value)} />
-            <input type="number" name="position_padding_right" value={padRight} onChange={(e) => positionPadding("right", e.target.value)} />
-          </div>
-          <div>
-            <label for="position_padding_top">Padding Top</label>
-            <input type="range" min="-100" max="100" value={padTop} onChange={(e) => positionPadding("top", e.target.value)} />
-            <input type="number" name="position_padding_top" value={padTop} onChange={(e) => positionPadding("top", e.target.value)} />
-          </div>
-          <div>
-            <label for="position_padding_bottom">Padding Bottom</label>
-            <input type="range" min="-100" max="100" value={padBottom} onChange={(e) => positionPadding("bottom", e.target.value)} />
-            <input type="number" name="position_padding_bottom" value={padBottom} onChange={(e) => positionPadding("bottom", e.target.value)} />
-          </div>
-        </div>
-      </div>
-      <div>
-        <button type="button" disabled={isPlaying}
-          onClick={() => {
-            spinePlayer.play()
-            setIsPlaying(true)
-          }}
-        >Play
-        </button>
-        <button type="button" disabled={!isPlaying}
-          onClick={() => {
-            spinePlayer.pause()
-            setIsPlaying(false)
-          }}
-        >
-          Pause
-        </button>
-        <button type="button" onClick={() => settingsReset()}>
-          Reset
-        </button>
-        <button type="button" onClick={() => setShowSettings(false)}>Close</button>
-      </div>
-    </div>
-  )
-}
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,8 @@ html {
  overflow: hidden;
 }

-body, #app {
+body,
+#app {
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
@@ -17,4 +18,23 @@ body, #app {
  width: 100%;
  touch-action: none;
  -ms-touch-action: none;
+}
+
+#widget-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.logo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.invert-filter {
+  filter: invert(1);
+  opacity: 0.3;
 }
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,30 @@
+import '@/index.css'
+import '@/libs/wallpaper_engine'
+import check_web_gl from '@/libs/check_web_gl'
+import Settings from '@/components/settings'
+
+document.querySelector('#app').innerHTML = `
+  <img src="./assets/${import.meta.env.VITE_LOGO_FILENAME}.png" class="logo invert-filter" id="logo" alt="operator logo" />
+  <div id="settings"></div>
+  <div id="widget-wrapper">
+    <div id="fallback"
+      style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"
+      hidden
+    ></div> 
+    <div id="player" hidden></div> 
+  </div>
+`
+
+window.settings = new Settings(document.querySelector('#settings'), document.querySelector('#logo'))
+document.title = import.meta.env.VITE_TITLE
+console.log("All resources are extracted from Arknights. Github: https://github.com/Halyul/aklive2d")
+
+if (check_web_gl()) {
+  import('@/components/player').then(({ default: spinePlayer }) => {
+    window.settings.spinePlayer = spinePlayer(document.querySelector('#player'))
+  })
+} else {
+  import('@/components/fallback').then(({ default: fallback }) => {
+    fallback(document.querySelector('#fallback'))
+  })
+}
--- a/src/javascript.svg
+++ b/src/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
--- a/src/libs/events.js
+++ b/src/libs/events.js
@@ -1,13 +0,0 @@
-export function subscribe(eventName, listener) {
-    document.addEventListener(eventName, listener);
-}
-
-export function unsubscribe(eventName, listener) {
-    document.removeEventListener(eventName, listener);
-}
-
-export function publish(eventName, data) {
-    const event = new CustomEvent(eventName, { detail: data });
-    document.dispatchEvent(event);
-}
-// https://blog.logrocket.com/using-custom-events-react/
--- a/src/libs/setting_hooks.js
+++ b/src/libs/setting_hooks.js
@@ -1,37 +0,0 @@
-import { publish } from '@/libs/events'
-
-window.settings = {
-    setFPS: (fps) => {
-        publish('settings:fps', fps)
-    },
-    displayLogo: (flag) => {
-        publish('settings:logo', !flag)
-    },
-    resizeLogo: (value) => {
-        publish('settings:ratio', value)
-    },
-    opacityLogo: (value) => {
-        publish('settings:opacity', value)
-    },
-    setLogo: (url) => {
-        publish('settings:image:set', 'file:///' + url)
-    },
-    setBackground: (url) => {
-        publish('settings:background:set', 'file:///' + url)
-    },
-    positionPadding: (location, value) => {
-        publish('settings:position:set', {
-            key: location,
-            value: value
-        })
-    },
-    open: () => {
-        publish('settings:open')
-    },
-    close: () => {
-        publish('settings:close')
-    },
-    reset: () => {
-        publish('settings:reset')
-    }
-}
--- a/src/libs/wallpaper_engine.js
+++ b/src/libs/wallpaper_engine.js
@@ -1,67 +1,53 @@
-import { publish } from '@/libs/events'
-
 window.wallpaperPropertyListener = {
    applyGeneralProperties: function (properties) {
        if (properties.fps) {
-            publish('settings:fps', properties.fps.value)
+            window.settings.setFPS(properties.fps)
        }
    },
    applyUserProperties: function (properties) {
        if (properties.logo) {
-            publish('settings:logo', !properties.logo.value)
+            window.settings.setLogoDisplay(!properties.logo.value)
        }
        if (properties.logoratio) {
            if (properties.logoratio.value) {
-                publish('settings:ratio', properties.logoratio.value)
+                window.settings.setLogoRatio(properties.logoratio.value)
            }
        }
        if (properties.logoopacity) {
            if (properties.logoopacity.value) {
-                publish('settings:opacity', properties.logoopacity.value)
+                window.settings.setLogoOpacity(properties.logoopacity.value)
            }
        }
        if (properties.logoimage) {
            if (properties.logoimage.value) {
-                publish('settings:image:set', 'file:///' + properties.logoimage.value)
+                window.settings.setLogo('file:///' + properties.logoimage.value)
            } else {
-                publish('settings:image:reset')
+                window.settings.resetLogoImage()
            }
        }
        if (properties.background) {
            if (properties.background.value) {
-                publish('settings:background:set', 'file:///' + properties.background.value)
+                window.settings.setBackgoundImage(`url('file:///${properties.background.value}`)
            } else {
-                publish('settings:background:reset')
+                window.settings.resetBackground()
            }
        }
        if (properties.position) {
            if (!properties.position.value) {
-                publish('settings:position:reset')
+                window.settings.positionReset()
            }
        }
        if (properties.paddingleft) {
-            publish('settings:position:set', {
-                key: "left",
-                value: properties.paddingleft.value
-            })
+            window.settings.positionPadding("left", properties.paddingleft.value)
        }
        if (properties.paddingright) {
-            publish('settings:position:set', {
-                key: "right",
-                value: properties.paddingright.value
-            })
+            window.settings.positionPadding("right", properties.paddingright.value)
        }
        if (properties.paddingtop) {
-            publish('settings:position:set', {
-                key: "top",
-                value: properties.paddingtop.value
-            })
+            window.settings.positionPadding("top", properties.paddingtop.value)
        }
        if (properties.paddingbottom) {
-            publish('settings:position:set', {
-                key: "bottom",
-                value: properties.paddingbottom.value
-            })
+            window.settings.positionPadding("bottom", properties.paddingbottom.value)
        }
    },
 };
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,5 +0,0 @@
-import { render } from 'preact'
-import { App } from './app'
-import './index.css'
-
-render(<App />, document.getElementById('app'))
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,9 @@
 import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
 import path from 'path'
 import data from './preprocessing'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()],
  base: "",
  resolve: {
    alias: {
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>