tsParticles snow associated with festive theme

tutors-sdk · Dec 3, 2024 · 70f9d2c · 70f9d2c
1 parent c000fb3
commit 70f9d2c
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/src/app.html b/src/app.html
@@ -16,6 +16,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-snow@3/tsparticles.preset.snow.bundle.min.js"></script>
   </head>
 
   <body data-theme="tutors">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,8 @@
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { setDisplayMode, setTheme } from "$lib/ui/themes/styles/icon-lib.svelte";
+  import { currentTheme } from "$lib/runes";
+  import { makeItSnow, makeItStopSnowing } from "./snow.ts";
 
   interface Props {
     data: PageData;
@@ -16,12 +18,21 @@
     tutorsConnectService.reconnect(data.user);
   }
 
-  onMount(() => {
+  onMount(async () => {
     if (browser) {
       setDisplayMode(localStorage.modeCurrent);
       setTheme(localStorage.theme);
     }
   });
+
+  $effect(() => {
+    console.log(currentTheme.value);
+    if (currentTheme.value === "festive") {
+      makeItSnow();
+    } else {
+      makeItStopSnowing();
+    }
+  });
 </script>
 
 {@render children()}
diff --git a/src/routes/snow.ts b/src/routes/snow.ts
@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const snow = {
+  // The background color is for making the particles visible since they're white. Remove this section if not needed
+  background: {
+    color: "#000000"
+  },
+  // The particles options
+  particles: {
+    // The color of the particles/snowflakes
+    color: {
+      value: "#ffffff"
+    },
+    // Move the snow flakes to bottom for a realistic effect, "out" in outModes is for making them reappear on top once exited at the bottom of the page, the speed should be slow for a realistic effect
+    move: {
+      direction: "bottom",
+      enable: true,
+      outModes: "out",
+      speed: 2
+    },
+    // How many particles/snowflakes will be created when starting the effect, density is a good option to enable since it calculates the particles number based on the screen size (mobile users will be happy)
+    number: {
+      density: {
+        enable: true,
+        area: 800
+      },
+      value: 400
+    },
+    // The opacity of the particles/snowflakes
+    opacity: {
+      value: 1.0
+    },
+    // The shape of the particles/snowflakes, also custom shapes can be used, this will be discussed at the end
+    shape: {
+      type: "circle"
+    },
+    // The size of the particles/snowflakes
+    size: {
+      value: 10
+    },
+    // A nice wobble movement
+    wobble: {
+      enable: true,
+      distance: 10,
+      speed: 10
+    },
+    // Some depth to the effect, (the layers count by default is 100, changing max here is not affecting that count)
+    // The zIndex will affect speed, size and opacity of the particles/snowflakes, the smaller the zIndex the smaller/more transparent/slower the particles/snowflakes will be
+    zIndex: {
+      value: {
+        min: 0,
+        max: 100
+      }
+    }
+  }
+};
+
+export async function makeItSnow() {
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  await loadSnowPreset(tsParticles);
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  tsParticles.load({
+    id: "tsparticles",
+    options: {
+      //preset: "snow",
+      ...snow,
+      fullScreen: {
+        enable: true,
+        zIndex: -1 // Set z-index here
+      }
+    }
+  });
+}
+
+export async function makeItStopSnowing() {
+  const element = document.getElementById("tsparticles");
+  if (element) {
+    element.remove();
+  }
+}