Fix the gosh darned particles

2022-07-23 19:29:26 -06:00 · 2022-07-23 19:29:26 -06:00 · ab3e4eb0ff
commit ab3e4eb0ff
parent 33d304ef5b
3 changed files with 282 additions and 2 deletions
--- a/web-svelte/package.json
+++ b/web-svelte/package.json
@ -21,6 +21,7 @@
  "dependencies": {
    "sass": "^1.45.0",
    "socket.io-client": "^4.4.0",
-    "svelte-particles": "^2.1.3"
+    "svelte-particles": "^2.1.3",
+    "tsparticles": "^2.1.3"
  }
 }
--- a/web-svelte/pnpm-lock.yaml
+++ b/web-svelte/pnpm-lock.yaml
@ -10,6 +10,7 @@ specifiers:
  svelte-particles: ^2.1.3
  svelte-preprocess: ^4.9.8
  tslib: ^2.3.1
+  tsparticles: ^2.1.3
  typescript: ^4.4.4
  vite: ^3.0.2

@ -17,6 +18,7 @@ dependencies:
  sass: 1.53.0
  socket.io-client: 4.5.1
  svelte-particles: 2.1.3_svelte@3.49.0
+  tsparticles: 2.1.3

 devDependencies:
  '@sveltejs/vite-plugin-svelte': 1.0.1_svelte@3.49.0+vite@3.0.2
@ -901,6 +903,278 @@ packages:
    requiresBuild: true
    dev: false

+  /tsparticles-interaction-external-attract/2.1.3:
+    resolution: {integrity: sha512-r9DDDlmzA47j0hrmur/2ITip4Qwki3fM1yNgmro048CPamF5pnrhCZBG8zq8hy6BO8KASe55OU5KCAJ9Zt3T2w==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-bounce/2.1.3:
+    resolution: {integrity: sha512-ueRHeuQhXMgWGhxFd3REK2/L4QJjhAuQxGZxIM6Tl80EmYNsCXSyQJ3RG/A839eLpGHDg5fLIytcilfu9o3XvA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-bubble/2.1.3:
+    resolution: {integrity: sha512-0ov4Glx0xfANPX7Tw09vOGC4MjrMoQkA8dqaRuPl8Q2SPGIMpWUWrBK9LzaZdfgtCixSeI+D/c7sgwEU5NovJg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-connect/2.1.3:
+    resolution: {integrity: sha512-dHbVmYboa8bCEjkCn6QA81Lam6h+2nEORwL/ALee1gAsgyHU+cHWZ9umrL5dhYVbW3uxIn03zwZEwO+tSbISLw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-grab/2.1.3:
+    resolution: {integrity: sha512-Q/wbjf24YozYJJ73r2ISEQ5ixjgBXEe2s0fAW+7r+p3D4MGTYUPLmFdapislO9AW9mRLif60k4T2cWzbXxmx+w==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-pause/2.1.3:
+    resolution: {integrity: sha512-M1OMqN1pkpUcPdXdZoqjSJNfXUZy1qCTu+Yuy6O2trQUL2fMmnqWYUxqvcOLVgGSuacC1PCnoypBXt0BIjKyhw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-push/2.1.3:
+    resolution: {integrity: sha512-tRzQy8DgxPy3iQkDCARKbRy1OFST4f+WOvzzMEyphddbFZq5cllvT4s61sVrzH4gWO+6ryT/e9PQH1Q0sYG9Mw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-remove/2.1.3:
+    resolution: {integrity: sha512-9jWds7NcQmrptg+RcRAKYy/vTtwAMz5DbIu4W1WjJ13NmoGuL0opv58bADEaY3rCEXLDPk2L8YU2792rWkp5Rg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-repulse/2.1.3:
+    resolution: {integrity: sha512-MuZ1yCCxcL9h87oKtqgf+/m8kSFlo3L0J/hMK5dfGFKVhF3TR9kFb/4gCZngtCUUZh5ciWHpvnUwZ9Wk/SakEg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-external-trail/2.1.3:
+    resolution: {integrity: sha512-IhrCgksvwP1JvZ31U/G5Hypp2WQ4ID8foB4IbOVD/mOvemUQW3G8o/cohSDwKXB5jQFclGgQOizMK/k/0wVMAg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-particles-attract/2.1.3:
+    resolution: {integrity: sha512-AG1HtpquRE5qTR2V3lnQ5fcCjlBa9RzxiiVeOX5dJDhvLrBA2NUPNRkGTMyl6PJZSnFnjMDKFQ/d24/A+ILWxQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-particles-collisions/2.1.3:
+    resolution: {integrity: sha512-V4x6EzjmkWZBuUfVvCBelBbxYx+eiHYTf18ebLE73atfaSKnMHo9UentU18W47Zw0Z5aur+4/V0hS2uUFmSq1Q==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-interaction-particles-links/2.1.3:
+    resolution: {integrity: sha512-/gh3MAwQUfufkXcOggw0UwFJBXgs0hm0cvCNRFLx54qmzGFNjy7efkOFxl3YeqyQanqLiKYZmHdZEkNEYMnWIQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-move-base/2.1.3:
+    resolution: {integrity: sha512-aq9k3682zaKxe6R8MwdldoYnizCTntUj7VbJ0kXQ2QV+F/Fk8y50okbYslxbpKASP6yIGE9wXK3m9QqH5VQAXQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-move-parallax/2.1.3:
+    resolution: {integrity: sha512-Miy/eMYTc+dO4n9wtd6PpONDpAy1Ta0+4tSY6K+QBse+Fp5bjokBSpnwDyAmIbgAcbj5XMlMp8yzCcE7ptlIhg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-particles.js/2.1.3:
+    resolution: {integrity: sha512-V1NZ3b8rUrRzaFixq9pUDw2OxAIYp6b8/CSmt/3SR7UZnC0q/lSAw9HDQzqhsCNOpFc0PzQa0ogB6sMY3eaEgA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-plugin-absorbers/2.1.3:
+    resolution: {integrity: sha512-MRkP05QVNYwA4rV0nWTKOc+dANJ+dzw+t55qI7Xh9nmUineRJc784fjgZHk+/NDjgcfNb6RN05BSDkLzlANy3g==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-plugin-emitters/2.1.3:
+    resolution: {integrity: sha512-G5IB+06AQR066Ss9XeszXsPbikEJjmdal/IzIwALaslQUIlGgJQhlPYY3R1aUAgtY7Oit0O6gFDqURs3dj9d8Q==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-plugin-polygon-mask/2.1.3:
+    resolution: {integrity: sha512-D8uuPZ+MpO2nBjeoYThePty3G3MGmBNIlQE92anrfUTEEKYjTlczY+nHlORfdNBL9fFwMiMnr/FgJwD0D68BdQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-circle/2.1.3:
+    resolution: {integrity: sha512-OA6C67QEB3lL+GWOMOAmINYkHDO9LO929OTtkce6YDtrvm44zND5VhgevVYhriPvkxE5/n85F13cWNo2rO8LRw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-image/2.1.3:
+    resolution: {integrity: sha512-aV9JFnM4FjVIB0fNSf3agkiXPySdiM1f+9JyUaKSfMxYZPoY7hj6Mva3hQJQ+2GLDQE5fTjj+/IH9qQuSm5eiA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-line/2.1.3:
+    resolution: {integrity: sha512-22A3VvZvTN5g1iql8hNIU6NLcT72WKBtOPwKEFBTom7Foo7xrOH/xvjbTVN/TDUDKD86dMnsKVn0xF2NHk634A==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-polygon/2.1.3:
+    resolution: {integrity: sha512-VEMD1K+uvPY7dq8JBYQn6zsuRlDiRyMGnxTy6XKTQhVp3Zs6zwZ/789WnepUc42QAYvKzofg8G/POsevhOWOvA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-square/2.1.3:
+    resolution: {integrity: sha512-/q7aOUM5Kz+SRhpyICAvyBRmZy1Xt9Z545GHy6tqmxNn4RmiWNoqUda1V2DmMBD+rRb5jan7cQb37HQvltdrPQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-star/2.1.3:
+    resolution: {integrity: sha512-aKsWgK1iGJSBOpWJ9u5JW9X0zAWz9G1jMYSScCbLEVAQ98WV7xSEYsNOSdanedOsXfH2PNssk4KKxb5Cwz8qcg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-shape-text/2.1.3:
+    resolution: {integrity: sha512-bsuHXHECRpl9Ty/70pEv1JHgdEjdq8GI2TrNCN7lyANuIFBka5gvmHqOIdKtuebqJb6OlNQB5E58EOiHvLObfw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-slim/2.1.3:
+    resolution: {integrity: sha512-8FYaJt0oEWyKzLevi6dslFah5fIPAuxuqW25aJJxZJT0fu83HtHqgLinieFdoNS13afu+qKp+XlwYrkkczjStg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+      tsparticles-interaction-external-attract: 2.1.3
+      tsparticles-interaction-external-bounce: 2.1.3
+      tsparticles-interaction-external-bubble: 2.1.3
+      tsparticles-interaction-external-connect: 2.1.3
+      tsparticles-interaction-external-grab: 2.1.3
+      tsparticles-interaction-external-pause: 2.1.3
+      tsparticles-interaction-external-push: 2.1.3
+      tsparticles-interaction-external-remove: 2.1.3
+      tsparticles-interaction-external-repulse: 2.1.3
+      tsparticles-interaction-particles-attract: 2.1.3
+      tsparticles-interaction-particles-collisions: 2.1.3
+      tsparticles-interaction-particles-links: 2.1.3
+      tsparticles-move-base: 2.1.3
+      tsparticles-move-parallax: 2.1.3
+      tsparticles-particles.js: 2.1.3
+      tsparticles-shape-circle: 2.1.3
+      tsparticles-shape-image: 2.1.3
+      tsparticles-shape-line: 2.1.3
+      tsparticles-shape-polygon: 2.1.3
+      tsparticles-shape-square: 2.1.3
+      tsparticles-shape-star: 2.1.3
+      tsparticles-shape-text: 2.1.3
+      tsparticles-updater-angle: 2.1.3
+      tsparticles-updater-color: 2.1.3
+      tsparticles-updater-life: 2.1.3
+      tsparticles-updater-opacity: 2.1.3
+      tsparticles-updater-out-modes: 2.1.3
+      tsparticles-updater-size: 2.1.3
+      tsparticles-updater-stroke-color: 2.1.3
+    dev: false
+
+  /tsparticles-updater-angle/2.1.3:
+    resolution: {integrity: sha512-9yiCS8iZYexSyLAaTOkge2WM5ZUDZv6B4lWpgoUQANNScnrDkCkPHOb7ZYq4fbHYA+GElppAjamDsg2WBT5bsg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-color/2.1.3:
+    resolution: {integrity: sha512-gsCLmwJsPauVyExRMUu0IA9R5HbEKgZ4/wndLLFxpdz/+b8PElL+SMxywEUf4WWWMC8o/1JQxlQmuW0Q+EWwyQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-life/2.1.3:
+    resolution: {integrity: sha512-de9kkz6PFDq8OSrhNdmD24SpUC92Oz15QCiu4Sxbg98ngUun6ejE/3SZku9CX0lXgDK8k9IcH1SrIT4RzM2JKA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-opacity/2.1.3:
+    resolution: {integrity: sha512-WQEFM4KyLCE87LWUn8Wxh/Wmwlg/GLXvTJkFYRGjD1AjW85CJO9DM0t3O+xjKq3hR4LaMFRHF4Fki/PhmnUF+Q==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-out-modes/2.1.3:
+    resolution: {integrity: sha512-u7JtAKyvKCq7gwuN+NlzVJNYwvVBMx3wPCyJNZvaK9umM51lQHJCRsNj57lJ7jSJlaWsEYspw3rPXRvaw/+dVA==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-roll/2.1.3:
+    resolution: {integrity: sha512-0T9wEuclcV1nfNlmJH4zDco+7xB/tBFzCYVbZ1qnfwT29J66gz7/9iBYk7iRr91uhxckHXO4VcyJCk+e0vVb1w==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-size/2.1.3:
+    resolution: {integrity: sha512-uPpSvi73saaytTSfEtiLdlaJU81uLhDWwMe8UoVEsIggJ5nUQzGU9/WP97iSYR10zr9Xzof1Zweksj4hWvf3mQ==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-stroke-color/2.1.3:
+    resolution: {integrity: sha512-TSZcbhtt92710fBzF19OqwDu6ZN0LccLHFNgmWPy1EFT5oULe9ZrH6aWqEJ7q4HCdbxZytW+7rv5YRsRL15M0Q==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-tilt/2.1.3:
+    resolution: {integrity: sha512-avSUIc6QOp/caaWUNodCQhNwLdvuC8fhDn7JiUcq2Z95YwcJTfM1JsvD2J6UeNQL5Jj2+cxjtECCQ1JzK0Sutg==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-twinkle/2.1.3:
+    resolution: {integrity: sha512-89WwhJRCIKWNUdK56pq8DuXuDriO/1gfddEImTeFGmA/q1my1W3nGX8LvHIR0/d9kS6tuL6sQIGolXOLwgp5Yw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles-updater-wobble/2.1.3:
+    resolution: {integrity: sha512-UpucA4hBIn/bLYZeJgCb/JPHmSfHIUpjbEenyHm7u1BK+PuiiNDVZ13o9ClIXKDiOK6ebgIMy8afxmPIHGmG1Q==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+    dev: false
+
+  /tsparticles/2.1.3:
+    resolution: {integrity: sha512-7fKNV+6B9CcKQbFVFre2Rx2BAkW86/1jXjZGh9B0u+l6EARZSwS2aMOYWP1lJuzvHSmupoG0cGmZfKTr7/AIZw==}
+    dependencies:
+      tsparticles-engine: 2.1.3
+      tsparticles-interaction-external-trail: 2.1.3
+      tsparticles-plugin-absorbers: 2.1.3
+      tsparticles-plugin-emitters: 2.1.3
+      tsparticles-plugin-polygon-mask: 2.1.3
+      tsparticles-slim: 2.1.3
+      tsparticles-updater-roll: 2.1.3
+      tsparticles-updater-tilt: 2.1.3
+      tsparticles-updater-twinkle: 2.1.3
+      tsparticles-updater-wobble: 2.1.3
+    dev: false
+
  /typescript/4.7.4:
    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
    engines: {node: '>=4.2.0'}
--- a/web-svelte/src/App.svelte
+++ b/web-svelte/src/App.svelte
@ -2,6 +2,7 @@

 // Library imports
 import Particles from "svelte-particles";
+import { loadFull } from "tsparticles";

 // View imports
 import MultiplayerLobby from "./views/lobby/multiplayer.svelte";
@ -10,11 +11,15 @@ import Home from "./views/home.svelte";

 // Store imports
 import { state } from "./stores";
+
+async function particlesInit(engine: any) {
+	await loadFull(engine);
+};
 </script>

 <!-- Static particles across all of our pages -->
 <div id="particles">
-	<Particles url="/particlesConfig.json" />
+	<Particles url="/particlesConfig.json" {particlesInit} />
 </div>

 <!-- The state the game is in -->